@siemens/ix 1.2.0-beta.0 → 1.2.0

package/dist/collection/components/group/group-context-menu.js

@@ -0,0 +1,51 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { h, Host } from '@stencil/core';
+export class GroupContextMenu {
+  constructor() {
+    this.showContextMenu = false;
+  }
+  get dropdownElement() {
+    return this.host.querySelector('ix-dropdown');
+  }
+  get groupDropdownItem() {
+    return this.host.querySelectorAll('ix-group-dropdown-item');
+  }
+  configureDropdown(triggerElement) {
+    this.dropdownElement.positioningStrategy = 'fixed';
+    this.dropdownElement.trigger = triggerElement;
+  }
+  componentWillRender() {
+    this.showContextMenu = !!this.dropdownElement;
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), h("slot", null)));
+  }
+  static get is() { return "ix-group-context-menu"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["./group-context-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["group-context-menu.css"]
+    };
+  }
+  static get states() {
+    return {
+      "showContextMenu": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/group/group.css

@@ -52,16 +52,6 @@
   max-width: 19.75rem;
   border-color: var(--theme-group-item--border-color);
 }
-:host .group-header-context-button {
-  display: block;
-  position: relative;
-  margin-top: 5px;
-  margin-right: 5px;
-  margin-left: auto;
-}
-:host .group-header-context-button ix-icon-button::after {
-  display: none;
-}
 :host .group-header {
   height: 4rem;
   min-height: 4rem;
@@ -162,7 +152,7 @@
   background-color: var(--theme-group-item--background--selected);
 }
 :host .group-header.selected .group-header-selection-indicator {
-  background-color: var(--theme-color-input-focus);
+  background-color: var(--theme-color-input--focus);
 }
 :host .footer {
   height: auto;

package/dist/collection/components/group/group.js

@@ -100,7 +100,7 @@ export class Group {
         'group-header': true,
         expand: !this.collapsed,
         selected: this.selected,
-      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("div", { class: { 'group-header-context-button': true, 'd-none': false } }, h("ix-icon-button", { ref: (ref) => (this.dropdownTriggerRef = ref), size: "24", ghost: true, icon: "context-menu" }), h("ix-dropdown", { trigger: this.dropdownTriggerRef }, h("slot", { name: "dropdown" })))), h("div", { class: {
+      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
         'group-content': true,
         'd-none': this.collapsed,
       } }, h("slot", null)), h("div", { class: "d-none" }, h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false }, h("slot", { name: "footer" })))));

package/dist/collection/components/group-item/group-item.css

