@baloise/ds-core 0.0.5-nightly.e56f740

package/components/bal-badge2.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+import { d as defineCustomElement$1 } from './bal-icon2.js';
+
+const balBadgeCss = ":root{--bal-badge-background:var(--bal-color-red-3);--bal-badge-background-grey:var(--bal-color-grey-3);--bal-badge-background-red:var(--bal-color-red-3);--bal-badge-background-yellow:var(--bal-color-yellow-3);--bal-badge-background-green:var(--bal-color-green-3);--bal-badge-background-purple:var(--bal-color-purple-3);--bal-badge-radius:var(--bal-radius-rounded);--bal-badge-text-color:var(--bal-color-text-primary);--bal-badge-color-grey:var(--bal-color-text-grey-dark);--bal-badge-color-red:var(--bal-color-text-primary);--bal-badge-color-yellow:var(--bal-color-text-primary);--bal-badge-color-green:var(--bal-color-text-primary);--bal-badge-color-purple:var(--bal-color-text-primary)}.bal-badge{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;min-width:1.5rem;height:1.5rem;border-radius:var(--bal-badge-radius);background:var(--bal-badge-background);padding:.25rem}.bal-badge--size-small{width:.75rem;max-width:.75rem;min-width:.75rem;height:.75rem}.bal-badge--size-large{width:2rem;height:2rem}.bal-badge--background-red,.bal-badge--background-danger{background:var(--bal-badge-background-red)}.bal-badge--background-yellow,.bal-badge--background-warning{background:var(--bal-badge-background-yellow)}.bal-badge--background-green,.bal-badge--background-success{background:var(--bal-badge-background-green)}.bal-badge--background-purple{background:var(--bal-badge-background-purple)}.bal-badge--background-grey{background:var(--bal-badge-background-grey)}.bal-badge--position-card,.bal-badge--position-button{position:absolute;right:-0.5rem;top:-0.5rem}.bal-badge--position-tabs{margin-top:-0.25rem;position:absolute;right:-1.625rem}.bal-badge--position-tabs.bal-badge--size-small{right:-1rem}span.bal-badge__label{font-weight:var(--bal-font-weight-bold) !important;font-family:var(--bal-font-family-text) !important;font-size:var(--bal-text-size-small) !important;color:var(--bal-badge-text-color);line-height:1.5rem !important;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}span.bal-badge__label--hidden{display:none !important}span.bal-badge__label--color-red,span.bal-badge__label--color-danger{color:var(--bal-badge-color-red)}span.bal-badge__label--color-yellow,span.bal-badge__label--color-warning{color:var(--bal-badge-color-yellow)}span.bal-badge__label--color-green,span.bal-badge__label--color-success{color:var(--bal-badge-color-green)}span.bal-badge__label--color-grey{color:var(--bal-badge-color-grey)}span.bal-badge__label--color-purple{color:var(--bal-badge-color-purple)}.bal-badge__icon--hidden{display:none !important}";
+const BalBadgeStyle0 = balBadgeCss;
+
+const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.icon = undefined;
+        this.size = '';
+        this.color = '';
+        this.position = '';
+    }
+    render() {
+        const block = BEM.block('badge');
+        const labelEl = block.element('label');
+        const iconEl = block.element('icon');
+        const color = this.color !== '';
+        const size = this.size !== '';
+        const position = this.position !== '';
+        const labelHidden = !!this.icon || this.size === 'small';
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.color}`).class(color)), block.modifier(`position-${this.position}`).class(position)), block.modifier(`size-${this.size}`).class(size)) }, h("span", { class: Object.assign(Object.assign(Object.assign({}, labelEl.class()), labelEl.modifier(`color-${this.color}`).class(color)), labelEl.modifier(`hidden`).class(labelHidden)), "data-testid": "bal-badge-label" }, h("slot", null)), this.size !== 'small' ? (h("bal-icon", { class: Object.assign(Object.assign({}, iconEl.class()), iconEl.modifier(`hidden`).class(!labelHidden)), size: this.size === '' ? 'small' : '', name: this.icon, color: this.color === 'grey' ? 'grey' : 'primary' })) : ('')));
+    }
+    get el() { return this; }
+    static get style() { return BalBadgeStyle0; }
+}, [4, "bal-badge", {
+        "icon": [1],
+        "size": [1],
+        "color": [1],
+        "position": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-badge", "bal-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Badge);
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Badge as B, defineCustomElement as d };

package/components/bal-button-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalButtonGroup extends Components.BalButtonGroup, HTMLElement {}
+export const BalButtonGroup: {
+    prototype: BalButtonGroup;
+    new (): BalButtonGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-button-group.js

@@ -0,0 +1,6 @@
+import { B as ButtonGroup, d as defineCustomElement$1 } from './bal-button-group2.js';
+
+const BalButtonGroup = ButtonGroup;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalButtonGroup, defineCustomElement };

package/components/bal-button-group2.js

@@ -0,0 +1,40 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+
+const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.position = '';
+        this.direction = 'auto';
+        this.reverse = false;
+    }
+    render() {
+        const block = BEM.block('button-group');
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`position-${this.position}`).class()), block.modifier(`direction-${this.direction}`).class()) }, h("div", { class: {
+                'field': true,
+                'is-grouped': true,
+                'is-reverse': this.reverse,
+                [`has-direction-${this.direction}`]: true,
+            } }, h("slot", null))));
+    }
+}, [4, "bal-button-group", {
+        "position": [1],
+        "direction": [1],
+        "reverse": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-button-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ButtonGroup);
+            }
+            break;
+    } });
+}
+
+export { ButtonGroup as B, defineCustomElement as d };

package/components/bal-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalButton extends Components.BalButton, HTMLElement {}
+export const BalButton: {
+    prototype: BalButton;
+    new (): BalButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-button.js

@@ -0,0 +1,6 @@
+import { B as Button, d as defineCustomElement$1 } from './bal-button2.js';
+
+const BalButton = Button;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalButton, defineCustomElement };

package/components/bal-button2.js

@@ -0,0 +1,218 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { i as inheritAttributes } from './attributes.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() {
+        super();
+        this.__registerHost();
+        this.balNavigate = createEvent(this, "balNavigate", 7);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        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.href !== undefined) {
+                this.balNavigate.emit(ev);
+            }
+        };
+        this.color = 'primary';
+        this.elementType = 'button';
+        this.disabled = false;
+        this.size = '';
+        this.href = undefined;
+        this.target = '_self';
+        this.rel = undefined;
+        this.download = undefined;
+        this.shadow = false;
+        this.square = false;
+        this.isActive = false;
+        this.expanded = false;
+        this.flat = false;
+        this.outlined = false;
+        this.inverted = false;
+        this.loading = false;
+        this.rounded = false;
+        this.icon = '';
+        this.iconTurn = false;
+        this.iconRight = '';
+        this.noWrap = false;
+        this.name = '';
+        this.value = '';
+        this.aria = undefined;
+    }
+    listenOnClick(ev) {
+        if (this.disabled && ev.target && ev.target === this.el) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+    componentWillLoad() {
+        this.inheritAttributes = inheritAttributes(this.el, [
+            'title',
+            'aria-label',
+            'aria-controls',
+            'aria-hidden',
+            'tabindex',
+        ]);
+    }
+    componentDidRender() {
+        this.balDidRender.emit();
+    }
+    get isIconInverted() {
+        return this.inverted;
+    }
+    get buttonCssClass() {
+        return {
+            'button': true,
+            [`is-${this.color}`]: true,
+            'is-flat': this.flat,
+            'is-square': this.square,
+            'is-small': this.size === 'small',
+            'is-inverted': this.inverted,
+            'is-active': this.isActive,
+            'is-outlined': this.outlined,
+            'is-fullwidth': this.expanded,
+            'is-disabled': this.disabled,
+            'is-loading': this.loading,
+            'is-rounded': this.rounded === true,
+            'has-blur-shadow': this.shadow === true,
+        };
+    }
+    get leftIconAttrs() {
+        if (!this.icon || this.loading) {
+            return {
+                style: { display: 'none' },
+            };
+        }
+        return {};
+    }
+    get leftRightAttrs() {
+        if (!this.iconRight || this.loading) {
+            return {
+                style: { display: 'none' },
+            };
+        }
+        return {};
+    }
+    get loadingAttrs() {
+        if (!this.loading) {
+            return {
+                style: { display: 'none' },
+            };
+        }
+        return {
+            style: { position: 'absolute' },
+        };
+    }
+    handleClick(ev) {
+        if (this.disabled) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        }
+    }
+    render() {
+        var _a, _b, _c, _d;
+        const { elementType, download, href, rel, target, name, value } = this;
+        const TagType = this.href === undefined ? 'button' : 'a';
+        const attrs = TagType === 'button'
+            ? { type: elementType, name, value }
+            : {
+                download,
+                href,
+                rel,
+                target,
+            };
+        const spinnerColor = () => {
+            if (this.disabled) {
+                return 'blue';
+            }
+            switch (this.color) {
+                case 'primary':
+                case 'success':
+                case 'warning':
+                case 'danger':
+                    return this.inverted ? 'blue' : 'white';
+                default:
+                    return this.inverted ? 'white' : 'blue';
+            }
+        };
+        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'],
+        };
+        return (h(Host, { onClick: this.handleClick, class: {
+                'bal-button': true,
+                'control': true,
+                'is-fullwidth': this.expanded,
+                'is-disabled': this.disabled,
+            } }, h(TagType, Object.assign({}, attrs, this.inheritAttributes, { type: this.elementType, class: this.buttonCssClass, part: "native", disabled: this.disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: this.onClick, "aria-disabled": this.disabled ? 'true' : null, "data-testid": "bal-button" }, ariaAttributes), h("bal-spinner", Object.assign({ color: spinnerColor(), small: true }, this.loadingAttrs, { deactivated: !this.loading })), h("bal-icon", Object.assign({}, this.leftIconAttrs, { class: this.square ? '' : 'icon-left', name: this.icon, size: this.square ? this.size : 'small', turn: this.iconTurn, inverted: this.isIconInverted })), h("span", { class: {
+                'button-label': true,
+                'has-no-wrap': this.noWrap,
+                'is-small': this.size === 'small',
+            }, style: { opacity: this.loading ? '0' : '1' }, "data-testid": "bal-button-label" }, h("slot", null)), 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; }
+}, [4, "bal-button", {
+        "color": [1],
+        "elementType": [1, "element-type"],
+        "disabled": [516],
+        "size": [513],
+        "href": [1],
+        "target": [1],
+        "rel": [1],
+        "download": [1],
+        "shadow": [4],
+        "square": [4],
+        "isActive": [4, "is-active"],
+        "expanded": [4],
+        "flat": [4],
+        "outlined": [4],
+        "inverted": [4],
+        "loading": [4],
+        "rounded": [4],
+        "icon": [1],
+        "iconTurn": [4, "icon-turn"],
+        "iconRight": [1, "icon-right"],
+        "noWrap": [4, "no-wrap"],
+        "name": [1],
+        "value": [8],
+        "aria": [16]
+    }, [[6, "click", "listenOnClick"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-button", "bal-icon", "bal-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Button);
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bal-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Button as B, defineCustomElement as d };

package/components/bal-card-actions.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCardActions extends Components.BalCardActions, HTMLElement {}
+export const BalCardActions: {
+    prototype: BalCardActions;
+    new (): BalCardActions;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card-actions.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './bal-button-group2.js';
+
+const CardActions = /*@__PURE__*/ proxyCustomElement(class CardActions extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.position = '';
+    }
+    render() {
+        return (h(Host, { class: "bal-card-actions" }, h("bal-button-group", { class: "m-none", position: this.position }, h("slot", null))));
+    }
+}, [4, "bal-card-actions", {
+        "position": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-card-actions", "bal-button-group"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-card-actions":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardActions);
+            }
+            break;
+        case "bal-button-group":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalCardActions = CardActions;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCardActions, defineCustomElement };

package/components/bal-card-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCardButton extends Components.BalCardButton, HTMLElement {}
+export const BalCardButton: {
+    prototype: BalCardButton;
+    new (): BalCardButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card-button.js

@@ -0,0 +1,62 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './bal-button2.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$2 } from './bal-spinner2.js';
+
+const CardButton = /*@__PURE__*/ proxyCustomElement(class CardButton extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.icon = '';
+        this.elementType = 'button';
+        this.disabled = false;
+        this.href = undefined;
+        this.target = '_self';
+        this.iconRight = '';
+        this.loading = false;
+    }
+    render() {
+        return (h(Host, { class: "bal-card-button" }, h("bal-button", { color: "info", expanded: true, "bottom-rounded": true, icon: this.icon, iconRight: this.iconRight, elementType: this.elementType, disabled: this.disabled, href: this.href, target: this.target, loading: this.loading }, h("slot", null))));
+    }
+}, [4, "bal-card-button", {
+        "icon": [1],
+        "elementType": [1, "element-type"],
+        "disabled": [516],
+        "href": [1],
+        "target": [1],
+        "iconRight": [1, "icon-right"],
+        "loading": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-card-button", "bal-button", "bal-icon", "bal-spinner"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-card-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardButton);
+            }
+            break;
+        case "bal-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalCardButton = CardButton;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCardButton, defineCustomElement };

package/components/bal-card-content.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCardContent extends Components.BalCardContent, HTMLElement {}
+export const BalCardContent: {
+    prototype: BalCardContent;
+    new (): BalCardContent;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card-content.js

@@ -0,0 +1,6 @@
+import { C as CardContent, d as defineCustomElement$1 } from './bal-card-content2.js';
+
+const BalCardContent = CardContent;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCardContent, defineCustomElement };

package/components/bal-card-content2.js

@@ -0,0 +1,26 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const CardContent = /*@__PURE__*/ proxyCustomElement(class CardContent extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+    }
+    render() {
+        return (h(Host, { class: "bal-card-content" }, h("slot", null)));
+    }
+}, [4, "bal-card-content"]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-card-content"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-card-content":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardContent);
+            }
+            break;
+    } });
+}
+
+export { CardContent as C, defineCustomElement as d };

package/components/bal-card-subtitle.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCardSubtitle extends Components.BalCardSubtitle, HTMLElement {}
+export const BalCardSubtitle: {
+    prototype: BalCardSubtitle;
+    new (): BalCardSubtitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card-subtitle.js

@@ -0,0 +1,42 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './bal-text2.js';
+
+const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inverted = false;
+        this.bold = false;
+        this.color = '';
+    }
+    render() {
+        return (h(Host, { class: "bal-card-subtitle" }, h("bal-text", { bold: this.bold, space: "none", color: this.inverted ? 'white' : this.color }, h("slot", null))));
+    }
+}, [4, "bal-card-subtitle", {
+        "inverted": [4],
+        "bold": [4],
+        "color": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-card-subtitle", "bal-text"];
+    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;
+    } });
+}
+
+const BalCardSubtitle = CardSubtitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCardSubtitle, defineCustomElement };

package/components/bal-card-title.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCardTitle extends Components.BalCardTitle, HTMLElement {}
+export const BalCardTitle: {
+    prototype: BalCardTitle;
+    new (): BalCardTitle;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card-title.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './bal-heading2.js';
+
+const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.inverted = false;
+    }
+    render() {
+        return (h(Host, { class: "bal-card-title" }, h("bal-heading", { level: "h3", space: "none", inverted: this.inverted }, h("slot", null))));
+    }
+}, [4, "bal-card-title", {
+        "inverted": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-card-title", "bal-heading"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-card-title":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CardTitle);
+            }
+            break;
+        case "bal-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const BalCardTitle = CardTitle;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCardTitle, defineCustomElement };

package/components/bal-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalCard extends Components.BalCard, HTMLElement {}
+export const BalCard: {
+    prototype: BalCard;
+    new (): BalCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/bal-card.js

@@ -0,0 +1,6 @@
+import { B as BalCard$1, d as defineCustomElement$1 } from './bal-card2.js';
+
+const BalCard = BalCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BalCard, defineCustomElement };