@siemens/ix 5.1.1 → 5.2.0

package/dist/collection/components/badge/badge.js

@@ -0,0 +1,815 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yBoolean, a11yHostAttributes } from "../utils/a11y";
+import { DefaultMixins } from "../utils/internal/component";
+import { InheritAriaAttributesMixin, } from "../utils/internal/mixins/accessibility/inherit-aria-attributes.mixin";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+import { makeRef } from "../utils/make-ref";
+import { convertToRemString } from "../utils/rwd.util";
+import { hasSlottedElements } from "../utils/shadow-dom";
+import { getBadgeStatusIcon, getBadgeStatusIconPlate, getResolvedStatusIconVariant, } from "./badge.status-icon";
+import { BADGE_ANATOMY_TYPES, BADGE_ATTACHED_OFFSET_DEFAULTS, BADGE_POSITIONS, BADGE_VARIANTS, } from "./badge.types";
+import { formatBadgeLabel } from "./badge.utils";
+/** Slot name for the screen-reader description. */
+const BADGE_DESCRIPTION_SLOT = 'description';
+/**
+ * Overlay indicator for counts, labels, dots, and status icons.
+ *
+ * **Attached** (default slot has content): the indicator is decorative.
+ * When `label` is set, that text is exposed on the anchor via `aria-describedby`.
+ * Host `role` / `aria-*` are discarded so the anchor owns the accessible name.
+ *
+ * **Standalone** (empty default slot): author `role` / `aria-*` stay on the host.
+ * For `dot` and `status-icon`, provide a host `aria-label` and a naming role
+ * (for example `role="img"`, or `role="status"` / `role="alert"` for a live region).
+ *
+ * Override max-width with `--ix-badge-max-width`.
+ *
+ * @since 5.2.0
+ */
+export class Badge extends Mixin(...DefaultMixins, InheritAriaAttributesMixin, ComponentIdMixin) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    /**
+     * Badge type (`counter`, `label`, `dot`, or `status-icon`).
+     *
+     * @since 5.2.0
+     */
+    type = 'counter';
+    /**
+     * Visible text or count.
+     * Required for `label` and `counter`. Omit for `dot` and `status-icon`.
+     * Counters accept integers only (decimals truncated); values above 99 render as `99+`.
+     *
+     * @since 5.2.0
+     */
+    label;
+    /**
+     * Color variant.
+     * For `status-icon`, unsupported values fall back to `info`.
+     * Use `error` only with `status-icon` (other types map it to `alarm`).
+     *
+     * @since 5.2.0
+     */
+    variant = 'primary';
+    /**
+     * Show the badge in outline style.
+     *
+     * @since 5.2.0
+     */
+    outline = false;
+    /**
+     * Add a high-contrast border on filled badges.
+     * Ignored when **outline** is `true` or **type** is `status-icon`.
+     *
+     * @since 5.2.0
+     */
+    border = false;
+    /**
+     * Position relative to the slotted anchor.
+     * Only has an effect when attached.
+     *
+     * @since 5.2.0
+     */
+    position = 'top-after';
+    /**
+     * Extra horizontal offset in pixels.
+     * Only has an effect when attached.
+     * Added to the type default.
+     *
+     * @since 5.2.0
+     */
+    offsetX = 0;
+    /**
+     * Extra vertical offset in pixels.
+     * Only has an effect when attached.
+     * Added to the type default.
+     *
+     * @since 5.2.0
+     */
+    offsetY = 0;
+    /**
+     * Play the attention pulse animation.
+     * Override duration with `--ix-badge-animation-duration` (default `2s`).
+     *
+     * @since 5.2.0
+     */
+    enableAnimation = false;
+    /**
+     * Custom background or border color.
+     * Only has an effect when **variant** is `custom`.
+     *
+     * @since 5.2.0
+     */
+    background;
+    /**
+     * Custom text color.
+     * Only has an effect when **variant** is `custom`.
+     *
+     * @since 5.2.0
+     */
+    badgeColor;
+    /**
+     * Leading icon name.
+     * Only has an effect when **type** is `label`.
+     *
+     * @since 5.2.0
+     */
+    icon;
+    /**
+     * Accessible name for the leading icon.
+     * When unset, the icon is decorative if **label** provides visible text.
+     * Only has an effect when **type** is `label`.
+     *
+     * @since 5.2.0
+     */
+    ariaLabelIcon;
+    /**
+     * Left-align label content.
+     * Only has an effect when **type** is `label`.
+     *
+     * @since 5.2.0
+     */
+    alignLeft = false;
+    /**
+     * Display a tooltip when the badge is standalone.
+     * By default, no tooltip is displayed.
+     * Add the attribute to use the badge label (or host `aria-label`) as the tooltip, or pass a string for custom text.
+     * Ignored when the badge is attached to an anchor.
+     *
+     * @since 5.2.0
+     */
+    tooltipText = false;
+    hasAnchor = false;
+    descriptionId = '';
+    anchorElements = [];
+    slotElement;
+    indicatorElementRef = makeRef();
+    hasDisconnected = false;
+    componentWillLoad() {
+        // Mixin strips host ARIA into `inheritAriaAttributes` and removes them from the host.
+        super.componentWillLoad();
+        this.descriptionId = `${this.getHostElementId()}-description`;
+        const hasAnchor = this.detectHasAnchor();
+        if (hasAnchor) {
+            this.hasAnchor = true;
+            // Attached: discard host ARIA — the anchor owns naming; the indicator is decorative
+            // (`aria-hidden`) and count/label text is exposed via `aria-describedby` on the anchor.
+            this.inheritAriaAttributes = {};
+            return;
+        }
+        this.hasAnchor = false;
+        // Standalone: keep mixin-captured ARIA and re-apply on `<Host>` in `render()`.
+    }
+    componentDidLoad() {
+        this.syncAnchorDescribedBy();
+    }
+    componentDidRender() {
+        const nextHasAnchor = this.detectHasAnchor();
+        if (nextHasAnchor !== this.hasAnchor) {
+            this.applyAnchorMode(nextHasAnchor);
+            this.syncAnchorDescribedBy();
+        }
+    }
+    connectedCallback() {
+        if (this.hasDisconnected) {
+            this.syncAnchorDescribedBy();
+            this.hasDisconnected = false;
+        }
+    }
+    disconnectedCallback() {
+        this.clearAnchorDescribedBy();
+        this.hasDisconnected = true;
+    }
+    labelOrTypeChanged() {
+        if (this.hasAnchor) {
+            this.syncAnchorDescribedBy();
+        }
+    }
+    setSlotRef = (element) => {
+        this.slotElement = element;
+    };
+    onSlotChange = () => {
+        this.applyAnchorMode(this.detectHasAnchor());
+        this.syncAnchorDescribedBy();
+    };
+    isDescriptionElement(element) {
+        return (element.getAttribute('slot') === BADGE_DESCRIPTION_SLOT ||
+            (!!this.descriptionId && element.id === this.descriptionId));
+    }
+    getAnchorElements() {
+        return Array.from(this.hostElement.children).filter((child) => child instanceof HTMLElement && !this.isDescriptionElement(child));
+    }
+    detectHasAnchor() {
+        if (hasSlottedElements(this.slotElement)) {
+            return true;
+        }
+        return this.getAnchorElements().length > 0;
+    }
+    applyAnchorMode(hasAnchor) {
+        if (hasAnchor === this.hasAnchor) {
+            return;
+        }
+        this.clearAnchorDescribedBy();
+        if (hasAnchor) {
+            this.hasAnchor = true;
+            // Strip any ARIA still on the host (e.g. re-applied while standalone) and discard —
+            // attached mode must not keep role / aria-* on the wrapper.
+            a11yHostAttributes(this.hostElement);
+            this.inheritAriaAttributes = {};
+            this.descriptionId = `${this.getHostElementId()}-description`;
+            return;
+        }
+        this.hasAnchor = false;
+        // Leaving attached: capture any author ARIA set on the host for standalone `<Host>`.
+        this.inheritAriaAttributes = a11yHostAttributes(this.hostElement);
+    }
+    getResolvedVariant() {
+        if (this.variant === 'error') {
+            return this.getResolvedType() === 'status-icon' ? 'error' : 'alarm';
+        }
+        return BADGE_VARIANTS.includes(this.variant)
+            ? this.variant
+            : 'primary';
+    }
+    getResolvedType() {
+        return BADGE_ANATOMY_TYPES.includes(this.type) ? this.type : 'counter';
+    }
+    getResolvedPosition() {
+        return BADGE_POSITIONS.includes(this.position)
+            ? this.position
+            : 'top-after';
+    }
+    getResolvedOffsets() {
+        const type = this.getResolvedType();
+        const defaults = this.hasAnchor
+            ? BADGE_ATTACHED_OFFSET_DEFAULTS[type]
+            : { x: 0, y: 0 };
+        return {
+            x: defaults.x + this.offsetX,
+            y: defaults.y + this.offsetY,
+        };
+    }
+    getFormattedLabel(type) {
+        return formatBadgeLabel(type, this.label);
+    }
+    getAccessibleText(formattedLabel) {
+        return formattedLabel || undefined;
+    }
+    isTooltipRequested() {
+        return !!(this.tooltipText || this.hostElement.hasAttribute('tooltip-text'));
+    }
+    hasVisibleIndicator(type, formattedLabel) {
+        if (type === 'counter' || type === 'label') {
+            return !!formattedLabel;
+        }
+        return type === 'dot' || type === 'status-icon';
+    }
+    shouldShowTooltip(type, formattedLabel) {
+        return (!this.hasAnchor &&
+            this.isTooltipRequested() &&
+            this.hasVisibleIndicator(type, formattedLabel));
+    }
+    getTooltipContent(formattedLabel) {
+        if (typeof this.tooltipText === 'string' && this.tooltipText.trim()) {
+            return this.tooltipText.trim();
+        }
+        return (formattedLabel?.trim() ||
+            this.inheritAriaAttributes['aria-label']?.trim() ||
+            this.hostElement.getAttribute('aria-label')?.trim() ||
+            undefined);
+    }
+    getTooltip(formattedLabel) {
+        if (!this.shouldShowTooltip(this.getResolvedType(), formattedLabel)) {
+            return null;
+        }
+        const text = this.getTooltipContent(formattedLabel);
+        if (!text) {
+            return null;
+        }
+        return (h("ix-tooltip", { for: this.indicatorElementRef.waitForCurrent(), "aria-label": text }, text));
+    }
+    syncAnchorDescribedBy() {
+        this.clearAnchorDescribedBy();
+        if (!this.hasAnchor) {
+            return;
+        }
+        const accessibleText = this.getAccessibleText(this.getFormattedLabel(this.getResolvedType()));
+        if (!accessibleText) {
+            return;
+        }
+        const descriptionEl = this.ensureLightDomDescription(accessibleText);
+        const anchors = this.getAnchorElements();
+        for (const anchor of anchors) {
+            const existing = anchor.getAttribute('aria-describedby');
+            const ids = new Set(existing?.split(/\s+/).filter((id) => id.length > 0) ?? []);
+            ids.add(descriptionEl.id);
+            anchor.setAttribute('aria-describedby', Array.from(ids).join(' '));
+            anchor.dataset.ixBadgeDescribedby = descriptionEl.id;
+        }
+        this.anchorElements = anchors;
+    }
+    ensureLightDomDescription(text) {
+        let descriptionEl = Array.from(this.hostElement.children).find((child) => child instanceof HTMLElement && this.isDescriptionElement(child));
+        if (!descriptionEl) {
+            descriptionEl = document.createElement('span');
+            descriptionEl.slot = BADGE_DESCRIPTION_SLOT;
+            descriptionEl.className = 'description';
+            this.hostElement.appendChild(descriptionEl);
+        }
+        descriptionEl.id = this.descriptionId;
+        descriptionEl.textContent = text;
+        return descriptionEl;
+    }
+    removeLightDomDescription() {
+        Array.from(this.hostElement.children)
+            .filter((child) => child instanceof HTMLElement && this.isDescriptionElement(child))
+            .forEach((child) => child.remove());
+    }
+    clearAnchorDescribedBy() {
+        for (const anchor of this.anchorElements) {
+            if (anchor.dataset.ixBadgeDescribedby !== this.descriptionId) {
+                continue;
+            }
+            const existing = anchor.getAttribute('aria-describedby');
+            const ids = existing?.split(/\s+/).filter((id) => id !== this.descriptionId) ?? [];
+            delete anchor.dataset.ixBadgeDescribedby;
+            if (ids.length > 0) {
+                anchor.setAttribute('aria-describedby', ids.join(' '));
+            }
+            else {
+                anchor.removeAttribute('aria-describedby');
+            }
+        }
+        this.anchorElements = [];
+        this.removeLightDomDescription();
+    }
+    renderIndicatorShell(_accessibleText, content) {
+        return (h("div", { class: "indicator", ref: this.indicatorElementRef, "aria-hidden": this.hasAnchor ? a11yBoolean(true) : undefined }, content));
+    }
+    renderIndicator(type, variant, accessibleText, formattedLabel) {
+        if (type === 'counter') {
+            if (!formattedLabel) {
+                return null;
+            }
+            return this.renderIndicatorShell(accessibleText, h("span", { class: "label" }, formattedLabel));
+        }
+        if (type === 'dot') {
+            return this.renderIndicatorShell(accessibleText);
+        }
+        if (type === 'label') {
+            if (!formattedLabel) {
+                return null;
+            }
+            const iconIsDecorative = !this.ariaLabelIcon?.trim();
+            return this.renderIndicatorShell(accessibleText, [
+                this.icon ? (h("ix-icon", { key: "icon", class: "icon", name: this.icon, size: "16", "aria-label": this.ariaLabelIcon, "aria-hidden": a11yBoolean(iconIsDecorative) })) : null,
+                h("span", { key: "label", class: "label" }, formattedLabel),
+            ]);
+        }
+        if (type === 'status-icon') {
+            if (this.outline) {
+                return this.renderIndicatorShell(accessibleText, h("ix-icon", { class: "status-icon", name: getBadgeStatusIcon(variant, true), size: "16", "aria-hidden": a11yBoolean(true) }));
+            }
+            return this.renderIndicatorShell(accessibleText, h("span", { class: "status-icon-stack" }, h("ix-icon", { class: "status-icon status-icon-plate", name: getBadgeStatusIconPlate(variant), size: "16", "aria-hidden": a11yBoolean(true) }), h("ix-icon", { class: "status-icon status-icon-glyph", name: getBadgeStatusIcon(variant, false), size: "16", "aria-hidden": a11yBoolean(true) })));
+        }
+        return null;
+    }
+    render() {
+        const type = this.getResolvedType();
+        const variant = this.getResolvedVariant();
+        const position = this.getResolvedPosition();
+        const offsets = this.getResolvedOffsets();
+        const formattedLabel = this.getFormattedLabel(type);
+        const accessibleText = this.getAccessibleText(formattedLabel);
+        const hostVariant = type === 'status-icon' ? getResolvedStatusIconVariant(variant) : variant;
+        const showBorder = this.border && type !== 'status-icon';
+        const showTooltip = this.shouldShowTooltip(type, formattedLabel);
+        const customHostStyle = hostVariant === 'custom'
+            ? {
+                '--ix-badge-custom-background': this.background,
+                '--ix-badge-custom-color': this.badgeColor,
+            }
+            : undefined;
+        return (h(Host, { key: '984c6869acd0d44366c9a90f67e7e0155ac1cffe', ...(this.hasAnchor ? {} : this.inheritAriaAttributes), class: {
+                attached: this.hasAnchor,
+                outline: this.outline,
+                border: showBorder,
+                'enable-animation': this.enableAnimation,
+                'align-left': this.alignLeft,
+                'with-icon': type === 'label' && !!this.icon,
+                'with-tooltip': showTooltip,
+                ...(this.hasAnchor ? { [position]: true } : {}),
+                [hostVariant]: true,
+            }, style: {
+                ...customHostStyle,
+                ...(this.hasAnchor
+                    ? {
+                        '--ix-badge-offset-x': convertToRemString(offsets.x),
+                        '--ix-badge-offset-y': convertToRemString(offsets.y),
+                    }
+                    : {}),
+            } }, h("slot", { key: '17d7aec5f256bf994fdb1e4410840531c3c80081', name: BADGE_DESCRIPTION_SLOT }), h("div", { key: '18ec0b58489eb3971e7916ea2845ec526c7230a1', class: "anchor" }, h("slot", { key: 'ee60262b5aaff2fd0128350f64069e9c49e5a3d7', ref: this.setSlotRef, onSlotchange: this.onSlotChange })), this.renderIndicator(type, variant, accessibleText, formattedLabel), this.getTooltip(formattedLabel)));
+    }
+    static get is() { return "ix-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["badge.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeAnatomyType",
+                    "resolved": "\"counter\" | \"dot\" | \"label\" | \"status-icon\"",
+                    "references": {
+                        "BadgeAnatomyType": {
+                            "location": "import",
+                            "path": "./badge.types",
+                            "id": "src/components/badge/badge.types.ts::BadgeAnatomyType",
+                            "referenceLocation": "BadgeAnatomyType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Badge type (`counter`, `label`, `dot`, or `status-icon`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "type",
+                "defaultValue": "'counter'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Visible text or count.\nRequired for `label` and `counter`. Omit for `dot` and `status-icon`.\nCounters accept integers only (decimals truncated); values above 99 render as `99+`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "label"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgeVariant",
+                    "resolved": "\"alarm\" | \"critical\" | \"custom\" | \"error\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "BadgeVariant": {
+                            "location": "import",
+                            "path": "./badge.types",
+                            "id": "src/components/badge/badge.types.ts::BadgeVariant",
+                            "referenceLocation": "BadgeVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Color variant.\nFor `status-icon`, unsupported values fall back to `info`.\nUse `error` only with `status-icon` (other types map it to `alarm`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "outline": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Show the badge in outline style."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "outline",
+                "defaultValue": "false"
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Add a high-contrast border on filled badges.\nIgnored when **outline** is `true` or **type** is `status-icon`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "border",
+                "defaultValue": "false"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BadgePosition",
+                    "resolved": "\"bottom-after\" | \"top-after\"",
+                    "references": {
+                        "BadgePosition": {
+                            "location": "import",
+                            "path": "./badge.types",
+                            "id": "src/components/badge/badge.types.ts::BadgePosition",
+                            "referenceLocation": "BadgePosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Position relative to the slotted anchor.\nOnly has an effect when attached."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "position",
+                "defaultValue": "'top-after'"
+            },
+            "offsetX": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Extra horizontal offset in pixels.\nOnly has an effect when attached.\nAdded to the type default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-x",
+                "defaultValue": "0"
+            },
+            "offsetY": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Extra vertical offset in pixels.\nOnly has an effect when attached.\nAdded to the type default."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "offset-y",
+                "defaultValue": "0"
+            },
+            "enableAnimation": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Play the attention pulse animation.\nOverride duration with `--ix-badge-animation-duration` (default `2s`)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "enable-animation",
+                "defaultValue": "false"
+            },
+            "background": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Custom background or border color.\nOnly has an effect when **variant** is `custom`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "background"
+            },
+            "badgeColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Custom text color.\nOnly has an effect when **variant** is `custom`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "badge-color"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Leading icon name.\nOnly has an effect when **type** is `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "ariaLabelIcon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Accessible name for the leading icon.\nWhen unset, the icon is decorative if **label** provides visible text.\nOnly has an effect when **type** is `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-icon"
+            },
+            "alignLeft": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Left-align label content.\nOnly has an effect when **type** is `label`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "align-left",
+                "defaultValue": "false"
+            },
+            "tooltipText": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | boolean",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.2.0"
+                        }],
+                    "text": "Display a tooltip when the badge is standalone.\nBy default, no tooltip is displayed.\nAdd the attribute to use the badge label (or host `aria-label`) as the tooltip, or pass a string for custom text.\nIgnored when the badge is attached to an anchor."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tooltip-text",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasAnchor": {}
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "label",
+                "methodName": "labelOrTypeChanged"
+            }, {
+                "propName": "type",
+                "methodName": "labelOrTypeChanged"
+            }];
+    }
+}