@@ -109,7 +109,7 @@
   background-color: var(--theme-group-item--background--selected);
 }
 :host.selected .group-entry-selection-indicator {
-  background-color: var(--theme-color-input-focus);
+  background-color: var(--theme-color-input--focus);
 }
 :host:not(.disabled):not(:disabled):focus-visible {
   border-color: var(--focus--border-color) !important;

package/dist/collection/components/icon-button/icon-button.css

@@ -0,0 +1,42 @@
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+/*
+ * SPDX-FileCopyrightText: 2022 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.
+ */
+/* Dimensions */
+/* Font sizes */
+/* Line heights */
+/* Animation timings */
+:host .icon-button {
+  padding: 0;
+  overflow: hidden;
+}
+:host .btn-icon-12 {
+  height: 1rem;
+  width: 1rem;
+  min-width: 1rem;
+  min-height: 1rem;
+}
+:host .btn-icon-16 {
+  height: 1.5rem;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+}
+:host .btn-icon-32 {
+  height: 2rem;
+  width: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+}

package/dist/collection/components/icon-button/icon-button.js

@@ -23,13 +23,23 @@ export class IconButton {
     this.type = 'button';
   }
   getIconButtonClasses() {
-    return Object.assign({ 'btn-icon-xs': this.size === '12', 'btn-icon-s': this.size === '16' }, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled));
+    return Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true, 'btn-icon-12': this.size === '12', 'btn-icon-16': this.size === '16', 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size });
   }
   render() {
     return (h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null))));
   }
   static get is() { return "ix-icon-button"; }
   static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["icon-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["icon-button.css"]
+    };
+  }
   static get properties() {
     return {
       "variant": {

package/dist/collection/components/modal/modal-utils.js

@@ -10,7 +10,7 @@ function getModalContainer() {
   const containerList = Array.from(document.querySelectorAll('ix-modal-container'));
   const [container] = containerList;
   if (containerList.length > 1) {
-    console.warn('Multiple modal container are found. Only there first is used.');
+    console.warn('Multiple modal containers were found. The one instatiated first will be used.');
     return container;
   }
   if (!container) {

package/dist/collection/components/modal/modal.js

@@ -472,7 +472,7 @@ export class Modal {
     return {
       "dismiss": {
         "complexType": {
-          "signature": "(reason?: any) => Promise<void>",
+          "signature": "<T = any>(reason?: T) => Promise<void>",
           "parameters": [{
               "tags": [{
                   "name": "param",
@@ -483,6 +483,9 @@ export class Modal {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "T": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"
@@ -497,7 +500,7 @@ export class Modal {
       },
       "close": {
         "complexType": {
-          "signature": "(result: any) => Promise<void>",
+          "signature": "<T = any>(result: T) => Promise<void>",
           "parameters": [{
               "tags": [{
                   "name": "param",
@@ -508,6 +511,9 @@ export class Modal {
           "references": {
             "Promise": {
               "location": "global"
+            },
+            "T": {
+              "location": "global"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/modal-container/modal-container.js

@@ -51,6 +51,7 @@ export class ModalContainer {
       onDismiss.emit(event.detail);
     });
     return {
+      htmlElement: modal,
       onClose,
       onDismiss,
     };
@@ -74,7 +75,7 @@ export class ModalContainer {
     return {
       "showModal": {
         "complexType": {
-          "signature": "(config: ModalConfig) => Promise<{ onClose: TypedEvent<any>; onDismiss: TypedEvent<any>; }>",
+          "signature": "(config: ModalConfig) => Promise<ModalInstance>",
           "parameters": [{
               "tags": [{
                   "name": "param",
@@ -86,9 +87,9 @@ export class ModalContainer {
             "Promise": {
               "location": "global"
             },
-            "TypedEvent": {
+            "ModalInstance": {
               "location": "import",
-              "path": "../utils/typed-event"
+              "path": "../modal/modal-utils"
             },
             "ModalConfig": {
               "location": "import",
@@ -98,7 +99,7 @@ export class ModalContainer {
               "location": "global"
             }
           },
-          "return": "Promise<{ onClose: TypedEvent<any>; onDismiss: TypedEvent<any>; }>"
+          "return": "Promise<ModalInstance<any>>"
         },
         "docs": {
           "text": "Display modal dialog",

package/dist/collection/components/select/select.css

@@ -81,24 +81,20 @@
   display: flex;
   position: relative;
   align-items: flex-start;
-  height: calc(2rem - 2 * var(--theme-input--border-thickness));
   width: 100%;
 }
-:host .input-container.allow-clear {
-  padding-right: 3.5rem;
-}
 :host .input-container .chips {
   position: relative;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   height: 100%;
-  max-width: 70%;
-  flex-shrink: 0;
-  margin: auto;
+  max-height: 3.5rem;
+  flex-grow: 1;
+  overflow-y: auto;
 }
 :host .input-container .chips > ix-filter-chip {
-  margin: 0.1rem;
+  margin: 0 0.1rem;
 }
 :host .input-container input {
   overflow: hidden;
@@ -114,8 +110,6 @@
   background: transparent;
   height: 1.75rem;
   width: 100%;
-  -webkit-margin-end: 2rem;
-          margin-inline-end: 2rem;
 }
 :host .input-container input, :host .input-container input:hover, :host .input-container input:focus-visible {
   border: none;
@@ -153,10 +147,6 @@
 :host .editable .chevron-down-container:not(.disabled):not(:disabled):active {
   background-color: var(--theme-btn-invisible-secondary--background--active);
 }
-:host .clear {
-  position: absolute;
-  right: 2rem;
-}
 :host .add-item {
   display: flex;
   justify-content: flex-start;
@@ -165,6 +155,9 @@
   width: 100%;
 }
 :host .select-list-header {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   display: flex;
   align-items: center;
   height: 2rem;

package/dist/collection/components/select/select.js

@@ -159,6 +159,9 @@ export class Select {
   }
   async onEnterNavigation() {
     var _a, _b;
+    if (this.isMultipleMode) {
+      return;
+    }
     if (this.editable && !this.itemExists(this.inputFilterText)) {
       this.emitAddItem(this.inputFilterText);
       this.navigationItem = this.items[this.items.length - 1];
@@ -216,6 +219,7 @@ export class Select {
     this.value = [];
     this.selectedIndices = [];
     this.itemSelectionChange.emit(null);
+    this.dropdownShow = false;
   }
   render() {
     var _a, _b, _c;
@@ -230,28 +234,32 @@ export class Select {
         this.dropdownAnchor = ref;
         if (!this.editable)
           this.dropdownWrapperRef = ref;
-      } }, h("div", { class: "input-container" }, this.isMultipleMode ? (h("div", { class: "chips" }, (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        this.emitItemClick(item.value);
-      } }, item.label))))) : null, h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
+      } }, h("div", { class: "input-container" }, h("div", { class: "chips" }, this.isMultipleMode
+      ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, onCloseClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          this.emitItemClick(item.value);
+        } }, item.label)))
+      : '', h("div", { class: "trigger" }, h("input", { "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, type: "text", class: {
         'allow-clear': this.allowClear && !!((_b = this.value) === null || _b === void 0 ? void 0 : _b.length),
       }, placeholder: this.editable
         ? this.i18nPlaceholderEditable
-        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
-        if (this.editable)
-          this.dropdownWrapperRef = ref;
-      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))), this.allowClear && (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
+        : this.i18nPlaceholder, value: this.inputValue, ref: (ref) => (this.inputRef = ref), onInput: () => this.filterItemsWithTypeahead() }), this.isMultipleMode &&
+      this.allowClear &&
+      (((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || this.inputFilterText) ? (h("ix-icon-button", { class: "clear", icon: "clear", ghost: true, oval: true, size: "24", onClick: (e) => {
         e.preventDefault();
         e.stopPropagation();
         this.clear();
-      } })) : null), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, style: {
+      } })) : null, this.disabled || this.readonly ? null : (h("div", { class: "chevron-down-container", ref: (ref) => {
+        if (this.editable)
+          this.dropdownWrapperRef = ref;
+      } }, h("ix-icon", { class: "chevron", name: "chevron-down-small" }))))))), h("ix-dropdown", { ref: (ref) => (this.dropdownRef = ref), show: this.dropdownShow, style: {
         width: '100%',
       }, class: {
         'd-none': this.disabled ||
           this.readonly ||
           (this.isDropdownEmpty && !this.editable),
-      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, h("div", { class: "select-list-header" }, 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: {
+      }, anchor: this.dropdownAnchor, trigger: this.dropdownWrapperRef, onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom", positioningStrategy: 'fixed', adjustDropdownWidthToReferenceWidth: true }, 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: {
         'add-item': true,
         'd-none': !(this.editable && this.inputFilterText),
       }, label: this.inputFilterText, onItemClick: (e) => {

package/dist/components/group-context-menu.js

@@ -0,0 +1,61 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$1 } from './icon-button.js';
+
+const groupContextMenuCss = ".sc-ix-group-context-menu-h{display:block;position:relative;-webkit-margin-before:0.3125rem;margin-block-start:0.3125rem;-webkit-margin-end:0.3125rem;margin-inline-end:0.3125rem;-webkit-margin-start:auto;margin-inline-start:auto}.sc-ix-group-context-menu-h ix-icon-button.sc-ix-group-context-menu::after{display:none}.sc-ix-group-context-menu-h .hide.sc-ix-group-context-menu{visibility:collapse}";
+
+const GroupContextMenu = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.showContextMenu = false;
+  }
+  get dropdownElement() {
+    return this.host.querySelector('ix-dropdown');
+  }
+  get groupDropdownItem() {
+    return this.host.querySelectorAll('ix-group-dropdown-item');
+  }
+  configureDropdown(triggerElement) {
+    this.dropdownElement.positioningStrategy = 'fixed';
+    this.dropdownElement.trigger = triggerElement;
+  }
+  componentWillRender() {
+    this.showContextMenu = !!this.dropdownElement;
+  }
+  disconnectedCallback() {
+    this.observer.disconnect();
+  }
+  render() {
+    return (h(Host, null, h("ix-icon-button", { class: { hide: !this.showContextMenu }, ref: (ref) => this.dropdownElement ? this.configureDropdown(ref) : null, size: "24", ghost: true, icon: "context-menu" }), h("slot", null)));
+  }
+  get host() { return this; }
+  static get style() { return groupContextMenuCss; }
+}, [6, "ix-group-context-menu", {
+    "showContextMenu": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ix-group-context-menu", "ix-icon", "ix-icon-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ix-group-context-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, GroupContextMenu);
+      }
+      break;
+    case "ix-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "ix-icon-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { GroupContextMenu as G, defineCustomElement as d };

package/dist/components/group-item.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './icon.js';
 
-const groupItemCss = ".sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;justify-content:space-between;padding:0.5rem 1.5rem 0.5rem 2.5rem;position:relative;margin-top:0.0625rem;border:1px solid var(--theme-group-item--border-color);outline:none;background-color:var(--theme-group-item--background)}.last.sc-ix-group-item-h{border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem}.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:0;height:100%;width:0.25rem}.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text);font-size:0.875rem}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;border-color:var(--theme-group-item--border-color--selected);background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-color-input-focus)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color) !important}";
+const groupItemCss = ".sc-ix-group-item-h{display:flex;min-height:2.25rem;height:2.25rem;align-items:center;justify-content:space-between;padding:0.5rem 1.5rem 0.5rem 2.5rem;position:relative;margin-top:0.0625rem;border:1px solid var(--theme-group-item--border-color);outline:none;background-color:var(--theme-group-item--background)}.last.sc-ix-group-item-h{border-bottom-left-radius:0.25rem;border-bottom-right-radius:0.25rem}.sc-ix-group-item-h ix-icon.sc-ix-group-item{margin-right:0.25rem;margin-top:-0.125rem}.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{position:absolute;left:0;height:100%;width:0.25rem}.sc-ix-group-item-h .group-entry-text.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-grow:1}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item{display:flex;justify-content:flex-end;flex-grow:1;white-space:nowrap;color:var(--theme-color-soft-text);font-size:0.875rem}.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item,.sc-ix-group-item-h .group-entry-text-secondary.sc-ix-group-item span.sc-ix-group-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-item-h:not(.suppress-selection):not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.selected.sc-ix-group-item-h{border-top-width:0.062rem !important;border-color:var(--theme-group-item--border-color--selected);background-color:var(--theme-group-item--background--selected)}.selected.sc-ix-group-item-h .group-entry-selection-indicator.sc-ix-group-item{background-color:var(--theme-color-input--focus)}.sc-ix-group-item-h:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color) !important}";
 
 const GroupItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/icon-button.js

@@ -2,6 +2,8 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { g as getButtonClasses } from './base-button.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
+const iconButtonCss = ".sc-ix-icon-button-h .icon-button.sc-ix-icon-button{padding:0;overflow:hidden}.sc-ix-icon-button-h .btn-icon-12.sc-ix-icon-button{height:1rem;width:1rem;min-width:1rem;min-height:1rem}.sc-ix-icon-button-h .btn-icon-16.sc-ix-icon-button{height:1.5rem;width:1.5rem;min-width:1.5rem;min-height:1.5rem}.sc-ix-icon-button-h .btn-icon-32.sc-ix-icon-button{height:2rem;width:2rem;min-width:2rem;min-height:2rem}";
+
 const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -19,11 +21,12 @@ const IconButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.type = 'button';
   }
   getIconButtonClasses() {
-    return Object.assign({ 'btn-icon-xs': this.size === '12', 'btn-icon-s': this.size === '16' }, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled));
+    return Object.assign(Object.assign({}, getButtonClasses(this.variant, this.outline, this.ghost || this.invisible, true, this.oval, this.selected, this.disabled)), { 'icon-button': true, 'btn-icon-12': this.size === '12', 'btn-icon-16': this.size === '16', 'btn-icon-32': this.size === '32' || this.size === '24' || !this.size });
   }
   render() {
     return (h("button", { class: this.getIconButtonClasses(), type: this.type }, h("ix-icon", { size: this.size, name: this.icon, color: this.color }), h("div", { style: { display: 'none' } }, h("slot", null))));
   }
+  static get style() { return iconButtonCss; }
 }, [6, "ix-icon-button", {
     "variant": [1],
     "outline": [4],

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export { FilterChip as IxFilterChip } from '../types/components/filter-chip/filt
 export { FlipTile as IxFlipTile } from '../types/components/flip-tile/flip-tile';
 export { FlipTileContent as IxFlipTileContent } from '../types/components/flip-tile-content/flip-tile-content';
 export { Group as IxGroup } from '../types/components/group/group';
+export { GroupContextMenu as IxGroupContextMenu } from '../types/components/group/group-context-menu';
 export { GroupDropdownItem as IxGroupDropdownItem } from '../types/components/group-dropdown-item/group-dropdown-item';
 export { GroupItem as IxGroupItem } from '../types/components/group-item/group-item';
 export { Icon as IxIcon } from '../types/components/icon/icon';

package/dist/components/index.js

@@ -29,6 +29,7 @@ export { IxExpandingSearch, defineCustomElement as defineCustomElementIxExpandin
 export { IxFilterChip, defineCustomElement as defineCustomElementIxFilterChip } from './ix-filter-chip.js';
 export { IxFlipTileContent, defineCustomElement as defineCustomElementIxFlipTileContent } from './ix-flip-tile-content.js';
 export { IxGroup, defineCustomElement as defineCustomElementIxGroup } from './ix-group.js';
+export { IxGroupContextMenu, defineCustomElement as defineCustomElementIxGroupContextMenu } from './ix-group-context-menu.js';
 export { IxGroupDropdownItem, defineCustomElement as defineCustomElementIxGroupDropdownItem } from './ix-group-dropdown-item.js';
 export { IxGroupItem, defineCustomElement as defineCustomElementIxGroupItem } from './ix-group-item.js';
 export { IxIcon, defineCustomElement as defineCustomElementIxIcon } from './ix-icon.js';

package/dist/components/ix-group-context-menu.d.ts

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

package/dist/components/ix-group-context-menu.js

@@ -0,0 +1,6 @@
+import { G as GroupContextMenu, d as defineCustomElement$1 } from './group-context-menu.js';
+
+const IxGroupContextMenu = GroupContextMenu;
+const defineCustomElement = defineCustomElement$1;
+
+export { IxGroupContextMenu, defineCustomElement };

package/dist/components/ix-group.js

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './group-context-menu.js';
 import { d as defineCustomElement$4 } from './group-item.js';
 import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './icon-button.js';
 
-const groupCss = ".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header-context-button.sc-ix-group{display:block;position:relative;margin-top:5px;margin-right:5px;margin-left:auto}.sc-ix-group-h .group-header-context-button.sc-ix-group ix-icon-button.sc-ix-group::after{display:none}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:0.25rem;border:var(--theme-std-bdr-1);display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;padding:0.5rem;padding-left:0;width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.selected.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input-focus)}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}";
+const groupCss = ".sc-ix-group-h{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:column;position:relative;max-width:19.75rem;border-color:var(--theme-group-item--border-color)}.sc-ix-group-h .group-header.sc-ix-group{height:4rem;min-height:4rem;max-height:4rem;border-radius:0.25rem;border:var(--theme-std-bdr-1);display:flex;background-color:var(--theme-group-item--background);border:1px solid var(--theme-group-item--border-color);color:var(--theme-group-header--color);cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):hover{background-color:var(--theme-group-item--background--hover);border-color:var(--theme-group-item--border-color--hover)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):active{background-color:var(--theme-group-item--background--active);border-color:var(--theme-group-item--border-color--active)}.sc-ix-group-h .group-header.sc-ix-group:not(.disabled):not(:disabled):focus-visible{border-color:var(--focus--border-color);border-radius:var(--theme-group--border-radius--focus);outline:none}.sc-ix-group-h .group-header-clickable.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;width:100%;min-width:0}.sc-ix-group-h .group-header.expand.sc-ix-group{border-bottom-left-radius:0;border-bottom-right-radius:0}.sc-ix-group-h .group-header-selection-indicator.sc-ix-group{width:0.25rem}.sc-ix-group-h .group-header-content.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;flex-direction:row;justify-content:space-between;min-width:0;padding:0.5rem;padding-left:0;width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-props-container.sc-ix-group{width:100%}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group{display:flex;align-items:center;font-size:1rem;font-weight:700;height:1.5rem}.sc-ix-group-h .group-header-content.sc-ix-group .group-header-title.sc-ix-group>*.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.sc-ix-group-h .group-header-content.sc-ix-group .group-subheader.sc-ix-group{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;height:1.25rem;font-size:0.875rem;color:var(--theme-group-subheader--color)}.sc-ix-group-h .expand-icon.sc-ix-group{padding:0.125rem 0.437rem;color:var(--theme-color-std-text)}.sc-ix-group-h .btn-expand-header.sc-ix-group{margin:0.5rem;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-group-h .group-content.sc-ix-group{display:flex;flex-direction:column}.sc-ix-group-h .group-header.selected.sc-ix-group{border:var(--theme-primary-bdr-2);background-color:var(--theme-group-item--background--selected)}.sc-ix-group-h .group-header.selected.sc-ix-group .group-header-selection-indicator.sc-ix-group{background-color:var(--theme-color-input--focus)}.sc-ix-group-h .footer.sc-ix-group{height:auto;min-height:0}";
 
 const Group = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() { super(); this.__registerHost(); this.selectGroup = createEvent(this, "selectGroup", 7); this.selectItem = createEvent(this, "selectItem", 7); this.collapsedChanged = createEvent(this, "collapsedChanged", 7); this.suppressHeaderSelection = false; this.header = undefined; this.subHeader = undefined; this.collapsed = true; this.selected = undefined; this.index = undefined; this.expandOnHeaderClick = false; this.dropdownTriggerRef = undefined; }
@@ -99,7 +99,7 @@ const Group = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         'group-header': true,
         expand: !this.collapsed,
         selected: this.selected,
-      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("div", { class: { 'group-header-context-button': true, 'd-none': false } }, h("ix-icon-button", { ref: (ref) => (this.dropdownTriggerRef = ref), size: "24", ghost: true, icon: "context-menu" }), h("ix-dropdown", { trigger: this.dropdownTriggerRef }, h("slot", { name: "dropdown" })))), h("div", { class: {
+      }, tabindex: "0" }, h("div", { class: "group-header-clickable", onClick: (e) => this.onHeaderClick(e) }, h("div", { class: "group-header-selection-indicator" }), h("ix-icon", { class: "btn-expand-header", name: `chevron-${this.collapsed ? 'right' : 'down'}-small`, onClick: (e) => this.onExpandClick(e) }), h("div", { class: "group-header-content" }, this.header ? (h("div", { class: "group-header-props-container" }, h("div", { class: "group-header-title" }, h("span", { title: this.header }, this.header)), h("div", { class: "group-subheader", title: this.subHeader }, this.subHeader))) : null, h("slot", { name: "header" }))), h("ix-group-context-menu", null, h("slot", { name: "dropdown" }))), h("div", { class: {
         'group-content': true,
         'd-none': this.collapsed,
       } }, h("slot", null)), h("div", { class: "d-none" }, h("ix-group-item", { class: "footer last", suppressSelection: true, focusable: false }, h("slot", { name: "footer" })))));
@@ -120,14 +120,14 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["ix-group", "ix-dropdown", "ix-group-item", "ix-icon", "ix-icon-button"];
+  const components = ["ix-group", "ix-group-context-menu", "ix-group-item", "ix-icon", "ix-icon-button"];
   components.forEach(tagName => { switch (tagName) {
     case "ix-group":
       if (!customElements.get(tagName)) {
         customElements.define(tagName, Group);
       }
       break;
-    case "ix-dropdown":
+    case "ix-group-context-menu":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

package/dist/components/ix-modal-example.js

@@ -17,7 +17,7 @@ function getModalContainer() {
   const containerList = Array.from(document.querySelectorAll('ix-modal-container'));
   const [container] = containerList;
   if (containerList.length > 1) {
-    console.warn('Multiple modal container are found. Only there first is used.');
+    console.warn('Multiple modal containers were found. The one instatiated first will be used.');
     return container;
   }
   if (!container) {