@siemens/ix 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/cjs/ix-dropdown_2.cjs.entry.js +1 -1
  2. package/dist/cjs/ix-menu_9.cjs.entry.js +1 -1
  3. package/dist/cjs/ix-select_2.cjs.entry.js +3 -3
  4. package/dist/cjs/ix-tooltip.cjs.entry.js +31 -27
  5. package/dist/cjs/ix-workflow-step_2.cjs.entry.js +1 -1
  6. package/dist/collection/components/dropdown-item/dropdown-item.js +1 -1
  7. package/dist/collection/components/menu-item/menu-item.css +15 -10
  8. package/dist/collection/components/select/select.js +3 -3
  9. package/dist/collection/components/tooltip/tooltip.css +8 -7
  10. package/dist/collection/components/tooltip/tooltip.js +31 -27
  11. package/dist/collection/components/workflow-step/workflow-step.css +1 -0
  12. package/dist/components/dropdown-item.js +1 -1
  13. package/dist/components/ix-select.js +3 -3
  14. package/dist/components/ix-tooltip.js +32 -28
  15. package/dist/components/ix-workflow-step.js +1 -1
  16. package/dist/components/menu-item.js +1 -1
  17. package/dist/esm/ix-dropdown_2.entry.js +1 -1
  18. package/dist/esm/ix-menu_9.entry.js +1 -1
  19. package/dist/esm/ix-select_2.entry.js +3 -3
  20. package/dist/esm/ix-tooltip.entry.js +32 -28
  21. package/dist/esm/ix-workflow-step_2.entry.js +1 -1
  22. package/dist/siemens-ix/{p-2531a5d0.entry.js → p-0dfe994b.entry.js} +1 -1
  23. package/dist/siemens-ix/{p-6e5543fe.entry.js → p-22e84c7c.entry.js} +1 -1
  24. package/dist/siemens-ix/p-346c6c2f.entry.js +1 -0
  25. package/dist/siemens-ix/p-b0573cc6.entry.js +1 -0
  26. package/dist/siemens-ix/p-c92ee533.entry.js +1 -0
  27. package/dist/siemens-ix/siemens-ix.esm.js +1 -1
  28. package/package.json +1 -1
  29. package/dist/siemens-ix/p-082bbe13.entry.js +0 -1
  30. package/dist/siemens-ix/p-519b13aa.entry.js +0 -1
  31. package/dist/siemens-ix/p-f0289f67.entry.js +0 -1
