npm - @ukic/web-components - Versions diffs - 3.24.0 → 3.25.0 - Mend

@ukic/web-components 3.24.0 → 3.25.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (321) hide show

package/dist/esm/ic-skeleton.entry.js CHANGED Viewed

@@ -43,11 +43,11 @@ const Skeleton = class {
                 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' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-skip-link.entry.js CHANGED Viewed

@@ -40,9 +40,9 @@ const SkipLink = class {
     }
     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/esm/ic-status-tag.entry.js CHANGED Viewed

@@ -39,12 +39,12 @@ const StatusTag = class {
     }
     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)))));
     }
 };
 StatusTag.style = IcStatusTagStyle0;

package/dist/esm/ic-step.entry.js CHANGED Viewed

@@ -83,27 +83,27 @@ const Step = class {
         // 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: Check }));
+            statusIcon = (h("span", { key: '4d1011a9a12449bd324aff3f404522fde6912be3', class: "check-icon step-icon", "aria-hidden": "true", innerHTML: Check }));
         }
         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" &&
@@ -116,26 +116,26 @@ const Step = class {
         // 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: Check })));
+            icon = (h("div", { key: '195a5f5dd31061a4059020d7fa1d65b15eb29a11', class: "step-icon-inner", "aria-hidden": "true" }, h("span", { key: 'd11d3bf512968fa286309bcd69faa20cd12d3396', class: "check-icon", innerHTML: Check })));
         }
         // 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/esm/ic-stepper.entry.js CHANGED Viewed

