@baloise/ds-core 19.8.2 → 19.8.3

package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { inheritTrackingAttributes } from "../../../utils/attributes";
 export class TabItem {
     constructor() {
@@ -112,17 +112,16 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '4cca3771f21f5049d68fcb2da92a2a49972670c3', id: this.tabPanelID, class: {
+        return (h(Host, { key: '8faef74e951bde8c3e3be3348ce09ce614d321de', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'e8521265c345ce4dfbc5e6e1f332d11004c7588b' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '23bfff424e8da5faee77587e5bc6f46ea7cfb109' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
         return {
             "active": {
                 "type": "boolean",
-                "attribute": "active",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -138,11 +137,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "active",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -158,11 +157,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "value",
                 "defaultValue": "''"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -178,11 +177,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -197,11 +196,11 @@ export class TabItem {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "rel"
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -217,11 +216,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "href",
                 "defaultValue": "undefined"
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalButtonTarget",
@@ -242,11 +241,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "target",
                 "defaultValue": "'_self'"
             },
             "bubble": {
                 "type": "any",
-                "attribute": "bubble",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean | string",
@@ -262,11 +261,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "bubble",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,11 +281,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "invisible": {
                 "type": "boolean",
-                "attribute": "invisible",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -302,11 +301,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "invisible",
                 "defaultValue": "false"
             },
             "prevent": {
                 "type": "boolean",
-                "attribute": "prevent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -322,11 +321,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "prevent",
                 "defaultValue": "false"
             },
             "icon": {
                 "type": "string",
-                "attribute": "icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -342,11 +341,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "icon",
                 "defaultValue": "undefined"
             },
             "noPanel": {
                 "type": "boolean",
-                "attribute": "no-panel",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -362,11 +361,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-panel",
                 "defaultValue": "false"
             },
             "a11yControls": {
                 "type": "string",
-                "attribute": "a-1-1y-controls",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -382,11 +381,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "a-1-1y-controls",
                 "defaultValue": "undefined"
             },
             "subLabel": {
                 "type": "string",
-                "attribute": "sub-label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -402,11 +401,11 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "sub-label",
                 "defaultValue": "''"
             },
             "svg": {
                 "type": "string",
-                "attribute": "svg",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -422,6 +421,7 @@ export class TabItem {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "svg",
                 "defaultValue": "''"
             }
         };

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

@@ -674,9 +674,9 @@ export class Tabs {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: 'cbce10198c6f32e4323ffabf9f2e95ed7c5671de', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '51096cdb6f56a75951792e036384e9891dba5f36', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: 'adf5438fb91ca1ae24825612e717b22653e4b51b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated && this.isTabList)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, ariaLabel: this.inheritAttributes['aria-label'], accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated && this.isTabList, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'ef3a8707ffd193bb1a2ab0f76b140bd8ddf03010', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'bb0e4faeb94da487c315507fb6b05391147cd1da', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'fbb8d282dc68ea5889436792efa76e174be9cc9d' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: '9c2c2d354e1f9b1d71b85810e9ef5fccc1f3f683', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'ab7902280092861830088a06478049ac35befa2c' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -693,7 +693,6 @@ export class Tabs {
         return {
             "float": {
                 "type": "string",
-                "attribute": "float",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsFloat",
@@ -717,11 +716,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "float",
                 "defaultValue": "'left'"
             },
             "fullwidth": {
                 "type": "boolean",
-                "attribute": "fullwidth",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -737,11 +736,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "fullwidth",
                 "defaultValue": "false"
             },
             "accordion": {
                 "type": "boolean",
-                "attribute": "accordion",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -757,11 +756,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "accordion",
                 "defaultValue": "false"
             },
             "overflow": {
                 "type": "boolean",
-                "attribute": "overflow",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -777,11 +776,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "overflow",
                 "defaultValue": "true"
             },
             "options": {
                 "type": "unknown",
-                "attribute": "options",
                 "mutable": false,
                 "complexType": {
                     "original": "BalTabOption[]",
@@ -806,7 +805,6 @@ export class Tabs {
             },
             "context": {
                 "type": "string",
-                "attribute": "context",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsContext",
@@ -826,11 +824,11 @@ export class Tabs {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "context"
             },
             "iconPosition": {
                 "type": "string",
-                "attribute": "icon-position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsIconPosition",
@@ -851,11 +849,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "icon-position",
                 "defaultValue": "'horizontal'"
             },
             "expanded": {
                 "type": "boolean",
-                "attribute": "expanded",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -871,11 +869,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "expanded",
                 "defaultValue": "false"
             },
             "spaceless": {
                 "type": "boolean",
-                "attribute": "spaceless",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -891,11 +889,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "spaceless",
                 "defaultValue": "false"
             },
             "clickable": {
                 "type": "boolean",
-                "attribute": "clickable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -911,11 +909,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "clickable",
                 "defaultValue": "true"
             },
             "border": {
                 "type": "boolean",
-                "attribute": "border",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -931,11 +929,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "border",
                 "defaultValue": "false"
             },
             "inverted": {
                 "type": "boolean",
-                "attribute": "inverted",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -951,11 +949,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "inverted",
                 "defaultValue": "false"
             },
             "optionalTabSelection": {
                 "type": "boolean",
-                "attribute": "optional-tab-selection",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -971,11 +969,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "optional-tab-selection",
                 "defaultValue": "false"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -991,11 +989,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "debounce",
                 "defaultValue": "0"
             },
             "vertical": {
                 "type": "any",
-                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsVertical",
@@ -1016,11 +1014,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "vertical",
                 "defaultValue": "false"
             },
             "verticalColSize": {
                 "type": "string",
-                "attribute": "vertical-col-size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTabsColSize",
@@ -1041,11 +1039,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "vertical-col-size",
                 "defaultValue": "'one-third'"
             },
             "selectOnMobile": {
                 "type": "boolean",
-                "attribute": "select-on-mobile",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1061,11 +1059,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "select-on-mobile",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -1081,11 +1079,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "undefined"
             },
             "dimInactiveElements": {
                 "type": "boolean",
-                "attribute": "dim-inactive-elements",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1101,11 +1099,11 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dim-inactive-elements",
                 "defaultValue": "false"
             },
             "handleAsTabList": {
                 "type": "boolean",
-                "attribute": "handle-as-tab-list",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -1121,6 +1119,7 @@ export class Tabs {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "handle-as-tab-list",
                 "defaultValue": "false"
             }
         };

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
+import { ariaBooleanToString } from "../../utils/aria";
 import { inheritAttributes } from "../../utils/attributes";
 import { BEM } from "../../utils/bem";
-import { ariaBooleanToString } from "../../utils/aria";
 export class Tag {
     constructor() {
         this.inheritedAttributes = {};
@@ -55,7 +55,7 @@ export class Tag {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: '19610b319eef385b35d471cbb7c8dbbec82d948d', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'fd3ca48806a3e38c7147d4be4a12eccb585838c3', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '52520c8b812402d98138bbce22ba2f6dd017cdd3' })), h("bal-close", Object.assign({ key: '50b84027169d67402416c9d5c759f75439acf3b3', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: '27a4f2f99a2ef7160c9239608a65fd035f07baac', "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'd67ec24e9286c0cd3539c87c3aec6fe2f539d178', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '6d9edd38cb609bb1ac630a31a066ce8a8b797f10' })), h("bal-close", Object.assign({ key: '5b10ce55af2a1ef7651fed5baa8a2a21ae0d5a6c', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||
@@ -76,7 +76,6 @@ export class Tag {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTagColor",
@@ -97,11 +96,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "color",
                 "defaultValue": "''"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTagSize",
@@ -122,11 +121,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "''"
             },
             "closable": {
                 "type": "boolean",
-                "attribute": "closable",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,11 +141,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -162,11 +161,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "invalid",
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -182,11 +181,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "BalProps.BalTagPlacement",
@@ -207,11 +206,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "position",
                 "defaultValue": "'left'"
             },
             "light": {
                 "type": "boolean",
-                "attribute": "light",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -227,11 +226,11 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "light",
                 "defaultValue": "false"
             },
             "transparent": {
                 "type": "boolean",
-                "attribute": "transparent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -250,6 +249,7 @@ export class Tag {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "transparent",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/bal-tag/test/bal-tag.a11y.play.js

@@ -0,0 +1,20 @@
+import { test } from "../../../../../../playwright/src/index";
+test.describe('a11y', () => {
+    test('basic', async ({ page, a11y }) => {
+        await page.mount('<bal-tag>Tag</bal-tag>');
+        await a11y('bal-tag');
+    });
+    test('closable', async ({ page, a11y }) => {
+        await page.mount('<bal-tag closable>Tag</bal-tag>');
+        await a11y('bal-tag');
+    });
+    test.describe('colors', () => {
+        const colors = ['primary', 'grey', 'info', 'success', 'warning', 'danger', 'purple', 'green', 'red', 'yellow'];
+        colors.forEach(color => {
+            test(color, async ({ page, a11y }) => {
+                await page.mount(`<bal-tag color="${color}">Tag</bal-tag>`);
+                await a11y('bal-tag');
+            });
+        });
+    });
+});

package/dist/collection/components/bal-tag/test/bal-tag.component.play.js

@@ -0,0 +1,19 @@
+import { test, expect, BalTag } from "../../../../../../playwright/src/index";
+test.describe('component', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.mount(`
+      <bal-tag closable>My tag</bal-tag>
+    `);
+    });
+    test('should have a default slot', async ({ page }) => {
+        const balTag = new BalTag(page.locator('bal-tag'));
+        await balTag.assertToBeVisible();
+        await balTag.assertToHaveText('My tag');
+    });
+    test('should fire balCloseClick event', async ({ page }) => {
+        const balTag = new BalTag(page.locator('bal-tag'));
+        const spy = await balTag.el.spyOnEvent('balCloseClick');
+        await balTag.clickClose();
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+});