@siemens/ix 1.1.1 → 1.2.0

package/dist/collection/components/menu-avatar/menu-avatar.css

@@ -60,7 +60,7 @@
   fill: var(--theme-avatar--background);
 }
 :host .avatar #avatar-path-person {
-  fill: var(--theme-avatar--person);
+  fill: var(--theme-color-4);
 }
 :host .avatar .avatar-name {
   display: flex;

package/dist/collection/components/menu-avatar/menu-avatar.js

@@ -6,7 +6,7 @@
  * 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';
+import { h, Host, } from '@stencil/core';
 import { Popover } from '../utils/popover.util';
 export class MenuAvatar {
   constructor() {

package/dist/collection/components/menu-avatar-item/menu-avatar-item.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 export class MenuAvatarItem {
   constructor() {
     this.icon = undefined;

package/dist/collection/components/message-bar/message-bar.js

@@ -6,7 +6,7 @@
  * 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';
+import { h, Host, } from '@stencil/core';
 import anime from 'animejs';
 export class MessageBar {
   constructor() {

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/collection/components/select-item/select-item.js

@@ -6,7 +6,7 @@
  * 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';
+import { h, Host, } from '@stencil/core';
 export class SelectItem {
   constructor() {
     this.label = undefined;

package/dist/collection/components/split-button-item/split-button-item.js

@@ -6,7 +6,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { h } from '@stencil/core';
+import { h, } from '@stencil/core';
 export class SplitButtonItem {
   constructor() {
     this.icon = undefined;

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

@@ -27,7 +27,7 @@ export class TabItem {
       stretched: props.layout === 'stretched',
       bottom: props.placement === 'bottom',
       top: props.placement === 'top',
-      circle: props.circle
+      circle: props.circle,
     };
   }
   render() {
@@ -39,7 +39,17 @@ export class TabItem {
         layout: this.layout,
         placement: this.placement,
         circle: this.rounded,
-      }), tabIndex: 0 }, h("div", { class: { circle: this.rounded, text: !this.rounded, selected: this.selected, disabled: this.disabled } }, h("slot", null)), h("div", { class: { counter: true, selected: this.selected, hidden: !(this.rounded && this.counter !== undefined), disabled: this.disabled } }, this.counter)));
+      }), tabIndex: 0 }, h("div", { class: {
+        circle: this.rounded,
+        text: !this.rounded,
+        selected: this.selected,
+        disabled: this.disabled,
+      } }, h("slot", null)), h("div", { class: {
+        counter: true,
+        selected: this.selected,
+        hidden: !(this.rounded && this.counter !== undefined),
+        disabled: this.disabled,
+      } }, this.counter)));
   }
   static get is() { return "ix-tab-item"; }
   static get originalStyleUrls() {

package/dist/collection/components/tabs/tabs.js

@@ -86,7 +86,7 @@ export class Tabs {
     amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;
     const styles = [
       `transform: translateX(${amount}px);`,
-      click ? `transition: all ease-in-out 400ms;` : '',
+      click ? 'transition: all ease-in-out 400ms;' : '',
     ].join('');
     tabWrapper.setAttribute('style', styles);
     if (click)
@@ -114,7 +114,7 @@ export class Tabs {
     if (!this.showArrows())
       return;
     if (event.button > 0)
-      return; // ignore right click
+      return;
     this.clickAction.timeout =
       this.clickAction.timeout === null
         ? setTimeout(() => (this.clickAction.isClick = false), 300)

package/dist/collection/components/toast/toast.js

@@ -6,7 +6,7 @@
  * 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';
+import { h, Host, } from '@stencil/core';
 export class Toast {
   constructor() {
     this.type = 'info';
@@ -47,7 +47,7 @@ export class Toast {
   render() {
     let progressBarElement;
     let progressBarStyle = {};
-    const progressBarClass = [`toast-progress-bar`];
+    const progressBarClass = ['toast-progress-bar'];
     if (!this.touched) {
       progressBarStyle = {
         animationDuration: `${this.autoCloseDelay}ms`,

package/dist/collection/components/tree/tree.js

@@ -6,7 +6,7 @@
  * 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';
+import { h, Host, } from '@stencil/core';
 import Hyperlist from 'hyperlist';
 import { renderDefaultItem } from '../tree-item/default-tree-item';
 export class Tree {

package/dist/collection/components/utils/rwd.util.js

@@ -21,9 +21,9 @@ export const convertToAbbreviationString = (num) => {
     { unit: 't', value: Math.pow(10, 12) },
     { unit: 'B', value: Math.pow(10, 9) },
     { unit: 'M', value: Math.pow(10, 6) },
-    { unit: 'K', value: Math.pow(10, 3) }, // 1000
+    { unit: 'K', value: Math.pow(10, 3) },
   ];
-  units.some(pow => {
+  units.some((pow) => {
     let formattedNum = Math.abs(num);
     if (formattedNum >= pow.value) {
       formattedNum /= pow.value;

package/dist/collection/components/utils/typed-event.js

@@ -27,16 +27,16 @@ export class TypedEvent {
     };
     this.emit = (event) => {
       /** Update any general listeners */
-      this.listeners.forEach(listener => listener(event));
+      this.listeners.forEach((listener) => listener(event));
       /** Clear the `once` queue */
       if (this.listenersOncer.length > 0) {
         const toCall = this.listenersOncer;
         this.listenersOncer = [];
-        toCall.forEach(listener => listener(event));
+        toCall.forEach((listener) => listener(event));
       }
     };
     this.pipe = (te) => {
-      return this.on(e => te.emit(e));
+      return this.on((e) => te.emit(e));
     };
   }
 }

package/dist/collection/components/workflow-step/workflow-step.js

@@ -9,7 +9,7 @@
 /*
  * COPYRIGHT (c) Siemens AG 2018-2022 ALL RIGHTS RESERVED.
  */
-import { h, Host, Fragment, } from '@stencil/core';
+import { Fragment, h, Host, } from '@stencil/core';
 export class WorkflowStep {
   constructor() {
     this.vertical = false;

package/dist/components/date-picker.js

@@ -113,7 +113,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     weekdays = days.reduce((result, item, index) => {
       const weekIndex = Math.floor(index / this.daysInWeek);
       if (!result[weekIndex])
-        result[weekIndex] = []; // start a new chunk
+        result[weekIndex] = [];
       result[weekIndex].push(item);
       return result;
     }, []);

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/icon.js

@@ -14,10 +14,10 @@ const Icon = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     return (h(Host, { style: {
         color: this.color ? `var(--theme-${this.color})` : 'inherit',
       }, class: {
-        [`size-12`]: this.size === '12',
-        [`size-16`]: this.size === '16',
-        [`size-24`]: this.size === '24',
-        [`size-32`]: this.size === '32',
+        ['size-12']: this.size === '12',
+        ['size-16']: this.size === '16',
+        ['size-24']: this.size === '24',
+        ['size-32']: this.size === '32',
       } }, h("i", { class: {
         glyph: true,
         [`glyph-${this.name}`]: true,

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-drawer.js

@@ -53,7 +53,9 @@ const Drawer = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const target = evt.target;
     const closestElement = target.closest('#div-container');
     const btn = target.closest('#drawer-btn');
-    if (evt.target.type !== "button" && closestElement !== this.divElement && target !== btn) {
+    if (evt.target.type !== 'button' &&
+      closestElement !== this.divElement &&
+      target !== btn) {
       this.show = false;
     }
   }

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();
       }