@siemens/ix 4.4.0 → 5.0.0

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

@@ -6,79 +6,137 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h, Host } from "@stencil/core";
-export class TabItem {
+import { iconClose } from "@siemens/ix-icons/icons";
+import { h, Host, Mixin, } from "@stencil/core";
+import { a11yBoolean } from "../utils/a11y";
+import { DefaultMixins } from "../utils/internal/component";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+import { BaseTabMixin } from "./tab.mixin";
+export class TabItem extends Mixin(...DefaultMixins, ComponentIdMixin, BaseTabMixin) {
     constructor() {
-        /**
-         * Set selected tab
-         */
-        this.selected = false;
-        /**
-         * Set disabled tab
-         */
-        this.disabled = false;
-        /**
-         * Set small size tab
-         */
-        this.small = false;
-        /**
-         * Set icon only tab
-         */
-        this.icon = false;
-        /**
-         * Set rounded tab
-         */
-        this.rounded = false;
-        /**
-         * Set layout width style
-         */
-        this.layout = 'auto';
-        /**
-         * Set selected placement
-         */
-        this.placement = 'bottom';
+        super();
     }
-    tabItemClasses(props) {
-        return {
-            selected: props.selected,
-            disabled: props.disabled,
-            'small-tab': props.small,
-            icon: props.small,
-            stretched: props.layout === 'stretched',
-            bottom: props.placement === 'bottom',
-            top: props.placement === 'top',
-            circle: props.circle,
-        };
+    hostElement;
+    /**
+     * Set selected tab
+     */
+    selected = false;
+    /**
+     * Set disabled tab
+     */
+    disabled = false;
+    /**
+     * Set icon of the tab
+     *
+     * @since 5.0.0
+     */
+    icon;
+    /**
+     * Set counter value
+     */
+    counter;
+    /**
+     * If the tab can be closed
+     *
+     * @since 5.0.0
+     */
+    closable = false;
+    /**
+     * Tab label
+     *
+     * @since 5.0.0
+     */
+    label;
+    /**
+     * Aria label for the close button, important for accessibility
+     *
+     * @since 5.0.0
+     */
+    ariaLabelCloseButton = 'Close tab';
+    /** @internal */
+    placement = 'bottom';
+    /** @internal */
+    rounded = false;
+    /** @internal */
+    small = false;
+    /** @internal */
+    layout = 'auto';
+    /** @internal */
+    iconOnly = false;
+    /**
+     * Emitted when the tab is clicked.
+     */
+    tabClick;
+    /**
+     * Emitted when the tab's close button is clicked.
+     */
+    tabClose;
+    onTabSelect(event) {
+        if (event.defaultPrevented) {
+            return;
+        }
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        const clientEvent = this.tabClick.emit({
+            tabKey: this.tabKey,
+            nativeEvent: event,
+        });
+        if (clientEvent.defaultPrevented) {
+            event.stopPropagation();
+        }
     }
     render() {
-        return (h(Host, { key: '71cfed0ab360348500969c2529bc79cab83bdaff', role: "tab", class: this.tabItemClasses({
+        let variant = 'normal';
+        const label = this.label || this.hostElement.textContent?.trim();
+        if (this.rounded) {
+            variant = 'rounded';
+        }
+        else if (this.icon && (label === undefined || label === '')) {
+            variant = 'icon-only';
+        }
+        else {
+            variant = 'normal';
+        }
+        return (h(Host, { key: '38ee3ed8b3819d38144608d31446ba60f32658b3', id: this.getHostElementId(), role: "tab", "aria-selected": a11yBoolean(this.selected), tabIndex: this.selected && !this.disabled ? 0 : -1, class: {
                 selected: this.selected,
                 disabled: this.disabled,
-                small: this.small,
-                icon: this.icon,
-                layout: this.layout,
-                placement: this.placement,
+                'small-tab': this.small,
+                'icon-only': variant === 'icon-only',
+                stretched: this.layout === 'stretched',
+                bottom: this.placement === 'bottom',
+                top: this.placement === 'top',
                 circle: this.rounded,
-            }), tabIndex: 0, onClick: (event) => {
-                if (event.defaultPrevented)
-                    return;
-                const clientEvent = this.tabClick.emit({
-                    nativeEvent: event,
-                });
-                if (clientEvent.defaultPrevented) {
-                    event.stopPropagation();
+            }, onClick: (event) => this.onTabSelect(event), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    this.onTabSelect(event);
                 }
-            } }, h("div", { key: 'fe2bdf6f8daee069486f25fe8e21e53713d856e4', class: {
-                circle: this.rounded,
-                text: !this.rounded,
+                if (this.closable && event.key === 'Delete') {
+                    event.preventDefault();
+                    this.tabClose.emit({
+                        tabKey: this.tabKey,
+                        nativeEvent: event,
+                    });
+                }
+            } }, variant === 'rounded' && (h("div", { key: 'd5273f2315118f712fc4c25d3d286dca1166fb73', class: {
+                circle: true,
+            } }, this.icon && h("ix-icon", { key: '52cfcee729debba7d264af7ff4d4ea030575925e', name: this.icon, size: "24" }), h("slot", { key: 'b5e14c4b4cb69b1bbb4caa5c15c4355db8caf510' }))), this.icon && variant !== 'rounded' && (h("ix-icon", { key: '827b6cd5390799f361f726a455d94c58f9a542c1', name: this.icon, size: "16", class: 'tab-icon' })), variant === 'normal' && (h("div", { key: '9be6aeb959a037a951cd7b108eb3d217e1504dc1', class: {
+                text: !!this.label,
                 selected: this.selected,
                 disabled: this.disabled,
-            } }, h("slot", { key: '2d978daeed548622c470979f9b1aacd9823f398e' })), h("div", { key: '8ee56a58ba2d1047b7089668b70a176edec0ea00', class: {
+            } }, this.label, h("slot", { key: '62f22936b12a97234c2ec3d5210e7d3f2435fa11' }))), variant === 'rounded' && this.counter !== undefined && (h("div", { key: '023ac330510e532464624dd78ea8bf3fd06922f0', class: {
                 counter: true,
                 selected: this.selected,
-                hidden: !(this.rounded && this.counter !== undefined),
                 disabled: this.disabled,
-            } }, this.counter)));
+            } }, this.counter)), this.counter && variant !== 'rounded' && (h("ix-pill", { key: '98ce5d4ee78b06cd252ab0550b3be543d17df4d7', variant: "primary", outline: true, class: 'tab-counter' }, this.counter)), this.closable && variant !== 'rounded' && (h("ix-icon-button", { key: 'c00ea1fc9869cbd4d503b1060b8161812e69c1df', "aria-label": this.ariaLabelCloseButton, class: 'close-tab', size: "12", variant: "subtle-tertiary", icon: iconClose, onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                this.tabClose.emit({
+                    tabKey: this.tabKey,
+                    nativeEvent: event,
+                });
+            } }))));
     }
     static get is() { return "ix-tab-item"; }
     static get encapsulation() { return "shadow"; }
@@ -134,27 +192,48 @@ export class TabItem {
                 "attribute": "disabled",
                 "defaultValue": "false"
             },
-            "small": {
-                "type": "boolean",
+            "icon": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Set icon of the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "counter": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set small size tab"
+                    "text": "Set counter value"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "small",
-                "defaultValue": "false"
+                "attribute": "counter"
             },
-            "icon": {
+            "closable": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -165,15 +244,86 @@ export class TabItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set icon only tab"
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "If the tab can be closed"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon",
+                "attribute": "closable",
                 "defaultValue": "false"
             },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Tab label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "ariaLabelCloseButton": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "5.0.0"
+                        }],
+                    "text": "Aria label for the close button, important for accessibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label-close-button",
+                "defaultValue": "'Close tab'"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'bottom' | 'top'",
+                    "resolved": "\"bottom\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom'"
+            },
             "rounded": {
                 "type": "boolean",
                 "mutable": false,
@@ -185,8 +335,11 @@ export class TabItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set rounded tab"
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -194,24 +347,28 @@ export class TabItem {
                 "attribute": "rounded",
                 "defaultValue": "false"
             },
-            "counter": {
-                "type": "number",
+            "small": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set counter value"
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "counter"
+                "attribute": "small",
+                "defaultValue": "false"
             },
             "layout": {
                 "type": "string",
@@ -224,8 +381,11 @@ export class TabItem {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set layout width style"
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -233,25 +393,28 @@ export class TabItem {
                 "attribute": "layout",
                 "defaultValue": "'auto'"
             },
-            "placement": {
-                "type": "string",
+            "iconOnly": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "'bottom' | 'top'",
-                    "resolved": "\"bottom\" | \"top\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set selected placement"
+                    "tags": [{
+                            "name": "internal",
+                            "text": undefined
+                        }],
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placement",
-                "defaultValue": "'bottom'"
+                "attribute": "icon-only",
+                "defaultValue": "false"
             }
         };
     }
@@ -268,7 +431,29 @@ export class TabItem {
                 },
                 "complexType": {
                     "original": "TabClickDetail",
-                    "resolved": "{ nativeEvent: MouseEvent; }",
+                    "resolved": "{ tabKey?: string | undefined; nativeEvent: Event; }",
+                    "references": {
+                        "TabClickDetail": {
+                            "location": "import",
+                            "path": "./tab-item.types",
+                            "id": "src/components/tab-item/tab-item.types.ts::TabClickDetail",
+                            "referenceLocation": "TabClickDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "tabClose",
+                "name": "tabClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the tab's close button is clicked."
+                },
+                "complexType": {
+                    "original": "TabClickDetail",
+                    "resolved": "{ tabKey?: string | undefined; nativeEvent: Event; }",
                     "references": {
                         "TabClickDetail": {
                             "location": "import",
@@ -280,4 +465,5 @@ export class TabItem {
                 }
             }];
     }
+    static get elementRef() { return "hostElement"; }
 }

package/dist/collection/components/tab-item/tab.mixin.js

@@ -0,0 +1,40 @@
+export const BaseTabMixin = (Base) => {
+    class BaseTabMixinCtor extends Base {
+        constructor() {
+            super();
+        }
+        /**
+         * Key of the tab, used for identifying the tab in events
+         *
+         * @since 5.0.0
+         */
+        tabKey;
+        static get properties() {
+            return {
+                "tabKey": {
+                    "type": "string",
+                    "mutable": false,
+                    "complexType": {
+                        "original": "string",
+                        "resolved": "string",
+                        "references": {}
+                    },
+                    "required": true,
+                    "optional": false,
+                    "docs": {
+                        "tags": [{
+                                "name": "since",
+                                "text": "5.0.0"
+                            }],
+                        "text": "Key of the tab, used for identifying the tab in events"
+                    },
+                    "getter": false,
+                    "setter": false,
+                    "reflect": false,
+                    "attribute": "tab-key"
+                }
+            };
+        }
+    }
+    return BaseTabMixinCtor;
+};

package/dist/collection/components/{application-sidebar/application-sidebar.css → tab-panel/tab-panel.css}

@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2023 Siemens AG
+ * SPDX-FileCopyrightText: 2026 Siemens AG
  *
  * SPDX-License-Identifier: MIT
  *
@@ -22,13 +22,6 @@
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
-:host {
-  display: block;
-  position: relative;
-  width: 22rem;
-  height: 100%;
-  padding: 0;
-}
 :host *,
 :host *::after,
 :host *::before {
@@ -77,7 +70,6 @@
   display: none;
 }
 
-:host(.visible) {
-  border-right: 2px solid var(--theme-color-soft-bdr);
-  padding: 1.5rem 0.5rem 0;
+:host(:focus-visible) {
+  outline: none;
 }

package/dist/collection/components/tab-panel/tab-panel.js

@@ -0,0 +1,67 @@
+/*
+ * SPDX-FileCopyrightText: 2026 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Host, Mixin, h } from "@stencil/core";
+import { DefaultMixins } from "../utils/internal/component";
+import { ComponentIdMixin, } from "../utils/internal/mixins/id.mixin";
+/**
+ * @internal
+ * @since 5.0.0
+ * */
+export class TabPanel extends Mixin(...DefaultMixins, ComponentIdMixin) {
+    constructor() {
+        super();
+    }
+    hostElement;
+    /**
+     * Key of the tab panel, has to be the same as the tabKey of the corresponding ix-tab-item
+     */
+    tabKey;
+    connectedCallback() {
+        this.hostElement.hidden = true;
+    }
+    render() {
+        return (h(Host, { key: '0e16dade71f0bf2b5cd3d68f69f6e0676ddf0875', role: "tabpanel", id: this.getHostElementId() }, h("slot", { key: '6ec679d5f971e120661ef540b1601f8ebc567a81' })));
+    }
+    static get is() { return "ix-tab-panel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tab-panel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tab-panel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tabKey": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Key of the tab panel, has to be the same as the tabKey of the corresponding ix-tab-item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tab-key"
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}