@ukic/web-components 3.24.0 → 3.25.0

package/dist/collection/components/ic-skeleton/ic-skeleton.js

@@ -38,11 +38,11 @@ export class Skeleton {
                 width: el.style.width || width || DEFAULT_WIDTHS[variant],
             }
             : undefined;
-        return (h(Host, { key: 'a68ad9122c6ad09b2283f2d6168e6286c8c8157f', class: {
+        return (h(Host, { key: '67c1971600feaaaf5849048b4bc5ad3d4903ffb4', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'a44bc7abbfb1f33581eec83e06556936ee410636' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'caf8562f7997131daa69e85d6766b3edf2531259' })));
     }
     static get is() { return "ic-skeleton"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-skip-link/ic-skip-link.js

@@ -35,9 +35,9 @@ export class SkipLink {
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (h(Host, { key: '90a25f2594d0169a8ee6f1d03b30a30fccb17168', class: {
+        return (h(Host, { key: '2f344a07df5cb31b39b5cd4ca8bc257229646b31', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: '79c0f5121c3ac8bae5992756f3c628f381ebe576', class: {
+            } }, h("ic-link", { key: '9b844b5a2f207d08eaa8cbb621d54ed56f5cc28d', class: {
                 "display-top": !inline,
                 "full-width": !!fullWidth,
                 "show-background": !transparentBackground,

package/dist/collection/components/ic-status-tag/ic-status-tag.js

@@ -33,12 +33,12 @@ export class StatusTag {
     }
     render() {
         const { label, status, variant, size, announced, theme, uppercase } = this;
-        return (h(Host, { key: 'e6dae50277c14c03b3d42bc12b880fa421ba5e5b', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: 'e92f10182a350fd9ea993bb6376b77463a865c6d', class: {
+        return (h(Host, { key: '06426990cc94da53c570547331c63d161675f620', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '2c6d0e05018d59bfc7c1acab4b8ffda5ba4cfce3', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: 'b3a5f6504550096511aa0b0e577be5ed46b9fd84', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'd7cdc4dc4b3e635432d57799cbaea26d5380fea9' }, label)))));
+            } }, h("ic-typography", { key: '3af29b781e35ed4817043d4f2f697f468502189a', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '4f4759e8dabfff3d686ed3e4cd3975cc0b0c33b4' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -77,27 +77,27 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (type === "completed" || compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '3e6a788d03556019e87781e4e58306d0081da72a', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: '4d1011a9a12449bd324aff3f404522fde6912be3', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (type === "disabled" || compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: 'd3df77790e474794ac3a74cc99c98ec73a51530a', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '7825f61e87546bcaa9100c439239022abb0f3eb7', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '58e72e89eb93fd00ea4a76704c3744050eed25d2', class: {
+        const compactStep = (h("div", { key: '82c7c26c90ce286582f7ef477129d2ce241200c1', class: {
                 ["step"]: true,
                 ["current"]: !!current,
                 [`compact-step-${compactStepStyling}`]: !!compactStepStyling,
                 ["disabled"]: type === "disabled" || compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: 'c7a6e8e70fe3e3a485a5b0c9353b6a7eaf5888d0', class: {
+            } }, h("ic-loading-indicator", { key: 'd3d1b2aa382bd8b307433f16aa05f644b275902f', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": type === "disabled" || compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: '13209e08fa212f80ee2b6b2f04dd65cd3a36f461', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: '7c71fc4f8ce1b59c792c60f2d18cc464ebfc3b0f', class: "info-line" }, h("ic-typography", { key: '942f6be75ff898fccda479f36003b80dcdcad9ed', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: 'a3ced0ecff13af724c007fa1ca32f7396f114612', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": stepNum, progress: progress }), h("div", { key: 'd0f78f477b4fe29b2ac33798712b70c0c3d2ce41', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "h4", class: "heading" }, heading)), h("div", { key: 'f9a074c126d393ec82cf72621e5941c32dbd72fb', class: "info-line" }, h("ic-typography", { key: '1b6bd91bcb1013fa1e23a9e9af49d3da1f25448e', variant: "caption", class: "step-num" }, `${stepNum} ${icI18n.of} ${lastStepNum}`, h("span", { key: '753bbc4c12a2b968cde11238f46ff4ffbc4f39fd', class: "visually-hidden" }, ` ${icI18n.steps}`)), (this.subheading ||
             type === "completed" ||
             type === "disabled" ||
             (this.variant === "compact" &&
                 !!compactStepStyling &&
                 compactStepStyling !== "active") ||
-            !!status) && (h("div", { key: '04bb305951a0de96241c64e478b26e12afcd838a', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: '3487444c46756faf3f1a88ce4cebd129cbd14d87', variant: "caption" }, subheading !== null && isPropDefined(subheading)
+            !!status) && (h("div", { key: '93968f9752cf90df5f67994a3942f38d94323b50', class: "step-status" }, statusIcon !== undefined && statusIcon, (subheading || stepType) && (h("ic-typography", { key: 'd1879f9dc5a7ea2e9b468fc95593056527e08095', variant: "caption" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : type === "disabled" ||
                 (variant === "compact" &&
@@ -110,26 +110,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (type !== "completed") {
-            icon = (h("ic-typography", { key: 'e25e3e2da7abbf17fcf8ede4dde3ce26010f68e0', variant: "subtitle-small" }, h("span", { key: 'ae4b4e77475d060dc7ce62796118fd03a0cbdb1f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: 'e76d3c6f2fc82ae27e9f19af2ad29374c75271b1', variant: "subtitle-small" }, h("span", { key: '2ada7f696f0e90ecca298a2109d9aaeb70777a1a', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '86b31c3ca79c025e185a5461c210be965b42dc2a', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '9854c6981f84ed0984fb98666a123de0c2a32048', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: '195a5f5dd31061a4059020d7fa1d65b15eb29a11', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'd11d3bf512968fa286309bcd69faa20cd12d3396', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = type === "current" && (h("div", { key: 'af4367f38115d9ee7f0e2112ab62ae7fdfe5b801', class: "step-connect-inner" }));
-        const finalStep = !lastStep && (h("div", { key: '979da51621c8e026ab2b2d59d7ad83764e0330a7', class: {
+        const partialBar = type === "current" && (h("div", { key: '5564ceeb1d40367572f3ae679e7212a2a2a53578', class: "step-connect-inner" }));
+        const finalStep = !lastStep && (h("div", { key: 'fae846f5c7d46ad65c7d21a2785526ed6d841444', class: {
                 ["step-connect"]: true,
                 ["aligned-full-width"]: !!(((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
             } }, partialBar));
         // DEFAULT STEP COMPONENT
-        const defaultStep = (h("div", { key: 'd91c5752a70b8062c91c7a2563229968ed832a2f', class: {
+        const defaultStep = (h("div", { key: 'f02d7139a59a46207e7bd308cf90ffd42c14a93e', class: {
                 ["step"]: true,
                 [`${type}`]: true,
-            } }, h("div", { key: 'df780502b324c87db8eb701d9b4c43e12e6d6b32', class: "step-top" }, h("div", { key: '7e2b4c244ecfe20c71f53d8f825938af39b62f71', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: 'e645cb62ca795ee554a1b580e6fdae6555bc410c', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: '8498b50dd12915ac9e39ad329e35b0a585c77f46', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
+            } }, h("div", { key: 'd3cb91eb9ae01c50255fefe75c9cf15dac9899a2', class: "step-top" }, h("div", { key: '71afc47b70d57c6d98aacd824c304e661d97a97d', class: "step-icon" }, icon), finalStep), (hasHeading || subheading || status) && (h("div", { key: '7b11bdfc83c4071d6aff8f026e7ab32f2033a666', class: "heading-area" }, isSlotUsed(this.el, "heading") ? (h("slot", { name: "heading" })) : (h("ic-typography", { variant: "subtitle-large", class: "heading" }, heading)), hasHeading && (subheading || status) && (h("ic-typography", { key: '10da1844c1af5252f89bc59254e23c45c5400a2d', variant: "caption", class: "subheading" }, subheading !== null && isPropDefined(subheading)
             ? subheading
             : stepStatus))))));
-        return (h(Host, { key: '356617f292b301db2b92d8c1d111fa32831705c1', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
+        return (h(Host, { key: '6605252cf1e05ba81b2adbcf6e41f2c9c23b1f09', role: "listitem", "aria-label": `${icI18n.step} ${stepNum}${ariaLabel}`, "aria-current": (current || type === "current") && "step", class: {
                 ["aligned-full-width"]: !!(((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.classList.contains("ic-stepper-default")) &&
                     !this.el.parentElement.classList.contains("ic-stepper-aligned-left")),
                 [`ic-step-${variant}`]: true,

package/dist/collection/components/ic-stepper/ic-stepper.js

@@ -279,11 +279,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: '457ee30e4513044d1160e73ab9e868c796d996e2', class: {
+        return (h(Host, { key: '4fbff633235fba3d0c146427b74d1c4e69cff419', class: {
                 [`ic-stepper-${this.variant}`]: true,
                 ["ic-stepper-aligned-left"]: this.variant === "default" && this.aligned === "left",
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("ul", { key: '32a6e9ee86bc0a89d9997aa7f74250874f1e466f', class: "step-item-list" }, h("slot", { key: '9571c50056c525a853cd0469d81fa2dead8cec1f' }))));
+            } }, h("ul", { key: '452b6724f1b286aa3ff75fd460cdc4dfa36e8e55', class: "step-item-list" }, h("slot", { key: 'e6e6465ee3c505fab2bbe1c7c502defa7e587571' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-switch/ic-switch.css

@@ -468,15 +468,10 @@ input {
   margin-bottom: var(--ic-space-xs);
 }
 
-.ic-switch-label-small {
-  margin-bottom: var(--ic-space-xs);
-}
-
 .ic-switch-toggle {
   display: flex;
   align-items: center;
-  justify-content: space-around;
-  width: 4rem;
+  width: calc(var(--ic-space-xl) * 2);
   height: var(--ic-space-xl);
   position: relative;
   border-radius: 100vw;
@@ -485,6 +480,19 @@ input {
   box-sizing: border-box;
   transition: var(--ic-transition-duration-fast);
   margin-left: var(--ic-space-xxs);
+  gap: calc(var(--ic-space-md) + var(--ic-space-xxs));
+}
+
+.ic-switch-small .ic-switch-toggle {
+  width: var(--ic-space-xxl);
+  height: var(--ic-space-lg);
+  gap: calc(var(--ic-space-sm) + var(--ic-space-xxxs));
+}
+
+.ic-switch-large .ic-switch-toggle {
+  width: calc(var(--ic-space-xl) + var(--ic-space-xxl));
+  height: calc(var(--ic-space-xl) + var(--ic-space-xs));
+  gap: calc(var(--ic-space-lg) + var(--ic-space-xxs));
 }
 
 .ic-switch-line-break {
@@ -493,42 +501,70 @@ input {
 
 .ic-switch-toggle::before {
   content: "";
-  width: 1.333rem;
-  height: 1.333rem;
+  width: calc(var(--ic-space-sm) * 2);
+  height: calc(var(--ic-space-sm) * 2);
   border-radius: 50%;
   position: absolute;
   z-index: 2;
   top: 50%;
-  left: 0.333rem;
+  left: var(--ic-space-xxs);
   transform: translate(0, -50%);
   background-color: var(--ic-switch-unchecked);
   transition: var(--ic-transition-duration-slow);
 }
 
+.ic-switch-small .ic-switch-toggle::before {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
+}
+
+.ic-switch-large .ic-switch-toggle::before {
+  width: var(--ic-space-xl);
+  height: var(--ic-space-xl);
+}
+
 .ic-switch-icon {
   display: inline-block;
   vertical-align: middle;
-  width: 0.625rem;
-  height: 0.625rem;
+  width: var(--ic-space-sm);
+  height: var(--ic-space-sm);
 }
 
-.ic-switch-icon-circle,
-.ic-switch-icon-line {
-  stroke-width: 1;
+.ic-switch-small .ic-switch-icon {
+  width: var(--ic-space-xs);
+  height: var(--ic-space-xs);
+}
+
+.ic-switch-large .ic-switch-icon {
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
 }
 
 .ic-switch-icon-circle {
   stroke: var(--ic-switch-indicator-off);
+  stroke-width: var(--ic-space-1px);
 }
 
 .ic-switch-icon-line {
-  stroke: var(--ic-switch-indicator-on);
+  height: var(--ic-space-sm);
+  width: var(--ic-space-1px);
+  background-color: var(--ic-switch-indicator-on);
+  border-radius: 99px;
+  margin-left: calc(
+    var(--ic-space-md) + var(--ic-space-xxs) - var(--ic-space-1px)
+  );
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .ic-switch-toggle::before {
-    transition-duration: 0ms;
-  }
+.ic-switch-small .ic-switch-icon-line {
+  margin-left: calc(var(--ic-space-md) - var(--ic-space-1px));
+  height: var(--ic-space-xs);
+}
+
+.ic-switch-large .ic-switch-icon-line {
+  margin-left: calc(
+    var(--ic-space-xs) + var(--ic-space-md) - var(--ic-space-1px)
+  );
+  height: var(--ic-space-md);
 }
 
 .ic-switch-input:checked + .ic-switch-toggle {
@@ -537,24 +573,35 @@ input {
 }
 
 .ic-switch-input:checked + .ic-switch-toggle::before {
-  transform: translate(var(--ic-space-xl), -50%);
+  transform: translate(calc(var(--ic-space-xl) - var(--ic-space-1px)), -50%);
   background-color: var(--ic-switch-checked);
 }
 
+.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
+  transform: translate(calc(var(--ic-space-lg) - var(--ic-space-1px)), -50%);
+}
+
+.ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {
+  transform: translate(
+    calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-1px)),
+    -50%
+  );
+}
+
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-hover);
 }
 
 .ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-pressed);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-hover);
 }
 
 .ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {
-  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);
+  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-pressed);
 }
 
 .ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,
@@ -571,7 +618,7 @@ input {
 }
 
 .ic-switch-disabled .ic-switch-icon-line {
-  stroke: var(--ic-switch-indicator-on-disabled);
+  background-color: var(--ic-switch-indicator-on-disabled);
 }
 
 .ic-switch-input:disabled + .ic-switch-toggle {
@@ -593,27 +640,27 @@ input {
   background-color: var(--ic-switch-checked);
 }
 
-.ic-switch-small .ic-switch-toggle {
-  width: var(--ic-space-xxl);
-  height: var(--ic-space-lg);
-}
-
-.ic-switch-small .ic-switch-toggle::before {
-  width: var(--ic-space-md);
-  height: var(--ic-space-md);
-  left: var(--ic-space-xxs);
-}
-
-.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
-  transform: translate(var(--ic-space-lg), -50%);
-}
-
 ::slotted([slot="right-adornment"]) {
   margin-left: var(--ic-space-sm);
   fill: var(--ic-switch-icon);
 }
 
 @media (forced-colors: active) {
+  .ic-switch-toggle::before {
+    width: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));
+  }
+
+  .ic-switch-small .ic-switch-toggle::before {
+    width: calc(var(--ic-space-md) - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-md) - var(--ic-space-xxxs));
+  }
+
+  .ic-switch-large .ic-switch-toggle::before {
+    width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+    height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));
+  }
+
   .ic-switch-toggle::before,
   .ic-switch-input:checked + .ic-switch-toggle {
     border: var(--ic-border-hc);
@@ -625,7 +672,18 @@ input {
   }
 
   .ic-switch-input:checked + .ic-switch-toggle::before {
-    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);
+    transform: translate(calc(var(--ic-space-xl) - var(--ic-space-xxxs)), -50%);
+  }
+
+  .ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {
+    transform: translate(calc(var(--ic-space-lg) - var(--ic-space-xxxs)), -50%);
+  }
+
+  .ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {
+    transform: translate(
+      calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-xxxs)),
+      -50%
+    );
   }
 
   .ic-switch-input:disabled + .ic-switch-toggle,
@@ -634,10 +692,17 @@ input {
     border-color: GrayText;
   }
 
-  .ic-switch-disabled .ic-switch-icon-circle,
-  .ic-switch-disabled .ic-switch-icon-line {
+  .ic-switch-icon-line {
+    background-color: buttonborder;
+  }
+
+  .ic-switch-disabled .ic-switch-icon-circle {
     stroke: GrayText;
   }
+
+  .ic-switch-disabled .ic-switch-icon-line {
+    background-color: GrayText;
+  }
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/collection/components/ic-switch/ic-switch.js

@@ -89,18 +89,16 @@ export class Switch {
     }
     render() {
         const { label, checkedState, size, disabled, name, value, hideLabel, helperText, inputId, theme, } = this;
-        const isSmall = size === "small";
         renderHiddenInput(this.el, checkedState ? value : "", name, disabled);
-        return (h(Host, { key: '88d2bde84ec11e0b5e23de8b291684eae49ba48f', class: {
+        return (h(Host, { key: '5c000ca3e49cd14427153c3621794df417e8cf20', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: '46de14be85f760c6267141eb1fe36bc710a9e251', class: {
+            } }, h("label", { key: '8460399d045a653d8c5e3c93f87d2759b99d4095', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
-                "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: 'c361f411bf189a5aae8c90e331bc5a07535c3b64', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
+                [`ic-switch-${size}`]: true,
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: '5bd95a31f589a3569373427072b91153b9af825d', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
-                "ic-switch-label-small": isSmall,
-            } }, h("slot", { key: 'd0ec1f628328f0e3938964248ac38c576ee602ce', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '60474539357c0bd43823042d06e0292f1769a879', class: "ic-switch-line-break" }), h("input", { key: 'e9f17d56e514e1a545fae25631c835a714515461', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: 'ec6530e9f6d0a9248d6104068a8dc08c98142d44', class: "ic-switch-toggle" }, h("svg", { key: '9dbe1ccb311d5d3cf836b1db84f783f3f4aa1b1c', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '019b9a398510349b9fbb41784aa01f77af2c482f', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '36806f4ca85eb87212f155f42293cffc9d7b2f2e', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '5d34317d431ea7b8e10d6a379b02148b4fc69b4e', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'bfb4599c8cfad3efa9466eefe7dc84b580a2a3d2', name: "right-adornment" }))));
+            } }, h("slot", { key: 'a89047529ee17453676191651624842e5b1643ff', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: 'ef6b29d8bfa4ad565aca3fdadc61f9d7e9c8a51c', class: "ic-switch-line-break" }), h("input", { key: '0299a7208ea94969af14ded8f92a3c602e4d9260', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(this.el, inputId, helperText !== "", false), role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { key: '5576c0aff81d9a5825111f62a00dfc69516ff52d', class: "ic-switch-toggle" }, h("span", { key: '3bd162d8cd5b5d08b1a71625edaa7905d837414b', class: "ic-switch-icon-line", "aria-hidden": "true" }), h("svg", { key: '592dd6027032283ed67502269b80fd6a5ca922ae', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 8 8", xmlns: "http://www.w3.org/2000/svg", fill: "none" }, h("circle", { key: '6479b349e98272f1578e84b7213949ed064e84f7', class: "ic-switch-icon-circle", fill: "none", cx: "4", cy: "4", r: "3.5", "vector-effect": "non-scaling-stroke" }))), h("slot", { key: '66d14ab0f462f8f050ffb425a154bde647821377', name: "right-adornment" }))));
     }
     static get is() { return "ic-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -240,13 +238,13 @@ export class Switch {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "IcSizesNoLarge",
-                    "resolved": "\"medium\" | \"small\" | undefined",
+                    "original": "IcSizes",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
                     "references": {
-                        "IcSizesNoLarge": {
+                        "IcSizes": {
                             "location": "import",
                             "path": "../../utils/types",
-                            "id": "src/utils/types.ts::IcSizesNoLarge"
+                            "id": "src/utils/types.ts::IcSizes"
                         }
                     }
                 },

package/dist/collection/components/ic-switch/ic-switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the switch.\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = !!this.checked;\n  }\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked!;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value!,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked!;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    const isSmall = size === \"small\";\n\n    renderHiddenInput(this.el, checkedState ? value : \"\", name, disabled);\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            \"ic-switch-container\": true,\n            \"ic-switch-disabled\": !!disabled,\n            \"ic-switch-small\": isSmall,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={false}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n                \"ic-switch-label-small\": isSmall,\n              }}\n            >\n              <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n            </ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={getInputDescribedByText(\n              this.el,\n              inputId,\n              helperText !== \"\",\n              false\n            )}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={isSmall ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={isSmall ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={isSmall ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-switch.js","sourceRoot":"","sources":["../../../src/components/ic-switch/ic-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the switch.\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = !!this.checked;\n  }\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked!;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value!,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked!;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    renderHiddenInput(this.el, checkedState ? value : \"\", name, disabled);\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            \"ic-switch-container\": true,\n            \"ic-switch-disabled\": !!disabled,\n            [`ic-switch-${size}`]: true,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={false}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n              }}\n            >\n              <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n            </ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={getInputDescribedByText(\n              this.el,\n              inputId,\n              helperText !== \"\",\n              false\n            )}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <span class=\"ic-switch-icon-line\" aria-hidden=\"true\"></span>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 8 8\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"4\"\n                cy=\"4\"\n                r=\"3.5\"\n                vector-effect=\"non-scaling-stroke\"\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n        </label>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-switch/ic-switch.stories.js

@@ -30,9 +30,13 @@ export const Checked = {
   name: "Checked",
 };
 
-export const Small = {
-  render: () => html` <ic-switch size="small" label="Label"></ic-switch> `,
-  name: "Small",
+export const Sizes = {
+  render: () => html`
+    <ic-switch size="small" label="Label"></ic-switch>
+    <ic-switch label="Label"></ic-switch>
+    <ic-switch size="large" label="Label"></ic-switch>
+  `,
+  name: "Sizes",
 };
 
 export const Disabled = {
@@ -136,7 +140,7 @@ export const Playground = {
 
   argTypes: {
     size: {
-      options: ["medium", "small"],
+      options: ["small", "medium", "large"],
 
       control: {
         type: "inline-radio",

package/dist/collection/components/ic-tab-context/ic-tab-context.js

@@ -227,7 +227,7 @@ export class TabContext {
         }
     }
     render() {
-        return h("slot", { key: '6a473d128002201d91b16855f088cb013b3e6b09' });
+        return h("slot", { key: '717530e623d11f274e79fe3be4bcbd0ff9e71033' });
     }
     static get is() { return "ic-tab-context"; }
     static get properties() {

package/dist/collection/components/ic-tab-group/ic-tab-group.js

@@ -16,11 +16,11 @@ export class TabGroup {
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '1e0f683aa804fe2dde78bce4c8d9b60c5d6a4396', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '1681c117c989b999a55a9646350f26efe3dac55c', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: 'fdca176d28c2e6619d787f3d141a78c3cf06176a', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'f3255d04eebecdd81e5badd671fee33b885df3c5', class: "tabs-container" }, h("slot", { key: '9499e87ed5fd26e3936fcc7c9af353d7acd2fb36' })))));
+            } }, h("ic-horizontal-scroll", { key: '86003202cd06e1bbd9f99124c10ceebe9414049d', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '4e1b79906c19817adf8a4d01332f8066e8d5e1c4', class: "tabs-container" }, h("slot", { key: '697f2ce044588082937aff666d1f04976b310785' })))));
     }
     static get is() { return "ic-tab-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -17,10 +17,10 @@ export class TabPanel {
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '7daba74123d072e8ebdac9f217451b67a734dbc4', class: {
+        return (h(Host, { key: 'c00d3917329516768eb37409203d897251b75d76', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '552b91bfa6a9570da568982b693d13f5ce8911e7' }, h("slot", { key: '3f2f5d3de12ab65d949bccfdc9aa5ea09a6dfa8d' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'f5cc419286a31c1b6da62a34926dcf8060c12dfd' }, h("slot", { key: '05c9bfb071d304e758c0bb8dd780bf000b3d8bf1' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-text-field/ic-text-field.js

@@ -387,14 +387,14 @@ export class TextField {
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '6300558c65d21c3cf9fcb2af66774cbdf274cf89', class: {
+        return (h(Host, { key: '4eb073ddbce5dc93c167bbaa66b94daf51c4a828', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '6f0d1a6cf4ed01bd98c3b69d37f6ffb473e1201e', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '71cc64b0733fbe16b21f389000c8a6813ad9f07f', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '985b82195b09acc991bbed6c0be5210cba70f59e', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '95df2f453e06c5dec6788e98db94e5e4ce129d04', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '62a052203a6b9e35858e7103f505bdf38eda7349', class: {
+            } }, h("ic-input-container", { key: '07a171c8cbd55588387145b3d8469e6930ab4a7c', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'b5f6b3b831c08cd4958458188c8d6be3219f1479', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '1c33ec889c6a730f4b7e1075978e13f05a21f53a', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '786f1d5b65b4b66838aba7320cd5b479cd8305e4', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'ed91ef841c132afd05cdee83e735413ad1d9e5a3', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '12ee0976840d954f7f855740db4098983ccf73a5', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: 'ee52a8fc57ce814d713d1a0807d8dc040ced4d41', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -402,12 +402,12 @@ export class TextField {
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '4bd5b1b44a9fded9be98c35d3e49f357b99adf26', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'fccd3ae4e454d661540f45b748440aa8c9c28baf', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'aca9fabb2b029547a713e75be81c179e3c1e3b52', name: "menu" }), h("ic-input-validation", { key: '1d2443ab140751bd21f247f5136254498ffc8004', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '06f74409f7256055715e982be8e68780df1126b5', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '7ed8058fb83dfa713539348de0c37929a0225129', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'e56ca28bcb4154d65bb46f1b3625e29c0038e9b7', name: "menu" }), h("ic-input-validation", { key: '3c64d8598155035ebde2419e407e89c35053c64a', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'e8f5abdc72b047998c5164ec7bef70eab2d7af81', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '9458320139c6c17b4db3f40ef91ed8f35667e612', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '26663bbc0dbc1e5183cfb4af5b2f9a244fa303c5', variant: "caption", class: "char-count-text" }, h("span", { key: '84a9de3338f2fee09b3712fcc56dd509bbc672e2', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cb1d19f9755ea5b393e03ab19da262c67ce6e19e', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '87cfdac09956c5e749ff4c06bb58228d2d40feb5', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'd40417b8b52597518c4b1e804ede9ae59364c0c9', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: 'e4dc991f18d280cf05f3ead492e17eb37b15cbb1', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'e668b2a73a860bd7a53300440a019239363f2350', variant: "caption", class: "char-count-text" }, h("span", { key: '835dea67f0e27e0c86e0236f48ecd7a5265719a3', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '0a4d3628c4ecfe1102b015c3bf4a345eb2a18674', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '365c77cbed1ca017f3f19f13be9b76561ec5cf57', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-theme/ic-theme.js

@@ -65,7 +65,7 @@ export class Theme {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: '29325dda558601bd748d1712aa146bfd5c2d1240', class: themeClass }, h("slot", { key: 'c352dc6c92ee972a7542c01f8fefa62c38575034' })));
+        return (h(Host, { key: '63d492e3dd31089565a15df543420f375dbad1b6', class: themeClass }, h("slot", { key: '479a3cbc49286aa2e3853956721f26a5ee37e9ef' })));
     }
     static get is() { return "ic-theme"; }
     static get properties() {