@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

package/components/bal-button2.js

@@ -1,12 +1,11 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { a as ariaBooleanToString } from './aria.js';
 import { i as inheritAttributes } from './attributes.js';
-import { m as rOnLoad } from './helpers.js';
+import { l as rOnLoad } from './helpers.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { d as defineCustomElement$1 } from './bal-spinner2.js';
 
 const balButtonCss = "bal-button,.bal-button{display:inline-block;position:static}bal-button.is-fullwidth,.bal-button.is-fullwidth{width:100%;-ms-flex:1 1 100%;flex:1 1 100%}bal-button[disabled] bal-icon,.bal-button[disabled] bal-icon{pointer-events:none}.bal-button .button-label.has-no-wrap{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-button-group{display:-ms-flexbox;display:flex}.bal-button-group--position-center{-ms-flex-pack:center;justify-content:center}.bal-button-group--position-left{-ms-flex-pack:start;justify-content:flex-start}.bal-button-group--position-right{-ms-flex-pack:end;justify-content:flex-end}@media screen and (max-width: 768px){.bal-button-group--direction-auto .field.is-grouped,.bal-button-group--direction-auto .bal-button,.bal-button-group--direction-auto .bal-button .button{width:100% !important}}@media screen and (max-width: 768px){.bal-button-group--direction-column .field.is-grouped,.bal-button-group--direction-column .bal-button,.bal-button-group--direction-column .bal-button .button{width:100% !important}}";
-const BalButtonStyle0 = balButtonCss;
 
 const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement {
     constructor() {
@@ -18,46 +17,122 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         this.balBlur = createEvent(this, "balBlur", 7);
         this.balDidRender = createEvent(this, "balDidRender", 7);
         this.inheritAttributes = {};
-        this.onFocus = () => {
-            this.balFocus.emit();
-        };
-        this.onBlur = () => {
-            this.balBlur.emit();
-        };
-        this.onClick = (ev) => {
-            if (!this.disabled) {
-                this.balClick.emit(ev);
-                if (this.href !== undefined) {
-                    this.balNavigate.emit(ev);
-                }
-            }
-        };
         this.isLargestContentPaintDone = false;
+        /**
+         * The color to use from your application's color palette.
+         */
         this.color = 'primary';
+        /**
+         * The type of button.
+         */
         this.elementType = 'button';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
         this.disabled = false;
+        /**
+         * Size of the button
+         */
         this.size = '';
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
+        /**
+         * If `true` adds a box shadow to improve readability on image background
+         * */
         this.shadow = false;
+        /**
+         * If `true` the width of the buttons is limited
+         */
         this.square = false;
+        /**
+         * If `true` the button has a active theme
+         */
         this.isActive = false;
+        /**
+         * If `true` the button has a full width
+         */
         this.expanded = false;
+        /**
+         * If `true` the button has no padding and a reduced height
+         */
         this.flat = false;
+        /**
+         * If `true` the button is outlined
+         */
         this.outlined = false;
+        /**
+         * If `true` the button is inverted
+         */
         this.inverted = false;
+        /**
+         * If `true` the label is hidden and a loading spinner is shown instead.
+         */
         this.loading = false;
+        /**
+         * If `true` the button is rounded.
+         */
         this.rounded = false;
+        /**
+         * If `true` the button is a popup.
+         */
         this.balPopup = undefined;
+        /**
+         * Name of the left button icon
+         */
         this.icon = '';
+        /**
+         * If `true` the icon turns
+         */
         this.iconTurn = false;
+        /**
+         * Name of the right button icon
+         */
         this.iconRight = '';
+        /**
+         * The label of the button will not break
+         */
         this.noWrap = false;
+        /**
+         * The name of the button, which is submitted with the form data.
+         */
         this.name = '';
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.value = '';
-        this.aria = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yControls = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yTitle = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yLabel = undefined;
+        /**
+         * A11y attributes for the native button element.
+         */
+        this.a11yHaspopup = undefined;
+        this.onFocus = () => {
+            this.balFocus.emit();
+        };
+        this.onBlur = () => {
+            this.balBlur.emit();
+        };
+        this.onClick = (ev) => {
+            if (!this.disabled) {
+                this.balClick.emit(ev);
+                if (this.href !== undefined) {
+                    this.balNavigate.emit(ev);
+                }
+            }
+        };
     }
     listenOnClick(ev) {
         if (this.disabled && ev.target && ev.target === this.el) {
@@ -69,7 +144,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         rOnLoad(() => (this.isLargestContentPaintDone = true));
     }
     componentWillLoad() {
-        var _a;
         this.inheritAttributes = inheritAttributes(this.el, [
             'title',
             'aria-label',
@@ -78,10 +152,8 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             'tabindex',
             'aria-haspopup',
         ]);
-        if (this.el.hasAttribute('bal-popup') && !((_a = this.aria) === null || _a === void 0 ? void 0 : _a.haspopup)) {
-            this.aria = {
-                haspopup: 'true',
-            };
+        if (this.el.hasAttribute('bal-popup') && !this.a11yHaspopup) {
+            this.a11yHaspopup = 'true';
         }
     }
     componentDidRender() {
@@ -140,7 +212,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         }
     }
     render() {
-        var _a, _b, _c, _d, _e;
         const { elementType, download, href, rel, target, name, value } = this;
         const TagType = this.href === undefined ? 'button' : 'a';
         const attrs = TagType === 'button'
@@ -166,10 +237,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             }
         };
         const ariaAttributes = {
-            'title': ((_a = this.aria) === null || _a === void 0 ? void 0 : _a.title) || this.inheritAttributes['title'],
-            'aria-label': ((_b = this.aria) === null || _b === void 0 ? void 0 : _b.label) || this.inheritAttributes['aria-label'] || ((_c = this.aria) === null || _c === void 0 ? void 0 : _c.title) || this.inheritAttributes['title'],
-            'aria-controls': ((_d = this.aria) === null || _d === void 0 ? void 0 : _d.controls) || this.inheritAttributes['aria-controls'],
-            'aria-haspopup': ((_e = this.aria) === null || _e === void 0 ? void 0 : _e.haspopup) || this.inheritAttributes['aria-haspopup'],
+            'title': this.a11yTitle || this.inheritAttributes['title'],
+            'aria-label': this.a11yLabel || this.inheritAttributes['aria-label'] || this.a11yTitle || this.inheritAttributes['title'],
+            'aria-controls': this.a11yControls || this.inheritAttributes['aria-controls'],
+            'aria-haspopup': this.a11yHaspopup || this.inheritAttributes['aria-haspopup'],
         };
         return (h(Host, { onClick: this.handleClick, class: {
                 'bal-button': true,
@@ -183,7 +254,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), this.isLargestContentPaintDone && this.iconRight ? (h("bal-icon", Object.assign({}, this.leftRightAttrs, { class: "icon-right", name: this.iconRight, size: 'small', turn: this.iconTurn, inverted: this.isIconInverted }))) : (''))));
     }
     get el() { return this; }
