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

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

@@ -1,12 +1,30 @@
 import { Host, h } from "@stencil/core";
 export class CardButton {
     constructor() {
+        /**
+         * 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() {
@@ -17,6 +35,7 @@ export class CardButton {
         return {
             "icon": {
                 "type": "string",
+                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -31,12 +50,12 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "elementType": {
                 "type": "string",
+                "attribute": "element-type",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCardButtonElementType",
@@ -56,12 +75,12 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "element-type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -76,12 +95,12 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -96,11 +115,11 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCardButtonTarget",
@@ -120,12 +139,12 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
             "iconRight": {
                 "type": "string",
+                "attribute": "icon-right",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -140,12 +159,12 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "icon-right",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "loading": {
                 "type": "boolean",
+                "attribute": "loading",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -160,7 +179,6 @@ export class CardButton {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/bal-card/bal-card-subtitle/bal-card-subtitle.js

@@ -1,18 +1,30 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
 export class CardSubtitle {
     constructor() {
+        /**
+         * 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' }))));
     }
     static get is() { return "bal-card-subtitle"; }
     static get properties() {
         return {
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -27,12 +39,12 @@ export class CardSubtitle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "bold": {
                 "type": "boolean",
+                "attribute": "bold",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -47,12 +59,12 @@ export class CardSubtitle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "bold",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalHeadingColor",
@@ -72,7 +84,6 @@ export class CardSubtitle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
             }

package/dist/collection/components/bal-card/bal-card-title/bal-card-title.js

@@ -1,6 +1,9 @@
 import { Host, h } from "@stencil/core";
 export class CardTitle {
     constructor() {
+        /**
+         * If `true` the card text color becomes white.
+         */
         this.inverted = false;
     }
     render() {
@@ -11,6 +14,7 @@ export class CardTitle {
         return {
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -25,7 +29,6 @@ export class CardTitle {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -1 +1 @@
-: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);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{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;transition:transform .15s ease-in-out}.bal-card--is-clickable:active,.bal-card--is-clickable:hover{box-shadow:var(--bal-shadow-large);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%;transform:translateX(-50%)}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-center{left: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:flex;align-items:center}.bal-card-title .title,.bal-card-title .bal-heading__text{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: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{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);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%}
+: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);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{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;transition:transform .15s ease-in-out}.bal-card--is-clickable:active,.bal-card--is-clickable:hover{box-shadow:var(--bal-shadow-large);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%;transform:translateX(-50%)}@media screen and (min-width: 1024px){.bal-card>.bal-tag--is-center{left: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:flex;align-items:center}.bal-card-title .title,.bal-card-title .bal-heading__text{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: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{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);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%}

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

@@ -2,14 +2,41 @@ import { h, Host } from "@stencil/core";
 import isEmpty from "lodash.isempty";
 export class Card {
     constructor() {
+        /**
+         * 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() {
@@ -43,6 +70,7 @@ export class Card {
         return {
             "border": {
                 "type": "boolean",
+                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -57,12 +85,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "border",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "flat": {
                 "type": "boolean",
+                "attribute": "flat",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -77,12 +105,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "flat",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "square": {
                 "type": "boolean",
+                "attribute": "square",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -97,12 +125,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "square",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
+                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -117,12 +145,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "inverted",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "clickable": {
                 "type": "boolean",
+                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -137,12 +165,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "clickable",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -157,12 +185,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "fullheight": {
                 "type": "boolean",
+                "attribute": "fullheight",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -177,12 +205,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "fullheight",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "space": {
                 "type": "string",
+                "attribute": "space",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCardSpace",
@@ -202,12 +230,12 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "space",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCardColor",
@@ -227,7 +255,6 @@ export class Card {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "'white'"
             }

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

@@ -7,6 +7,39 @@ import { toKebabCase } from "../../../utils/string";
 export class CarouselItem {
     constructor() {
         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) || '';
@@ -23,21 +56,6 @@ export class CarouselItem {
         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();
@@ -98,6 +116,7 @@ export class CarouselItem {
         return {
             "src": {
                 "type": "string",
+                "attribute": "src",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -112,11 +131,11 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "src",
                 "reflect": true
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -131,12 +150,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true,
                 "defaultValue": "''"
             },
             "svg": {
                 "type": "string",
+                "attribute": "svg",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -151,12 +170,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "svg",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "htmlRole": {
                 "type": "string",
+                "attribute": "html-role",
                 "mutable": false,
                 "complexType": {
                     "original": "'tab' | 'listitem' | ''",
@@ -174,12 +193,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "html-role",
                 "reflect": false,
                 "defaultValue": "'listitem'"
             },
             "elementType": {
                 "type": "string",
+                "attribute": "element-type",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonElementType",
@@ -199,12 +218,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "element-type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "name": {
                 "type": "string",
+                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -219,12 +238,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "name",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "value": {
                 "type": "any",
+                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string | number",
@@ -239,12 +258,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
                 "reflect": true,
                 "defaultValue": "undefined"
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -259,11 +278,11 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "href",
                 "reflect": false
             },
             "target": {
                 "type": "string",
+                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonTarget",
@@ -283,12 +302,12 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "target",
                 "reflect": false,
                 "defaultValue": "'_self'"
             },
             "rel": {
                 "type": "string",
+                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -303,11 +322,11 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "rel",
                 "reflect": false
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -322,11 +341,11 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "download",
                 "reflect": false
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalCarouselItemColor",
@@ -346,7 +365,6 @@ export class CarouselItem {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false
             }
         };