@siemens/ix 0.0.0-pr-1974-20250627114851 → 0.0.0-pr-1974-20250627142646

package/components/ix-pill.d.ts

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

package/components/ix-pill.js

@@ -0,0 +1,127 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$3 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const pillCss = ":host{display:inline-block;position:relative;height:1.25rem;max-height:1.25rem;margin-left:0.25rem}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:default}.container .content-wrapper{display:inline-flex;align-items:center;flex:1;min-width:0}.container .with-icon{margin-right:0.25rem}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.centerContent .content-wrapper{justify-content:center;text-align:center}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline.icon.alarm .with-icon{color:var(--theme-color-alarm)}.container.outline.icon.critical .with-icon{color:var(--theme-color-critical)}.container.outline.icon.warning .with-icon{color:var(--theme-color-warning)}.container.outline.icon.info .with-icon{color:var(--theme-color-info)}.container.outline.icon.neutral .with-icon{color:var(--theme-color-neutral)}.container.outline.icon.success .with-icon{color:var(--theme-color-success)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary.outline{color:var(--theme-chip-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-outline--color);--ix-icon-button-color:var(--theme-chip-outline--color)}.container.primary.outline .with-icon{color:var(--theme-color-primary)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.info{color:var(--theme-color-info--contrast)}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.success{color:var(--theme-color-success--contrast)}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}:host .container{height:100%;justify-content:center}:host .container .with-icon{margin-right:0}:host .container.outline.icon{padding-left:0.4375rem;padding-right:0.4375rem}:host .container:not(.outline).icon{padding-left:0.5rem;padding-right:0.5rem}:host .with-gap{gap:0.25rem}:host(.align-left) .container{justify-content:flex-start}";
+
+const Pill = /*@__PURE__*/ proxyCustomElement(class Pill extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Pill variant
+         */
+        this.variant = 'primary';
+        /**
+         * Show pill as outline
+         */
+        this.outline = false;
+        /**
+         * Align pill content left
+         */
+        this.alignLeft = false;
+        /**
+         * Display a tooltip. By default, no tooltip will be displayed.
+         * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+         * @since 3.0.0
+         */
+        this.tooltipText = false;
+        this.iconOnly = false;
+        this.containerElementRef = makeRef();
+    }
+    componentWillLoad() {
+        this.checkIfContentAvailable();
+    }
+    checkIfContentAvailable() {
+        const hasChildren = this.hostElement.children.length > 0;
+        const hasTextContent = !!this.hostElement.textContent;
+        this.iconOnly = !hasChildren && !hasTextContent;
+    }
+    getTooltip() {
+        var _a;
+        if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
+            return null;
+        }
+        const text = typeof this.tooltipText === 'string' && this.tooltipText.trim()
+            ? this.tooltipText
+            : (_a = this.hostElement.textContent) === null || _a === void 0 ? void 0 : _a.trim();
+        return (h("ix-tooltip", { for: this.containerElementRef.waitForCurrent() }, text));
+    }
+    render() {
+        let customStyle = {};
+        if (this.variant === 'custom') {
+            customStyle = {
+                color: this.pillColor,
+                [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
+            };
+        }
+        return (h(Host, { key: '41b9f6f4870c8585f5bca24e469a5a99afd68012', style: this.variant === 'custom'
+                ? {
+                    '--ix-icon-button-color': this.pillColor,
+                }
+                : {}, class: {
+                'align-left': this.alignLeft,
+            } }, h("div", { key: '2674de0ba7ee68a9b38344cbc4b75cb10f778b3b', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+                container: true,
+                outline: this.outline,
+                inactive: false,
+                alarm: this.variant === 'alarm',
+                critical: this.variant === 'critical',
+                info: this.variant === 'info',
+                neutral: this.variant === 'neutral',
+                primary: this.variant === 'primary',
+                success: this.variant === 'success',
+                warning: this.variant === 'warning',
+                custom: this.variant === 'custom',
+                closable: false,
+                icon: !!this.icon,
+                'with-gap': !this.iconOnly,
+            } }, this.icon && (h("ix-icon", { key: '412400a5ca6b85c730c097365fc2b437a3b7eb03', class: {
+                'with-icon': true,
+            }, name: this.icon, size: '16' })), h("span", { key: '76689695f7d66f427eb59fcb57c413cd23622777', class: "slot-container" }, h("slot", { key: '2852c8a4cdf1f55e941fbe0091ad22ce73dc5cc5', onSlotchange: () => this.checkIfContentAvailable() }))), this.getTooltip()));
+    }
+    get hostElement() { return this; }
+    static get style() { return pillCss; }
+}, [1, "ix-pill", {
+        "variant": [513],
+        "outline": [4],
+        "icon": [1],
+        "background": [1],
+        "pillColor": [1, "pill-color"],
+        "alignLeft": [4, "align-left"],
+        "tooltipText": [8, "tooltip-text"],
+        "iconOnly": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-pill", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-pill":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Pill);
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxPill = Pill;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxPill, defineCustomElement };
+//# sourceMappingURL=ix-pill.js.map
+
+//# sourceMappingURL=ix-pill.js.map