-    static get style() { return BalButtonStyle0; }
+    static get style() { return balButtonCss; }
 }, [4, "bal-button", {
         "color": [1],
         "elementType": [1, "element-type"],
@@ -209,7 +280,10 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         "noWrap": [4, "no-wrap"],
         "name": [1],
         "value": [8],
-        "aria": [1040],
+        "a11yControls": [1, "a-1-1y-controls"],
+        "a11yTitle": [1, "a-1-1y-title"],
+        "a11yLabel": [1, "a-1-1y-label"],
+        "a11yHaspopup": [1, "a-1-1y-haspopup"],
         "isLargestContentPaintDone": [32]
     }, [[6, "click", "listenOnClick"]]]);
 function defineCustomElement() {

package/components/bal-card-actions.js

@@ -5,6 +5,9 @@ const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends H
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
         this.position = '';
     }
     render() {

package/components/bal-card-button.js

@@ -7,12 +7,30 @@ const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTM
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * Name of the icon like `edit`.
+         */
         this.icon = '';
+        /**
+         * The type of button.
+         */
         this.elementType = 'button';
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
         this.disabled = false;
-        this.href = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
         this.target = '_self';
+        /**
+         * Name of the right button icon
+         */
         this.iconRight = '';
+        /**
+         * If `true` the label is hidden and a loading spinner is shown instead.
+         */
         this.loading = false;
     }
     render() {

package/components/bal-card-subtitle.js

@@ -1,16 +1,26 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$2 } from './bal-text2.js';
+import { B as BEM } from './bem.js';
 
 const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` the card text color becomes white.
+         */
         this.inverted = false;
+        /**
+         * If `true` the card text color is bold.
+         */
         this.bold = false;
+        /**
+         * If `true` the card text color becomes white.
+         */
         this.color = '';
     }
     render() {
-        return (h(Host, { key: '2a1250f5456d84296fa7280216852cef5913d2ca', class: "bal-card-subtitle" }, h("bal-text", { key: 'b92d1f51cfa1df3e69b9c96fe64267223d100c74', bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", { key: '4d53171704d63d9e5c6bd0bc58a32ddeb74fa02a' }))));
+        const block = BEM.block('card-subtitle');
+        return (h(Host, { key: '8cdde0f96f513fa303e73fb6934ea31b8e081b70', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('bold').class(this.bold)), block.modifier(`color-${this.color}`).class(!this.inverted)), block.modifier('inverted').class(this.inverted)) }, h("span", { key: '0706b14cbe256d54016e492de7be29adef5badb5' }, h("slot", { key: '22e5a11111f7b663e15e1ab1ebba3f3cafbecd01' }))));
     }
 }, [4, "bal-card-subtitle", {
         "inverted": [4],
@@ -21,18 +31,13 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-card-subtitle", "bal-text"];
+    const components = ["bal-card-subtitle"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-card-subtitle":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CardSubtitle);
             }
             break;
-        case "bal-text":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
     } });
 }
 

package/components/bal-card-title.js

@@ -5,6 +5,9 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` the card text color becomes white.
+         */
         this.inverted = false;
     }
     render() {

package/components/bal-card2.js

@@ -1,21 +1,47 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { i as isEmpty } from './index2.js';
+import { i as isEmpty } from './index4.js';
 
-const balCardCss = ":root{--bal-card-background:transparent;--bal-card-background-white:var(--bal-color-white);--bal-card-background-blue:var(--bal-color-primary);--bal-card-background-primary:var(--bal-color-primary);--bal-card-background-info:var(--bal-color-primary);--bal-card-background-success:var(--bal-color-success-2);--bal-card-background-warning:var(--bal-color-warning-2);--bal-card-background-danger:var(--bal-color-danger-2);--bal-card-background-grey:var(--bal-color-grey);--bal-card-background-red:var(--bal-color-red);--bal-card-background-yellow:var(--bal-color-yellow);--bal-card-background-purple:var(--bal-color-purple);--bal-card-background-green:var(--bal-color-green);--bal-card-background-red-light:var(--bal-color-red-1);--bal-card-background-yellow-light:var(--bal-color-yellow-1);--bal-card-background-purple-light:var(--bal-color-purple-1);--bal-card-background-green-light:var(--bal-color-green-1);--bal-card-background-grey-light:var(--bal-color-grey-1);--bal-card-background-purple-1:var(--bal-color-purple-1);--bal-card-background-purple-2:var(--bal-color-purple-2);--bal-card-background-purple-3:var(--bal-color-purple);--bal-card-background-green-1:var(--bal-color-green-1);--bal-card-background-green-2:var(--bal-color-green-2);--bal-card-background-green-3:var(--bal-color-green);--bal-card-background-red-1:var(--bal-color-red-1);--bal-card-background-red-2:var(--bal-color-red-2);--bal-card-background-red-3:var(--bal-color-red);--bal-card-background-yellow-1:var(--bal-color-yellow-1);--bal-card-background-yellow-2:var(--bal-color-yellow-2);--bal-card-background-yellow-3:var(--bal-color-yellow);--bal-card-selected-background:var(--bal-color-primary-2);--bal-card-radius:var(--bal-radius-large);--bal-card-square-radius:0;--bal-card-border:var(--bal-border-width-normal) dashed var(--bal-color-grey)}.bal-card{position:relative;display:block;background:var(--bal-card-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);border-radius:var(--bal-card-radius)}.bal-card--is-white{background:var(--bal-card-background-white)}.bal-card--is-blue{background:var(--bal-card-background-blue)}.bal-card--is-primary{background:var(--bal-card-background-primary)}.bal-card--is-info{background:var(--bal-card-background-info)}.bal-card--is-success{background:var(--bal-card-background-success)}.bal-card--is-warning{background:var(--bal-card-background-warning)}.bal-card--is-danger{background:var(--bal-card-background-danger)}.bal-card--is-grey{background:var(--bal-card-background-grey)}.bal-card--is-red{background:var(--bal-card-background-red)}.bal-card--is-yellow{background:var(--bal-card-background-yellow)}.bal-card--is-purple{background:var(--bal-card-background-purple)}.bal-card--is-green{background:var(--bal-card-background-green)}.bal-card--is-red-light{background:var(--bal-card-background-red-light)}.bal-card--is-yellow-light{background:var(--bal-card-background-yellow-light)}.bal-card--is-purple-light{background:var(--bal-card-background-purple-light)}.bal-card--is-green-light{background:var(--bal-card-background-green-light)}.bal-card--is-grey-light{background:var(--bal-card-background-grey-light)}.bal-card--is-purple-1{background:var(--bal-card-background-purple-1)}.bal-card--is-purple-2{background:var(--bal-card-background-purple-2)}.bal-card--is-purple-3{background:var(--bal-card-background-purple-3)}.bal-card--is-green-1{background:var(--bal-card-background-green-1)}.bal-card--is-green-2{background:var(--bal-card-background-green-2)}.bal-card--is-green-3{background:var(--bal-card-background-green-3)}.bal-card--is-red-1{background:var(--bal-card-background-red-1)}.bal-card--is-red-2{background:var(--bal-card-background-red-2)}.bal-card--is-red-3{background:var(--bal-card-background-red-3)}.bal-card--is-yellow-1{background:var(--bal-card-background-yellow-1)}.bal-card--is-yellow-2{background:var(--bal-card-background-yellow-2)}.bal-card--is-yellow-3{background:var(--bal-card-background-yellow-3)}.bal-card--has-fullheight,.bal-card--has-fullheight .bal-card-content,.bal-card--has-fullheight .bal-card-content>.is-flex{height:100%}.bal-card--has-border{border:var(--bal-card-border)}.bal-card--is-flat{-webkit-box-shadow:none;box-shadow:none}.bal-card--is-square{border-radius:var(--bal-card-square-radius)}.bal-card--is-selected{background:var(--bal-card-selected-background)}.bal-card--is-clickable{cursor:pointer;-webkit-transition:-webkit-transform .15s ease-in-out;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out, -webkit-transform .15s ease-in-out}.bal-card--is-clickable:active,.bal-card--is-clickable:hover{-webkit-box-shadow:var(--bal-shadow-large);box-shadow:var(--bal-shadow-large);-webkit-transform:translate3d(0, -2px, 0);transform:translate3d(0, -2px, 0)}.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1.5rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 769px),print{.bal-card--is-small>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card--is-small>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card--is-small>bal-badge+bal-card-title,.bal-card--is-small>bal-badge+bal-card-content,.bal-card--is-small>bal-tag+bal-card-title,.bal-card--is-small>bal-tag+bal-card-content,.bal-card--is-small>bal-card-title+bal-card-content,.bal-card--is-small>bal-card-subtitle+bal-card-content,.bal-card--is-small>bal-card-actions,.bal-card--is-small>bal-card-button{padding-top:1rem}.bal-card--is-small>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-small bal-card-title,.bal-card--is-small bal-card-subtitle,.bal-card--is-small bal-card-content,.bal-card--is-small bal-card-actions,.bal-card--is-small bal-card-button{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 769px),print{.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:1.5rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:2rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 769px),print{.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:2rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:4rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:4rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:4rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:4rem;padding-right:4rem}}.bal-card>.bal-tag{position:absolute;left:1rem;top:-1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag{left:1.5rem}}.bal-card>.bal-tag--is-left{left:1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-left{left:1.5rem}}.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.bal-card-title{display:block;position:static}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:.5rem}@media screen and (min-width: 769px),print{.bal-card-title .bal-heading h3{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-card-title .title,.bal-card-title .bal-heading__text{display:-ms-flexbox;display:flex}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:0;margin-left:.5rem;display:-ms-inline-flexbox;display:inline-flex}.bal-card-title .title .bal-tag-group .bal-tag,.bal-card-title .bal-heading__text .bal-tag-group .bal-tag{margin-top:.125rem}.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-button-group{-ms-flex:1;flex:1}}.bal-card-subtitle{display:block;position:static}.bal-card-content{display:block;position:static;word-break:break-word;text-align:left;font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-card-actions{display:block;position:static}.bal-card-button{display:block;position:static}.column bal-card.has-height-auto,.column bal-card.has-height-auto bal-card-content,.column bal-card.has-height-auto bal-card-content>.is-flex{height:100%}";
-const BalCardStyle0 = balCardCss;
+const balCardCss = ":root{--bal-card-background:transparent;--bal-card-background-white:var(--bal-color-white);--bal-card-background-blue:var(--bal-color-primary);--bal-card-background-primary:var(--bal-color-primary);--bal-card-background-info:var(--bal-color-primary);--bal-card-background-success:var(--bal-color-success-2);--bal-card-background-warning:var(--bal-color-warning-2);--bal-card-background-danger:var(--bal-color-danger-2);--bal-card-background-grey:var(--bal-color-grey);--bal-card-background-red:var(--bal-color-red);--bal-card-background-yellow:var(--bal-color-yellow);--bal-card-background-purple:var(--bal-color-purple);--bal-card-background-green:var(--bal-color-green);--bal-card-background-red-light:var(--bal-color-red-1);--bal-card-background-yellow-light:var(--bal-color-yellow-1);--bal-card-background-purple-light:var(--bal-color-purple-1);--bal-card-background-green-light:var(--bal-color-green-1);--bal-card-background-grey-light:var(--bal-color-grey-1);--bal-card-background-purple-1:var(--bal-color-purple-1);--bal-card-background-purple-2:var(--bal-color-purple-2);--bal-card-background-purple-3:var(--bal-color-purple);--bal-card-background-green-1:var(--bal-color-green-1);--bal-card-background-green-2:var(--bal-color-green-2);--bal-card-background-green-3:var(--bal-color-green);--bal-card-background-red-1:var(--bal-color-red-1);--bal-card-background-red-2:var(--bal-color-red-2);--bal-card-background-red-3:var(--bal-color-red);--bal-card-background-yellow-1:var(--bal-color-yellow-1);--bal-card-background-yellow-2:var(--bal-color-yellow-2);--bal-card-background-yellow-3:var(--bal-color-yellow);--bal-card-selected-background:var(--bal-color-primary-2);--bal-card-radius:var(--bal-radius-large);--bal-card-square-radius:0;--bal-card-border:var(--bal-border-width-normal) dashed var(--bal-color-grey)}.bal-card{position:relative;display:block;background:var(--bal-card-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);border-radius:var(--bal-card-radius)}.bal-card--is-white{background:var(--bal-card-background-white)}.bal-card--is-blue{background:var(--bal-card-background-blue)}.bal-card--is-primary{background:var(--bal-card-background-primary)}.bal-card--is-info{background:var(--bal-card-background-info)}.bal-card--is-success{background:var(--bal-card-background-success)}.bal-card--is-warning{background:var(--bal-card-background-warning)}.bal-card--is-danger{background:var(--bal-card-background-danger)}.bal-card--is-grey{background:var(--bal-card-background-grey)}.bal-card--is-red{background:var(--bal-card-background-red)}.bal-card--is-yellow{background:var(--bal-card-background-yellow)}.bal-card--is-purple{background:var(--bal-card-background-purple)}.bal-card--is-green{background:var(--bal-card-background-green)}.bal-card--is-red-light{background:var(--bal-card-background-red-light)}.bal-card--is-yellow-light{background:var(--bal-card-background-yellow-light)}.bal-card--is-purple-light{background:var(--bal-card-background-purple-light)}.bal-card--is-green-light{background:var(--bal-card-background-green-light)}.bal-card--is-grey-light{background:var(--bal-card-background-grey-light)}.bal-card--is-purple-1{background:var(--bal-card-background-purple-1)}.bal-card--is-purple-2{background:var(--bal-card-background-purple-2)}.bal-card--is-purple-3{background:var(--bal-card-background-purple-3)}.bal-card--is-green-1{background:var(--bal-card-background-green-1)}.bal-card--is-green-2{background:var(--bal-card-background-green-2)}.bal-card--is-green-3{background:var(--bal-card-background-green-3)}.bal-card--is-red-1{background:var(--bal-card-background-red-1)}.bal-card--is-red-2{background:var(--bal-card-background-red-2)}.bal-card--is-red-3{background:var(--bal-card-background-red-3)}.bal-card--is-yellow-1{background:var(--bal-card-background-yellow-1)}.bal-card--is-yellow-2{background:var(--bal-card-background-yellow-2)}.bal-card--is-yellow-3{background:var(--bal-card-background-yellow-3)}.bal-card--has-fullheight,.bal-card--has-fullheight .bal-card-content,.bal-card--has-fullheight .bal-card-content>.is-flex{height:100%}.bal-card--has-border{border:var(--bal-card-border)}.bal-card--is-flat{-webkit-box-shadow:none;box-shadow:none}.bal-card--is-square{border-radius:var(--bal-card-square-radius)}.bal-card--is-selected{background:var(--bal-card-selected-background)}.bal-card--is-clickable{cursor:pointer;-webkit-transition:-webkit-transform .15s ease-in-out;transition:-webkit-transform .15s ease-in-out;transition:transform .15s ease-in-out;transition:transform .15s ease-in-out, -webkit-transform .15s ease-in-out}.bal-card--is-clickable:active,.bal-card--is-clickable:hover{-webkit-box-shadow:var(--bal-shadow-large);box-shadow:var(--bal-shadow-large);-webkit-transform:translate3d(0, -2px, 0);transform:translate3d(0, -2px, 0)}.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-card>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card>bal-badge+bal-card-title,.bal-card>bal-badge+bal-card-content,.bal-card>bal-tag+bal-card-title,.bal-card>bal-tag+bal-card-content,.bal-card>bal-card-title+bal-card-content,.bal-card>bal-card-subtitle+bal-card-content,.bal-card>bal-card-actions,.bal-card>bal-card-button{padding-top:1.5rem}.bal-card>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card bal-card-title,.bal-card bal-card-subtitle,.bal-card bal-card-content,.bal-card bal-card-actions,.bal-card bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 769px),print{.bal-card--is-small>:not(bal-badge):not(bal-tag):first-child{padding-top:1rem}.bal-card--is-small>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1rem}.bal-card--is-small>bal-badge+bal-card-title,.bal-card--is-small>bal-badge+bal-card-content,.bal-card--is-small>bal-tag+bal-card-title,.bal-card--is-small>bal-tag+bal-card-content,.bal-card--is-small>bal-card-title+bal-card-content,.bal-card--is-small>bal-card-subtitle+bal-card-content,.bal-card--is-small>bal-card-actions,.bal-card--is-small>bal-card-button{padding-top:1rem}.bal-card--is-small>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-small bal-card-title,.bal-card--is-small bal-card-subtitle,.bal-card--is-small bal-card-content,.bal-card--is-small bal-card-actions,.bal-card--is-small bal-card-button{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 769px),print{.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:1.5rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:1.5rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:1.5rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.bal-card--is-medium>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-medium>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-medium>bal-badge+bal-card-title,.bal-card--is-medium>bal-badge+bal-card-content,.bal-card--is-medium>bal-tag+bal-card-title,.bal-card--is-medium>bal-tag+bal-card-content,.bal-card--is-medium>bal-card-title+bal-card-content,.bal-card--is-medium>bal-card-subtitle+bal-card-content,.bal-card--is-medium>bal-card-actions,.bal-card--is-medium>bal-card-button{padding-top:2rem}.bal-card--is-medium>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-medium bal-card-title,.bal-card--is-medium bal-card-subtitle,.bal-card--is-medium bal-card-content,.bal-card--is-medium bal-card-actions,.bal-card--is-medium bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 769px),print{.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:2rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:2rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:2rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1024px){.bal-card--is-large>:not(bal-badge):not(bal-tag):first-child{padding-top:4rem}.bal-card--is-large>:not(bal-badge):not(bal-tag):last-child{padding-bottom:4rem}.bal-card--is-large>bal-badge+bal-card-title,.bal-card--is-large>bal-badge+bal-card-content,.bal-card--is-large>bal-tag+bal-card-title,.bal-card--is-large>bal-tag+bal-card-content,.bal-card--is-large>bal-card-title+bal-card-content,.bal-card--is-large>bal-card-subtitle+bal-card-content,.bal-card--is-large>bal-card-actions,.bal-card--is-large>bal-card-button{padding-top:4rem}.bal-card--is-large>.bal-accordion--card-v1{padding-bottom:0 !important}.bal-card--is-large bal-card-title,.bal-card--is-large bal-card-subtitle,.bal-card--is-large bal-card-content,.bal-card--is-large bal-card-actions,.bal-card--is-large bal-card-button{padding-left:4rem;padding-right:4rem}}.bal-card>.bal-tag{position:absolute;left:1rem;top:-1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag{left:1.5rem}}.bal-card>.bal-tag--is-left{left:1rem}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-left{left:1.5rem}}.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-center{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}.bal-card-title{display:block;position:static}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:.5rem}@media screen and (min-width: 769px),print{.bal-card-title .bal-heading h3{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bal-card-title .title,.bal-card-title .bal-heading__text{display:-ms-flexbox;display:flex}.bal-card-title .title .bal-tag-group,.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-tag-group,.bal-card-title .bal-heading__text .bal-button-group{margin-top:0;margin-left:.5rem;display:-ms-inline-flexbox;display:inline-flex}.bal-card-title .title .bal-tag-group .bal-tag,.bal-card-title .bal-heading__text .bal-tag-group .bal-tag{margin-top:.125rem}.bal-card-title .title .bal-button-group,.bal-card-title .bal-heading__text .bal-button-group{-ms-flex:1;flex:1}}.bal-card-subtitle{display:block;position:static}.bal-card-subtitle--bold{font-weight:var(--bal-font-weight-bold)}.bal-card-subtitle--inverted{color:var(--bal-color-white)}.bal-card-subtitle--color-primary{color:var(--bal-color-text-primary)}.bal-card-subtitle--color-info{color:var(--bal-color-text-info)}.bal-card-subtitle--color-success{color:var(--bal-color-text-success)}.bal-card-subtitle--color-warning{color:var(--bal-color-text-warning)}.bal-card-subtitle--color-danger{color:var(--bal-color-text-danger)}.bal-card-subtitle--color-default{color:var(--bal-color-text-default)}.bal-card-subtitle--color-blue{color:var(--bal-color-text-blue)}.bal-card-subtitle--color-white{color:var(--bal-color-text-white)}.bal-card-content{display:block;position:static;word-break:break-word;text-align:left;font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-card-actions{display:block;position:static}.bal-card-button{display:block;position:static}.column bal-card.has-height-auto,.column bal-card.has-height-auto bal-card-content,.column bal-card.has-height-auto bal-card-content>.is-flex{height:100%}";
 
 const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If `true` a light blue border is added to the card.
+         */
         this.border = false;
+        /**
+         * If `true` the card loses its shadow.
+         */
         this.flat = false;
+        /**
+         * If `true` the card loses its border radius.
+         */
         this.square = false;
+        /**
+         * If `true` the card background color becomes blue.
+         */
         this.inverted = false;
+        /**
+         * If `true` the card has a hover effect.
+         */
         this.clickable = false;
+        /**
+         * If `true` the card gets a light background to indicate a selection.
+         */
         this.selected = false;
+        /**
+         * If `true` the card uses 100% of the available height.
+         */
         this.fullheight = false;
+        /**
+         * Defines the space of the card content.
+         */
         this.space = '';
+        /**
+         * Defines the color of the card.
+         */
         this.color = 'white';
     }
     get colorTypeClass() {
@@ -34,7 +60,7 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
                 'bal-card--has-fullheight': this.fullheight,
             } }, h("slot", { key: '50ade35417dafda765c509bd8f97157d7932a0b4' })));
     }
