@ukic/canary-web-components 2.0.0-canary.31 → 2.0.0-canary.32

package/hydrate/index.js

@@ -8053,6 +8053,10 @@ const removeFormResetListener$1 = (el, callbackFn) => {
     (_a = el.closest("FORM")) === null || _a === void 0 ? void 0 : _a.removeEventListener("reset", callbackFn);
 };
 const pxToRem$1 = (px, base = 16) => `${(1 / base) * parseInt(px)}rem`;
+/**
+ * Removes the disabled attribute from the provided element when its value is set to false.
+ * This effectively makes it null, to not confuse screen readers that cannot interpret the false value
+ */
 const removeDisabledFalse$1 = (disabled, element) => {
     if (!disabled) {
         element.removeAttribute("disabled");
@@ -8143,6 +8147,9 @@ class Accordion {
         this.message = "";
         this.size = "default";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     // Every time expanded is set via toggleExpanded or accordionGroup, animate to open or close
     handleExpandedWatch() {
         this.animateExpandedContent();
@@ -8155,6 +8162,9 @@ class Accordion {
             this.accordionBtnHeading.focus();
         }
     }
+    componentWillLoad() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     disconnectedCallback() {
         if (this.expandedContentEl) {
             this.expandedContentEl.removeEventListener("transitionend", (e) => this.setExpandedContentStyle(e, this.expandedContentEl), true);
@@ -8186,6 +8196,7 @@ class Accordion {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "expanded": ["handleExpandedWatch"]
     }; }
     static get style() { return icAccordionCss; }
@@ -9497,6 +9508,9 @@ class Card$1 {
         this.subheading = undefined;
         this.target = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     disconnectedCallback() {
         var _a;
         if (this.parentIsAnchorTag) {
@@ -9582,6 +9596,9 @@ class Card$1 {
             }, "aria-label": "Toggle expandable area", "aria-expanded": `${this.areaExpanded}`, "aria-controls": this.areaExpanded ? "expanded-content-area" : null, onClick: this.toggleExpanded, innerHTML: chevronIcon }))))), isSlotUsed$1(this.el, "expanded-content") && this.areaExpanded && (hAsync("div", { class: "expanded-content", id: "expanded-content-area" }, hAsync("slot", { name: "expanded-content" }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" })));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icCardCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -10031,6 +10048,9 @@ class Card {
         this.size = "medium";
         this.target = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     disconnectedCallback() {
         var _a;
         if (this.parentIsAnchorTag) {
@@ -10115,6 +10135,9 @@ class Card {
             } }, message && (hAsync("ic-typography", { variant: "body" }, message)), isSlotUsed(this.el, "message") && hAsync("slot", { name: "message" })))), isSlotUsed(this.el, "badge") && hAsync("slot", { name: "badge" })));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icCardHorizontalCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -10186,6 +10209,9 @@ class Checkbox {
         this.value = undefined;
         this.hideLabel = false;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     watchIndeterminateHandler() {
         this.displayIndeterminate = this.nativeIndeterminateBehaviour
             ? this.indeterminate
@@ -10256,6 +10282,7 @@ class Checkbox {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "indeterminate": ["watchIndeterminateHandler"]
     }; }
     static get style() { return icCheckboxCss; }
@@ -10310,6 +10337,9 @@ class CheckboxGroup {
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     labelNameHandler(newValue, oldValue, propName) {
         Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
             if (propName === "label")
@@ -10359,6 +10389,7 @@ class CheckboxGroup {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "label": ["labelNameHandler"],
         "name": ["labelNameHandler"]
     }; }
@@ -10429,12 +10460,16 @@ class Chip {
         this.size = "default";
         this.transparentBackground = true;
         this.variant = "filled";
+        this.dismissLabel = "Dismiss";
     }
     customColorHandler() {
         if (!this.dismissible) {
             this.setChipColour();
         }
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     componentWillLoad() {
         removeDisabledFalse$1(this.disabled, this.el);
         if (!this.dismissible) {
@@ -10463,7 +10498,7 @@ class Chip {
         (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, } = this;
+        const { label, appearance, variant, size, dismissible, visible, disabled, hovered, dismissLabel, } = this;
         return (visible && (hAsync("div", { class: {
                 chip: true,
                 [`${appearance}`]: appearance !== undefined,
@@ -10473,12 +10508,13 @@ class Chip {
                 dismissible,
                 hovered,
                 "white-background": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
+            } }, isSlotUsed$1(this.el, "icon") && (hAsync("div", { class: "icon" }, hAsync("slot", { name: "icon" }))), hAsync("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, hAsync("span", null, label)), dismissible && (hAsync("ic-tooltip", { label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, hAsync("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `${dismissLabel} ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed$1(this.el, "badge") && hAsync("slot", { name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "customColor": ["customColorHandler"]
+        "customColor": ["customColorHandler"],
+        "disabled": ["watchDisabledHandler"]
     }; }
     static get style() { return icChipCss; }
     static get cmpMeta() { return {
@@ -10493,6 +10529,7 @@ class Chip {
             "size": [1],
             "transparentBackground": [4, "transparent-background"],
             "variant": [1],
+            "dismissLabel": [1, "dismiss-label"],
             "hovered": [32],
             "visible": [32],
             "setFocus": [64]
@@ -10902,7 +10939,7 @@ class DataTable {
                 this.timerStarted = null;
             }, this.minimumLoadingDisplayDuration);
         };
-        this.isObject = (value) => typeof value === "object";
+        this.isObject = (value) => value !== undefined && value !== null && typeof value === "object";
         this.notDefaultDensity = () => this.density !== "default";
         this.getCellContent = (cell, dataType) => {
             switch (dataType) {
@@ -11005,7 +11042,7 @@ class DataTable {
                         !!(columnProps === null || columnProps === void 0 ? void 0 : columnProps.emphasis) ||
                         !!rowEmphasis,
                     [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href") }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
+                } }, this.isObject(cell) && (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) !== "date" ? (Object.keys(cell).includes("href") ? (hAsync("ic-link", { href: cellValue("href"), target: cellValue("target") || undefined, rel: cellValue("rel") || undefined }, cellValue("data"))) : (cellValue("data"))) : (this.getCellContent(cell, columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType))))))));
         };
         this.createCells = (row, rowIndex) => {
             var _a;
@@ -11040,40 +11077,39 @@ class DataTable {
                             ["table-cell"]: true,
                             [`table-density-${this.density}`]: this.notDefaultDensity(),
                             ["with-overflow"]: (columnProps === null || columnProps === void 0 ? void 0 : columnProps.dataType) === "element",
-                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, Object.keys(cell).includes("actionElement") ? (hAsync("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), hAsync("span", { class: "action-element", innerHTML: cellValue("actionElement") }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
+                        }, style: Object.assign({}, this.getColumnWidth(columnProps.columnWidth)) }, this.isObject(cell) &&
+                        Object.keys(cell).includes("actionElement") ? (hAsync("div", { class: "cell-grid-wrapper" }, this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis), hAsync("span", { class: "action-element", innerHTML: cellValue("actionElement") }))) : (this.createCellContent(columnProps, cell, cellSlotName, rowOptions, rowAlignment, hasIcon, currentRowHeight, cellValue, rowEmphasis))));
                 }
             });
         };
-        this.createColumnHeaders = () => {
-            return this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (hAsync("th", { scope: "col", class: {
-                    ["column-header"]: true,
-                    [`table-density-${this.density}`]: this.notDefaultDensity(),
-                    ["updating-state-headers"]: this.updating && !this.loading,
-                }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, hAsync("div", { class: {
-                    "column-header-inner-container": true,
-                    "truncation-tooltip": this.columnHeaderTruncation,
-                    [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
-                } }, isSlotUsed(this.el, `${key}-column-icon`) ? (hAsync("slot", { name: `${key}-column-icon` })) : (icon &&
-                !icon.hideOnHeader && (hAsync("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (hAsync("ic-tooltip", { label: title, target: `column-header-${index}` }, hAsync("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title))) : (hAsync("ic-typography", { variant: "body", class: {
-                    ["column-header-text"]: true,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title)), this.sortable && (hAsync("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
-                // eslint-disable-next-line react/jsx-no-bind
-                onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
-                    ? this.sortedColumnOrder
-                    : "unsorted"], class: {
-                    ["sort-button"]: true,
-                    ["sort-button-unsorted"]: this.sortedColumn !== key ||
-                        this.sortedColumnOrder === "unsorted",
-                } }))), this.columnHeaderTruncation && (hAsync("ic-typography", { variant: "body", "aria-hidden": "true", class: {
-                    ["column-header-text"]: true,
-                    ["dummy-column-header-text"]: this.columnHeaderTruncation,
-                    [`text-${this.density}`]: this.notDefaultDensity(),
-                } }, title)))));
-        };
+        this.createColumnHeaders = () => this.columns.map(({ cellAlignment, colspan, icon, key, title, columnWidth }, index) => (hAsync("th", { scope: "col", class: {
+                ["column-header"]: true,
+                [`table-density-${this.density}`]: this.notDefaultDensity(),
+                ["updating-state-headers"]: this.updating && !this.loading,
+            }, style: Object.assign({}, this.getColumnWidth(columnWidth)), colSpan: colspan }, hAsync("div", { class: {
+                "column-header-inner-container": true,
+                "truncation-tooltip": this.columnHeaderTruncation,
+                [`column-header-alignment-${cellAlignment}`]: !!cellAlignment,
+            } }, isSlotUsed(this.el, `${key}-column-icon`) ? (hAsync("slot", { name: `${key}-column-icon` })) : (icon &&
+            !icon.hideOnHeader && (hAsync("span", { class: "icon", innerHTML: icon.icon }))), this.columnHeaderTruncation ? (hAsync("ic-tooltip", { label: title, target: `column-header-${index}` }, hAsync("ic-typography", { id: `column-header-${index}`, variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title))) : (hAsync("ic-typography", { variant: "body", class: {
+                ["column-header-text"]: true,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)), this.sortable && (hAsync("ic-button", { variant: "icon", id: `sort-button-${key}`, "aria-label": this.getSortButtonLabel(key),
+            // eslint-disable-next-line react/jsx-no-bind
+            onClick: () => this.sortRows(key), innerHTML: this.SORT_ICONS[this.sortedColumn === key
+                ? this.sortedColumnOrder
+                : "unsorted"], class: {
+                ["sort-button"]: true,
+                ["sort-button-unsorted"]: this.sortedColumn !== key ||
+                    this.sortedColumnOrder === "unsorted",
+            } }))), this.columnHeaderTruncation && (hAsync("ic-typography", { variant: "body", "aria-hidden": "true", class: {
+                ["column-header-text"]: true,
+                ["dummy-column-header-text"]: this.columnHeaderTruncation,
+                [`text-${this.density}`]: this.notDefaultDensity(),
+            } }, title)))));
         this.onRowClick = (row) => {
             this.selectedRow =
                 this.selectedRow !== row && !this.loading && !this.updating && row;
@@ -12866,6 +12902,9 @@ class DateInput {
         this.validationStatus = "";
         this.validationText = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchDisableFutureHandler() {
         this.watchMaxHandler();
     }
@@ -12926,6 +12965,7 @@ class DateInput {
         this.assistiveHintId = `${this.inputId}-assistive-hint`;
         this.selectedDateInfoId = `${this.inputId}-selected-date-info`;
         addFormResetListener(this.el, this.handleFormReset);
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentDidLoad() {
         this.setInputsInOrder();
@@ -13120,6 +13160,7 @@ class DateInput {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
@@ -14032,6 +14073,9 @@ class DatePicker {
         this.validationText = "";
         this.value = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchDisableFutureHandler() {
         this.watchMaxHandler();
     }
@@ -14144,6 +14188,7 @@ class DatePicker {
         this.watchStartOfWeekHandler();
         this.watchMaxHandler();
         this.watchMinHandler();
+        removeDisabledFalse(this.disabled, this.el);
     }
     componentWillRender() {
         this.dateInputProps = this.setDateInputProps();
@@ -14219,6 +14264,7 @@ class DatePicker {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "disableFuture": ["watchDisableFutureHandler"],
         "disablePast": ["watchDisablePastHandler"],
         "max": ["watchMaxHandler"],
@@ -15368,6 +15414,12 @@ class InputComponentContainer {
         this.validationInline = false;
         this.validationStatus = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
+    componentWillLoad() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     componentDidLoad() {
         this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);
         this.hostMutationObserver.observe(this.el, { childList: true });
@@ -15386,7 +15438,7 @@ class InputComponentContainer {
                 ["multiline"]: multiLine,
                 ["fullwidth"]: fullWidth,
                 ["dark"]: dark || appearance === "dark",
-            }, "aria-disabled": disabled && `${disabled}` }, hAsync("div", { class: {
+            }, "aria-disabled": disabled ? "true" : null }, hAsync("div", { class: {
                 "focus-indicator": true,
                 dark: dark || appearance === "dark",
             } }, slotHasContent(this.el, "left-icon") && (hAsync("div", { class: {
@@ -15397,6 +15449,9 @@ class InputComponentContainer {
             }, innerHTML: successIcon })))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icInputComponentContainerCss; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -21200,6 +21255,9 @@ class MenuItem {
         this.toggleChecked = false;
         this.variant = "default";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     componentWillLoad() {
         // This ensures that trigger menu items are always set to the default variant
         if (isPropDefined$1(this.submenuTriggerFor) && this.variant !== "default") {
@@ -21236,6 +21294,9 @@ class MenuItem {
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icMenuItemCss; }
     static get cmpMeta() { return {
         "$flags$": 25,
@@ -22297,6 +22358,9 @@ class Pagination {
             this.boundaryCount = 2;
         }
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     watchNumberPagesHandler() {
         this.watchPageChangeHandler();
     }
@@ -22427,6 +22491,7 @@ class Pagination {
     static get watchers() { return {
         "adjacentCount": ["watchAdjacentCountHandler"],
         "boundaryCount": ["watchBoundaryCountHandler"],
+        "disabled": ["watchDisabledHandler"],
         "pages": ["watchNumberPagesHandler"],
         "type": ["watchTypeHandler"],
         "currentPage": ["watchPageChangeHandler"]
@@ -22589,7 +22654,10 @@ class PaginationBar {
             this.icPageChange.emit({ value: this.activePage, fromItemsPerPage: true });
         };
         this.setPaginationBarContent = () => {
-            const displayedItemsPerPageOptions = this.itemsPerPageOptions ||
+            const clonedItemsPerPageOptions = this.itemsPerPageOptions
+                ? JSON.parse(JSON.stringify(this.itemsPerPageOptions))
+                : null;
+            const displayedItemsPerPageOptions = clonedItemsPerPageOptions ||
                 (this.totalItems <= 100
                     ? [
                         { label: "10", value: "10" },
@@ -22779,6 +22847,9 @@ class PaginationItem {
         this.selected = false;
         this.type = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     watchLabelHandler() {
         this.capitalizedLabel = capitalize$1(this.label);
     }
@@ -22811,6 +22882,7 @@ class PaginationItem {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "label": ["watchLabelHandler"]
     }; }
     static get style() { return icPaginationItemCss; }
@@ -23205,6 +23277,7 @@ class RadioGroup {
     }
     watchDisabledHandler(newValue) {
         this.radioOptions.forEach((radioOption) => (radioOption.disabled = newValue));
+        removeDisabledFalse$1(this.disabled, this.el);
     }
     orientationChangeHandler() {
         this.initialOrientation = this.orientation;
@@ -23387,6 +23460,9 @@ class RadioOption {
         this.selected = false;
         this.initiallySelected = this.selected;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     watchSelectedHandler() {
         this.icSelectedChange.emit();
     }
@@ -23468,6 +23544,7 @@ class RadioOption {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "selected": ["watchSelectedHandler"]
     }; }
     static get style() { return icRadioOptionCss; }
@@ -23817,6 +23894,9 @@ class SearchBar {
         this.options = [];
         this.value = "";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     loadingHandler(newValue) {
         if (newValue && !this.hasTimedOut) {
             this.preLoad = false;
@@ -23982,6 +24062,7 @@ class SearchBar {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "loading": ["loadingHandler"],
         "filteredOptions": ["filteredOptionsHandler"],
         "options": ["watchOptionsHandler"],
@@ -24593,6 +24674,9 @@ class Select$1 {
         this.inputValueToFilter = this.value;
         this.currValue = this.value;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     loadingHandler(newValue) {
         newValue && this.triggerLoading();
     }
@@ -24774,6 +24858,7 @@ class Select$1 {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "loading": ["loadingHandler"],
         "options": ["watchOptionsHandler"],
         "debounce": ["debounceChangedHandler"],
@@ -26695,6 +26780,9 @@ class Switch {
     checkedChangeHandler() {
         this.checkedState = this.checked;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     disconnectedCallback() {
         removeFormResetListener$1(this.el, this.handleFormReset);
     }
@@ -26730,7 +26818,8 @@ class Switch {
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "checked": ["checkedChangeHandler"]
+        "checked": ["checkedChangeHandler"],
+        "disabled": ["watchDisabledHandler"]
     }; }
     static get style() { return icSwitchCss; }
     static get cmpMeta() { return {
@@ -26811,6 +26900,9 @@ class Tab {
         this.tabId = undefined;
         this.tabPosition = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     disabledWatchHandler() {
         this.tabEnabled.emit();
     }
@@ -26847,7 +26939,7 @@ class Tab {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "disabled": ["disabledWatchHandler"]
+        "disabled": ["watchDisabledHandler", "disabledWatchHandler"]
     }; }
     static get style() { return icTabCss; }
     static get cmpMeta() { return {
@@ -27293,6 +27385,9 @@ class TextField {
         this.value = "";
         this.initialValue = this.value;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     debounceChanged() {
         this.icChange = debounceEvent(this.icChange, this.debounce);
     }
@@ -27416,6 +27511,7 @@ class TextField {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "debounce": ["debounceChanged"],
         "value": ["watchValueHandler"]
     }; }
@@ -27819,6 +27915,9 @@ class ToggleButton {
         this.toggleChecked = false;
         this.variant = "default";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     componentWillLoad() {
         removeDisabledFalse$1(this.disabled, this.el);
         const parentIconPlacement = this.el.parentElement.iconPlacement;
@@ -27864,6 +27963,9 @@ class ToggleButton {
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icToggleButtonCss; }
     static get cmpMeta() { return {
         "$flags$": 25,
@@ -27981,6 +28083,9 @@ class ToggleButtonGroup {
         this.size = "default";
         this.variant = "default";
     }
+    watchDisabledHandler() {
+        removeDisabledFalse$1(this.disabled, this.el);
+    }
     selectHandler(ev, tabTarget) {
         const allToggles = this.getAllToggleButtons();
         let clickedToggle = ev.target;
@@ -28014,6 +28119,7 @@ class ToggleButtonGroup {
     componentWillLoad() {
         this.selectType === "multi" && (this.selectMethod = "manual");
         document.addEventListener("keydown", this.keyListener);
+        removeDisabledFalse$1(this.disabled, this.el);
     }
     componentDidLoad() {
         this.getAllToggleButtons().forEach((el, i) => {
@@ -28058,6 +28164,9 @@ class ToggleButtonGroup {
             }, onFocus: this.handleHostFocus }, hAsync("slot", null)));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["watchDisabledHandler"]
+    }; }
     static get style() { return icToggleButtonGroupCss; }
     static get cmpMeta() { return {
         "$flags$": 9,
@@ -28653,6 +28762,9 @@ class TreeItem {
         this.target = undefined;
         this.truncateTreeItem = undefined;
     }
+    watchDisabledHandler() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     watchSelectedHandler() {
         if (this.selected) {
             this.icTreeItemSelected.emit({ id: this.el.id });
@@ -28663,6 +28775,9 @@ class TreeItem {
         var _a;
         (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
+    componentWillLoad() {
+        removeDisabledFalse(this.disabled, this.el);
+    }
     componentDidLoad() {
         this.childTreeItems = Array.from(this.el.children).filter((child) => child.tagName === this.treeItemTag);
         if (this.childTreeItems.length > 0) {
@@ -28771,6 +28886,7 @@ class TreeItem {
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "disabled": ["watchDisabledHandler"],
         "selected": ["watchSelectedHandler"]
     }; }
     static get style() { return icTreeItemCss; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukic/canary-web-components",
-  "version": "2.0.0-canary.31",
+  "version": "2.0.0-canary.32",
   "description": "A web component UI library compiled with StencilJS",
   "main": "dist/index.cjs.js",
   "module": "./dist/index.js",
@@ -32,18 +32,12 @@
     "lint:fix": "echo '*** Linting CSS ***' && stylelint --config ../../.stylelintrc.json src/**/*.css --fix && echo '*** Linting standard files ***' && eslint --config ../../.eslintrc.js src --fix",
     "start": "npx http-server storybook-static -s",
     "kill": "kill-port 8080 --graceful",
-    "loki-tests": "loki --requireReference --port 8080 --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 --passWithNoStories && npm run kill",
-    "loki-tests:ci:canary": "loki --requireReference --port 8080 --chromeFlags=\"--no-sandbox --headless --hide-scrollbars --disable-gpu\" --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 --passWithNoStories && npm run kill",
-    "loki-tests:update": "loki update --port 8080 --chromeTolerance=1 --chromeRetries=1 --chromeConcurrency=1 --passWithNoStories && npm run kill",
-    "test-visual": "npm-run-all --parallel start loki-tests",
-    "test-visual:ci:canary": "npm-run-all --parallel start loki-tests:ci:canary",
-    "test-visual:update": "npm run build-storybook && npm-run-all --parallel start loki-tests:update",
     "audit": "echo 'Audit for: @ukic/canary-web-components' && audit-ci -m --config ../../audit-ci.json"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
     "@stencil/core": "^4.9.0",
-    "@ukic/web-components": "^2.32.1"
+    "@ukic/web-components": "^2.33.0"
   },
   "peerDependencies": {
     "@ukic/fonts": "^2.3.0"
@@ -76,7 +70,6 @@
     "jest-cli": "^26.6.3",
     "kill-port-process": "^3.2.1",
     "lit": "^2.0.2",
-    "loki": "^0.34.0",
     "npm-run-all": "^4.1.5",
     "puppeteer": "^13.1.3",
     "react": "^17.0.0",
@@ -89,5 +82,5 @@
     "webpack": "^5.76.0"
   },
   "license": "MIT",
-  "gitHead": "f980df4943f525b9ff377a859284bec90a5725da"
+  "gitHead": "601e99c0c72212bc0e7f74e378188f05d9ffb3bb"
 }