package/components/ix-pill.js.map

@@ -0,0 +1 @@
+{"file":"ix-pill.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/pill/pill.scss?tag=ix-pill&encapsulation=shadow","src/components/pill/pill.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n@import './../chip/chip-mixin';\n@import 'common-variables';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 1.25rem;\n  max-height: 1.25rem;\n  margin-left: 0.25rem;\n}\n\n@include chip-container(false);\n\n:host {\n  .container {\n    height: 100%;\n    justify-content: center;\n\n    .with-icon {\n      margin-right: 0;\n    }\n\n    &.outline {\n      &.icon {\n        padding-left: 0.4375rem;\n        padding-right: 0.4375rem;\n      }\n    }\n\n    &:not(.outline) {\n      &.icon {\n        padding-left: 0.5rem;\n        padding-right: 0.5rem;\n      }\n    }\n  }\n\n  .with-gap {\n    gap: 0.25rem;\n  }\n}\n\n:host(.align-left) {\n  .container {\n    justify-content: flex-start;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-pill',\n  styleUrl: 'pill.scss',\n  shadow: true,\n})\nexport class Pill implements IxComponent {\n  @Element() hostElement!: HTMLIxPillElement;\n\n  /**\n   * Pill variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Show pill as outline\n   */\n  @Prop() outline = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Custom color for pill. Only working for `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font color for pill. Only working for `variant='custom'`\n   */\n  @Prop() pillColor: string | undefined;\n\n  /**\n   * Align pill content left\n   */\n  @Prop() alignLeft = false;\n\n  /**\n   * Display a tooltip. By default, no tooltip will be displayed.\n   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  @State() iconOnly = false;\n\n  private readonly containerElementRef = makeRef<HTMLElement>();\n\n  componentWillLoad() {\n    this.checkIfContentAvailable();\n  }\n\n  private checkIfContentAvailable() {\n    const hasChildren = this.hostElement.children.length > 0;\n    const hasTextContent = !!this.hostElement.textContent;\n\n    this.iconOnly = !hasChildren && !hasTextContent;\n  }\n\n  private getTooltip() {\n    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n      return null;\n    }\n\n    const text =\n      typeof this.tooltipText === 'string' && this.tooltipText.trim()\n        ? this.tooltipText\n        : this.hostElement.textContent?.trim();\n\n    return (\n      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n        {text}\n      </ix-tooltip>\n    );\n  }\n\n  render() {\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.pillColor,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n    return (\n      <Host\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.pillColor,\n              }\n            : {}\n        }\n        class={{\n          'align-left': this.alignLeft,\n        }}\n      >\n        <div\n          ref={this.containerElementRef}\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: false,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: false,\n            icon: !!this.icon,\n            'with-gap': !this.iconOnly,\n          }}\n        >\n          {this.icon && (\n            <ix-icon\n              class={{\n                'with-icon': true,\n              }}\n              name={this.icon}\n              size={'16'}\n            />\n          )}\n          <span class=\"slot-container\">\n            <slot onSlotchange={() => this.checkIfContentAvailable()}></slot>\n          </span>\n        </div>\n        {this.getTooltip()}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-progress-indicator.d.ts

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

package/components/ix-progress-indicator.js

@@ -0,0 +1,193 @@
+import { h, p as proxyCustomElement, H, F as Fragment, d as Host } from './p-BuJ6BWIi.js';
+import { O as iconCirclePause, q as iconSuccess, o as iconWarning, n as iconInfo, p as iconError } from './p-CGwHQeMX.js';
+import { d as defineCustomElement$3 } from './p-DyHdZRT0.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+function LinearBar({ value, }) {
+    return (h("div", { class: "linear-progress-container" },
+        h("div", { class: "progress", role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": 100 },
+            h("div", { class: {
+                    'progress-bar': true,
+                }, style: { width: `${value}%` }, "data-value": value }))));
+}
+
+/*
+ * SPDX-FileCopyrightText: 2025 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.
+ */
+function getCircularSize(size) {
+    switch (size) {
+        case 'xs':
+            return 16;
+        case 'sm':
+            return 24;
+        case 'md':
+            return 32;
+        case 'lg':
+            return 48;
+        case 'xl':
+            return 64;
+        default:
+            return 32;
+    }
+}
+const CircularProgress = (props, children) => {
+    const { value, size } = props;
+    const sizeInPixel = getCircularSize(size);
+    const radius = sizeInPixel / 2;
+    const circumference = 2 * Math.PI * radius;
+    const percentage = Math.round(circumference * ((100 - value) / 100));
+    const slotInsideCircular = size === 'lg' || size === 'xl';
+    return (h("div", { class: "circular-progress-container" },
+        h("svg", { width: sizeInPixel, height: sizeInPixel, viewBox: `-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${sizeInPixel * 1.25} ${sizeInPixel * 1.25}`, version: "1.1", xmlns: "http://www.w3.org/2000/svg", style: { transform: 'rotate(-90deg)' } },
+            h("circle", { r: radius, cx: radius, cy: radius, fill: "transparent", stroke: "var(--theme-color-component-4)", "stroke-width": `3px` }),
+            percentage > 0 && (h("circle", { r: radius, cx: radius, cy: radius, stroke: "var(--ix-progress-indicator-color)", "stroke-width": "3px", "stroke-linecap": "round", "stroke-dashoffset": `${percentage}px`, fill: "transparent", "stroke-dasharray": `${circumference}px` })),
+            h("foreignObject", { x: `0px`, y: `0px`, width: `${sizeInPixel}px`, height: `${sizeInPixel}px`, style: {
+                    transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,
+                } }, slotInsideCircular && (h("div", { class: "slotted-container slotted-container-inside" }, children)))),
+        !slotInsideCircular && h("div", { class: "slotted-container" }, children)));
+};
+
+const progressIndicatorCss = ":host{display:block;position:relative;width:24rem;height:-moz-fit-content;height:fit-content}:host .progress-container{display:flex;align-items:center;gap:0.5rem;flex-wrap:nowrap}:host .label{margin:0.25rem 0px}:host .helper-text{display:flex;align-items:flex-start;margin:0.25rem 0px;gap:0.25rem}:host .helper-text ix-icon{margin:0.125rem}:host .helper-text.success ix-icon{color:var(--theme-color-success)}:host .helper-text.error{color:var(--theme-color-alarm-text)}:host .helper-text.error ix-icon{color:var(--theme-color-alarm)}:host .helper-text.info ix-icon{color:var(--theme-color-info)}:host .helper-text.warning ix-icon{color:var(--theme-color-warning)}:host .helper-text.paused ix-icon{color:var(--theme-color-neutral)}:host .helper-text.text-left{justify-content:flex-start}:host .helper-text.text-right{justify-content:flex-end}:host .helper-text.text-center{justify-content:center}:host .progress-indicator{--ix-progress-indicator-color:var(--theme-color-success);height:100%}:host .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host .progress-indicator.success{--ix-progress-indicator-color:var(--theme-color-success)}:host .progress-indicator.error{--ix-progress-indicator-color:var(--theme-color-alarm)}:host .progress-indicator.info{--ix-progress-indicator-color:var(--theme-color-info)}:host .progress-indicator.warning{--ix-progress-indicator-color:var(--theme-color-warning)}:host .progress-indicator.paused{--ix-progress-indicator-color:var(--theme-color-neutral)}:host(.linear) .progress-indicator.xs{--ix-progress-indicator-height:0.125rem}:host(.linear) .progress-indicator.sm{--ix-progress-indicator-height:0.25rem}:host(.linear) .progress-indicator.md{--ix-progress-indicator-height:0.5rem}:host(.linear) .progress-indicator.lg{--ix-progress-indicator-height:1rem}:host(.linear) .progress-indicator.xl{--ix-progress-indicator-height:1.5rem}:host(.linear) .linear-progress-container{width:100%;height:var(--ix-progress-indicator-height);background-color:var(--theme-color-component-4);border-radius:2px;overflow:hidden}:host(.linear) .progress{width:100%;height:100%;position:relative}:host(.linear) .progress-bar{height:100%;background-color:var(--ix-progress-indicator-color);transition:width 0.3s ease}:host(.linear) .linear-slot{min-width:2.25rem}:host(.circular) .circular-progress-container{display:flex;align-items:center;width:100%;gap:0.25rem}:host(.circular) .slotted-container{width:100%;height:100%}:host(.circular) .slotted-container.slotted-container-inside{display:flex;align-items:center;justify-content:center;width:100%;height:100%}";
+
+const ProgressIndicator = /*@__PURE__*/ proxyCustomElement(class ProgressIndicator extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * The type of progress indicator to use.
+         */
+        this.type = 'linear';
+        /**
+         * The size of the progress indicator.
+         */
+        this.size = 'md';
+        /**
+         * The value of the progress indicator.
+         */
+        this.value = 0;
+        /**
+         * The minimum value of the progress indicator.
+         */
+        this.min = 0;
+        /**
+         * The maximum value of the progress indicator.
+         */
+        this.max = 100;
+        /**
+         * The state of the progress indicator.
+         * This is used to indicate the current state of the progress indicator.
+         */
+        this.status = 'default';
+        /**
+         * The text alignment for the helper text.
+         * Can be 'left', 'center', or 'right'.
+         */
+        this.textAlignment = 'left';
+        /**
+         * Show the helper text as a tooltip
+         */
+        this.showTextAsTooltip = false;
+    }
+    getHelperText() {
+        let icon = null;
+        switch (this.status) {
+            case 'error':
+                icon = iconError;
+                break;
+            case 'info':
+                icon = iconInfo;
+                break;
+            case 'warning':
+                icon = iconWarning;
+                break;
+            case 'success':
+                icon = iconSuccess;
+                break;
+            case 'paused':
+                icon = iconCirclePause;
+                break;
+            default:
+                icon = null;
+        }
+        if (!this.helperText) {
+            return h("slot", { name: "helper-text" });
+        }
+        return (h("div", { class: {
+                'helper-text': true,
+                [this.status]: true,
+                'text-left': this.textAlignment === 'left',
+                'text-center': this.textAlignment === 'center',
+                'text-right': this.textAlignment === 'right',
+            } }, icon && h("ix-icon", { name: icon, size: "16" }), h("div", { class: "text" }, this.helperText), h("slot", { name: "helper-text" })));
+    }
+    render() {
+        const normalizedValue = ((this.value - this.min) / (this.max - this.min)) * 100;
+        const clampedValue = Math.max(0, Math.min(normalizedValue, 100));
+        return (h(Host, { key: 'cc4c823745da737d65f73c5b5525a58c634ded43', class: {
+                linear: this.type === 'linear',
+                circular: this.type === 'circular',
+            }, tabIndex: -1 }, h("div", { key: 'aa5c1b618b24bccd01611fcd2cb99cf9d496e94b', class: {
+                'progress-indicator': true,
+                [this.size]: true,
+                [this.status]: true,
+            } }, this.label && (h("ix-typography", { key: 'dd49d159c46f555a5e3385c361604d500477b9ba', format: "label", textColor: this.status === 'error' ? 'alarm' : 'soft', class: 'label' }, this.label)), h("div", { key: '67f62d530de5dcc02f274aab3ddde419d56d383c', class: "progress-container" }, this.type === 'linear' ? (h(Fragment, null, h(LinearBar, { value: clampedValue }), h("div", { class: "linear-slot" }, h("slot", null)))) : (h(CircularProgress, { value: clampedValue, size: this.size }, h("slot", null)))), this.showTextAsTooltip === true && this.helperText ? (h("ix-tooltip", { for: this.hostElement, showDelay: 500, placement: "bottom" }, this.getHelperText())) : (this.getHelperText()))));
+    }
+    get hostElement() { return this; }
+    static get style() { return progressIndicatorCss; }
+}, [1, "ix-progress-indicator", {
+        "type": [1],
+        "size": [1],
+        "value": [2],
+        "min": [2],
+        "max": [2],
+        "status": [1],
+        "label": [1],
+        "helperText": [1, "helper-text"],
+        "textAlignment": [1, "text-alignment"],
+        "showTextAsTooltip": [4, "show-text-as-tooltip"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-progress-indicator", "ix-tooltip", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-progress-indicator":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ProgressIndicator);
+            }
+            break;
+        case "ix-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxProgressIndicator = ProgressIndicator;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxProgressIndicator, defineCustomElement };
+//# sourceMappingURL=ix-progress-indicator.js.map
+
+//# sourceMappingURL=ix-progress-indicator.js.map

package/components/ix-progress-indicator.js.map

@@ -0,0 +1 @@
+{"file":"ix-progress-indicator.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-indicator/linear.tsx","src/components/progress-indicator/circular.tsx","src/components/progress-indicator/progress-indicator.scss?tag=ix-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h } from '@stencil/core';\n\nexport function LinearBar({\n  value,\n}: Readonly<{\n  value: number;\n}>) {\n  return (\n    <div class=\"linear-progress-container\">\n      <div\n        class=\"progress\"\n        role=\"progressbar\"\n        aria-valuenow={value}\n        aria-valuemin={0}\n        aria-valuemax={100}\n      >\n        <div\n          class={{\n            'progress-bar': true,\n          }}\n          style={{ width: `${value}%` }}\n          data-value={value}\n        ></div>\n      </div>\n    </div>\n  );\n}\n","/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { h, type FunctionalComponent } from '@stencil/core';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\nfunction getCircularSize(size: ProgressIndicatorSize) {\n  switch (size) {\n    case 'xs':\n      return 16;\n    case 'sm':\n      return 24;\n    case 'md':\n      return 32;\n    case 'lg':\n      return 48;\n    case 'xl':\n      return 64;\n    default:\n      return 32;\n  }\n}\n\nexport type CircularProgressProps = {\n  value: number;\n  size: ProgressIndicatorSize;\n};\n\nexport const CircularProgress: FunctionalComponent<CircularProgressProps> = (\n  props: Readonly<CircularProgressProps>,\n  children\n) => {\n  const { value, size } = props;\n  const sizeInPixel = getCircularSize(size);\n  const radius = sizeInPixel / 2;\n  const circumference = 2 * Math.PI * radius;\n  const percentage = Math.round(circumference * ((100 - value) / 100));\n\n  const slotInsideCircular = size === 'lg' || size === 'xl';\n\n  return (\n    <div class=\"circular-progress-container\">\n      <svg\n        width={sizeInPixel}\n        height={sizeInPixel}\n        viewBox={`-${sizeInPixel * 0.125} -${sizeInPixel * 0.125} ${\n          sizeInPixel * 1.25\n        } ${sizeInPixel * 1.25}`}\n        version=\"1.1\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={{ transform: 'rotate(-90deg)' }}\n      >\n        <circle\n          r={radius}\n          cx={radius}\n          cy={radius}\n          fill=\"transparent\"\n          stroke=\"var(--theme-color-component-4)\"\n          stroke-width={`3px`}\n        ></circle>\n        {percentage > 0 && (\n          <circle\n            r={radius}\n            cx={radius}\n            cy={radius}\n            stroke=\"var(--ix-progress-indicator-color)\"\n            stroke-width=\"3px\"\n            stroke-linecap=\"round\"\n            stroke-dashoffset={`${percentage}px`}\n            fill=\"transparent\"\n            stroke-dasharray={`${circumference}px`}\n          ></circle>\n        )}\n        <foreignObject\n          x={`0px`}\n          y={`0px`}\n          width={`${sizeInPixel}px`}\n          height={`${sizeInPixel}px`}\n          style={{\n            transform: `rotate(90deg) translate(0px, -${sizeInPixel}px)`,\n          }}\n        >\n          {slotInsideCircular && (\n            <div class=\"slotted-container slotted-container-inside\">\n              {children}\n            </div>\n          )}\n        </foreignObject>\n      </svg>\n      {!slotInsideCircular && <div class=\"slotted-container\">{children}</div>}\n    </div>\n  );\n};\n","/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@use './linear' as linear;\n@use './circular' as circular;\n\n:host {\n  display: block;\n  position: relative;\n  width: 24rem;\n  height: fit-content;\n\n  .progress-container {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    flex-wrap: nowrap;\n  }\n\n  .label {\n    margin: 0.25rem 0px;\n  }\n\n  .helper-text {\n    display: flex;\n    align-items: flex-start;\n    margin: 0.25rem 0px;\n    gap: 0.25rem;\n\n    ix-icon {\n      margin: 0.125rem;\n    }\n\n    &.success {\n      ix-icon {\n        color: var(--theme-color-success);\n      }\n    }\n\n    &.error {\n      color: var(--theme-color-alarm-text);\n\n      ix-icon {\n        color: var(--theme-color-alarm);\n      }\n    }\n\n    &.info {\n      ix-icon {\n        color: var(--theme-color-info);\n      }\n    }\n\n    &.warning {\n      ix-icon {\n        color: var(--theme-color-warning);\n      }\n    }\n\n    &.paused {\n      ix-icon {\n        color: var(--theme-color-neutral);\n      }\n    }\n\n    &.text-left {\n      justify-content: flex-start;\n    }\n\n    &.text-right {\n      justify-content: flex-end;\n    }\n\n    &.text-center {\n      justify-content: center;\n    }\n  }\n\n  .progress-indicator {\n    --ix-progress-indicator-color: var(--theme-color-success);\n\n    height: 100%;\n\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n\n    &.success {\n      --ix-progress-indicator-color: var(--theme-color-success);\n    }\n\n    &.error {\n      --ix-progress-indicator-color: var(--theme-color-alarm);\n    }\n\n    &.info {\n      --ix-progress-indicator-color: var(--theme-color-info);\n    }\n\n    &.warning {\n      --ix-progress-indicator-color: var(--theme-color-warning);\n    }\n\n    &.paused {\n      --ix-progress-indicator-color: var(--theme-color-neutral);\n    }\n  }\n}\n\n:host(.linear) {\n  .progress-indicator {\n    &.xs {\n      --ix-progress-indicator-height: 0.125rem;\n    }\n\n    &.sm {\n      --ix-progress-indicator-height: 0.25rem;\n    }\n\n    &.md {\n      --ix-progress-indicator-height: 0.5rem;\n    }\n\n    &.lg {\n      --ix-progress-indicator-height: 1rem;\n    }\n\n    &.xl {\n      --ix-progress-indicator-height: 1.5rem;\n    }\n  }\n\n  @include linear.linear;\n\n  .linear-slot {\n    min-width: 2.25rem;\n  }\n}\n\n:host(.circular) {\n  @include circular.circular;\n}\n","/*\n * SPDX-FileCopyrightText: 2025 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Component, Element, Fragment, Host, Prop, h } from '@stencil/core';\nimport { LinearBar } from './linear';\nimport {\n  iconCirclePause,\n  iconError,\n  iconInfo,\n  iconSuccess,\n  iconWarning,\n} from '@siemens/ix-icons/icons';\nimport { CircularProgress } from './circular';\nimport type { ProgressIndicatorSize } from './progress-indicator.types';\n\n/**\n * @since 3.2.0\n */\n@Component({\n  tag: 'ix-progress-indicator',\n  styleUrl: 'progress-indicator.scss',\n  shadow: true,\n})\nexport class ProgressIndicator {\n  @Element() hostElement!: HTMLIxProgressIndicatorElement;\n\n  /**\n   * The type of progress indicator to use.\n   */\n  @Prop() type: 'linear' | 'circular' = 'linear';\n\n  /**\n   * The size of the progress indicator.\n   */\n  @Prop() size: ProgressIndicatorSize = 'md';\n\n  /**\n   * The value of the progress indicator.\n   */\n  @Prop() value: number = 0;\n\n  /**\n   * The minimum value of the progress indicator.\n   */\n  @Prop() min: number = 0;\n\n  /**\n   * The maximum value of the progress indicator.\n   */\n  @Prop() max: number = 100;\n\n  /**\n   * The state of the progress indicator.\n   * This is used to indicate the current state of the progress indicator.\n   */\n  @Prop() status:\n    | 'default'\n    | 'success'\n    | 'error'\n    | 'info'\n    | 'warning'\n    | 'paused' = 'default';\n\n  /**\n   * The label for the progress indicator.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The helper text for the progress indicator.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The text alignment for the helper text.\n   * Can be 'left', 'center', or 'right'.\n   */\n  @Prop() textAlignment: 'left' | 'center' | 'right' = 'left';\n\n  /**\n   * Show the helper text as a tooltip\n   */\n  @Prop() showTextAsTooltip: boolean = false;\n\n  private getHelperText() {\n    let icon: string | null = null;\n\n    switch (this.status) {\n      case 'error':\n        icon = iconError;\n        break;\n      case 'info':\n        icon = iconInfo;\n        break;\n      case 'warning':\n        icon = iconWarning;\n        break;\n      case 'success':\n        icon = iconSuccess;\n        break;\n      case 'paused':\n        icon = iconCirclePause;\n        break;\n      default:\n        icon = null;\n    }\n\n    if (!this.helperText) {\n      return <slot name=\"helper-text\"></slot>;\n    }\n\n    return (\n      <div\n        class={{\n          'helper-text': true,\n          [this.status]: true,\n          'text-left': this.textAlignment === 'left',\n          'text-center': this.textAlignment === 'center',\n          'text-right': this.textAlignment === 'right',\n        }}\n      >\n        {icon && <ix-icon name={icon} size=\"16\"></ix-icon>}\n        <div class=\"text\">{this.helperText}</div>\n        <slot name=\"helper-text\"></slot>\n      </div>\n    );\n  }\n\n  render() {\n    const normalizedValue =\n      ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    const clampedValue = Math.max(0, Math.min(normalizedValue, 100));\n\n    return (\n      <Host\n        class={{\n          linear: this.type === 'linear',\n          circular: this.type === 'circular',\n        }}\n        tabIndex={-1}\n      >\n        <div\n          class={{\n            'progress-indicator': true,\n            [this.size]: true,\n            [this.status]: true,\n          }}\n        >\n          {this.label && (\n            <ix-typography\n              format=\"label\"\n              textColor={this.status === 'error' ? 'alarm' : 'soft'}\n              class={'label'}\n            >\n              {this.label}\n            </ix-typography>\n          )}\n\n          <div class=\"progress-container\">\n            {this.type === 'linear' ? (\n              <Fragment>\n                <LinearBar value={clampedValue}></LinearBar>\n                <div class=\"linear-slot\">\n                  <slot></slot>\n                </div>\n              </Fragment>\n            ) : (\n              <CircularProgress value={clampedValue} size={this.size}>\n                <slot></slot>\n              </CircularProgress>\n            )}\n          </div>\n          {this.showTextAsTooltip === true && this.helperText ? (\n            <ix-tooltip\n              for={this.hostElement}\n              showDelay={500}\n              placement=\"bottom\"\n            >\n              {this.getHelperText()}\n            </ix-tooltip>\n          ) : (\n            this.getHelperText()\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-push-card.d.ts

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

package/components/ix-push-card.js

@@ -0,0 +1,82 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-BuJ6BWIi.js';
+import { d as defineCustomElement$6 } from './p-tH4n038Z.js';
+import { d as defineCustomElement$5 } from './p-BP-8cvOJ.js';
+import { d as defineCustomElement$4 } from './p-B3duqvjW.js';
+import { d as defineCustomElement$3 } from './p-G0biE2Kx.js';
+import { d as defineCustomElement$2 } from './p-DyMgW0fR.js';
+
+const pushCardCss = ":host{display:block;position:relative}:host ix-card{cursor:default}:host ix-card-accordion{cursor:pointer}:host .icon{height:2.5rem;width:2.5rem}:host .notification{font-size:40px}:host ix-card-content{height:11rem}";
+
+const PushCard = /*@__PURE__*/ proxyCustomElement(class PushCard extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /**
+         * Card variant
+         */
+        this.variant = 'outline';
+        /**
+         * Collapse the card
+         */
+        this.collapse = true;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: 'bf65467fcb8c46c5c28ca769becf1894e863bc21' }, h("ix-card", { key: '4ab2834af82584ade5c817264fa1f0158c7a7ffe', variant: this.variant }, h("ix-card-content", { key: '8490ac958852a9c8658194eb2f425c52fb067e0a' }, h("ix-card-title", { key: '0093f02be724a2933a05d11af61601765ca9565b' }, this.icon ? (h("ix-icon", { class: 'icon', name: this.icon, size: "32" })) : null, h("span", { key: '76a1da65e71606c836ba199de2d180d8d9b21695', class: 'notification' }, (_a = this.notification) !== null && _a !== void 0 ? _a : 0), h("slot", { key: 'ad9a4fe6a866f3d58fb51ffd5c4824185dd8f474', name: "title-action" })), h("ix-typography", { key: '5fd43752ce21b27fc89392db9925b09378fdd0c9', format: "h4" }, this.heading), h("ix-typography", { key: '1ca4ff340ab8420892521ffd056933f2198d9474' }, this.subheading)), h("ix-card-accordion", { key: '938b5f0882878e7dbebe22cc025fa2ce6a4ad701', collapse: this.collapse }, h("slot", { key: '349bb34de52513c0564cf1025679a10035c9343a' })))));
+    }
+    static get style() { return pushCardCss; }
+}, [1, "ix-push-card", {
+        "icon": [1],
+        "notification": [1],
+        "heading": [1],
+        "subheading": [1],
+        "variant": [1],
+        "collapse": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ix-push-card", "ix-card", "ix-card-accordion", "ix-card-content", "ix-card-title", "ix-typography"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ix-push-card":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PushCard);
+            }
+            break;
+        case "ix-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "ix-card-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "ix-card-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "ix-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "ix-typography":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const IxPushCard = PushCard;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxPushCard, defineCustomElement };
+//# sourceMappingURL=ix-push-card.js.map
+
+//# sourceMappingURL=ix-push-card.js.map

