@ukic/web-components 3.4.0 → 3.5.0

package/dist/collection/components/ic-data-list/ic-data-list.js

@@ -18,10 +18,10 @@ export class DataList {
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { key: '57187729e8c442e305a364a8bb870af10d7c789a', class: {
+        return (h(Host, { key: 'a10decea9f6872dd3a86cb4e8d989f1628ddd8dd', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'd208727c390375a5c9a137793dc4e49870d1fc5c', class: "heading", id: "data-list-heading" }, h("slot", { key: 'cbaef30591b61e5cb08cd22defe9bfff47f442c3', name: "heading" }, h("ic-typography", { key: '4dcdac2796af8a867123a49df76acf2f056de9cb', variant: "h3" }, heading))), h("div", { key: '32168bcd286cdb0ed55fa824406e13dea9c97b03', class: "divider" }), h("ul", { key: 'e8e98e25dd09803f4771d48ac20956ea518c8a12', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '09dc75e0a80760d56e370ad0b52231f4143549e8' }))));
+            } }, h("div", { key: '5e818e459c2dd23b6e021d82012150757b7520e9', class: "heading", id: "data-list-heading" }, h("slot", { key: '2d68d50a52c8fc3882aa9138ce427c23ccdbc394', name: "heading" }, h("ic-typography", { key: '275d859a1075fd96294913acf1a3b2b9bb1777c2', variant: "h3" }, heading))), h("div", { key: '06e942c78939bf9526ef3bcebba1c76db3c3f608', class: "divider" }), h("ul", { key: '9e7218ee17444774d184680d27e3e11424953bfc', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: 'a75aec759140988dc2d673385d7eef1fc0e7dba5' }))));
     }
     static get is() { return "ic-data-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-data-row/ic-data-row.js

@@ -68,12 +68,12 @@ export class DataRow {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (h(Host, { key: '34f5970795bba243994fce6f2006d699c786cc51', class: {
+        return (h(Host, { key: '2faf353c648f521406dc1318be100192dece1aab', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, h("div", { key: 'f855811376a3e1db1d4a8bab563715d028c07341', class: "data" }, h("div", { key: '2395506f64696056aadfce34d46ffc99ab6db356', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: '87993084bf9673f61edc6f0c04c937f20cd5a10d', class: "end-component" }, h("slot", { key: 'f051b30c5f67e8ea324656391356699a5eeef818', name: "end-component" })))), h("div", { key: 'bf023260ea85682f165370fb1295bd6facf8c45e', class: "divider" })));
+            }, role: "listitem" }, h("div", { key: '3d8e82d44292400dc5cf92230967eb3c9cc57cd0', class: "data" }, h("div", { key: '1e1edf0e3cefbe7cf2bb7e6ab973e55eeab1c0e3', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: '0b60b67c17cce484293060ec5ba89619f527e5c9', class: "end-component" }, h("slot", { key: '403f6290fd00ef44fa02baaeed36932caf6f9902', name: "end-component" })))), h("div", { key: '653123df7e4243474aa5254d948b1666c9b50722', class: "divider" })));
     }
     static get is() { return "ic-data-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -334,7 +334,7 @@ export class Dialog {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme } = this;
-        return (h(Host, { key: '87a6c4970c26fdc12f1aed7bc3bd95b4e2f21810', class: {
+        return (h(Host, { key: 'e8517bd103f365705b664f80c494df70972dd9c4', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,

package/dist/collection/components/ic-empty-state/ic-empty-state.js

@@ -37,11 +37,11 @@ export class EmptyState {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (h(Host, { key: '995486bbd0f1f633fec42b3b01b13c4d8df5ea70', class: {
+        return (h(Host, { key: '1742fa428f2c887fd9b0a200fa5f4040c3ceedf3', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'd8fc4fccad70f8c76f3d2f3684d941369c005418', name: "image" }), h("div", { key: '29923eb7b5f47ba5d6bfac9864f69c3a0b233fc9' }, h("slot", { key: '89ec9f7dde4c6e726840ba32e3b93374d28ad1d1', name: "heading" }, h("ic-typography", { key: 'a7bd4e5f9c7ad89032039b41c72a8a3ac44ee0c4', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: 'b23c53436c1ca4c5c5c4e38c59bd2112f17496fe', name: "subheading" }, h("ic-typography", { key: 'da22a6520f4a9de48708f82ea3a9bde7e978e06a', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: 'f86fc11ab34c45122ff6a24ad13a57f8ed925865', name: "body" }, h("ic-typography", { key: 'd978a50aa34e841b0d7726fa8b0d808734e00ffc', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: 'bb3d3484cbe367efea17a3809a50a3089a135251', class: "action-area" }, h("slot", { key: 'edb8ba0fc8813c0dd21f993e43fa788a9eb8074e', name: "actions" })))));
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: '781c3afcd34547dba24bdc777fed7b704d2d27ad', name: "image" }), h("div", { key: 'a8eb38fb47f8e03d3654cc3f26d12ff1369a52ff' }, h("slot", { key: '4375bf33214131da721591bfbea44d03514b9836', name: "heading" }, h("ic-typography", { key: 'd83b8868e417e55a574716e380be3e99ea2f3aa3', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '79d4fe82562ba2d44ffa5a693a3e9d5743984bbd', name: "subheading" }, h("ic-typography", { key: 'ffd4e8d460b03c3b90b477c0d2f420492a337165', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '166e1b63631dc5f6a5ada15867fae52442c18e14', name: "body" }, h("ic-typography", { key: 'f63a9ec68fe53dadddd3cb26ffe6478164caf3af', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: 'ccf0fe966f7a2c6f5225005d5bd4266523bf5267', class: "action-area" }, h("slot", { key: 'f9f8f74c450aed47b1e8f0467e290714237251b0', name: "actions" })))));
     }
     static get is() { return "ic-empty-state"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,12 +39,12 @@ export class FooterLink {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
         const isLogoLink = !!this.el.closest("div[slot='logo']");
-        return (h(Host, { key: 'e76ea1dcfe97acba7db979b8ac64101c1701dbca', class: {
+        return (h(Host, { key: 'da292a4ecbb670fb85eddac93d4e8743a7f7a5a3', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
                 "footer-logo-link": isLogoLink,
-            }, role: "listitem" }, h("ic-link", { key: '251207e62b8812870a36eb4e7b7aa9307c78668c', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: '3a073f12607a730a032665e55088da56cccf8c42' }))));
+            }, role: "listitem" }, h("ic-link", { key: 'ba008bce21d6a1a062d69515578c158908c4f413', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: '45d18d8d1009b438338c2153a2b59c88d6f3c320' }))));
     }
     static get is() { return "ic-footer-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -74,18 +74,18 @@ export class Hero {
                 "background-position": scrollFactor,
             };
         }
-        return (h(Host, { key: '3231afd5fd4dce03033cff51bf51071ca4fd5047', class: {
+        return (h(Host, { key: '4c88b4471d3485baff1f6c55f859639feb3166d8', class: {
                 [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
                 ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
-            }, style: style }, h("ic-section-container", { key: '70ba24542ed24d67f517c35b35dc68e3cc1d0599', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '24161f2fc3452af40ae1ef17122f3c2813f9dc9f', class: {
+            }, style: style }, h("ic-section-container", { key: 'b68716e353d9b2767dc16a5f701e3cdcbd32c748', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '6dd6f422c0bd36725be4b41b42633aeebfa1911d', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, h("div", { key: 'ee424e3053f730be7dcca29df72e28101923fa98', class: "heading" }, h("slot", { key: 'c235855cf4509ad184a250783ad26ab5b1e8b2bf', name: "heading" }, h("ic-typography", { key: '47c148b51800bb803609fc8b69698c20db1059a0', variant: size === "small" ? "h2" : "h1", class: {
+            } }, h("div", { key: '54ffef99b79eef5eedbf1571bff89270982b5671', class: "heading" }, h("slot", { key: '6b7f71caecbaa84d1a39295e100aedef32d1d522', name: "heading" }, h("ic-typography", { key: '841b429a53b8b72dd60017cb2b2404b826f5bbe8', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, h("h2", { key: '18daae7363614098996b603558e2c5adfdd53c51' }, heading)))), h("div", { key: 'e085d77d98ed6e62b595412544e28f00b9259daa', class: "subheading" }, h("slot", { key: '6a4642853376745f93a166a85820a4043fb58d13', name: "subheading" }, h("ic-typography", { key: '64cddae668b40585dd0285959b0b6bbd3d50a59b', variant: "body" }, subheading))), h("div", { key: '1601aeb153b5a46a9ebd767e0685976be84683ca', class: "interaction-container" }, h("slot", { key: '7585fd3d34ef5e907617795419777dd2372b5e72', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '2e272e20bc9cc0cae93d96a6d9f714ab7b6b263b', class: "right-container" }, h("slot", { key: '6d86d7dbb668b9f34b2a60bdb3f6d444149e52dc', name: "secondary" }, secondaryHeading && (h("div", { key: '97a5dd02c6ccbf08ba89dea069d0f67bd2272b16', class: "secondary-container" }, h("div", { key: 'cb775d9ccc188403fc934923815cd35c6dd8be38', class: "secondary-heading" }, h("ic-typography", { key: '08168a08c9c68b58a4e3cd6763a2e014ef2934da', variant: "h4" }, h("h3", { key: 'f3936a5faf6183d305354ca99cdea8a413b315eb' }, secondaryHeading))), h("div", { key: '99a4f800156a29430ac6b4b082a22e88671f91ab', class: "secondary-subheading" }, h("ic-typography", { key: '947bf3d89afc359b2d596e20cf863659e14b8528', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, h("h2", { key: 'ee802d396bb8a5638f2ab8a62fddbf764436e20e' }, heading)))), h("div", { key: '9a051783a24c9a92fc0aeff2db50689befe4834e', class: "subheading" }, h("slot", { key: 'eb894eaeb4b4303be0caf090d85d487aa11284fb', name: "subheading" }, h("ic-typography", { key: '92b4d9af6118e2ff9bf2b9166862067c610fffee', variant: "body" }, subheading))), h("div", { key: 'cacf81a4666eba19211493914e9b1af466e61478', class: "interaction-container" }, h("slot", { key: '982fb4b528bea4c486d9c0df2cf47fb3ace19414', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '32cd6196da302dd5d0896c90d53d1b35c060e31c', class: "right-container" }, h("slot", { key: '655f0a9978d8402faab43e7e143987f2934255f6', name: "secondary" }, secondaryHeading && (h("div", { key: '94de7e79fd9122b4084b57bf0b5b0571d77e7adc', class: "secondary-container" }, h("div", { key: 'afd414fd37f9b1c8fb6d9f2d7957314f35a1da40', class: "secondary-heading" }, h("ic-typography", { key: 'd643e471ec716d3e6f33ec7761027323ca31bc8c', variant: "h4" }, h("h3", { key: 'f6296bbd33d2ca70beb5100151cebfa8732206d0' }, secondaryHeading))), h("div", { key: '0575ef33984c79674626d9f114ad90a3f973e63a', class: "secondary-subheading" }, h("ic-typography", { key: '8045e445231e4cbbd07ad9fa21a7b6bbf5015eff', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     static get is() { return "ic-hero"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-horizontal-scroll/ic-horizontal-scroll.js

@@ -155,22 +155,22 @@ export class HorizontalScroll {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '263be65dcc0cb0a113e7dd92a8b12c440b9867ea', class: {
+        return (h(Host, { key: '3c307f5bddcc7b6c8ab7764d08504585f61e203d', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '2250a0f96500b700454e012e2a918e2ace6a6f68', "aria-hidden": "true", class: {
+            } }, h("div", { key: 'f4bda7e5c0108e986191cde56ef8e255a80b604f', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: 'd55b6d37d7e9a9eea918def18aea64060db6c2ba', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '5eb199e69ca500c8e84e9b79cec4a3448b604c39', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: '14d21b70c82e36f64cf383dc8371227b3e504312', class: "scroll-splitter-left" })), h("slot", { key: 'a40cc561072ffcb5aacb27b10b815ec92f3f7ded' }), h("div", { key: '212d94aca6d135dfff9664e69ec9eab42ae7ca56', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'c939c5db95cc4b61645045ef498cc9b80c4f3d69', class: "scroll-splitter-left" })), h("slot", { key: '3ded812f11a7bbdc25157d840ee32f23ed58131b' }), h("div", { key: 'e713490eb2995ff19ec70bf0a098193eaa9829a8', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: 'bd5e6c2dc94e2cebe6e9459de52e615982048a27', class: "scroll-splitter-right" }), h("ic-button", { key: 'be8f57d173b04cca06d0654054bb3451a6f40c70', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: 'a2427e872d8ab79ef0022ccb216238867e49065c', class: "scroll-splitter-right" }), h("ic-button", { key: 'a58d98e7d695fe15e3c085f1bec0079045817b2d', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }

package/dist/collection/components/ic-input-component-container/ic-input-component-container.js

@@ -48,15 +48,15 @@ export class InputComponentContainer {
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: '3349803b2fc3756e616a3e6e9f88439c3d360897', class: {
+        return (h(Host, { key: 'fc70461ae7d3922f07aa5a85209e376d42bfc451', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: 'bf85d48b1507e4c7d8394e067314e383e77ffb72', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '7660d9c72526a8bf34e88488884933cc7a5a96cd', class: "icon-container" }, h("slot", { key: 'dc31f454f708ecbcf821cb94cf4d8b5b354d149f', name: "left-icon" }))), h("slot", { key: '92265e4967394e33cdf8763bd8c8b433dbe0536e' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: 'ecefbb2eaf920a2300bb9a30e20c18a86754fba0', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '20934b81740e6c907bff86cc706d3aafe3a790df', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '3577416fc719a575372188c43a78ac945b1b1526', class: "icon-container" }, h("slot", { key: '36ee3e5c85ec77c69f88c2b74d272bdb6ee42ca1', name: "left-icon" }))), h("slot", { key: 'e0a79f50c8ba34c0d989e2402df8b00587c5878f' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: 'b156fb5bb6fcfec8c6dec6febdeea6d2adc7e009', class: "inline-success", innerHTML: successIcon })))));
     }
     static get is() { return "ic-input-component-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-input-container/ic-input-container.js

@@ -11,11 +11,11 @@ export class InputContainer {
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: 'b990f9f26644a727f8d0f086c88dfbb18528ca1a' }, h("div", { key: '32d9cce26c3e720e2d3343dc03fc64cc9436621a', class: {
+        return (h(Host, { key: '49cd31d8dca09cc4b2f49e0b2e7829bb1771a5d6' }, h("div", { key: 'bb0e3a80161a86b40e0dc424264e71cf6c95c88a', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '65cfdbd533ceef8f6cfbdfa8df68789ae5f39804' }))));
+            } }, h("slot", { key: '4916ff0aebd6632d6e6f5daaa3c318e1e696ff2f' }))));
     }
     static get is() { return "ic-input-container"; }
     static get originalStyleUrls() {

package/dist/collection/components/ic-input-label/ic-input-label.css

@@ -15,7 +15,8 @@ ic-input-label.ic-input-label-readonly {
   --ic-typography-color: var(--ic-input-label-readonly-typography-color);
 }
 
-ic-input-label .helpertext {
+ic-input-label .helpertext,
+ic-input-label .helpertext ::slotted(*) {
   margin-top: var(--ic-space-xxxs);
   padding-bottom: var(--ic-input-label-helpertext-padding, 0);
 

package/dist/collection/components/ic-input-label/ic-input-label.js

@@ -30,6 +30,25 @@ export class InputLabel {
          * @internal If `true`, wraps label text in label tag
          */
         this.useLabelTag = true;
+        this.isHelperTextSlotUsed = (slot) => {
+            const assignedEls = slot === null || slot === void 0 ? void 0 : slot.assignedElements();
+            if (assignedEls && assignedEls.length) {
+                for (const el of assignedEls) {
+                    if (el.tagName === "SLOT") {
+                        // Recursion needed for when slot is forwarded multiple times - through child components
+                        // (e.g. in date picker)
+                        if (this.isHelperTextSlotUsed(el)) {
+                            return true;
+                        }
+                    }
+                    else {
+                        // Found an assigned element which is not a nested <slot>
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Input Label");
@@ -37,18 +56,21 @@ export class InputLabel {
     render() {
         const { disabled, readonly, label, required, helperText, status, hideLabel, useLabelTag, } = this;
         const labelText = required ? label + " *" : label;
-        return (h(Host, { key: '5f5a9e086fe974f30c17fefc545d46bcff03aedd', class: {
+        const helperTextId = this.for && getInputHelperTextID(this.for);
+        const helperTextClass = {
+            helpertext: true,
+            "helpertext-normal": !disabled && !readonly,
+            "helpertext-readonly": readonly,
+        };
+        const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
+        return (h(Host, { key: 'f03d8032ac769d4ecea37fe7a60e9d5acea54cd9', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
-                "with-helper": helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: '6e6caa0f10a437753996c84a66b980582cddcc30', variant: "label", class: {
+                "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
+            } }, !hideLabel && (h("ic-typography", { key: '7af61c1f2a1b9068fb9a9b649f60da1784207aa3', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
-            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), helperText !== "" && (h("ic-typography", { key: 'e6a04af0aa3d09deb034217dcb35b47836bf13f3', variant: "caption", class: {
-                helpertext: true,
-                "helpertext-normal": !disabled && !readonly,
-                "helpertext-readonly": readonly,
-            } }, h("span", { key: '70cdef7f1ef75572ab4f9455e4b5b3401ce10950', id: this.for && getInputHelperTextID(this.for) }, helperText)))));
+            } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));
     }
     static get is() { return "ic-input-label"; }
     static get originalStyleUrls() {
@@ -246,5 +268,6 @@ export class InputLabel {
             }
         };
     }
+    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=ic-input-label.js.map

package/dist/collection/components/ic-input-label/ic-input-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EACL,oBAAoB,EACpB,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAM7B,MAAM,OAAO,UAAU;IAJvB;QAKE;;WAEG;QACK,aAAQ,GAAa,KAAK,CAAC;QAOnC;;WAEG;QACK,eAAU,GAAW,EAAE,CAAC;QAEhC;;WAEG;QACK,cAAS,GAAY,KAAK,CAAC;QAOnC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,WAAM,GAAiB,EAAE,CAAC;QAElC;;WAEG;QACK,gBAAW,GAAY,IAAI,CAAC;KA+DrC;IA7DC,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,aAAa,CACd,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,UAAU,EACV,MAAM,EACN,SAAS,EACT,WAAW,GACZ,GAAG,IAAI,CAAC;QACT,MAAM,SAAS,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAElD,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,yBAAyB,EAAE,CAAC,CAAC,QAAQ;gBACrC,yBAAyB,EAAE,QAAQ;gBACnC,aAAa,EAAE,UAAU,KAAK,EAAE;aACjC;YAEA,CAAC,SAAS,IAAI,CACb,sEACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;oBACL,gBAAgB,EAAE,QAAQ;oBAC1B,aAAa,EAAE,MAAM,KAAK,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,QAAQ,CAAC;iBAC7D,IAEA,QAAQ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAC1B,GAAG,SAAS,EAAE,CACf,CAAC,CAAC,CAAC,CACF,aAAO,OAAO,EAAE,IAAI,CAAC,GAAG,IAAG,SAAS,CAAS,CAC9C,CACa,CACjB;YAEA,UAAU,KAAK,EAAE,IAAI,CACpB,sEACE,OAAO,EAAC,SAAS,EACjB,KAAK,EAAE;oBACL,UAAU,EAAE,IAAI;oBAChB,mBAAmB,EAAE,CAAC,QAAQ,IAAI,CAAC,QAAQ;oBAC3C,qBAAqB,EAAE,QAAQ;iBAChC;gBAED,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,IACjD,UAAU,CACN,CACO,CACjB,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\": helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n\n        {helperText !== \"\" && (\n          <ic-typography\n            variant=\"caption\"\n            class={{\n              helpertext: true,\n              \"helpertext-normal\": !disabled && !readonly,\n              \"helpertext-readonly\": readonly,\n            }}\n          >\n            <span id={this.for && getInputHelperTextID(this.for)}>\n              {helperText}\n            </span>\n          </ic-typography>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-input-label.js","sourceRoot":"","sources":["../../../src/components/ic-input-label/ic-input-label.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n  getInputHelperTextID,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-input-label\",\n  styleUrl: \"./ic-input-label.css\",\n})\nexport class InputLabel {\n  @Element() el: HTMLIcInputLabelElement;\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The ID of the form element the label is bound to.\n   */\n  @Prop() for?: string;\n\n  /**\n   * The helper text that will be displayed.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * The label will be visually hidden.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The text content of the label.\n   */\n  @Prop() label!: string;\n\n  /**\n   * If `true`, the readonly state will be set.\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * If `true`, the input label will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The status of the label - e.g. 'error'.\n   */\n  @Prop() status: \"error\" | \"\" = \"\";\n\n  /**\n   * @internal If `true`, wraps label text in label tag\n   */\n  @Prop() useLabelTag: boolean = true;\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Input Label\"\n    );\n  }\n\n  private isHelperTextSlotUsed = (slot: Element | null): boolean => {\n    const assignedEls = (slot as HTMLSlotElement)?.assignedElements();\n    if (assignedEls && assignedEls.length) {\n      for (const el of assignedEls) {\n        if (el.tagName === \"SLOT\") {\n          // Recursion needed for when slot is forwarded multiple times - through child components\n          // (e.g. in date picker)\n          if (this.isHelperTextSlotUsed(el as HTMLSlotElement)) {\n            return true;\n          }\n        } else {\n          // Found an assigned element which is not a nested <slot>\n          return true;\n        }\n      }\n    }\n    return false;\n  };\n\n  render() {\n    const {\n      disabled,\n      readonly,\n      label,\n      required,\n      helperText,\n      status,\n      hideLabel,\n      useLabelTag,\n    } = this;\n    const labelText = required ? label + \" *\" : label;\n    const helperTextId = this.for && getInputHelperTextID(this.for);\n    const helperTextClass = {\n      helpertext: true,\n      \"helpertext-normal\": !disabled && !readonly,\n      \"helpertext-readonly\": readonly,\n    };\n\n    const helperTextSlot = this.el.querySelector(\"slot[name='helper-text']\");\n\n    return (\n      <Host\n        class={{\n          \"ic-input-label-disabled\": !!disabled,\n          \"ic-input-label-readonly\": readonly,\n          \"with-helper\":\n            this.isHelperTextSlotUsed(helperTextSlot) || helperText !== \"\",\n        }}\n      >\n        {!hideLabel && (\n          <ic-typography\n            variant=\"label\"\n            class={{\n              \"readonly-label\": readonly,\n              \"error-label\": status === \"error\" && !(readonly || disabled),\n            }}\n          >\n            {readonly || !useLabelTag ? (\n              `${labelText}`\n            ) : (\n              <label htmlFor={this.for}>{labelText}</label>\n            )}\n          </ic-typography>\n        )}\n        {this.isHelperTextSlotUsed(helperTextSlot) ? (\n          <span id={helperTextId} class={helperTextClass}>\n            <slot name=\"helper-text\"></slot>\n          </span>\n        ) : (\n          helperText !== \"\" && (\n            <ic-typography variant=\"caption\" class={helperTextClass}>\n              <span id={helperTextId}>{helperText}</span>\n            </ic-typography>\n          )\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-input-validation/ic-input-validation.js

@@ -33,13 +33,13 @@ export class InputValidation {
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? icon[status] : "";
-        return (h(Host, { key: '8d9f4b88cdd73d491aa836934b20855ac932c411', class: {
+        return (h(Host, { key: '2ab746f75a46252bc0755dfd28220dbe555b93b3', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
-            } }, displayIcon !== "" && (h("span", { key: '7d067283e8646242ac0bcd3dcb35a96f33d814b0', class: {
+            } }, displayIcon !== "" && (h("span", { key: 'fc02067a0c0f1e9672e190f1bd30774cd2cfcfe0', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: 'c34f1a34c9dc0da4bcb68f775611a7dfcfc6f407', variant: "caption", class: "statustext" }, h("span", { key: 'a2e90e21fb834fea1b330c16606043afa1d42d01', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: 'b5562931123e8b745535ae5042d6c7fe8a994717', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: 'f8d3c1d9d7f30e232ebbc827033ad318485f7c98', variant: "caption", class: "statustext" }, h("span", { key: '73b35c4a5c4dbe77fe4c71032020a0346e34fcfd', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '629f37113c9354db274019eadc9ae7140adf921a', name: "validation-message-adornment" })));
     }
     static get is() { return "ic-input-validation"; }
     static get originalStyleUrls() {

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

@@ -91,7 +91,7 @@ export class Link {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '363a33f7c903d0ab7d4b1e6c29a9ea87075dc01b', class: {
+        return (h(Host, { key: '769bea68e79e8b28fb9c0ea007c24dd11968d332', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/collection/components/ic-loading-indicator/ic-loading-indicator.css

@@ -443,7 +443,7 @@ video {
 
 :host {
   /**
-   * @prop --circular-diameter: Diameter of the circular-indicator
+   * @prop --circular-diameter: Diameter of the circular-indicator in px, rem or %
    */
 
   display: block;
@@ -602,12 +602,12 @@ video {
   stroke: var(--compact-step-inner-color, var(--inner-color));
 }
 
-:host(.inner-label) .ic-loading-circular-inner {
+.inner-label {
   height: 100%;
   display: grid;
 }
 
-:host(.inner-label) .ic-loading-circular-svg,
+.inner-label .ic-loading-circular-svg,
 .inner-text {
   grid-column: 1;
   grid-row: 1;