@ukic/web-components 3.3.0 → 3.5.0

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

@@ -23,11 +23,11 @@ export class Skeleton {
                 width: el.style.width || (variant === "circle" ? "25px" : "260px"),
             }
             : undefined;
-        return (h(Host, { key: 'bc26af3bed291b88d9eba417aba8b1bd20d02071', class: {
+        return (h(Host, { key: '5818b75264565b11565affe9e6edbd0ebc850b5a', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'b7e19d9b7fc55069b1a5a3d82698378fb2a4fff4' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'dac00f75ef41cba4df058a87ac54a7346e93f747' })));
     }
     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: 'a6229f2e79e16d35283ae63e617e5dbee39f1a31', class: {
+        return (h(Host, { key: '48ebe55664670d4b67c3063a4d0d309b7a7b001a', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: 'f54ffd72b46d9124023ef6bfe0cf60f7b1091c25', class: {
+            } }, h("ic-link", { key: 'effeead1403ff76b176d5bb7b3863c53e3677dd9', 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: '0ff5d3de133c300d744be1d57a42e5a393735572', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '09e1eeedac25e8128fe42a6fb5435dc06dc7d331', class: {
+        return (h(Host, { key: '1364b3edcf4a5ebe148cfb8aa777bda105a3282f', class: { [`ic-theme-${theme}`]: theme !== "inherit" }, role: announced ? "status" : null, "aria-label": "Status" }, h("strong", { key: '96a6e601c3aeef8600835dc1e114c7be5a240164', class: {
                 ["tag"]: true,
                 [`${variant}-${status}`]: true,
                 ["outlined"]: variant === "outlined",
                 [`${size}`]: true,
-            } }, h("ic-typography", { key: '8543c7387e3337ec720eecaf3dbebbc09edfcb6d', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: '3673500383906cd09f4f409abff0c2aa12a0c30f' }, label)))));
+            } }, h("ic-typography", { key: 'dd831bf604192af5ee4b29676be2eda2d5d12e24', variant: uppercase ? "label-uppercase" : "label", "apply-vertical-margins": false }, h("span", { key: 'd7c07a02acbb5db23516389b41a752c75f6c3da6' }, label)))));
     }
     static get is() { return "ic-status-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,29 +57,29 @@ export class Step {
         // STATUS ICON FOR COMPACT STEP
         let statusIcon;
         if (this.type === "completed" || this.compactStepStyling === "completed") {
-            statusIcon = (h("span", { key: '8831990f0422a89e28d83c33bf98e6f5e47d09a6', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
+            statusIcon = (h("span", { key: 'da8e370996e92dde0f17f6460ecb0c11d8def086', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: checkIcon }));
         }
         else if (this.type === "disabled" ||
             this.compactStepStyling === "disabled") {
-            statusIcon = (h("span", { key: 'aedd81eacbe9ca6a4e331142d09053926b00dcd4', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
+            statusIcon = (h("span", { key: '581de517797d73b13bab42503a084a579c540d5f', class: "warning-icon step-icon", "aria-hidden": "true", innerHTML: warningIcon }));
         }
         // COMPACT STEP COMPONENT
-        const compactStep = (h("div", { key: '384c84c08600c48982959a9a19a54e638bdd76a9', class: {
+        const compactStep = (h("div", { key: '2b0b01b29c81bd1ae351b56f04c18f7eab1ca4f1', class: {
                 ["step"]: true,
                 ["current"]: !!this.current,
                 [`compact-step-${this.compactStepStyling}`]: !!this.compactStepStyling,
                 ["disabled"]: this.type === "disabled" || this.compactStepStyling === "disabled",
-            } }, h("ic-loading-indicator", { key: 'fb3373a16a3519a77689395882b77b07f84d00b2', class: {
+            } }, h("ic-loading-indicator", { key: '4f2234e8dc571338c71f63263d2cd45460920717', class: {
                 "compact-step-progress-indicator": true,
                 "not-required": this.type === "disabled" ||
                     this.compactStepStyling === "disabled",
-            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: 'e404a8d7fd56af5a6c3b38e7dd146ccbf6c0a921', class: "heading-area" }, h("ic-typography", { key: 'e2d2d3a3b2e2d1080a500f06c11fd2b19305e733', variant: "h4", class: "heading" }, this.heading), h("div", { key: 'a04253bd63d0e9cbc2ebd2ccc6c6cf1d684611b4', class: "info-line" }, h("ic-typography", { key: '35699c8fd101642bcedacbb0e636f5f5e72d87d0', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '0bc9e891b17f66419150733982711999983197a1', class: "visually-hidden" }, " steps")), (this.subheading ||
+            }, "aria-hidden": "true", size: "small", "inner-label": this.stepNum, progress: this.progress }), h("div", { key: 'bb3834decc5d6e971b8da1b225987f41d7542b67', class: "heading-area" }, h("ic-typography", { key: 'c9ac23c26ecb3a002f065583c36b105dd7a80d35', variant: "h4", class: "heading" }, this.heading), h("div", { key: '72a46d0b49c4b09db01fd6a7a4000efb4d4f6da9', class: "info-line" }, h("ic-typography", { key: '0a8f7b16a04431260d1650474ea86faa0248af2d', variant: "caption", class: "step-num" }, `${this.stepNum} of ${this.lastStepNum}`, h("span", { key: '497ad4a0febb2b9f5380a0bb28f0effc6368cf1d', class: "visually-hidden" }, " steps")), (this.subheading ||
             this.type === "completed" ||
             this.type === "disabled" ||
             (this.variant === "compact" &&
                 !!this.compactStepStyling &&
                 this.compactStepStyling !== "active") ||
-            !!this.status) && (h("div", { key: 'ce2356ecbc86e3805ddf84d7fa785f2a1495ef60', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'f9ada98e6d45ff5dcd8784dbb24c4402b7bd378e', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
+            !!this.status) && (h("div", { key: 'ee5da9d5d75229d3bffbc761dfc4c779b22b063d', class: "step-status" }, statusIcon !== undefined && statusIcon, (this.subheading || stepType) && (h("ic-typography", { key: 'b249e660a2eff61dc1d537ab14e2bf027c2ffab2', variant: "caption" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : this.type === "disabled" ||
                 (this.variant === "compact" &&
@@ -92,26 +92,26 @@ export class Step {
         // ICON FOR DEFAULT STEP
         let icon;
         if (this.type !== "completed") {
-            icon = (h("ic-typography", { key: '5b3734765f9d5e5db8f0b2818ffd471817a96cc5', variant: "subtitle-small" }, h("span", { key: 'd4d3ffd87c95a0b98fce8a437a6afb3f4639993f', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
+            icon = (h("ic-typography", { key: '8d6b60fe3b7cb9426536ac8afaeb798de0291b1c', variant: "subtitle-small" }, h("span", { key: '464e32e9503075944e90e9e42c72ef3955c948d0', class: "step-icon-inner", "aria-hidden": "true" }, this.stepNum)));
         }
         else {
-            icon = (h("div", { key: '42447f9ec070e7e284aecfd49983259650d9abd3', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '4c7469fba1cf544d1d48c209c25db0bcaca14309', class: "check-icon", innerHTML: checkIcon })));
+            icon = (h("div", { key: '620c7f67632c073a4e339427bedc5ffed0a4a320', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: '1396290202c009168bf4b7983a2af4f5d8fdeb64', class: "check-icon", innerHTML: checkIcon })));
         }
         // STEP CONNECT FOR DEFAULT STEP
-        const partialBar = this.type === "current" && (h("div", { key: '800764f8ca21ac1118c77ed860a163b3103fe62e', class: "step-connect-inner" }));
-        const finalStep = !this.lastStep && (h("div", { key: 'e5c0f38f7140800d60e5046d77d6cde34c5e7bd5', class: {
+        const partialBar = this.type === "current" && (h("div", { key: '7d27dc6a29aca34dcb14c0624c66309614c5378a', class: "step-connect-inner" }));
+        const finalStep = !this.lastStep && (h("div", { key: '70aeb7052405a7977a12562c329f227c71e35a8b', 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: 'cdfd23786b75a88fe1630318d8a1369a89090544', class: {
+        const defaultStep = (h("div", { key: '130b7d2d16c416a5e699a20564b475fe0620af18', class: {
                 ["step"]: true,
                 [`${this.type}`]: true,
-            } }, h("div", { key: 'c83625070a1ffe89fc53f66d55f06c994f868570', class: "step-top" }, h("div", { key: 'a6758050efffeb98522092fefa9b1261b3d9217b', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '3ecf8d32da66fe336b7c0540c47726d060e8eaf8', class: "heading-area" }, this.heading && (h("ic-typography", { key: '79557ec3d9a26be0fee2253a58c2f09132322017', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: 'f5a90f68ebc0721fec936541824ab79b415f566d', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
+            } }, h("div", { key: '6b71087d2f67a0858fdd819424fed8d36084d98e', class: "step-top" }, h("div", { key: 'a9d0fc4317db6cc4b60c8429909fe30dbae3001e', class: "step-icon" }, icon), finalStep), (this.heading || this.subheading || this.status) && (h("div", { key: '13c274e45d81977b4ceeaf98a4e092a2d90fec97', class: "heading-area" }, this.heading && (h("ic-typography", { key: '1c4307d5780fff0c7200631e7b729024e3ca8315', variant: "subtitle-large", class: "heading" }, this.heading)), this.heading && (this.subheading || this.status) && (h("ic-typography", { key: '4e6b789f77f40ed85e486bb8bf25b2209e042a91', variant: "caption", class: "subheading" }, this.subheading !== null && isPropDefined(this.subheading)
             ? this.subheading
             : stepStatus))))));
-        return (h(Host, { key: '0cb6b6649c9af4565e5f663131b800a79b9b040d', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.type === "current") && "step", class: {
+        return (h(Host, { key: 'aaeb6b423f4a746831b15ec90ae450a4a4c3fc9e', role: "listitem", "aria-label": `Step ${this.stepNum}${ariaLabel}`, "aria-current": (this.current || this.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-${this.variant}`]: true,

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

@@ -241,11 +241,11 @@ export class Stepper {
         checkResizeObserver(this.runResizeObserver);
     }
     render() {
-        return (h(Host, { key: 'a4b87028ee91e542fd7d2b66689e8fabe33a9358', class: {
+        return (h(Host, { key: '82128e652194f8c19692211d4170bab0651112c6', 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: '65236609f6b2109bba5bbb88d084f9fd4e88d48a', class: "step-item-list" }, h("slot", { key: '2b542740488d922dca26cabda564db76de1ffd82' }))));
+            } }, h("ul", { key: '887be84fa976e8aae0bc1fd659781f4650543725', class: "step-item-list" }, h("slot", { key: '09dfecb16ef10d0920e0b781befed025e16af13c' }))));
     }
     static get is() { return "ic-stepper"; }
     static get encapsulation() { return "shadow"; }

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

@@ -611,11 +611,8 @@ input {
   transform: translate(var(--ic-space-lg), -50%);
 }
 
-::slotted(*) {
+::slotted([slot="right-adornment"]) {
   margin-left: var(--ic-space-sm);
-}
-
-::slotted(svg) {
   fill: var(--ic-switch-icon);
 }
 

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { getInputDescribedByText, onComponentRequiredPropUndefined, renderHiddenInput, addFormResetListener, removeFormResetListener, removeDisabledFalse, } from "../../utils/helpers";
 let inputIds = 0;
 /**
+ * @slot helper-text - Content is set as the helper text for the switch.
  * @slot right-adornment - Content is placed to the right of switch.
  */
 export class Switch {
@@ -90,16 +91,16 @@ export class Switch {
         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: '78082265a9f3ee1e14ca59acd5765a8b282cfc5e', class: {
+        return (h(Host, { key: '41b8e3edfe4befcf823ba88af9b476301be738c0', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("label", { key: 'e3e9c1f766c70c39aa23b56b711d908d9f9f1ac9', class: {
+            } }, h("label", { key: 'b7be9f77c5ff10bd8f4ebcc76588d5b84567f37c', class: {
                 "ic-switch-container": true,
                 "ic-switch-disabled": !!disabled,
                 "ic-switch-small": isSmall,
-            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: '2f22e10e5bc446aa74144819e4545bb8b83d68f4', for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
+            }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { key: '799058374e555336d45376ddd645afeee32bafcb', for: inputId, label: label, helperText: helperText, readonly: false, disabled: disabled, class: {
                 "ic-switch-label": true,
                 "ic-switch-label-small": isSmall,
-            } })), !hideLabel && h("span", { key: 'a191a1668fea25e3a4200730fc14ba544ca92688', class: "ic-switch-line-break" }), h("input", { key: 'a6f9af971c7552b2a445bbb74ade01c86081d862', checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": getInputDescribedByText(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: 'd2f404681f8744c8faf160b529eae4190f0b4325', class: "ic-switch-toggle" }, h("svg", { key: '28654e2c158d3271aa200e5a4c74bc61e9982ac7', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: '1314ee2e478b690b6a0b00e7c6220bae1e2237df', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: 'aaf0e443f71380a1bbbb3a5ece540171e28de0a5', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '6d7a6785953666bb0a9336794e5b1fb33fded30f', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'd96bdf90a4598454c255d59fe202d60867533032', name: "right-adornment" }))));
+            } }, h("slot", { key: '509cfc15006377cd5cbb7ead4d33d29069e1ae25', name: "helper-text", slot: "helper-text" }))), !hideLabel && h("span", { key: '01ab8db129ac0a1cb0d1eb36c220211102c77696', class: "ic-switch-line-break" }), h("input", { key: '71c1a210fb9323c0d0bf1139f4bbd68e529b1c1f', 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: '835ba78c97c3af1916e4214e781ecd3e4f465828', class: "ic-switch-toggle" }, h("svg", { key: '8bb00a2e5f95ebe996e73be959467df033c44881', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { key: 'a3d47d6105d552f920ef6143e385515da508500f', class: "ic-switch-icon-line", x1: "9", y1: isSmall ? "2" : "1", x2: "9", y2: isSmall ? "8" : "9" })), h("svg", { key: '2d7a5654aebbb042123a706edb2dec1c605d5f9d', class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '6c0645133ac7a2fa747ce1cd81df0d2b528e19a5', class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: isSmall ? "3.335" : "4.445" }))), h("slot", { key: 'f7ac187630acff4dabd2c264a6ebdbc717c21221', name: "right-adornment" }))));
     }
     static get is() { return "ic-switch"; }
     static get encapsulation() { return "shadow"; }

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 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={true}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n                \"ic-switch-label-small\": isSmall,\n              }}\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              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 { 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"]}

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

@@ -62,7 +62,14 @@ export const AriaLabel = {
 
 export const HelperText = {
   render: () =>
-    html` <ic-switch label="Label" helper-text="Helper Text"></ic-switch>`,
+    html`<ic-switch label="Label" helper-text="Helper Text"></ic-switch>
+      <ic-switch label="Label">
+        <ic-typography variant="caption" slot="helper-text">
+          <span>
+            Slotted helper text with a <ic-link href="#">link</ic-link>
+          </span>
+        </ic-typography>
+      </ic-switch>`,
   name: "Helper text",
 };
 

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

@@ -220,7 +220,7 @@ export class TabContext {
         }
     }
     render() {
-        return h("slot", { key: '62b7b3babe269d227c3225faedd4505935ccecb8' });
+        return h("slot", { key: 'b2129a3c599ca4b97df30f14833761780c2c0940' });
     }
     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: 'd4354a73edcfe5ed044e2acf6d04256eddcb7f40', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '5e2ac19760c3c6f6a5fa4e24e4b65d06bf958734', 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: '42cf7391e17b38a3489e77bc3d882aa31902c14a', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '81270d7ad5567b23ab8098679705c3818b3bfd35', class: "tabs-container" }, h("slot", { key: 'ee7b2ece3edc06146170b759f2c08e22bca9fc7f' })))));
+            } }, h("ic-horizontal-scroll", { key: 'c1af66d6ccce50093586a87024d2fc2064204e65', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '5d74a60b33b216eea766a5d15e9d130cda924d2b', class: "tabs-container" }, h("slot", { key: '7d95c9b98a270810c391abc779ca0bda5c7fa24f' })))));
     }
     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: '5da4dba2bf404436c8b49173f9056d56912e9049', class: {
+        return (h(Host, { key: '866d13ac3e2c93c8ea20e83d8513a74664aabfcb', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '9f7b4cbaa9a2c5a72307ca07097cdb50fd93adb2' }, h("slot", { key: 'f97121f2a2d3092c18bd15c82743ba2a988a1134' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'a44da18c8534659c240dcb84ba9941b61574f546' }, h("slot", { key: '91a267e9b16c4ebdadb1b5facb9f7f50f3944f8e' }))));
     }
     static get is() { return "ic-tab-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5,6 +5,7 @@ import { IC_INHERITED_ARIA, IGNORED_KEYBOARD_CHARACTERS, } from "../../utils/con
 let inputIds = 0;
 const MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, "title"];
 /**
+ * @slot helper-text - Content is set as the helper text for the text field.
  * @slot icon - Content will be placed to the left of the text input.
  */
 export class TextField {
@@ -17,6 +18,7 @@ export class TextField {
         this.minCharactersUnattained = false;
         this.maxValueExceeded = false;
         this.minValueUnattained = false;
+        this.isFocussed = false;
         /**
          * The automatic capitalisation of the text value as it is entered/edited by the user.
          * Available options: "off", "none", "on", "sentences", "words", "characters".
@@ -200,11 +202,13 @@ export class TextField {
             this.minCharactersUnattained =
                 this.minCharacters > 0 && this.numChars < this.minCharacters;
             this.icBlur.emit({ value });
+            this.isFocussed = false;
         };
         this.onFocus = (ev) => {
             const target = ev.target;
             target.addEventListener("wheel", this.onWheel);
             this.icFocus.emit({ value: target.value });
+            this.isFocussed = true;
         };
         this.onTextAreaScroll = () => {
             this.icScroll.emit();
@@ -320,7 +324,7 @@ export class TextField {
         (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, hideLabel, type, autocapitalize, ariaActiveDescendant, inheritedAttributes, ariaExpanded, ariaOwns, autocomplete, role, } = this;
+        const { inputId, name, label, required, size, placeholder, helperText, hideCharCount, rows, resize, disabled, value, min, max, numChars, readonly, maxCharacters, maxCharactersMessage, maxCharactersWarning, maxCharactersReached, maxMessage, minCharacters, minCharactersMessage, minCharactersUnattained, minMessage, minValueUnattained, maxValueExceeded, validationStatus, validationText, validationInline, validationInlineInternal, spellcheck, inputmode, fullWidth, truncateValue, hiddenInput, theme, hideLabel, type, autocapitalize, ariaActiveDescendant, inheritedAttributes, ariaExpanded, ariaOwns, autocomplete, role, isFocussed, } = this;
         const el = this.el;
         const disabledMode = readonly || disabled;
         const currentStatus = maxValueExceeded ||
@@ -351,43 +355,45 @@ export class TextField {
             !(currentStatus == IcInformationStatus.Success && validationInline) &&
             !validationInlineInternal;
         const multiline = rows > 1;
-        const charsRemaining = maxNumChars - numChars;
         const hiddenCharCountDescId = maxCharacters > 0 ? `${inputId}-char-count-desc` : "";
-        const describedBy = `${hiddenCharCountDescId} ${getInputDescribedByText(inputId, helperText !== "", showStatusText)}`.trim();
+        const charsRemaining = maxNumChars - numChars;
+        const remainingCharCountDescId = maxCharacters > 0 ? `${inputId}-remaining-char-count-desc` : "";
+        const remainingCharCountDesc = `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`;
+        const describedBy = `${hiddenCharCountDescId} ${numChars > 0 ? remainingCharCountDescId : ""} ${getInputDescribedByText(this.el, inputId, helperText !== "", showStatusText)}`.trim();
         const disabledText = disabledMode && !readonly;
         const showLeftIcon = !!this.el.querySelector(`[slot="icon"]`) && !disabledText;
         const invalid = `${currentStatus === IcInformationStatus.Error}`;
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '392b43ac248502539bc00717694c10a24818551e', class: {
+        return (h(Host, { key: '353a70181ab18c4f636b34e2177bb9d088567885', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '59ec38e8e8e934cf48123303f68a7ca863badd83', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'fa61768dd93e6d7a1ead043792b15b78b8d3fd26', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly })), h("ic-input-component-container", { key: 'c6ac9c16b6c565671575ec2217e62176d7bc1359', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '353b7a992bbce4060dc5fe29b05f96aedd0cf32a', class: {
+            } }, h("ic-input-container", { key: '96d0ef6132ed2a26ee535cfc5055ddc6287446f6', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'dfcb7859651f74678636e4cda1ba0706b2e3b1fb', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: 'd9ee297f2de674a969486a3d00eef54526eace50', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '0a178235ced26ef73fd907d41424a8b4942659dc', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'c5206e3d1af81d4bf9bf0afcc9277899ca2287be', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '8a5cbec45bedc43908caaae9ff74bc4101f995f8', 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: 'f3945929b482d9a0a954dc1afa658fc0c45d90c8', 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,
-            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": ariaExpanded, "aria-owns": ariaOwns, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: role, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
+            }, placeholder: placeholder ? placeholder : "", required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": ariaExpanded, "aria-owns": ariaOwns, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, role: role || undefined, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))) : (h("textarea", Object.assign({ id: inputId, class: {
                 "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, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '05d080fafd37f3c5e2894968705fe2802cd24f8a', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'b4ef1fb8db068a9c547d20147e31ac798cb838b5', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '2f708851077d7cc70c6a90d2dae3f817ffdf469b', name: "menu" }), (!isEmptyString(validationStatus) ||
+            }, 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, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '6397d66b59b148884cb2fd7f8913063ca24f0de1', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'c5e7f94345cebe1dc99ba475aa5bde1b45dda0e0', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: '1c7fe7d7654373753295a44a3e126ce2409099cc', name: "menu" }), (!isEmptyString(validationStatus) ||
             !isEmptyString(validationText) ||
             maxNumChars > 0 ||
             maxValueExceeded ||
             maxCharactersWarning ||
             minCharactersUnattained ||
             minValueUnattained) &&
-            !validationInlineInternal && (h("ic-input-validation", { key: 'd7c7b40ed97ab62e31fe09e78bf55c796948e33a', status: this.hasStatus(currentStatus) === false ||
+            !validationInlineInternal && (h("ic-input-validation", { key: '2ba3ff987910423696b822529b36e59f04b36025', status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '6b6d4c6b40f66756ceafc51c6ba7a336863ce030', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '5cb893f7e84654a848bd7ec14a0820583ed5d043', variant: "caption", class: "char-count-text" }, h("span", { key: 'b93ac422dbea08cf3d1f139feea1fd5ee37c6755', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'e3b8a947bf1e4b1dc3bd93e04bb50ffaa55ac6a0', class: "remaining-char-count-desc", "aria-live": "polite" }, `${charsRemaining} character${charsRemaining === 1 ? "" : "s"} remaining.`), h("span", { key: '41353bf51d4e7264cc054f524b404519a953bec9', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, !readonly && maxNumChars > 0 && (h("div", { key: '01e443574b72a18ebd0b0646b0c2c30b59cc5726', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '90d4e1d9325a34444c38a9c75eaaa5e256c23cae', variant: "caption", class: "char-count-text" }, h("span", { key: '901a7db053e3fa59e6db506a53be92ddbf54be5d', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '83b08ec8e8ba8286cc8024b647552c5b3e0d09e5', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '28e0fc0de7a73057a7b00bd7e40e71c7611a980c', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters."))))))));
     }
     static get is() { return "ic-text-field"; }
     static get encapsulation() { return "shadow"; }
@@ -457,8 +463,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
+                    "original": "string | null",
+                    "resolved": "null | string",
                     "references": {}
                 },
                 "required": false,
@@ -1039,8 +1045,8 @@ export class TextField {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | undefined",
-                    "resolved": "string | undefined",
+                    "original": "string | null",
+                    "resolved": "null | string",
                     "references": {}
                 },
                 "required": false,
@@ -1337,6 +1343,7 @@ export class TextField {
             "minCharactersUnattained": {},
             "maxValueExceeded": {},
             "minValueUnattained": {},
+            "isFocussed": {},
             "initialValue": {}
         };
     }