package/components/ix-push-card.js.map

@@ -0,0 +1 @@
+{"file":"ix-push-card.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,yNAAyN;;MCiBhO,QAAQ,iBAAAA,kBAAA,CAAA,MAAA,QAAA,SAAAC,CAAA,CAAA;AALrB,IAAA,WAAA,GAAA;;;;AA0BE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAoB,SAAS;AAE5C;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AAwBjC;IAtBC,MAAM,GAAA;;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,OAAO,EAAE,IAAI,CAAC,OAAO,EAAA,EAC5B,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACG,IAAI,CAAC,IAAI,IACR,CAAS,CAAA,SAAA,EAAA,EAAA,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,EAAA,CAAW,IAC3D,IAAI,EACR,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,cAAc,EAAG,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,YAAY,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,CAAC,CAAQ,EAC5D,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,CAAQ,CACnB,EAChB,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAe,MAAM,EAAC,IAAI,IAAE,IAAI,CAAC,OAAO,CAAiB,EACzD,CAAA,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAgB,IAAI,CAAC,UAAU,CAAiB,CAChC,EAClB,CAAA,CAAA,mBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAmB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACK,CACZ,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/push-card/push-card.scss?tag=ix-push-card&encapsulation=shadow","src/components/push-card/push-card.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n  position: relative;\n\n  ix-card {\n    cursor: default;\n  }\n\n  ix-card-accordion {\n    cursor: pointer;\n  }\n\n  .icon {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n\n  .notification {\n    font-size: 40px;\n  }\n\n  ix-card-content {\n    height: 11rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\nimport type { PushCardVariant } from './push-card.types';\n\n@Component({\n  tag: 'ix-push-card',\n  styleUrl: 'push-card.scss',\n  shadow: true,\n})\nexport class PushCard {\n  /**\n   * Card icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Card KPI value\n   */\n  @Prop() notification?: string;\n\n  /**\n   * Card heading\n   */\n  @Prop() heading?: string;\n\n  /**\n   * Card subheading\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: PushCardVariant = 'outline';\n\n  /**\n   * Collapse the card\n   */\n  @Prop() collapse: boolean = true;\n\n  render() {\n    return (\n      <Host>\n        <ix-card variant={this.variant}>\n          <ix-card-content>\n            <ix-card-title>\n              {this.icon ? (\n                <ix-icon class={'icon'} name={this.icon} size=\"32\"></ix-icon>\n              ) : null}\n              <span class={'notification'}>{this.notification ?? 0}</span>\n              <slot name=\"title-action\"></slot>\n            </ix-card-title>\n            <ix-typography format=\"h4\">{this.heading}</ix-typography>\n            <ix-typography>{this.subheading}</ix-typography>\n          </ix-card-content>\n          <ix-card-accordion collapse={this.collapse}>\n            <slot></slot>\n          </ix-card-accordion>\n        </ix-card>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-radio-group.d.ts

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