package/dist/cjs/ix-dropdown_2.cjs.entry.js CHANGED
@@ -306,7 +306,7 @@ const DropdownItem = class {
306
306
  'icon-text': this.label !== undefined && this.icon !== undefined,
307
307
  'icon-only': this.label === undefined && this.icon !== undefined,
308
308
  disabled: this.disabled,
309
- } }, index.h("button", { class: {
309
+ } }, index.h("button", { type: "button", class: {
310
310
  'dropdown-item': true,
311
311
  hover: this.hover,
312
312
  disabled: this.disabled,
package/dist/cjs/ix-menu_9.cjs.entry.js CHANGED
@@ -669,7 +669,7 @@ const MenuAvatarItem = class {
669
669
  };
670
670
  MenuAvatarItem.style = menuAvatarItemCss;
671
671
 
672
- const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected){cursor:pointer}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).active,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-color-1)}";
672
+ const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block;cursor:pointer}.sc-ix-menu-item-h:not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h:not(.disabled):not(:disabled).active,.sc-ix-menu-item-h:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem;background-color:transparent}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:hover,.bottom-tab.selected.sc-ix-menu-item-h:hover,[slot=bottom].active.sc-ix-menu-item-h:hover,[slot=bottom].selected.sc-ix-menu-item-h:hover{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:active,.bottom-tab.selected.sc-ix-menu-item-h:active,[slot=bottom].active.sc-ix-menu-item-h:active,[slot=bottom].selected.sc-ix-menu-item-h:active{background-color:var(--theme-nav-item-secondary--background--selected)}";
673
673
 
674
674
  const MenuItem = class {
675
675
  constructor(hostRef) {
package/dist/cjs/ix-select_2.cjs.entry.js CHANGED
@@ -232,7 +232,7 @@ const Select = class {
232
232
  if (!this.editable)
233
233
  this.dropdownWrapperRef = ref;
234
234
  } }, index.h("div", { class: "input-container" }, index.h("div", { class: "chips" }, this.isMultipleMode
235
- ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
235
+ ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (index.h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
236
236
  e.preventDefault();
237
237
  e.stopPropagation();
238
238
  this.emitItemClick(item.value);
@@ -254,9 +254,9 @@ const Select = class {
254
254
  'd-none': this.disabled ||
255
255
  this.readonly ||
256
256
  (this.isDropdownEmpty && !this.editable),
257
- }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
257
+ }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
258
258
  return {
259
- width: `${delegateConfig.triggerRef.clientWidth}px`,
259
+ width: `${this.hostElement.clientWidth}px`,
260
260
  };
261
261
  } }, index.h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), index.h("slot", null), index.h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (index.h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
262
262
  'add-item': true,
package/dist/cjs/ix-tooltip.cjs.entry.js CHANGED
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-f4b8e6ee.js');
6
6
  const floatingUi_dom_esm = require('./floating-ui.dom.esm-01fe5abe.js');
7
7
 
8
- const tooltipCss = ":host{display:inline-block;position:absolute;left:0px;top:0px;max-width:18.25rem;opacity:0;visibility:collapse;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible}:host .arrow,:host .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .arrow{visibility:hidden}:host .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
8
+ const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
9
9
 
10
10
  const Tooltip = class {
11
11
  constructor(hostRef) {
@@ -22,7 +22,7 @@ const Tooltip = class {
22
22
  return this.hostElement.shadowRoot.querySelector('.arrow');
23
23
  }
24
24
  destroyAutoUpdate() {
25
- if (this.disposeAutoUpdate) {
25
+ if (this.disposeAutoUpdate !== undefined) {
26
26
  this.disposeAutoUpdate();
27
27
  }
28
28
  }
@@ -39,32 +39,36 @@ const Tooltip = class {
39
39
  }
40
40
  async computeTooltipPosition(target) {
41
41
  this.disposeAutoUpdate = floatingUi_dom_esm.autoUpdate(target, this.hostElement, async () => {
42
- const computeResponse = await floatingUi_dom_esm.computePosition(target, this.hostElement, {
43
- strategy: 'absolute',
44
- placement: 'top',
45
- middleware: [
46
- floatingUi_dom_esm.shift(),
47
- floatingUi_dom_esm.offset(8),
48
- floatingUi_dom_esm.arrow({
49
- element: this.arrowElement,
50
- }),
51
- floatingUi_dom_esm.autoPlacement({
52
- alignment: 'start',
53
- allowedPlacements: ['top', 'bottom', 'right', 'left'],
54
- }),
55
- ],
56
- });
57
- if (computeResponse.middlewareData.arrow) {
58
- const { x, y } = computeResponse.middlewareData.arrow;
59
- Object.assign(this.arrowElement.style, {
60
- left: x != null ? `${x}px` : '',
61
- top: y != null ? `${y}px` : '',
42
+ requestAnimationFrame(async () => {
43
+ const computeResponse = await floatingUi_dom_esm.computePosition(target, this.hostElement, {
44
+ strategy: 'fixed',
45
+ placement: 'top',
46
+ middleware: [
47
+ floatingUi_dom_esm.shift(),
48
+ floatingUi_dom_esm.offset(8),
49
+ floatingUi_dom_esm.arrow({
50
+ element: this.arrowElement,
51
+ }),
52
+ floatingUi_dom_esm.flip({
53
+ fallbackStrategy: 'initialPlacement',
54
+ }),
55
+ ],
56
+ });
57
+ if (computeResponse.middlewareData.arrow) {
58
+ let { x, y } = computeResponse.middlewareData.arrow;
59
+ if (computeResponse.placement === 'bottom') {
60
+ y = -4;
61
+ }
62
+ Object.assign(this.arrowElement.style, {
63
+ left: x != null ? `${x}px` : '',
64
+ top: y != null ? `${y}px` : '',
65
+ });
66
+ }
67
+ const { x, y } = computeResponse;
68
+ Object.assign(this.hostElement.style, {
69
+ left: x !== null ? `${x}px` : '',
70
+ top: y !== null ? `${y}px` : '',
62
71
  });
63
- }
64
- const { x, y } = computeResponse;
65
- Object.assign(this.hostElement.style, {
66
- left: x !== null ? `${x}px` : '',
67
- top: y !== null ? `${y}px` : '',
68
72
  });
69
73
  }, {
70
74
  ancestorResize: true,
package/dist/cjs/ix-workflow-step_2.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-f4b8e6ee.js');
6
6
 
7
- const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
7
+ const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center;position:relative}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
8
8
 
9
9
  const WorkflowStep = class {
10
10
  constructor(hostRef) {
package/dist/collection/components/dropdown-item/dropdown-item.js CHANGED
@@ -27,7 +27,7 @@ export class DropdownItem {
27
27
  'icon-text': this.label !== undefined && this.icon !== undefined,
28
28
  'icon-only': this.label === undefined && this.icon !== undefined,
29
29
  disabled: this.disabled,
30
- } }, h("button", { class: {
30
+ } }, h("button", { type: "button", class: {
31
31
  'dropdown-item': true,
32
32
  hover: this.hover,
33
33
  disabled: this.disabled,
package/dist/collection/components/menu-item/menu-item.css CHANGED
@@ -37,6 +37,13 @@
37
37
  :host {
38
38
  position: relative;
39
39
  display: block;
40
+ cursor: pointer;
41
+ }
42
+ :host:not(.disabled):not(:disabled).hover, :host:not(.disabled):not(:disabled):hover {
43
+ background-color: var(--theme-ghost--background--hover);
44
+ }
45
+ :host:not(.disabled):not(:disabled).active, :host:not(.disabled):not(:disabled):active {
46
+ background-color: var(--theme-ghost--background--active);
40
47
  }
41
48
  :host .tab {
42
49
  display: flex;
@@ -46,15 +53,6 @@
46
53
  z-index: 500;
47
54
  padding-left: 1.25rem;
48
55
  }
49
- :host .tab:not(.selected) {
50
- cursor: pointer;
51
- }
52
- :host .tab:not(.selected):not(.disabled):not(:disabled).hover, :host .tab:not(.selected):not(.disabled):not(:disabled):hover {
53
- background-color: var(--theme-ghost--background--hover);
54
- }
55
- :host .tab:not(.selected):not(.disabled):not(:disabled).active, :host .tab:not(.selected):not(.disabled):not(:disabled):active {
56
- background-color: var(--theme-ghost--background--active);
57
- }
58
56
  :host i.glyph {
59
57
  color: var(--theme-nav-item-primary-icon--color);
60
58
  position: relative;
@@ -137,7 +135,14 @@
137
135
  }
138
136
  :host.bottom-tab .tab::before, :host[slot=bottom] .tab::before {
139
137
  height: 2.25rem;
138
+ background-color: transparent;
140
139
  }
141
140
  :host.bottom-tab.active .tab, :host.bottom-tab.selected .tab, :host[slot=bottom].active .tab, :host[slot=bottom].selected .tab {
142
- background-color: var(--theme-color-1);
141
+ background-color: var(--theme-nav-item-secondary--background--selected);
142
+ }
143
+ :host.bottom-tab.active:hover, :host.bottom-tab.selected:hover, :host[slot=bottom].active:hover, :host[slot=bottom].selected:hover {
144
+ background-color: var(--theme-nav-item-secondary--background--selected);
145
+ }
146
+ :host.bottom-tab.active:active, :host.bottom-tab.selected:active, :host[slot=bottom].active:active, :host[slot=bottom].selected:active {
147
+ background-color: var(--theme-nav-item-secondary--background--selected);
143
148
  }
package/dist/collection/components/select/select.js CHANGED
@@ -230,7 +230,7 @@ export class Select {
230
230
  if (!this.editable)
231
231
  this.dropdownWrapperRef = ref;
232
232
  } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
233
- ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
233
+ ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
234
234
  e.preventDefault();
235
235
  e.stopPropagation();
236
236
  this.emitItemClick(item.value);
@@ -252,9 +252,9 @@ export class Select {
252
252
  'd-none': this.disabled ||
253
253
  this.readonly ||
254
254
  (this.isDropdownEmpty && !this.editable),
255
- }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
255
+ }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
256
256
  return {
257
- width: `${delegateConfig.triggerRef.clientWidth}px`,
257
+ width: `${this.hostElement.clientWidth}px`,
258
258
  };
259
259
  } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
260
260
  'add-item': true,
package/dist/collection/components/tooltip/tooltip.css CHANGED
@@ -1,11 +1,12 @@
1
1
  :host {
2
2
  display: inline-block;
3
- position: absolute;
3
+ position: fixed;
4
4
  left: 0px;
5
5
  top: 0px;
6
+ z-index: var(--theme-z-index-tooltip);
6
7
  max-width: 18.25rem;
7
8
  opacity: 0;
8
- visibility: collapse;
9
+ visibility: collapse !important;
9
10
  overflow-wrap: break-word;
10
11
  border-radius: 0.25rem;
11
12
  background-color: var(--theme-tootlip--background);
@@ -22,20 +23,20 @@
22
23
 
23
24
  :host(.visible) {
24
25
  opacity: 1;
25
- visibility: visible;
26
+ visibility: visible !important;
26
27
  }
27
28
 
28
- :host .arrow,
29
- :host .arrow::before {
29
+ :host(.visible) .arrow,
30
+ :host(.visible) .arrow::before {
30
31
  position: absolute;
31
32
  width: 8px;
32
33
  height: 8px;
33
34
  background: inherit;
34
35
  }
35
- :host .arrow {
36
+ :host(.visible) .arrow {
36
37
  visibility: hidden;
37
38
  }
38
- :host .arrow::before {
39
+ :host(.visible) .arrow::before {
39
40
  visibility: visible;
40
41
  content: "";
41
42
  transform: rotate(45deg);
package/dist/collection/components/tooltip/tooltip.js CHANGED
@@ -6,7 +6,7 @@
6
6
  * This source code is licensed under the MIT license found in the
7
7
  * LICENSE file in the root directory of this source tree.
8
8
  */
9
- import { arrow, autoPlacement, autoUpdate, computePosition, offset, shift, } from '@floating-ui/dom';
9
+ import { arrow, autoUpdate, computePosition, flip, offset, shift, } from '@floating-ui/dom';
10
10
  import { h, Host } from '@stencil/core';
11
11
  /**
12
12
  * @slot title-icon - Icon of tooltip title
@@ -28,7 +28,7 @@ export class Tooltip {
28
28
  return this.hostElement.shadowRoot.querySelector('.arrow');
29
29
  }
30
30
  destroyAutoUpdate() {
31
- if (this.disposeAutoUpdate) {
31
+ if (this.disposeAutoUpdate !== undefined) {
32
32
  this.disposeAutoUpdate();
33
33
  }
34
34
  }
@@ -45,32 +45,36 @@ export class Tooltip {
45
45
  }
46
46
  async computeTooltipPosition(target) {
47
47
  this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
48
- const computeResponse = await computePosition(target, this.hostElement, {
49
- strategy: 'absolute',
50
- placement: 'top',
51
- middleware: [
52
- shift(),
53
- offset(8),
54
- arrow({
55
- element: this.arrowElement,
56
- }),
57
- autoPlacement({
58
- alignment: 'start',
59
- allowedPlacements: ['top', 'bottom', 'right', 'left'],
60
- }),
61
- ],
62
- });
63
- if (computeResponse.middlewareData.arrow) {
64
- const { x, y } = computeResponse.middlewareData.arrow;
65
- Object.assign(this.arrowElement.style, {
66
- left: x != null ? `${x}px` : '',
67
- top: y != null ? `${y}px` : '',
48
+ requestAnimationFrame(async () => {
49
+ const computeResponse = await computePosition(target, this.hostElement, {
50
+ strategy: 'fixed',
51
+ placement: 'top',
52
+ middleware: [
53
+ shift(),
54
+ offset(8),
55
+ arrow({
56
+ element: this.arrowElement,
57
+ }),
58
+ flip({
59
+ fallbackStrategy: 'initialPlacement',
60
+ }),
61
+ ],
62
+ });
63
+ if (computeResponse.middlewareData.arrow) {
64
+ let { x, y } = computeResponse.middlewareData.arrow;
65
+ if (computeResponse.placement === 'bottom') {
66
+ y = -4;
67
+ }
68
+ Object.assign(this.arrowElement.style, {
69
+ left: x != null ? `${x}px` : '',
70
+ top: y != null ? `${y}px` : '',
71
+ });
72
+ }
73
+ const { x, y } = computeResponse;
74
+ Object.assign(this.hostElement.style, {
75
+ left: x !== null ? `${x}px` : '',
76
+ top: y !== null ? `${y}px` : '',
68
77
  });
69
- }
70
- const { x, y } = computeResponse;
71
- Object.assign(this.hostElement.style, {
72
- left: x !== null ? `${x}px` : '',
73
- top: y !== null ? `${y}px` : '',
74
78
  });
75
79
  }, {
76
80
  ancestorResize: true,
package/dist/collection/components/workflow-step/workflow-step.css CHANGED
@@ -37,6 +37,7 @@
37
37
  width: 100%;
38
38
  align-items: center;
39
39
  justify-content: center;
40
+ position: relative;
40
41
  }
41
42
  :host .step .wrapper .line {
42
43
  width: 100%;
package/dist/components/dropdown-item.js CHANGED
@@ -26,7 +26,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
26
26
  'icon-text': this.label !== undefined && this.icon !== undefined,
27
27
  'icon-only': this.label === undefined && this.icon !== undefined,
28
28
  disabled: this.disabled,
29
- } }, h("button", { class: {
29
+ } }, h("button", { type: "button", class: {
30
30
  'dropdown-item': true,
31
31
  hover: this.hover,
32
32
  disabled: this.disabled,
package/dist/components/ix-select.js CHANGED
@@ -235,7 +235,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
235
235
  if (!this.editable)
236
236
  this.dropdownWrapperRef = ref;
237
237
  } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
238
- ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
238
+ ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
239
239
  e.preventDefault();
240
240
  e.stopPropagation();
241
241
  this.emitItemClick(item.value);
@@ -257,9 +257,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
257
257
  'd-none': this.disabled ||
258
258
  this.readonly ||
259
259
  (this.isDropdownEmpty && !this.editable),
260
- }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
260
+ }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
261
261
  return {
262
- width: `${delegateConfig.triggerRef.clientWidth}px`,
262
+ width: `${this.hostElement.clientWidth}px`,
263
263
  };
264
264
  } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
265
265
  'add-item': true,
package/dist/components/ix-tooltip.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
- import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, d as autoPlacement } from './floating-ui.dom.esm.js';
2
+ import { a as autoUpdate, c as computePosition, s as shift, o as offset, b as arrow, f as flip } from './floating-ui.dom.esm.js';
3
3
  import { d as defineCustomElement$2 } from './typography.js';
4
4
 
5
- const tooltipCss = ":host{display:inline-block;position:absolute;left:0px;top:0px;max-width:18.25rem;opacity:0;visibility:collapse;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible}:host .arrow,:host .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host .arrow{visibility:hidden}:host .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
5
+ const tooltipCss = ":host{display:inline-block;position:fixed;left:0px;top:0px;z-index:var(--theme-z-index-tooltip);max-width:18.25rem;opacity:0;visibility:collapse !important;overflow-wrap:break-word;border-radius:0.25rem;background-color:var(--theme-tootlip--background);padding:0.375rem 0.75rem 0.375rem 0.875rem;box-shadow:var(--theme-shadow-4)}:host .tooltip-title{display:flex;align-items:center}:host .tooltip-title ::slotted(ix-icon){margin-right:0.35rem}:host(.visible){opacity:1;visibility:visible !important}:host(.visible) .arrow,:host(.visible) .arrow::before{position:absolute;width:8px;height:8px;background:inherit}:host(.visible) .arrow{visibility:hidden}:host(.visible) .arrow::before{visibility:visible;content:\"\";transform:rotate(45deg);background-color:var(--theme-tootlip--background)}";
6
6
 
7
7
  const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
8
8
  constructor() {
@@ -21,7 +21,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
21
21
  return this.hostElement.shadowRoot.querySelector('.arrow');
22
22
  }
23
23
  destroyAutoUpdate() {
24
- if (this.disposeAutoUpdate) {
24
+ if (this.disposeAutoUpdate !== undefined) {
25
25
  this.disposeAutoUpdate();
26
26
  }
27
27
  }
@@ -38,32 +38,36 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
38
38
  }
39
39
  async computeTooltipPosition(target) {
40
40
  this.disposeAutoUpdate = autoUpdate(target, this.hostElement, async () => {
41
- const computeResponse = await computePosition(target, this.hostElement, {
42
- strategy: 'absolute',
43
- placement: 'top',
44
- middleware: [
45
- shift(),
46
- offset(8),
47
- arrow({
48
- element: this.arrowElement,
49
- }),
50
- autoPlacement({
51
- alignment: 'start',
52
- allowedPlacements: ['top', 'bottom', 'right', 'left'],
53
- }),
54
- ],
55
- });
56
- if (computeResponse.middlewareData.arrow) {
57
- const { x, y } = computeResponse.middlewareData.arrow;
58
- Object.assign(this.arrowElement.style, {
59
- left: x != null ? `${x}px` : '',
60
- top: y != null ? `${y}px` : '',
41
+ requestAnimationFrame(async () => {
42
+ const computeResponse = await computePosition(target, this.hostElement, {
43
+ strategy: 'fixed',
44
+ placement: 'top',
45
+ middleware: [
46
+ shift(),
47
+ offset(8),
48
+ arrow({
49
+ element: this.arrowElement,
50
+ }),
51
+ flip({
52
+ fallbackStrategy: 'initialPlacement',
53
+ }),
54
+ ],
55
+ });
56
+ if (computeResponse.middlewareData.arrow) {
57
+ let { x, y } = computeResponse.middlewareData.arrow;
58
+ if (computeResponse.placement === 'bottom') {
59
+ y = -4;
60
+ }
61
+ Object.assign(this.arrowElement.style, {
62
+ left: x != null ? `${x}px` : '',
63
+ top: y != null ? `${y}px` : '',
64
+ });
65
+ }
66
+ const { x, y } = computeResponse;
67
+ Object.assign(this.hostElement.style, {
68
+ left: x !== null ? `${x}px` : '',
69
+ top: y !== null ? `${y}px` : '',
61
70
  });
62
- }
63
- const { x, y } = computeResponse;
64
- Object.assign(this.hostElement.style, {
65
- left: x !== null ? `${x}px` : '',
66
- top: y !== null ? `${y}px` : '',
67
71
  });
68
72
  }, {
69
73
  ancestorResize: true,
package/dist/components/ix-workflow-step.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Fragment, Host } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$2 } from './icon.js';
3
3
 
4
- const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
4
+ const workflowStepCss = ".sc-ix-workflow-step-h .step.sc-ix-workflow-step{display:flex;flex-direction:column;align-items:center;background-color:var(--theme-workflow-step--background);border-radius:var(--theme-workflow--border-radius);width:auto;padding:1.125rem 0 0.5rem 0;height:4rem;width:12.75rem}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{display:flex;width:100%;align-items:center;justify-content:center;position:relative}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:100%;height:0.125rem;background-color:var(--theme-workflow-step-icon-default--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{width:50%;margin:0 0 0 auto}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 auto 0 0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.done.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-done--color--selected)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.warning.sc-ix-workflow-step{background-color:var(--theme-color-warning)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.success.sc-ix-workflow-step{background-color:var(--theme-color-success)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.error.sc-ix-workflow-step{background-color:var(--theme-color-alarm)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step{display:flex;align-items:center;justify-content:center;position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .iconWrapper.sc-ix-workflow-step .absolute.sc-ix-workflow-step{position:absolute}.sc-ix-workflow-step-h .step.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:1rem;width:auto;padding:0 0.5rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step{flex-direction:row;padding:0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step{width:auto;padding-left:1.125rem;height:4rem}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.sc-ix-workflow-step{width:0.125rem;height:100%}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.first.sc-ix-workflow-step,.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{height:50%;margin:auto 0 0 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .wrapper.sc-ix-workflow-step .line.last.sc-ix-workflow-step{margin:0 0 auto 0}.sc-ix-workflow-step-h .step.vertical.sc-ix-workflow-step .text.sc-ix-workflow-step{margin-top:0;margin-left:1rem;padding:0}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:hover{background-color:var(--theme-workflow-step--background--hover)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:active{background-color:var(--theme-workflow-step--background--active)}.sc-ix-workflow-step-h .step.sc-ix-workflow-step:focus-visible{outline:1px solid var(--focus--border-color);border-radius:0}.sc-ix-workflow-step-h .step.selected.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--selected)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step{background-color:var(--theme-workflow-step--background--disabled)}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .line.sc-ix-workflow-step{background-color:var(--theme-workflow-step-icon-default--color--disabled) !important}.sc-ix-workflow-step-h .step.disabled.sc-ix-workflow-step .text.sc-ix-workflow-step{color:var(--theme-workflow-step--color--disabled)}";
5
5
 
6
6
  const WorkflowStep = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
7
7
  constructor() {
package/dist/components/menu-item.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
2
2
 
3
- const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected){cursor:pointer}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).active,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-color-1)}";
3
+ const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block;cursor:pointer}.sc-ix-menu-item-h:not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h:not(.disabled):not(:disabled).active,.sc-ix-menu-item-h:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem;background-color:transparent}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:hover,.bottom-tab.selected.sc-ix-menu-item-h:hover,[slot=bottom].active.sc-ix-menu-item-h:hover,[slot=bottom].selected.sc-ix-menu-item-h:hover{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:active,.bottom-tab.selected.sc-ix-menu-item-h:active,[slot=bottom].active.sc-ix-menu-item-h:active,[slot=bottom].selected.sc-ix-menu-item-h:active{background-color:var(--theme-nav-item-secondary--background--selected)}";
4
4
 
5
5
  const MenuItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
6
6
  constructor() {
package/dist/esm/ix-dropdown_2.entry.js CHANGED
@@ -302,7 +302,7 @@ const DropdownItem = class {
302
302
  'icon-text': this.label !== undefined && this.icon !== undefined,
303
303
  'icon-only': this.label === undefined && this.icon !== undefined,
304
304
  disabled: this.disabled,
305
- } }, h("button", { class: {
305
+ } }, h("button", { type: "button", class: {
306
306
  'dropdown-item': true,
307
307
  hover: this.hover,
308
308
  disabled: this.disabled,
package/dist/esm/ix-menu_9.entry.js CHANGED
@@ -665,7 +665,7 @@ const MenuAvatarItem = class {
665
665
  };
666
666
  MenuAvatarItem.style = menuAvatarItemCss;
667
667
 
668
- const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected){cursor:pointer}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled).active,.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(.selected):not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-color-1)}";
668
+ const menuItemCss = ".sc-ix-menu-item-h{position:relative;display:block;cursor:pointer}.sc-ix-menu-item-h:not(.disabled):not(:disabled).hover,.sc-ix-menu-item-h:not(.disabled):not(:disabled):hover{background-color:var(--theme-ghost--background--hover)}.sc-ix-menu-item-h:not(.disabled):not(:disabled).active,.sc-ix-menu-item-h:not(.disabled):not(:disabled):active{background-color:var(--theme-ghost--background--active)}.sc-ix-menu-item-h .tab.sc-ix-menu-item{display:flex;position:relative;align-items:center;height:3rem;z-index:500;padding-left:1.25rem}.sc-ix-menu-item-h i.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color);position:relative}.sc-ix-menu-item-h .tab.sc-ix-menu-item:focus-visible{outline:none}.sc-ix-menu-item-h:focus-visible{outline:none}.sc-ix-menu-item-h .tab.sc-ix-menu-item:not(:last-child){margin-bottom:0.5rem}.sc-ix-menu-item-h .notification.sc-ix-menu-item{display:inline-flex;position:absolute;top:-0.5rem;right:-50%}.sc-ix-menu-item-h .notification.sc-ix-menu-item .pill.sc-ix-menu-item{display:inline-flex;justify-content:center;align-items:center;height:1rem;min-width:1rem;position:relative;border-radius:6.25rem;background-color:var(--theme-color-primary);border-radius:6.25rem;font-size:0.75rem;font-weight:bold;line-height:1;font-family:Siemens Sans, Arial, sans-serif;color:var(--theme-color-primary--contrast);padding:0.25rem}.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--theme-nav-item-primary--color);margin:0 1.25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-primary--background--selected)}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item::before{content:\"\";background-color:var(--theme-nav-item-primary--border-color--selected);height:3rem;width:0.25rem;left:0;position:absolute}.active.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item,.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-nav-item-primary-icon--color--selected)}.disabled.sc-ix-menu-item-h{color:var(--theme-color-weak-text);pointer-events:none;cursor:default}.disabled.sc-ix-menu-item-h .tab.sc-ix-menu-item>.glyph.sc-ix-menu-item{color:var(--theme-color-weak-text)}.disabled.sc-ix-menu-item-h .tab-text.sc-ix-menu-item{color:var(--theme-color-weak-text)}.home-tab.sc-ix-menu-item-h,[slot=home].sc-ix-menu-item-h{margin-bottom:1.5rem}.bottom-tab.sc-ix-menu-item-h,[slot=bottom].sc-ix-menu-item-h{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item{height:2.25rem}.bottom-tab.sc-ix-menu-item-h .tab.sc-ix-menu-item::before,[slot=bottom].sc-ix-menu-item-h .tab.sc-ix-menu-item::before{height:2.25rem;background-color:transparent}.bottom-tab.active.sc-ix-menu-item-h .tab.sc-ix-menu-item,.bottom-tab.selected.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].active.sc-ix-menu-item-h .tab.sc-ix-menu-item,[slot=bottom].selected.sc-ix-menu-item-h .tab.sc-ix-menu-item{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:hover,.bottom-tab.selected.sc-ix-menu-item-h:hover,[slot=bottom].active.sc-ix-menu-item-h:hover,[slot=bottom].selected.sc-ix-menu-item-h:hover{background-color:var(--theme-nav-item-secondary--background--selected)}.bottom-tab.active.sc-ix-menu-item-h:active,.bottom-tab.selected.sc-ix-menu-item-h:active,[slot=bottom].active.sc-ix-menu-item-h:active,[slot=bottom].selected.sc-ix-menu-item-h:active{background-color:var(--theme-nav-item-secondary--background--selected)}";
669
669
 
670
670
  const MenuItem = class {
671
671
  constructor(hostRef) {
package/dist/esm/ix-select_2.entry.js CHANGED
@@ -228,7 +228,7 @@ const Select = class {
228
228
  if (!this.editable)
229
229
  this.dropdownWrapperRef = ref;
230
230
  } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
231
- ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
231
+ ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
232
232
  e.preventDefault();
233
233
  e.stopPropagation();
234
234
  this.emitItemClick(item.value);
@@ -250,9 +250,9 @@ const Select = class {
250
250
  'd-none': this.disabled ||
251
251
  this.readonly ||
252
252
  (this.isDropdownEmpty && !this.editable),
253
- }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async (delegateConfig) => {
253
+ }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "auto-start", overwriteDropdownStyle: async () => {
254
254
  return {
255
- width: `${delegateConfig.triggerRef.clientWidth}px`,
255
+ width: `${this.hostElement.clientWidth}px`,
256
256
  };
257
257
  } }, h("div", { class: "select-list-header", title: this.i18nSelectListHeader }, this.i18nSelectListHeader), h("slot", null), h("div", { ref: (ref) => (this.addItemRef = ref), class: "d-contents" }), this.itemExists(this.inputFilterText) ? ('') : (h("ix-dropdown-item", { "data-testid": "add-item", icon: "plus", class: {
258
258
  'add-item': true,