@@ -285,11 +285,11 @@ const Stepper = class {
         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' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-switch.entry.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { r as removeDisabledFalse, l as removeFormResetListener, k as addFormResetListener, o as onComponentRequiredPropUndefined, m as renderHiddenInput, q as getInputDescribedByText } from './helpers-33039856.js';
 import './constants-ab12fdcf.js';
-const icSwitchCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;--ic-input-label-text-color:var(--ic-switch-label);--ic-input-label-helper-text-color:var(--ic-switch-help-text);--ic-input-label-helpertext-padding:var(--ic-space-xs)}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);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;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-switch-unchecked-bg);border:var(--ic-border-width) solid var(--ic-switch-unchecked);box-sizing:border-box;transition:var(--ic-transition-duration-fast);margin-left:var(--ic-space-xxs)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-toggle::before{content:\"\";width:1.333rem;height:1.333rem;border-radius:50%;position:absolute;z-index:2;top:50%;left:0.333rem;transform:translate(0, -50%);background-color:var(--ic-switch-unchecked);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:0.625rem;height:0.625rem}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off)}.ic-switch-icon-line{stroke:var(--ic-switch-indicator-on)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-switch-checked)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem 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)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 0.75rem 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)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:var(--ic-border-focus)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off-disabled)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-switch-indicator-on-disabled)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-switch-unchecked-bg-disabled);border:var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-switch-unchecked-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg-disabled);border:var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{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,.ic-switch-input:checked+.ic-switch-toggle{border:var(--ic-border-hc)}.ic-switch-input:focus+.ic-switch-toggle{border-color:highlight;outline:var(--ic-space-xxxs) solid highlight}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(calc(var(--ic-space-xl) - 0.125rem), -50%)}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.ic-switch-disabled .ic-switch-icon-circle,.ic-switch-disabled .ic-switch-icon-line{stroke:GrayText}}@media (prefers-reduced-motion: reduce){.ic-switch-toggle,.ic-switch-toggle::before{transition:none}}";
+const icSwitchCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;--ic-input-label-text-color:var(--ic-switch-label);--ic-input-label-helper-text-color:var(--ic-switch-help-text);--ic-input-label-helpertext-padding:var(--ic-space-xs)}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-xs)}.ic-switch-toggle{display:flex;align-items:center;width:calc(var(--ic-space-xl) * 2);height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-switch-unchecked-bg);border:var(--ic-border-width) solid var(--ic-switch-unchecked);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{flex:1 0 100%}.ic-switch-toggle::before{content:\"\";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: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:var(--ic-space-sm);height:var(--ic-space-sm)}.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{height:var(--ic-space-sm);width:var(--ic-space-1px);background-color:var(--ic-switch-indicator-on);border-radius:99px;margin-left:calc(\n    var(--ic-space-md) + var(--ic-space-xxs) - var(--ic-space-1px)\n  )}.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(\n    var(--ic-space-xs) + var(--ic-space-md) - var(--ic-space-1px)\n  );height:var(--ic-space-md)}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{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(\n    calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-1px)),\n    -50%\n  )}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{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 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 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 var(--ic-space-sm) var(--ic-switch-checked-bg-pressed)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:var(--ic-border-focus)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-switch-indicator-off-disabled)}.ic-switch-disabled .ic-switch-icon-line{background-color:var(--ic-switch-indicator-on-disabled)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-switch-unchecked-bg-disabled);border:var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-switch-unchecked-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-switch-checked-bg-disabled);border:var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled)}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-switch-checked)}::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)}.ic-switch-input:focus+.ic-switch-toggle{border-color:highlight;outline:var(--ic-space-xxxs) solid highlight}.ic-switch-input:checked+.ic-switch-toggle::before{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(\n      calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-xxxs)),\n      -50%\n    )}.ic-switch-input:disabled+.ic-switch-toggle,.ic-switch-input:disabled:checked+.ic-switch-toggle,.ic-switch-input:disabled+.ic-switch-toggle::before{border-color:GrayText}.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){.ic-switch-toggle,.ic-switch-toggle::before{transition:none}}";
 const IcSwitchStyle0 = icSwitchCss;
 let inputIds = 0;
@@ -94,18 +94,16 @@ const Switch = class {
     }
     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 delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ic-switch.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-switch.entry.js","mappings":"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","names":[],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n\n --ic-input-label-text-color: var(--ic-switch-label);\n --ic-input-label-helper-text-color: var(--ic-switch-help-text);\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n}\n\ninput {\n overflow: hidden;\n appearance: none;\n}\n\n.ic-switch-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n cursor: pointer;\n}\n\n.ic-switch-label {\n margin-left: var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-label-small {\n margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-toggle {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 4rem;\n height: var(--ic-space-xl);\n position: relative;\n border-radius: 100vw;\n background-color: var(--ic-switch-unchecked-bg);\n border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n box-sizing: border-box;\n transition: var(--ic-transition-duration-fast);\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-switch-line-break {\n flex: 1 0 100%;\n}\n\n.ic-switch-toggle::before {\n content: \"\";\n width: 1.333rem;\n height: 1.333rem;\n border-radius: 50%;\n position: absolute;\n z-index: 2;\n top: 50%;\n left: 0.333rem;\n transform: translate(0, -50%);\n background-color: var(--ic-switch-unchecked);\n transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n display: inline-block;\n vertical-align: middle;\n width: 0.625rem;\n height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off);\n}\n\n.ic-switch-icon-line {\n stroke: var(--ic-switch-indicator-on);\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle::before {\n transition-duration: 0ms;\n }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg);\n border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-xl), -50%);\n background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n stroke: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n background-color: var(--ic-switch-unchecked-bg-disabled);\n border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg-disabled);\n border: var(--ic-border-width) dashed\n var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small .ic-switch-toggle {\n width: var(--ic-space-xxl);\n height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted([slot=\"right-adornment\"]) {\n margin-left: var(--ic-space-sm);\n fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n .ic-switch-toggle::before,\n .ic-switch-input:checked + .ic-switch-toggle {\n border: var(--ic-border-hc);\n }\n\n .ic-switch-input:focus + .ic-switch-toggle {\n border-color: highlight;\n outline: var(--ic-space-xxxs) solid highlight;\n }\n\n .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n }\n\n .ic-switch-input:disabled + .ic-switch-toggle,\n .ic-switch-input:disabled:checked + .ic-switch-toggle,\n .ic-switch-input:disabled + .ic-switch-toggle::before {\n border-color: GrayText;\n }\n\n .ic-switch-disabled .ic-switch-icon-circle,\n .ic-switch-disabled .ic-switch-icon-line {\n stroke: GrayText;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle,\n .ic-switch-toggle::before {\n transition: none;\n }\n}\n","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}
1	+ {"file":"ic-switch.entry.js","mappings":"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","names":[],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: inline-block;\n\n --ic-input-label-text-color: var(--ic-switch-label);\n --ic-input-label-helper-text-color: var(--ic-switch-help-text);\n --ic-input-label-helpertext-padding: var(--ic-space-xs);\n}\n\ninput {\n overflow: hidden;\n appearance: none;\n}\n\n.ic-switch-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n cursor: pointer;\n}\n\n.ic-switch-label {\n margin-left: var(--ic-space-xxs);\n margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-toggle {\n display: flex;\n align-items: center;\n width: calc(var(--ic-space-xl) * 2);\n height: var(--ic-space-xl);\n position: relative;\n border-radius: 100vw;\n background-color: var(--ic-switch-unchecked-bg);\n border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n box-sizing: border-box;\n transition: var(--ic-transition-duration-fast);\n margin-left: var(--ic-space-xxs);\n gap: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.ic-switch-small .ic-switch-toggle {\n width: var(--ic-space-xxl);\n height: var(--ic-space-lg);\n gap: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n}\n\n.ic-switch-large .ic-switch-toggle {\n width: calc(var(--ic-space-xl) + var(--ic-space-xxl));\n height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n gap: calc(var(--ic-space-lg) + var(--ic-space-xxs));\n}\n\n.ic-switch-line-break {\n flex: 1 0 100%;\n}\n\n.ic-switch-toggle::before {\n content: \"\";\n width: calc(var(--ic-space-sm) * 2);\n height: calc(var(--ic-space-sm) * 2);\n border-radius: 50%;\n position: absolute;\n z-index: 2;\n top: 50%;\n left: var(--ic-space-xxs);\n transform: translate(0, -50%);\n background-color: var(--ic-switch-unchecked);\n transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.ic-switch-large .ic-switch-toggle::before {\n width: var(--ic-space-xl);\n height: var(--ic-space-xl);\n}\n\n.ic-switch-icon {\n display: inline-block;\n vertical-align: middle;\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n}\n\n.ic-switch-small .ic-switch-icon {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n.ic-switch-large .ic-switch-icon {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n}\n\n.ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off);\n stroke-width: var(--ic-space-1px);\n}\n\n.ic-switch-icon-line {\n height: var(--ic-space-sm);\n width: var(--ic-space-1px);\n background-color: var(--ic-switch-indicator-on);\n border-radius: 99px;\n margin-left: calc(\n var(--ic-space-md) + var(--ic-space-xxs) - var(--ic-space-1px)\n );\n}\n\n.ic-switch-small .ic-switch-icon-line {\n margin-left: calc(var(--ic-space-md) - var(--ic-space-1px));\n height: var(--ic-space-xs);\n}\n\n.ic-switch-large .ic-switch-icon-line {\n margin-left: calc(\n var(--ic-space-xs) + var(--ic-space-md) - var(--ic-space-1px)\n );\n height: var(--ic-space-md);\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg);\n border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - var(--ic-space-1px)), -50%);\n background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-lg) - var(--ic-space-1px)), -50%);\n}\n\n.ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(\n calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-1px)),\n -50%\n );\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n background-color: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n background-color: var(--ic-switch-unchecked-bg-disabled);\n border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n background-color: var(--ic-switch-checked-bg-disabled);\n border: var(--ic-border-width) dashed\n var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n background-color: var(--ic-switch-checked);\n}\n\n::slotted([slot=\"right-adornment\"]) {\n margin-left: var(--ic-space-sm);\n fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n .ic-switch-toggle::before {\n width: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));\n }\n\n .ic-switch-small .ic-switch-toggle::before {\n width: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n }\n\n .ic-switch-large .ic-switch-toggle::before {\n width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n }\n\n .ic-switch-toggle::before,\n .ic-switch-input:checked + .ic-switch-toggle {\n border: var(--ic-border-hc);\n }\n\n .ic-switch-input:focus + .ic-switch-toggle {\n border-color: highlight;\n outline: var(--ic-space-xxxs) solid highlight;\n }\n\n .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-xl) - var(--ic-space-xxxs)), -50%);\n }\n\n .ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(calc(var(--ic-space-lg) - var(--ic-space-xxxs)), -50%);\n }\n\n .ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {\n transform: translate(\n calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-xxxs)),\n -50%\n );\n }\n\n .ic-switch-input:disabled + .ic-switch-toggle,\n .ic-switch-input:disabled:checked + .ic-switch-toggle,\n .ic-switch-input:disabled + .ic-switch-toggle::before {\n border-color: GrayText;\n }\n\n .ic-switch-icon-line {\n background-color: buttonborder;\n }\n\n .ic-switch-disabled .ic-switch-icon-circle {\n stroke: GrayText;\n }\n\n .ic-switch-disabled .ic-switch-icon-line {\n background-color: GrayText;\n }\n}\n\n@media (prefers-reduced-motion: reduce) {\n .ic-switch-toggle,\n .ic-switch-toggle::before {\n transition: none;\n }\n}\n","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"],"version":3}

package/dist/esm/ic-tab-context.entry.js CHANGED Viewed

@@ -230,7 +230,7 @@ const TabContext = class {
         }
     }
     render() {
-        return h("slot", { key: '6a473d128002201d91b16855f088cb013b3e6b09' });
+        return h("slot", { key: '717530e623d11f274e79fe3be4bcbd0ff9e71033' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-tab-group.entry.js CHANGED Viewed

@@ -22,11 +22,11 @@ const TabGroup = class {
     }
     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 delegatesFocus() { return true; }
 };

package/dist/esm/ic-tab-panel.entry.js CHANGED Viewed

@@ -24,10 +24,10 @@ const TabPanel = class {
     }
     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' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-theme.entry.js CHANGED Viewed

@@ -68,7 +68,7 @@ const Theme = class {
     }
     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 watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

package/dist/esm/ic-toast-region.entry.js CHANGED Viewed

@@ -42,7 +42,7 @@ const ToastRegion = class {
         }
     }
     render() {
-        return h("slot", { key: 'a8f7702ec7c396139a9fa455dd6900e4d3232f73' });
+        return h("slot", { key: '28f5e26c6dbfb2de076cff231b72722f1ff403c7' });
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-toast.entry.js CHANGED Viewed

@@ -209,20 +209,20 @@ const Toast = class {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, theme, } = this;
-        return (h(Host, { key: 'ff2cb4fa83ec20e9226dac7e6d65692877f6ba18', class: {
+        return (h(Host, { key: '57c068f4c9a9e3017733432a596f78e2bcbffae6', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-toast-hidden"]: !visible,
                 [`ic-toast-variant-${variant}`]: variant !== undefined,
-            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '96a06262e46b6fd4eefe8e3eb84c3b67c5a85335', class: {
+            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: 'e24bd72e435cc443c375eee309ae98fc9e030c0b', class: {
                 ["container"]: true,
                 [`container-${variant}`]: variant !== undefined,
-            } }, variant && visible && (h("div", { key: '30eec9ac65d800405983859cada0514bce740b6a', class: "toast-icon-container" }, h("div", { key: '741228b2fa872bc5f6c4a2e57d76b2ce1ae313da', class: {
+            } }, variant && visible && (h("div", { key: 'bdabfabb04efcd93ab88ecb691b3baa73fc9da0a', class: "toast-icon-container" }, h("div", { key: 'bede66dcf6189ac321e9bee90dc144e9d38a09dc', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '5068418007424fb1e8074a51c3d48b44d3d4960d', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '57480804dc55695e555a16dd818c5febcaffbe00', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: '99bb37a24570386689e6712e1b5e55cfce64fba9', class: "toast-text" }, h("ic-typography", { key: '017c9e715e6f60aeb95ee28d67130541b6df4888', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '30d276906aec46c8ac41ef3275dc3b7b5c96177b', variant: "body", class: "toast-message" }, visible && h("p", { key: 'f1648dc19f63770974cc92ef9da333e000677bb9' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: 'a8e396c4263d937de7c76c15aa68cf499ad5df78', class: "toast-action-container" }, h("slot", { key: '22d5e4ef0f50a3b65067c27d305ade75eab441a0', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: '8540288f9f34f0b72c86fa3039d579c93be1277f', class: "toast-text" }, h("ic-typography", { key: 'c5e8f2d0a2fe026b430dddf7a81e825845f5ce72', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '89fe3df8f98581ef66c1ea74930d9042a579a359', variant: "body", class: "toast-message" }, visible && h("p", { key: 'd805d260febad5f8d58aeffe2dfef9f84d6d0911' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: 'c9cfd3cd4bf5f77cea072bb15f8629ab4a368ad0', class: "toast-action-container" }, h("slot", { key: '26b2fb447b937f327719edfe531e5b1260fa7c6c', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-toggle-button-group.entry.js CHANGED Viewed

@@ -250,14 +250,14 @@ const ToggleButtonGroup = class {
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (h(Host, { key: '1238ec0b93b309a3945791eff6f847fb10b0abf5', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'b312b6cae074758bad82c66446709925e19cf5ce', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: '6dfd004b9e0c386362d8172334dfca2f1e6274fc' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '8b09d946e7a8983b66f8bef384901899f88a54af' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-toggle-button.entry.js CHANGED Viewed

@@ -153,7 +153,7 @@ const ToggleButton = class {
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: '40cd81ec38848d6b7b68707348ae0a2b7ee5a976', class: {
+        return (h(Host, { key: 'a90e2a846a52531dc542d039724dc8516a00ae14', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -163,7 +163,7 @@ const ToggleButton = class {
                 "ic-toggle-button-hide-outline": !outline,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: 'ba600a5f546ef45e668800e9f26226f6f7e4985a', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '881f7a3d2789ee1d5ba98851380c7dd8527a5ae2' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '2ef62044db8f5c13f280b74cfcadcf6dcec7859e', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '6fcb625790392bc0602cd58a2ce669aa55073e57', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: '6f15f0c63675bd099d370ce02e2b02eeac4e913a', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '2503823bad70fa984db6c71d16cc863daaede0e3' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '53969441b6446ec012b538c2f3d468ea0e793547', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '2619be7d1528115db996708b102aadd611fd1b4b', name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ic-typography.entry.js CHANGED Viewed

@@ -170,7 +170,7 @@ const Typography = class {
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, theme, } = this;
-        return (h(Host, { key: '9628fbe7b5d9c10f640fe189fe454c332e1f6011', class: {
+        return (h(Host, { key: 'ebe035263fde8a7f2d24b8c40386caa8920bc506', class: {
                 [`ic-typography-${variant}`]: true,
                 [`ic-typography-vertical-margins-${variant}`]: !!applyVerticalMargins,
                 ["ic-typography-bold"]: !!bold,
@@ -183,7 +183,7 @@ const Typography = class {
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
             maxLines &&
-            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: 'e66a10144ba334ab8b2530e2cf666634ce335717', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
+            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: '78d2abb16288489fadb3c94a1cf1bbffd78ea67e', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {