@siemens/ix 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/esm/ix-button.entry.js

@@ -0,0 +1,103 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-DtF9fwpD.js';
+import { B as BaseButton } from './base-button-IZFEmS6o.js';
+
+const buttonCss = ":host{display:inline-block;height:2rem;vertical-align:middle;cursor:pointer;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:700;line-height:1.429em;color:var(--theme-color-std-text)}: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}:host button{all:unset;box-sizing:border-box;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;align-items:center;justify-content:center;width:100%;height:100%;padding:0 0.5rem}:host ix-spinner{margin-right:0.25rem}:host ix-icon{margin-right:0.25rem}:host .content{display:inline-block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .content-start{width:100%}:host .icon{pointer-events:none}:host(.disabled){cursor:default}:host .btn-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-danger,:host .btn-danger.focus,:host .btn-danger:focus-visible{background-color:var(--theme-btn-danger--background);color:var(--theme-btn-danger--color);--ix-button-color:var(--theme-btn-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-danger--border-color);border-style:solid}:host .btn-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger.selected:not(.disabled):not(:disabled):active,:host .btn-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-danger--border-color--hover);background-color:var(--theme-btn-danger--background--hover);color:var(--theme-btn-danger--color--hover)}:host .btn-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-danger:not(.disabled):not(:disabled):active,:host .btn-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-danger--border-color--active);background-color:var(--theme-btn-danger--background--active);color:var(--theme-btn-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-danger.disabled,:host(.disabled) .btn-danger:disabled{pointer-events:none;border-color:var(--theme-btn-danger--border-color--disabled);background-color:var(--theme-btn-danger--background--disabled);color:var(--theme-btn-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-danger--color--disabled)}:host .btn-outline-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-danger,:host .btn-outline-danger.focus,:host .btn-outline-danger:focus-visible{background-color:var(--theme-btn-outline-danger--background);color:var(--theme-btn-outline-danger--color);--ix-button-color:var(--theme-btn-outline-danger--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-danger--border-color);border-style:solid}:host .btn-outline-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger.selected:not(.disabled):not(:disabled):active,:host .btn-outline-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-danger--border-color--hover);background-color:var(--theme-btn-outline-danger--background--hover);color:var(--theme-btn-outline-danger--color--hover)}:host .btn-outline-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-danger:not(.disabled):not(:disabled):active,:host .btn-outline-danger:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-danger--border-color--active);background-color:var(--theme-btn-outline-danger--background--active);color:var(--theme-btn-outline-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-danger.disabled,:host(.disabled) .btn-outline-danger:disabled{pointer-events:none;border-color:var(--theme-btn-outline-danger--border-color--disabled);background-color:var(--theme-btn-outline-danger--background--disabled);color:var(--theme-btn-outline-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-danger--color--disabled)}:host .btn-invisible-danger{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-danger,:host .btn-invisible-danger.focus,:host .btn-invisible-danger:focus-visible{background-color:var(--theme-btn-invisible-danger--background);color:var(--theme-btn-invisible-danger--color);--ix-button-color:var(--theme-btn-invisible-danger--color);border-color:transparent}:host .btn-invisible-danger:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-danger.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-danger.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-danger--background--hover);color:var(--theme-btn-invisible-danger--color--hover)}:host .btn-invisible-danger:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-danger:not(.disabled):not(:disabled):active,:host .btn-invisible-danger:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-danger--background--active);color:var(--theme-btn-invisible-danger--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-danger.disabled,:host(.disabled) .btn-invisible-danger:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-danger--background--disabled);color:var(--theme-btn-invisible-danger--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-danger--color--disabled)}:host .btn-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-primary,:host .btn-primary.focus,:host .btn-primary:focus-visible{background-color:var(--theme-btn-primary--background);color:var(--theme-btn-primary--color);--ix-button-color:var(--theme-btn-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-primary--border-color);border-style:solid}:host .btn-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary.selected:not(.disabled):not(:disabled):active,:host .btn-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-primary--border-color--hover);background-color:var(--theme-btn-primary--background--hover);color:var(--theme-btn-primary--color--hover)}:host .btn-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-primary:not(.disabled):not(:disabled):active,:host .btn-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-primary--border-color--active);background-color:var(--theme-btn-primary--background--active);color:var(--theme-btn-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-primary.disabled,:host(.disabled) .btn-primary:disabled{pointer-events:none;border-color:var(--theme-btn-primary--border-color--disabled);background-color:var(--theme-btn-primary--background--disabled);color:var(--theme-btn-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-primary--color--disabled)}:host .btn-outline-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-primary,:host .btn-outline-primary.focus,:host .btn-outline-primary:focus-visible{background-color:var(--theme-btn-outline-primary--background);color:var(--theme-btn-outline-primary--color);--ix-button-color:var(--theme-btn-outline-primary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-primary--border-color);border-style:solid}:host .btn-outline-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-primary--border-color--hover);background-color:var(--theme-btn-outline-primary--background--hover);color:var(--theme-btn-outline-primary--color--hover)}:host .btn-outline-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-primary:not(.disabled):not(:disabled):active,:host .btn-outline-primary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-primary--border-color--active);background-color:var(--theme-btn-outline-primary--background--active);color:var(--theme-btn-outline-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-primary.disabled,:host(.disabled) .btn-outline-primary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-primary--border-color--disabled);background-color:var(--theme-btn-outline-primary--background--disabled);color:var(--theme-btn-outline-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-primary--color--disabled)}:host .btn-invisible-primary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-primary,:host .btn-invisible-primary.focus,:host .btn-invisible-primary:focus-visible{background-color:var(--theme-btn-invisible-primary--background);color:var(--theme-btn-invisible-primary--color);--ix-button-color:var(--theme-btn-invisible-primary--color);border-color:transparent}:host .btn-invisible-primary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-primary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-primary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-primary--background--hover);color:var(--theme-btn-invisible-primary--color--hover)}:host .btn-invisible-primary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-primary:not(.disabled):not(:disabled):active,:host .btn-invisible-primary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-primary--background--active);color:var(--theme-btn-invisible-primary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-primary.disabled,:host(.disabled) .btn-invisible-primary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-primary--background--disabled);color:var(--theme-btn-invisible-primary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-primary--color--disabled)}:host .btn-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-secondary,:host .btn-secondary.focus,:host .btn-secondary:focus-visible{background-color:var(--theme-btn-secondary--background);color:var(--theme-btn-secondary--color);--ix-button-color:var(--theme-btn-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-secondary--border-color);border-style:solid}:host .btn-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-secondary--border-color--hover);background-color:var(--theme-btn-secondary--background--hover);color:var(--theme-btn-secondary--color--hover)}:host .btn-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-secondary:not(.disabled):not(:disabled):active,:host .btn-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-secondary--border-color--active);background-color:var(--theme-btn-secondary--background--active);color:var(--theme-btn-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-secondary.disabled,:host(.disabled) .btn-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-secondary--border-color--disabled);background-color:var(--theme-btn-secondary--background--disabled);color:var(--theme-btn-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-secondary--color--disabled)}:host .btn-outline-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-outline-secondary,:host .btn-outline-secondary.focus,:host .btn-outline-secondary:focus-visible{background-color:var(--theme-btn-outline-secondary--background);color:var(--theme-btn-outline-secondary--color);--ix-button-color:var(--theme-btn-outline-secondary--color);border-width:var(--theme-btn--border-thickness);border-color:var(--theme-btn-outline-secondary--border-color);border-style:solid}:host .btn-outline-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-outline-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-outline-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):hover{border-color:var(--theme-btn-outline-secondary--border-color--hover);background-color:var(--theme-btn-outline-secondary--background--hover);color:var(--theme-btn-outline-secondary--color--hover)}:host .btn-outline-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-outline-secondary:not(.disabled):not(:disabled):active,:host .btn-outline-secondary:not(.disabled):not(:disabled).active{border-color:var(--theme-btn-outline-secondary--border-color--active);background-color:var(--theme-btn-outline-secondary--background--active);color:var(--theme-btn-outline-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-outline-secondary.disabled,:host(.disabled) .btn-outline-secondary:disabled{pointer-events:none;border-color:var(--theme-btn-outline-secondary--border-color--disabled);background-color:var(--theme-btn-outline-secondary--background--disabled);color:var(--theme-btn-outline-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-outline-secondary--color--disabled)}:host .btn-invisible-secondary{border-radius:var(--theme-btn--border-radius)}:host .btn-invisible-secondary,:host .btn-invisible-secondary.focus,:host .btn-invisible-secondary:focus-visible{background-color:var(--theme-btn-invisible-secondary--background);color:var(--theme-btn-invisible-secondary--color);--ix-button-color:var(--theme-btn-invisible-secondary--color);border-color:transparent}:host .btn-invisible-secondary:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .btn-invisible-secondary.selected{background-color:var(--theme-color-ghost--selected);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):hover{background-color:var(--theme-color-ghost--selected-hover);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary.selected:not(.disabled):not(:disabled).active{background-color:var(--theme-color-ghost--selected-active);color:var(--theme-color-dynamic)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):hover{background-color:var(--theme-btn-invisible-secondary--background--hover);color:var(--theme-btn-invisible-secondary--color--hover)}:host .btn-invisible-secondary:not(.disabled):not(:disabled){cursor:pointer}:host .btn-invisible-secondary:not(.disabled):not(:disabled):active,:host .btn-invisible-secondary:not(.disabled):not(:disabled).active{background-color:var(--theme-btn-invisible-secondary--background--active);color:var(--theme-btn-invisible-secondary--color--active)}:host(.disabled){pointer-events:none}:host(.disabled) .btn-invisible-secondary.disabled,:host(.disabled) .btn-invisible-secondary:disabled{pointer-events:none;background-color:var(--theme-btn-invisible-secondary--background--disabled);color:var(--theme-btn-invisible-secondary--color--disabled);opacity:1;--ix-button-color:var(--theme-btn-invisible-secondary--color--disabled)}:host{min-width:5rem}";
+
+const Button = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Button variant
+         * @since 2.3.0 - variant danger
+         */
+        this.variant = 'primary';
+        /**
+         * Outline button
+         */
+        this.outline = false;
+        /**
+         * Button with no background or outline
+         */
+        this.ghost = false;
+        /**
+         * Disable the button
+         */
+        this.disabled = false;
+        /**
+         * Type of the button
+         */
+        this.type = 'button';
+        /**
+         * Loading button
+         *
+         * @since 2.0.0
+         */
+        this.loading = false;
+        /** @internal */
+        this.alignment = 'center';
+        /** @internal */
+        this.iconSize = '24';
+    }
+    handleClick(event) {
+        if (this.disabled || this.loading) {
+            event.stopPropagation();
+            event.preventDefault();
+        }
+    }
+    componentDidLoad() {
+        if (this.type === 'submit') {
+            const submitButton = document.createElement('button');
+            submitButton.style.display = 'none';
+            submitButton.type = 'submit';
+            submitButton.tabIndex = -1;
+            this.hostElement.appendChild(submitButton);
+            this.submitButtonElement = submitButton;
+        }
+    }
+    componentDidRender() {
+        if (this.submitButtonElement &&
+            !this.hostElement.contains(this.submitButtonElement)) {
+            this.hostElement.appendChild(this.submitButtonElement);
+        }
+    }
+    dispatchFormEvents() {
+        if (this.type === 'submit' &&
+            this.submitButtonElement &&
+            !this.disabled &&
+            !this.loading) {
+            this.submitButtonElement.click();
+        }
+    }
+    setFocus() {
+        var _a;
+        (_a = this.hostElement.shadowRoot.querySelector('button')) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    render() {
+        const baseButtonProps = {
+            variant: this.variant,
+            outline: this.outline,
+            ghost: this.ghost,
+            iconOnly: false,
+            iconOval: false,
+            selected: false,
+            disabled: this.disabled || this.loading,
+            icon: this.icon,
+            iconSize: this.iconSize,
+            loading: this.loading,
+            onClick: () => this.dispatchFormEvents(),
+            type: this.type,
+            alignment: this.alignment,
+            tabIndex: this.hostElement.tabIndex,
+        };
+        return (h(Host, { key: '0d7e9fe309d1c2fd320f19cafa0e15bcefafe346', tabindex: this.disabled ? -1 : 0, class: {
+                disabled: this.disabled || this.loading,
+            }, onFocus: () => this.setFocus() }, h(BaseButton, Object.assign({ key: '36c8821e58f2c9beee5d68b842636e629d728687' }, baseButtonProps), h("slot", { key: 'e7ef0928f22720a705f3223fc2495bd90de5767c' }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Button.style = buttonCss;
+
+export { Button as ix_button };
+//# sourceMappingURL=ix-button.entry.js.map
+
+//# sourceMappingURL=ix-button.entry.js.map

package/dist/esm/ix-button.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-button.entry.js","sources":["src/components/button/button.scss?tag=ix-button&encapsulation=shadow","src/components/button/button.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@import './button-mixin';\n\n@include btn;\n$button-categories: (danger, primary, secondary);\n@each $category in $button-categories {\n  @include btn-variant($category);\n  @include btn-variant('outline-#{$category}');\n  @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n  min-width: 5rem;\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, Element, h, Host, Listen, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\nimport { IxButtonComponent } from './button-component';\n\nexport type ButtonVariant = 'danger' | 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button implements IxButtonComponent {\n  /**\n   * Button variant\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement!: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement?: HTMLButtonElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled || this.loading) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  componentDidRender() {\n    if (\n      this.submitButtonElement &&\n      !this.hostElement.contains(this.submitButtonElement)\n    ) {\n      this.hostElement.appendChild(this.submitButtonElement);\n    }\n  }\n\n  dispatchFormEvents() {\n    if (\n      this.type === 'submit' &&\n      this.submitButtonElement &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  setFocus() {\n    this.hostElement.shadowRoot!.querySelector('button')?.focus();\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n      tabIndex: this.hostElement.tabIndex,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? -1 : 0}\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n        onFocus={() => this.setFocus()}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,SAAS,GAAG,myrBAAmyrB;;MCoBxyrB,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;AAGG;AACK,QAAA,IAAO,CAAA,OAAA,GAAkB,SAAS;AAE1C;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEvB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAErB;;AAEG;AACsB,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAEzC;;AAEG;AACK,QAAA,IAAI,CAAA,IAAA,GAAwB,QAAQ;AAE5C;;;;AAIG;AACK,QAAA,IAAO,CAAA,OAAA,GAAY,KAAK;;AAQxB,QAAA,IAAS,CAAA,SAAA,GAAuB,QAAQ;;AAGxC,QAAA,IAAQ,CAAA,QAAA,GAAuB,IAAI;AAqF5C;AA3EC,IAAA,WAAW,CAAC,KAAY,EAAA;QACtB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE;YACjC,KAAK,CAAC,eAAe,EAAE;YACvB,KAAK,CAAC,cAAc,EAAE;;;IAI1B,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE;YAC1B,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AACrD,YAAA,YAAY,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM;AACnC,YAAA,YAAY,CAAC,IAAI,GAAG,QAAQ;AAC5B,YAAA,YAAY,CAAC,QAAQ,GAAG,EAAE;AAC1B,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,YAAY,CAAC;AAE1C,YAAA,IAAI,CAAC,mBAAmB,GAAG,YAAY;;;IAI3C,kBAAkB,GAAA;QAChB,IACE,IAAI,CAAC,mBAAmB;YACxB,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,EACpD;YACA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC;;;IAI1D,kBAAkB,GAAA;AAChB,QAAA,IACE,IAAI,CAAC,IAAI,KAAK,QAAQ;AACtB,YAAA,IAAI,CAAC,mBAAmB;YACxB,CAAC,IAAI,CAAC,QAAQ;AACd,YAAA,CAAC,IAAI,CAAC,OAAO,EACb;AACA,YAAA,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE;;;IAIpC,QAAQ,GAAA;;AACN,QAAA,CAAA,EAAA,GAAA,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;IAG/D,MAAM,GAAA;AACJ,QAAA,MAAM,eAAe,GAAoB;YACvC,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YACvC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,OAAO,EAAE,IAAI,CAAC,OAAO;AACrB,YAAA,OAAO,EAAE,MAAM,IAAI,CAAC,kBAAkB,EAAE;YACxC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,SAAS;AACzB,YAAA,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,QAAQ;SACpC;QAED,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,EAAE,GAAG,CAAC,EAChC,KAAK,EAAE;AACL,gBAAA,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;AACxC,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAA,EAE9B,CAAC,CAAA,UAAU,qEAAK,eAAe,CAAA,EAC7B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACF,CACR;;;;;;;;"}

package/dist/esm/ix-card-accordion.ix-card-title.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-card-accordion.ix-card-title.entry.js","sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.tsx","src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","src/components/card-title/card-title.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@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: 2.5rem;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n\n    &:hover {\n      background: var(--theme-color-component-1--hover);\n    }\n\n    &:active {\n      background: var(--theme-color-component-1--active);\n    }\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: grid;\n    position: relative;\n    grid-template-rows: 0fr;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    max-height: 14.75rem;\n    opacity: 0;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    grid-template-rows: 14.75rem;\n    opacity: 1;\n  }\n\n  .expand-content-inner {\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n    height: calc(100% - 1rem);\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n","import { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse = false;\n\n  @Element() hostElement!: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  @Watch('collapse')\n  onInitialExpandChange() {\n    this.expandContent = !this.collapse;\n  }\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot!.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent!.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement\n          .shadowRoot!.querySelector('.expand-content')!\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  componentWillLoad() {\n    this.onInitialExpandChange();\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name={iconChevronRightSmall}\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class=\"expand-content-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-card-accordion_2.entry.js

@@ -0,0 +1,83 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DtF9fwpD.js';
+import { f as iconChevronRightSmall } from './index-CrTP-icT.js';
+
+const cardAccordionCss = ":host{display:flex;position:relative;flex-direction:column;width:100%;transition:var(--theme-default-time) ease-in-out}: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}:host .expand-action{all:unset;display:flex;position:relative;-webkit-appearance:button;-moz-appearance:button;appearance:button;height:2.5rem;width:100%;background-color:var(--theme-color-component-1);align-items:center;justify-content:flex-start}:host .expand-action:hover{background:var(--theme-color-component-1--hover)}:host .expand-action:active{background:var(--theme-color-component-1--active)}:host .expand-action:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-btn--focus--outline-offset)}:host .expand-action::before{content:\"\";position:absolute;width:100%;height:100%;background-color:var(--ix-card-background);z-index:-1}:host .expand-action:not(.show),:host .expand-action:not(.show)::before{border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}:host .expand-icon{margin-left:0.5rem;transition:var(--theme-default-time) transform ease-in-out}:host .expand-icon.show{transform:rotate(90deg)}:host .expand-content{display:grid;position:relative;grid-template-rows:0fr;transition:var(--theme-default-time) ease-in-out;width:100%;max-height:14.75rem;opacity:0;background-color:var(--theme-color-component-1)}:host .expand-content.show{grid-template-rows:14.75rem;opacity:1}:host .expand-content-inner{position:relative;height:100%;overflow:hidden}:host .expand-content.show .expand-content-body{display:none;overflow:hidden;color:var(--theme-color-std-text)}:host .expand-content.show .expand-content-body{display:block;overflow:auto;height:calc(100% - 1rem)}:host .expand-content-footer{display:block;position:relative;width:100%;height:1rem;margin-top:auto;margin-bottom:0px;background-color:var(--theme-color-component-1);border-bottom-left-radius:var(--theme-default-border-radius);border-bottom-right-radius:var(--theme-default-border-radius)}";
+
+let accordionControlId = 0;
+const getAriaControlsId = (prefix = 'expand-content') => {
+    return [prefix, accordionControlId++].join('-');
+};
+const CardAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordionExpand = createEvent(this, "accordionExpand", 7);
+        /**
+         * Collapse the card
+         * @since 2.1.0
+         */
+        this.collapse = false;
+        this.expandContent = false;
+    }
+    onInitialExpandChange() {
+        this.expandContent = !this.collapse;
+    }
+    get expandedContent() {
+        return this.hostElement.shadowRoot.querySelector('.expand-content');
+    }
+    onExpandActionClick(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.expandContent = !this.expandContent;
+        this.accordionExpand.emit({
+            expand: this.expandContent,
+            nativeEvent: event,
+        });
+        if (this.expandContent) {
+            this.scrollExpandedContentIntoView();
+        }
+    }
+    scrollExpandedContentIntoView() {
+        setTimeout(() => {
+            const rect = this.expandedContent.getBoundingClientRect();
+            if (rect.bottom > window.innerHeight) {
+                this.hostElement
+                    .shadowRoot.querySelector('.expand-content')
+                    .scrollIntoView(false);
+            }
+        }, 150);
+    }
+    componentWillLoad() {
+        this.onInitialExpandChange();
+    }
+    render() {
+        return (h(Host, { key: '491fb99db65dab3492d23e3122ca9da2c899b232', slot: "card-accordion" }, h("button", { key: 'b498d87343ed4e70ef4a094642fc4906b309f5b3', tabIndex: 0, class: { 'expand-action': true, show: this.expandContent }, onClick: (event) => this.onExpandActionClick(event), role: "button", type: "button", "aria-expanded": this.expandContent, "aria-controls": getAriaControlsId() }, h("ix-icon", { key: 'eb8b3af0c8ded220c6c8d62b3c9da45ba302c5d6', name: iconChevronRightSmall, class: {
+                'expand-icon': true,
+                show: this.expandContent,
+            } })), h("div", { key: '9b0b53385f7b0b7f3365c89e7134869990c6270a', class: {
+                'expand-content': true,
+                show: this.expandContent,
+            } }, h("div", { key: 'a79520b455e3d344aca02ca70a9b7ff3262c76f8', class: "expand-content-inner" }, h("div", { key: 'c0798bb66e28ca6e2a5d6ee38b21222677d5a09a', class: "expand-content-body" }, h("slot", { key: '01f775b08d53d8ea428b35d972d75af719006e8c' })), h("div", { key: 'df5f62b0667977076557472c5713e30a7840a1a4', class: "expand-content-footer" })))));
+    }
+    get hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "collapse": ["onInitialExpandChange"]
+    }; }
+};
+CardAccordion.style = cardAccordionCss;
+
+const cardTitleCss = ":host{display:flex;position:relative;flex-direction:row;align-items:center;margin-top:0.25rem;margin-bottom:0.25rem;gap:1rem;width:100%}:host .title-actions{display:flex;position:relative;flex-direction:row;gap:0.25rem;margin-left:auto;margin-right:0}";
+
+const CardHeader = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '0f4e8785e6861fa9151cece5946a7b33e85bd7fd' }, h("slot", { key: 'd8909ebe344940cda53d4076ccd1291eb1240f8b' }), h("div", { key: 'f87b52b2b467664d6e9d886d358b1c6b5403aae8', class: "title-actions" }, h("slot", { key: '9e45b897368e305f0ce1e66b47424360c44c148d', name: "title-actions" }))));
+    }
+};
+CardHeader.style = cardTitleCss;
+
+export { CardAccordion as ix_card_accordion, CardHeader as ix_card_title };
+//# sourceMappingURL=ix-card-accordion.ix-card-title.entry.js.map
+
+//# sourceMappingURL=ix-card-accordion_2.entry.js.map