-    static get style() { return BalCardStyle0; }
+    static get style() { return balCardCss; }
 }, [4, "bal-card", {
         "border": [4],
         "flat": [4],

package/components/bal-carousel-item.js

@@ -1,8 +1,8 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { D as DOMPurify } from './purify.js';
+import { p as purify } from './purify.es.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';
-import { m as rOnLoad, b as waitAfterFramePaint } from './helpers.js';
+import { l as rOnLoad, a as waitAfterFramePaint } from './helpers.js';
 import { t as toKebabCase } from './string.js';
 
 const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends HTMLElement {
@@ -13,9 +13,42 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         this.balFocus = createEvent(this, "balFocus", 7);
         this.balBlur = createEvent(this, "balBlur", 7);
         this.imageInheritAttributes = {};
+        this.isOnLoadEventDone = false;
+        this.containerId = '';
+        this.svgContent = '';
+        /**
+         * Label of the slide which will be used for pagination tabs
+         */
+        this.label = '';
+        /**
+         * Svg content.
+         */
+        this.svg = '';
+        /**
+         * @deprecated
+         * Defines the role of the carousel.
+         */
+        this.htmlRole = 'listitem';
+        /**
+         * The type of button.
+         */
+        this.elementType = 'button';
+        /**
+         * The name of the button, which is submitted with the form data.
+         */
+        this.name = undefined;
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
+        this.value = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
+        this.target = '_self';
         this.generateSvgContent = () => {
             if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = DOMPurify.sanitize(this.svg) || '';
+                this.svgContent = purify.sanitize(this.svg) || '';
             }
         };
         this.onClick = (ev) => {
@@ -29,21 +62,6 @@ const CarouselItem = /*@__PURE__*/ proxyCustomElement(class CarouselItem extends
         this.onBlur = () => {
             this.balBlur.emit();
         };
-        this.isOnLoadEventDone = false;
-        this.containerId = '';
-        this.svgContent = '';
-        this.src = undefined;
-        this.label = '';
-        this.svg = '';
-        this.htmlRole = 'listitem';
-        this.elementType = 'button';
-        this.name = undefined;
-        this.value = undefined;
-        this.href = undefined;
-        this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
-        this.color = undefined;
     }
     svgChanged() {
         this.generateSvgContent();

package/components/bal-carousel.js

@@ -4,17 +4,18 @@ import { B as BEM } from './bem.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { t as toKebabCase } from './string.js';
 import { s as stopEventBubbling } from './form-input.js';
+import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { d as defineCustomElement$3 } from './bal-card2.js';
-import { d as defineCustomElement$2 } from './bal-card-content2.js';
-import { S as SwiperUtil } from './swiper.util.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
-import { L as ListenToVisibility } from './visibility.decorator.js';
 import { L as ListenToSwipe } from './swipe.decorator.js';
-import { L as ListenToResize } from './resize.decorator.js';
-import { b as balBreakpoints } from './breakpoints.subject.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToConfig } from './config.decorator.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
+import './window-resize.subject.js';
+import { L as ListenToResize } from './resize.decorator.js';
+import { S as SwiperUtil } from './swiper.util.js';
+import { L as ListenToVisibility } from './visibility.decorator.js';
+import { d as defineCustomElement$3 } from './bal-card2.js';
+import { d as defineCustomElement$2 } from './bal-card-content2.js';
 
 const TabControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
@@ -30,7 +31,6 @@ const TabControl = ({ value, items, containerId, onControlChange }) => {
 };
 
 const balCarouselCss = ":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;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;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:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;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{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;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:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 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:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));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:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));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:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-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--full-height .bal-carousel__item{height:auto}.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;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transform:translateZ(0);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:-webkit-sticky;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:-ms-flexbox;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{-ms-flex:1;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:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;-ms-flex:0 0 100%;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 769px),print{.bal-carousel--product .bal-carousel__inner__container{padding-top:1.5rem;padding-bottom:1.5rem}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__inner__container{padding-top:2rem;padding-bottom:2rem}}.bal-carousel--product .bal-carousel__item{display:-ms-flexbox;display:flex;min-width:10rem;max-width:10rem;height:11rem;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;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){-webkit-box-shadow:var(--bal-focus-shadow) !important;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);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}";
-const BalCarouselStyle0 = balCarouselCss;
 
 const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLElement {
     constructor() {
@@ -39,24 +39,73 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         this.balChange = createEvent(this, "balChange", 7);
         this.swiper = new SwiperUtil();
         this.swiperIsLastSlideVisible = false;
-        this.mutationObserverActive = true;
         this.hasAnimated = false;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the active slide index.
+         */
         this.value = 0;
+        /**
+         * When how many slides are moved when going forward or backward.
+         */
         this.steps = 1;
+        /**
+         * Defines how many slides are visible in the container for the user.
+         * `auto` will use the size of the actual item content
+         */
         this.itemsPerView = 1;
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.controls = 'none';
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.space = 'none';
+        /**
+         * @deprecated
+         * Defines the role of the carousel.
+         */
         this.htmlRole = 'list';
+        /**
+         * If `true` items move under the controls, instead of having a gap
+         */
         this.controlsOverflow = false;
+        /**
+         * If `true` the carousel can be used on dark background
+         */
         this.inverted = false;
+        /**
+         * If `true` the carousel uses the full height
+         */
         this.fullHeight = false;
+        /**
+         * Defines the image aspect ratio.
+         * Should be combined with the interface `product`
+         */
         this.aspectRatio = '16by9';
+        /**
+         * Defines special looks.
+         */
         this.interface = '';
+        /**
+         * If `true` the controls will be sticky to the top.
+         */
         this.controlsSticky = false;
+        /**
+         * If `true` vertical scrolling on mobile is enabled.
+         */
         this.scrollY = true;
+        /**
+         * If `true` a light border is shown at the bottom.
+         */
         this.border = false;
+        this.mutationObserverActive = true;
     }
     onValueChange() {
         this.swiper.index = this.value;
@@ -179,7 +228,7 @@ const Carousel = /*@__PURE__*/ proxyCustomElement(class Carousel extends HTMLEle
         "space": ["onSpaceChange"],
         "interface": ["onInterFaceChange"]
     }; }
-    static get style() { return BalCarouselStyle0; }
+    static get style() { return balCarouselCss; }
 }, [4, "bal-carousel", {
         "value": [1026],
         "steps": [2],