package/dist/esm/ix-card-accordion_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"ix-card-accordion.ix-card-title.entry.js","mappings":"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","names":[],"sources":["src/components/card-accordion/card-accordion.scss?tag=ix-card-accordion&encapsulation=shadow","src/components/card-accordion/card-accordion.tsx","src/components/card-title/card-title.scss?tag=ix-card-title&encapsulation=shadow","src/components/card-title/card-title.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@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  transition: var(--theme-default-time) ease-in-out;\n\n  .expand-action {\n    all: unset;\n    display: flex;\n    position: relative;\n\n    appearance: button;\n\n    height: 2.5rem;\n    width: 100%;\n\n    background-color: var(--theme-color-component-1);\n    align-items: center;\n    justify-content: flex-start;\n\n    &:hover {\n      background: var(--theme-color-component-1--hover);\n    }\n\n    &:active {\n      background: var(--theme-color-component-1--active);\n    }\n\n    @include focus-visible {\n      outline: 1px solid var(--theme-color-focus-bdr);\n      outline-offset: var(--theme-btn--focus--outline-offset);\n    }\n  }\n\n  .expand-action::before {\n    content: '';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    background-color: var(--ix-card-background);\n    z-index: -1;\n  }\n\n  .expand-action:not(.show),\n  .expand-action:not(.show)::before {\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n\n  .expand-icon {\n    margin-left: 0.5rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .expand-icon.show {\n    transform: rotate(90deg);\n  }\n\n  .expand-content {\n    display: grid;\n    position: relative;\n    grid-template-rows: 0fr;\n    transition: var(--theme-default-time) ease-in-out;\n    width: 100%;\n    max-height: 14.75rem;\n    opacity: 0;\n    background-color: var(--theme-color-component-1);\n  }\n\n  .expand-content.show {\n    grid-template-rows: 14.75rem;\n    opacity: 1;\n  }\n\n  .expand-content-inner {\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n  }\n\n  .expand-content.show .expand-content-body {\n    display: none;\n    overflow: hidden;\n    color: var(--theme-color-std-text);\n  }\n\n  .expand-content.show .expand-content-body {\n    display: block;\n    overflow: auto;\n    height: calc(100% - 1rem);\n  }\n\n  .expand-content-footer {\n    display: block;\n    position: relative;\n    width: 100%;\n    height: 1rem;\n\n    margin-top: auto;\n    margin-bottom: 0px;\n\n    background-color: var(--theme-color-component-1);\n    border-bottom-left-radius: var(--theme-default-border-radius);\n    border-bottom-right-radius: var(--theme-default-border-radius);\n  }\n}\n","import { iconChevronRightSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\n\nlet accordionControlId = 0;\nconst getAriaControlsId = (prefix: string = 'expand-content') => {\n  return [prefix, accordionControlId++].join('-');\n};\n\nexport type CardAccordionExpandChangeEvent = {\n  expand: boolean;\n  nativeEvent: Event;\n};\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-accordion',\n  styleUrl: 'card-accordion.scss',\n  shadow: true,\n})\nexport class CardAccordion {\n  /**\n   * Collapse the card\n   * @since 2.1.0\n   */\n  @Prop() collapse = false;\n\n  @Element() hostElement!: HTMLIxCardAccordionElement;\n\n  /**\n   * @internal\n   */\n  @Event() accordionExpand!: EventEmitter<CardAccordionExpandChangeEvent>;\n\n  @State() expandContent = false;\n\n  @Watch('collapse')\n  onInitialExpandChange() {\n    this.expandContent = !this.collapse;\n  }\n\n  get expandedContent() {\n    return this.hostElement.shadowRoot!.querySelector('.expand-content');\n  }\n\n  onExpandActionClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.expandContent = !this.expandContent;\n    this.accordionExpand.emit({\n      expand: this.expandContent,\n      nativeEvent: event,\n    });\n\n    if (this.expandContent) {\n      this.scrollExpandedContentIntoView();\n    }\n  }\n\n  private scrollExpandedContentIntoView() {\n    setTimeout(() => {\n      const rect = this.expandedContent!.getBoundingClientRect();\n      if (rect.bottom > window.innerHeight) {\n        this.hostElement\n          .shadowRoot!.querySelector('.expand-content')!\n          .scrollIntoView(false);\n      }\n    }, 150);\n  }\n\n  componentWillLoad() {\n    this.onInitialExpandChange();\n  }\n\n  render() {\n    return (\n      <Host slot=\"card-accordion\">\n        <button\n          tabIndex={0}\n          class={{ 'expand-action': true, show: this.expandContent }}\n          onClick={(event) => this.onExpandActionClick(event)}\n          role=\"button\"\n          type=\"button\"\n          aria-expanded={this.expandContent}\n          aria-controls={getAriaControlsId()}\n        >\n          <ix-icon\n            name={iconChevronRightSmall}\n            class={{\n              'expand-icon': true,\n              show: this.expandContent,\n            }}\n          ></ix-icon>\n        </button>\n        <div\n          class={{\n            'expand-content': true,\n            show: this.expandContent,\n          }}\n        >\n          <div class=\"expand-content-inner\">\n            <div class=\"expand-content-body\">\n              <slot></slot>\n            </div>\n            <div class=\"expand-content-footer\"></div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n","@import 'common-variables';\n\n:host {\n  display: flex;\n  position: relative;\n  flex-direction: row;\n  align-items: center;\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n  gap: $default-space;\n\n  width: 100%;\n\n  .title-actions {\n    display: flex;\n    position: relative;\n    flex-direction: row;\n    gap: 0.25rem;\n    margin-left: auto;\n    margin-right: 0;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @slot title-actions - Place additional actions inside title\n *\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-title',\n  styleUrl: 'card-title.scss',\n  shadow: true,\n})\nexport class CardHeader {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n        <div class=\"title-actions\">\n          <slot name=\"title-actions\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ix-card-list.entry.js

@@ -0,0 +1,189 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-DtF9fwpD.js';
+import { c as createMutationObserver } from './mutation-observer-CX81WQtk.js';
+import { g as iconMoreMenu, h as iconChevronDown } from './index-CrTP-icT.js';
+
+const cardListCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;margin:0.5rem}: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}:host .CardList_Title{display:flex;position:relative;height:1.5rem;align-items:center;width:100%;margin-bottom:1rem}:host .CardList_Title__Label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .CardList__Title__Button{margin-right:1rem;transition:var(--theme-default-time) transform ease-in-out}:host .CardList__Title__Button__Collapsed{transform:rotate(-90deg)}:host .CardList__Title__Show__All{align-self:center;margin-left:auto;margin-right:0px;flex-shrink:0}:host .CardList__Content{display:flex;position:relative;height:calc(100% - 1.5rem);width:100%;gap:1.5rem;transition:var(--theme-default-time) ease-in-out;overflow:auto}:host .CardList__Content__Collapsed{min-height:0px;max-height:0px;overflow:hidden;opacity:0}:host .CardList__Style__Flexbox__Scroll{flex-wrap:wrap}:host .CardList__Style__Infinite__Scroll{flex-wrap:nowrap;-ms-overflow-style:none;scrollbar-width:none}:host .CardList__Style__Infinite__Scroll::-webkit-scrollbar{display:none}:host .CardList__Overflow{display:block;position:relative;height:100%;width:100%;pointer-events:all;-webkit-mask-image:var(--ix-card-list-overflow, none);mask-image:var(--ix-card-list-overflow, none)}:host .Show__All__Card{display:flex;position:relative;align-self:flex-start;justify-self:center;max-width:11.25rem;min-width:11.25rem;width:11.25rem;min-height:11.25rem;max-height:11.25rem;height:11.25rem;--ix-card-border-color:var(--theme-color-primary);color:var(--theme-color-primary)}:host .CardList__Style__Infinite__Scroll .Show__All__Card{margin-top:2.375rem}:host .CardList__Style__Flexbox__Scroll .Show__All__Card{margin-bottom:2.375rem}:host .Show__All__Card:hover{background-color:var(--theme-color-ghost--hover)}:host .Show__All__Card:active{background-color:var(--theme-color-ghost--active)}:host .Show__All__Card__Content{display:flex;justify-content:center;align-items:center;height:100%}:host .Show__All__Card__Icon{display:flex;position:absolute;height:4rem;width:4rem;justify-content:center;align-items:center}:host .Show__All__Card__Text{margin-bottom:0px;margin-top:auto}::slotted(.display-none){display:none !important}";
+
+function CardListTitle(props) {
+    if (!props.label) {
+        return null;
+    }
+    return (h("div", { class: "CardList_Title" }, h("ix-icon-button", { ghost: true, icon: iconChevronDown, onClick: props.onClick, iconColor: "color-primary", class: {
+            CardList__Title__Button: true,
+            CardList__Title__Button__Collapsed: props.isCollapsed,
+        } }), h("ix-typography", { class: "CardList_Title__Label", format: "body-lg" }, props.label), !props.hideShowAll && (h("ix-button", { class: "CardList__Title__Show__All", ghost: true, onClick: props.onShowAllClick }, h("span", null, props.showAllLabel), h("span", null, !isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null)))));
+}
+const CardList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.collapseChanged = createEvent(this, "collapseChanged", 7);
+        this.showAllClick = createEvent(this, "showAllClick", 7);
+        this.showMoreCardClick = createEvent(this, "showMoreCardClick", 7);
+        /**
+         * Collapse the list
+         */
+        this.collapse = false;
+        /**
+         * List style
+         */
+        this.listStyle = 'stack';
+        /**
+         * Maximal visible cards
+         *
+         * @internal
+         */
+        this.maxVisibleCards = 12;
+        /**
+         * Suppress the overflow handling of child elements
+         */
+        this.suppressOverflowHandling = false;
+        /**
+         * Hide the show all button
+         *
+         * @since 2.2.0
+         */
+        this.hideShowAll = false;
+        /**
+         * i18n Show all button
+         */
+        this.i18nShowAll = 'Show all';
+        /**
+         * i18n More cards available
+         */
+        this.i18nMoreCards = 'There are more cards available';
+        this.hasOverflowingElements = false;
+        this.numberOfOverflowingElements = 0;
+        this.numberOfAllChildElements = 0;
+        this.leftScrollDistance = 0;
+        this.rightScrollDistance = 0;
+    }
+    onCardListVisibilityToggle() {
+        this.collapse = !this.collapse;
+        this.collapseChanged.emit(this.collapse);
+    }
+    onShowAllClick(event) {
+        this.showAllClick.emit({
+            nativeEvent: event,
+        });
+    }
+    getListChildren() {
+        const slot = this.hostElement.shadowRoot.querySelector('.CardList__Content > slot');
+        return slot.assignedElements({ flatten: true });
+    }
+    changeVisibilityOfSlotChildren() {
+        const childElements = this.getListChildren();
+        childElements.forEach((element, index) => {
+            if (element instanceof HTMLElement) {
+                if (index > this.maxVisibleCards - 1) {
+                    element.classList.add('display-none');
+                    return;
+                }
+                element.classList.remove('display-none');
+            }
+        });
+        this.hasOverflowingElements = childElements.length > this.maxVisibleCards;
+        this.numberOfOverflowingElements =
+            childElements.length - this.maxVisibleCards;
+        this.numberOfAllChildElements = childElements.length;
+        this.detectOverflow();
+    }
+    registerOverflowHandler() {
+        this.observer = createMutationObserver(() => {
+            this.changeVisibilityOfSlotChildren();
+        });
+        this.observer.observe(this.hostElement.shadowRoot.querySelector('.CardList__Content'), {
+            childList: true,
+            subtree: true,
+        });
+        requestAnimationFrame(() => {
+            this.changeVisibilityOfSlotChildren();
+        });
+    }
+    shouldHandleOverflow() {
+        if (this.suppressOverflowHandling) {
+            return false;
+        }
+        if (this.listStyle === 'stack' || this.listStyle === 'scroll') {
+            return true;
+        }
+    }
+    get listElement() {
+        return this.hostElement.shadowRoot.querySelector('.CardList__Content');
+    }
+    onCardListScroll() {
+        this.detectOverflow();
+    }
+    isShowMoreCardVisible() {
+        return (this.suppressOverflowHandling === false && this.hasOverflowingElements);
+    }
+    getOpacityFromScrollDistance(distance) {
+        if (!this.listElement) {
+            return 0;
+        }
+        if (distance === 0) {
+            return 0;
+        }
+        if (distance > 100) {
+            return 1;
+        }
+        return distance / 100;
+    }
+    computeMaskLayer() {
+        const maxOverflowWidth = 80;
+        const maskLayer = `linear-gradient(
+      90deg,
+      transparent 0px,
+      black ${maxOverflowWidth *
+            (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)}px,
+      black calc(100% - ${maxOverflowWidth *
+            (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0
+                ? 1
+                : 0)}px),
+      transparent 100%
+    )`;
+        return {
+            '--ix-card-list-overflow': maskLayer,
+        };
+    }
+    detectOverflow() {
+        if (!this.listElement) {
+            return;
+        }
+        const { clientWidth, scrollWidth, scrollLeft } = this.listElement;
+        this.leftScrollDistance = scrollLeft;
+        this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;
+    }
+    componentDidLoad() {
+        if (this.shouldHandleOverflow()) {
+            this.registerOverflowHandler();
+        }
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+        }
+    }
+    render() {
+        return (h(Host, { key: '2157d907578c112638bdec74ad7be517b24af46d' }, h(CardListTitle, { key: '96769a6c3a4735663f76879d90e2af2f56ddc323', isCollapsed: this.collapse, label: this.label, showAllLabel: this.i18nShowAll, showAllCounter: this.showAllCount === undefined
+                ? this.numberOfAllChildElements
+                : this.showAllCount, onClick: () => this.onCardListVisibilityToggle(), onShowAllClick: (e) => this.onShowAllClick(e), hideShowAll: this.hideShowAll }), h("div", { key: '5a982b69bcacc770709c81edb7e57e901e1ca88c', class: {
+                CardList__Overflow: true,
+            }, style: this.computeMaskLayer() }, h("div", { key: '21c33b91f385f8e80c6ce4b2904ae959d287141c', class: {
+                CardList__Content: true,
+                CardList__Content__Collapsed: this.collapse,
+                CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',
+                CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',
+            }, onScroll: () => this.onCardListScroll() }, h("slot", { key: '5b7e106263dd575f1cbaa8e3272c341958babe7f', onSlotchange: () => this.changeVisibilityOfSlotChildren() }), this.isShowMoreCardVisible() ? (h("ix-card", { class: {
+                Show__All__Card: true,
+            }, onClick: (event) => this.showMoreCardClick.emit({
+                nativeEvent: event,
+            }) }, h("ix-card-content", null, h("div", { class: "Show__All__Card__Content" }, h("ix-icon", { name: iconMoreMenu, size: '32', class: 'Show__All__Card__Icon' }), h("span", { class: "Show__All__Card__Text" }, this.i18nMoreCards, " (", this.numberOfOverflowingElements, ")"))))) : null))));
+    }
+    get hostElement() { return getElement(this); }
+};
+CardList.style = cardListCss;
+
+export { CardList as ix_card_list };
+//# sourceMappingURL=ix-card-list.entry.js.map
+
+//# sourceMappingURL=ix-card-list.entry.js.map

package/dist/esm/ix-card-list.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-card-list.entry.js","sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n\n::slotted(.display-none) {\n  display: none !important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n  label?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={iconChevronDown}\n        onClick={props.onClick}\n        iconColor=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('display-none');\n          return;\n        }\n        element.classList.remove('display-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={iconMoreMenu}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ix-card.ix-card-content.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-card.ix-card-content.entry.js","sources":["src/components/card/card.scss?tag=ix-card&encapsulation=shadow","src/components/card/card.tsx","src/components/card-content/card-content.scss?tag=ix-card-content&encapsulation=shadow","src/components/card-content/card-content.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:host {\n  @include ix-component;\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  align-self: flex-start;\n  overflow: hidden;\n  cursor: pointer;\n\n  width: 20rem;\n\n  border: 1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));\n  border-radius: var(--theme-default-border-radius);\n\n  .card-content {\n    display: block;\n    position: relative;\n    flex-shrink: 0;\n    flex-grow: 1;\n    width: 100%;\n    height: calc(100% - 2rem);\n    background-color: var(--ix-card-background, transparent);\n    border-top-left-radius: var(--theme-default-border-radius);\n    border-top-right-radius: var(--theme-default-border-radius);\n    overflow: hidden;\n  }\n\n  .card-content-wrapper {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n  }\n\n  .card-footer {\n    display: flex;\n    position: relative;\n    width: 100%;\n  }\n}\n\n@mixin accordionChevronColorPrimary {\n  ::slotted(ix-card-accordion) {\n    color: var(--theme-color-primary);\n  }\n}\n\n:host(.card-outline) {\n  @include accordionChevronColorPrimary;\n\n  --ix-card-background: var(--theme-color-ghost);\n  --ix-card-border-color: var(--theme-color-soft-bdr);\n}\n\n:host(.card-filled) {\n  @include accordionChevronColorPrimary;\n\n  --ix-card-background: var(--theme-color-component-1);\n}\n\n:host(.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm);\n  color: var(--theme-color-alarm--contrast);\n}\n\n:host(.card-critical) {\n  --ix-card-background: var(--theme-color-critical);\n  color: var(--theme-color-critical--contrast);\n}\n\n:host(.card-warning) {\n  --ix-card-background: var(--theme-color-warning);\n  color: var(--theme-color-warning--contrast);\n}\n\n:host(.card-success) {\n  --ix-card-background: var(--theme-color-success);\n  color: var(--theme-color-success--contrast);\n}\n\n:host(.card-info) {\n  --ix-card-background: var(--theme-color-info);\n  color: var(--theme-color-info--contrast);\n}\n\n:host(.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(.card-primary) {\n  --ix-card-background: var(--theme-color-primary);\n  color: var(--theme-color-neutral--contrast);\n}\n\n:host(:not(.card-insight, .card-outline)) {\n  --ix-card-border-color: transparent;\n}\n\n// ### Hover ###\n\n:host(.card-insight:hover),\n:host(.card-outline:hover) {\n  --ix-card-background: var(--theme-color-ghost--hover);\n}\n\n:host(.card-notification:hover),\n:host(.card-filled:hover) {\n  --ix-card-background: var(--theme-color-component-1--hover);\n}\n\n:host(.card-alarm:hover) {\n  --ix-card-background: var(--theme-color-alarm--hover);\n}\n\n:host(.card-critical:hover) {\n  --ix-card-background: var(--theme-color-critical--hover);\n}\n\n:host(.card-warning:hover) {\n  --ix-card-background: var(--theme-color-warning--hover);\n}\n\n:host(.card-success:hover) {\n  --ix-card-background: var(--theme-color-success--hover);\n}\n\n:host(.card-info:hover) {\n  --ix-card-background: var(--theme-color-info--hover);\n}\n\n:host(.card-neutral:hover) {\n  --ix-card-background: var(--theme-color-neutral--hover);\n}\n\n:host(.card-primary:hover) {\n  --ix-card-background: var(--theme-color-primary--hover);\n}\n\n// ### Active ###\n\n:host(.card-insight:active),\n:host(.card-outline:active) {\n  --ix-card-background: var(--theme-color-ghost--active);\n}\n\n:host(.card-notification:active),\n:host(.card-filled:active) {\n  --ix-card-background: var(--theme-color-component-1--active);\n}\n\n:host(.card-alarm:active) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.card-critical:active) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.card-warning:active) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.card-success:active) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.card-info:active) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.card-neutral:active) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.card-primary:active) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n\n// ### Selected ###\n\n:host(.selected) {\n  --ix-card-border-color: var(--theme-color-dynamic);\n}\n\n:host(.selected.card-insight),\n:host(.selected.card-outline) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-notification),\n:host(.selected.card-filled) {\n  --ix-card-background: var(--theme-color-ghost--selected);\n}\n\n:host(.selected.card-alarm) {\n  --ix-card-background: var(--theme-color-alarm--active);\n}\n\n:host(.selected.card-critical) {\n  --ix-card-background: var(--theme-color-critical--active);\n}\n\n:host(.selected.card-warning) {\n  --ix-card-background: var(--theme-color-warning--active);\n}\n\n:host(.selected.card-success) {\n  --ix-card-background: var(--theme-color-success--active);\n}\n\n:host(.selected.card-info) {\n  --ix-card-background: var(--theme-color-info--active);\n}\n\n:host(.selected.card-neutral) {\n  --ix-card-background: var(--theme-color-neutral--active);\n}\n\n:host(.selected.card-primary) {\n  --ix-card-background: var(--theme-color-primary--active);\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\n\nexport type CardVariant =\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card',\n  styleUrl: 'card.scss',\n  shadow: true,\n})\nexport class Card {\n  @Element() hostElement!: HTMLIxCardElement;\n\n  /**\n   * Card variant\n   */\n  @Prop() variant: CardVariant = 'outline';\n\n  /**\n   * @since 2.1.0\n   */\n  @Prop() selected: boolean = false;\n\n  render() {\n    return (\n      <Host\n        class={{\n          selected: this.selected,\n          [`card-${this.variant}`]: true,\n        }}\n      >\n        <div class=\"card-content\">\n          <slot></slot>\n        </div>\n        <div class=\"card-footer\">\n          <slot name=\"card-accordion\"></slot>\n        </div>\n      </Host>\n    );\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@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: flex;\n  padding: 1rem;\n  height: 100%;\n  overflow: hidden;\n\n  .content-wrapper {\n    box-sizing: border-box;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    gap: 0.5rem;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n  }\n}\n","import { Component, h, Host } from '@stencil/core';\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-content',\n  styleUrl: 'card-content.scss',\n  shadow: true,\n})\nexport class CardContent {\n  render() {\n    return (\n      <Host>\n        <div class=\"content-wrapper\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,ijKAAijK;;MCqBpjK,IAAI,GAAA,MAAA;AALjB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAQE;;AAEG;AACK,QAAA,IAAO,CAAA,OAAA,GAAgB,SAAS;AAExC;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAmBlC;IAjBC,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;gBACL,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACvB,gBAAA,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAE,CAAA,GAAG,IAAI;aAC/B,EAAA,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,aAAa,EAAA,EACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACD;;;;;;AChDb,MAAM,cAAc,GAAG,+8BAA+8B;;MCUz9B,WAAW,GAAA,MAAA;;;;IACtB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;"}

package/dist/esm/ix-card_2.entry.js

@@ -0,0 +1,42 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-DtF9fwpD.js';
+
+const cardCss = ":host{display:flex;position:relative;flex-direction:column;align-items:flex-start;align-self:flex-start;overflow:hidden;cursor:pointer;width:20rem;border:1px solid var(--ix-card-border-color, var(--theme-color-soft-bdr));border-radius:var(--theme-default-border-radius)}: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}:host .card-content{display:block;position:relative;flex-shrink:0;flex-grow:1;width:100%;height:calc(100% - 2rem);background-color:var(--ix-card-background, transparent);border-top-left-radius:var(--theme-default-border-radius);border-top-right-radius:var(--theme-default-border-radius);overflow:hidden}:host .card-content-wrapper{height:100%;width:100%;box-sizing:border-box}:host .card-footer{display:flex;position:relative;width:100%}:host(.card-outline){--ix-card-background:var(--theme-color-ghost);--ix-card-border-color:var(--theme-color-soft-bdr)}:host(.card-outline) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-filled){--ix-card-background:var(--theme-color-component-1)}:host(.card-filled) ::slotted(ix-card-accordion){color:var(--theme-color-primary)}:host(.card-alarm){--ix-card-background:var(--theme-color-alarm);color:var(--theme-color-alarm--contrast)}:host(.card-critical){--ix-card-background:var(--theme-color-critical);color:var(--theme-color-critical--contrast)}:host(.card-warning){--ix-card-background:var(--theme-color-warning);color:var(--theme-color-warning--contrast)}:host(.card-success){--ix-card-background:var(--theme-color-success);color:var(--theme-color-success--contrast)}:host(.card-info){--ix-card-background:var(--theme-color-info);color:var(--theme-color-info--contrast)}:host(.card-neutral){--ix-card-background:var(--theme-color-neutral);color:var(--theme-color-neutral--contrast)}:host(.card-primary){--ix-card-background:var(--theme-color-primary);color:var(--theme-color-neutral--contrast)}:host(:not(.card-insight,.card-outline)){--ix-card-border-color:transparent}:host(.card-insight:hover),:host(.card-outline:hover){--ix-card-background:var(--theme-color-ghost--hover)}:host(.card-notification:hover),:host(.card-filled:hover){--ix-card-background:var(--theme-color-component-1--hover)}:host(.card-alarm:hover){--ix-card-background:var(--theme-color-alarm--hover)}:host(.card-critical:hover){--ix-card-background:var(--theme-color-critical--hover)}:host(.card-warning:hover){--ix-card-background:var(--theme-color-warning--hover)}:host(.card-success:hover){--ix-card-background:var(--theme-color-success--hover)}:host(.card-info:hover){--ix-card-background:var(--theme-color-info--hover)}:host(.card-neutral:hover){--ix-card-background:var(--theme-color-neutral--hover)}:host(.card-primary:hover){--ix-card-background:var(--theme-color-primary--hover)}:host(.card-insight:active),:host(.card-outline:active){--ix-card-background:var(--theme-color-ghost--active)}:host(.card-notification:active),:host(.card-filled:active){--ix-card-background:var(--theme-color-component-1--active)}:host(.card-alarm:active){--ix-card-background:var(--theme-color-alarm--active)}:host(.card-critical:active){--ix-card-background:var(--theme-color-critical--active)}:host(.card-warning:active){--ix-card-background:var(--theme-color-warning--active)}:host(.card-success:active){--ix-card-background:var(--theme-color-success--active)}:host(.card-info:active){--ix-card-background:var(--theme-color-info--active)}:host(.card-neutral:active){--ix-card-background:var(--theme-color-neutral--active)}:host(.card-primary:active){--ix-card-background:var(--theme-color-primary--active)}:host(.selected){--ix-card-border-color:var(--theme-color-dynamic)}:host(.selected.card-insight),:host(.selected.card-outline){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-notification),:host(.selected.card-filled){--ix-card-background:var(--theme-color-ghost--selected)}:host(.selected.card-alarm){--ix-card-background:var(--theme-color-alarm--active)}:host(.selected.card-critical){--ix-card-background:var(--theme-color-critical--active)}:host(.selected.card-warning){--ix-card-background:var(--theme-color-warning--active)}:host(.selected.card-success){--ix-card-background:var(--theme-color-success--active)}:host(.selected.card-info){--ix-card-background:var(--theme-color-info--active)}:host(.selected.card-neutral){--ix-card-background:var(--theme-color-neutral--active)}:host(.selected.card-primary){--ix-card-background:var(--theme-color-primary--active)}";
+
+const Card = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /**
+         * Card variant
+         */
+        this.variant = 'outline';
+        /**
+         * @since 2.1.0
+         */
+        this.selected = false;
+    }
+    render() {
+        return (h(Host, { key: '7d36825ad469c0a2453fb72dbf7f079458c2a2f1', class: {
+                selected: this.selected,
+                [`card-${this.variant}`]: true,
+            } }, h("div", { key: '3a6186d515640d60fb7b3c4898c268bd6cf15c21', class: "card-content" }, h("slot", { key: 'd9fb872de9eb038fc0f02ba30458506f0b821784' })), h("div", { key: '2b1214fe85a418875accd6927bd1ca0b0f388dd5', class: "card-footer" }, h("slot", { key: 'ba68b648ad8c7d95a77d1b819f98957b43a0d663', name: "card-accordion" }))));
+    }
+    get hostElement() { return getElement(this); }
+};
+Card.style = cardCss;
+
+const cardContentCss = ":host{display:flex;padding:1rem;height:100%;overflow:hidden}: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}:host .content-wrapper{box-sizing:border-box;height:100%;width:100%;overflow:hidden;gap:0.5rem;display:flex;flex-direction:column;align-items:flex-start}";
+
+const CardContent = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: 'b158a08d7ca4779af659d4fa143e047dba41088e' }, h("div", { key: 'abd538339ad50ba6430c834eb1283c20788d78e2', class: "content-wrapper" }, h("slot", { key: '86494d2878e0cb36e417a5d5868fff7f551b4de7' }))));
+    }
+};
+CardContent.style = cardContentCss;
+
+export { Card as ix_card, CardContent as ix_card_content };
+//# sourceMappingURL=ix-card.ix-card-content.entry.js.map
+
+//# sourceMappingURL=ix-card_2.entry.js.map