npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.13 → 3.0.0-alpha.14 - Mend

@ukic/web-components 3.0.0-alpha.13 → 3.0.0-alpha.14

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 (158) hide show

package/dist/collection/components/ic-toast/ic-toast.js CHANGED Viewed

@@ -202,13 +202,13 @@ export class Toast {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, } = this;
-        return (h(Host, { key: '1b2fa0d83f73637acb0a841a766fbf3dfaaef093', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '79f9dcb0d96b66e6ee3ca1efc475fcdf11eb3501', class: "container" }, variant && visible && (h("div", { key: '5942e5d3bbf0eb6bb3f86c91f9e845a711d6fd23', class: "toast-icon-container" }, h("div", { key: 'a043c4d4fde7528a189833aa54e79457b033d70a', class: {
+        return (h(Host, { key: 'fa6a7d6728859eb5b7269aa107c1245f95e8c070', class: { ["ic-toast-hidden"]: !visible }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: 'bd9d63cf3aa162336af8c98c7b5ef0eef9727a05', class: "container" }, variant && visible && (h("div", { key: 'ab69806c35fc984bf2bccdb45f2568dd7e43b45c', class: "toast-icon-container" }, h("div", { key: 'f69c093a9d15bcf6592c39736657ea7d921b436b', 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: '9e45301a32b8050c10774ce191201093f029a0ff', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '58c6b130bf233edf14a9306eded733671a9bcc7a', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: 'c710dfa0f7a59bf990c6d655f6d62eab413613cb', class: "toast-text" }, h("ic-typography", { key: '16a3f0902c5571b861c1eae5ea1e4baa0baf2789', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '4bdc76c3159b50ef16633a72a02ae731620eb2a4', variant: "body", class: "toast-message" }, visible && h("p", { key: '0ebd814f2723eaa2a48175f8fb2b406b8ef30612' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '25251e47cf802b98e82639ff9cdde60a721f197b', class: "toast-action-container" }, h("slot", { key: '3873850f02a05064b979f8203a54d66e9aeb9a43', 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", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: 'a99ef4a5497b62d3724f1c3001b592bee3b7c76f', class: "toast-text" }, h("ic-typography", { key: '08ff7bf5c471121d854cdc34d78ff42194c6a50d', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '905b01333ed90c57a3e538b1fb9f10df970f1331', variant: "body", class: "toast-message" }, visible && h("p", { key: 'a54c00d59185300ec781bbc4d2cf8f19aaa695a9' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: '56a80eeb87e7c886cb4dd31ec059020ff1ba820b', class: "toast-action-container" }, h("slot", { key: '4e09a9eaf12503e0bd377e112617e8390b1eac5e', 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", "aria-label": dismissButtonAriaLabel })))));
     }
     static get is() { return "ic-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-toast/ic-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,CAAC,EACD,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,KAAK,GACN,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EACL,OAAO,EACP,aAAa,EACb,UAAU,EACV,gCAAgC,GACjC,MAAM,qBAAqB,CAAC;AAI7B,MAAM,kCAAkC,GAAG,IAAI,CAAC;AAChD,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAErC;;;GAGG;AAMH,MAAM,OAAO,KAAK;IALlB;QAOU,wBAAmB,GAA6B,EAAE,CAAC;QASlD,kBAAa,GAAG,GAAG,CAAC;QACpB,YAAO,GAAG,KAAK,CAAC;QAEzB;;;WAGG;QACsB,uBAAkB,GAAI,IAAI,CAAC;QAEpD;;WAEG;QACK,2BAAsB,GAAI,SAAS,CAAC;QAE5C;;WAEG;QACsB,gBAAW,GAAuB,QAAQ,CAAC;QAgM5D,kBAAa,GAAG,GAAS,EAAE;YACjC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC,CAAC;QAEM,yBAAoB,GAAG,GAAG,EAAE;YAClC,IAAI,CAAC,aAAa;gBAChB,CAAC,kCAAkC,GAAG,IAAI,CAAC,kBAAmB,CAAC,GAAG,GAAG,CAAC;QAC1E,CAAC,CAAC;QAkDM,YAAO,GAAG,GAAS,EAAE;YAC3B,IAAI,IAAI,CAAC,uBAAuB,EAAE,CAAC;gBACjC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,WAAM,GAAG,GAAS,EAAE;YAC1B,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAgB,CAAC,CAAC;QACzD,CAAC,CAAC;KAoFH;IAnVC,wBAAwB,CAAC,QAA2B;QAClD,IAAI,CAAC,QAAQ,GAAG,QAAQ,KAAK,QAAQ,CAAC;IACxC,CAAC;IA2BD,oBAAoB;QAClB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;IAClD,CAAC;IAED,iBAAiB;;QACf,IAAI,CAAC,cAAc,CACjB,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,wBAAwB,EAC9C,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,MAAA,IAAI,CAAC,OAAO,0CAAE,MAAM,IAAG,wBAAwB,CAClE,CAAC;QAEF,IAAI,IAAI,CAAC,kBAAmB,GAAG,IAAI;YAAE,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;QAEpE,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC;YAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,CAAC;QAC/D,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC;QAE9C,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;YAAE,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;QAClE,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;YAC/B,IAAI,CAAC,mBAAmB;gBACtB,MAAA,IAAI,CAAC,oBAAoB,mCAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS,CAAC;QACvE,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,YAAY,GAAW,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;gBACtD,CAAC,CAAC,KAAK,IAAI,CAAC,OAAO,EAAE;gBACrB,CAAC,CAAC,EAAE,CAAC;YACP,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,YAAY,EACZ,IAAI,CAAC,OAAO;gBACV,CAAC,CAAC,IAAI,CAAC,mBAAmB,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,SAAS;gBACnE,CAAC,CAAC,IAAI,CAAC,OAAO,CACjB,CAAC;YACF,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC;gBAC5B,IAAI,CAAC,EAAE,CAAC,YAAY,CAClB,kBAAkB,EAClB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,EAAE,CACrE,CAAC;QACN,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,OAAO,CACR,CAAC;IACJ,CAAC;IAED,kBAAkB;;QAChB,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClD,IAAI,CAAC,qBAAqB,EAAE,CAAC;YAE7B,MAAM,aAAa,GAAG,OAAO,CAC3B,IAAI,CAAC,EAAE,EACP,QAAQ,CACiB,CAAC;YAC5B,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;YACrE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAChE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAEhE,IAAI,CAAC,uBAAuB,GAAG,KAAK,CAAC;YACrC,IAAI,CAAC,0BAA0B,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,QAAQ,EAAE,CAAC;YACjE,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC/B,CAAC;IACH,CAAC;IAGD,mBAAmB;;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,MAAM,aAAa,GAAG,OAAO,CAC3B,IAAI,CAAC,EAAE,EACP,QAAQ,CACiB,CAAC;YAC5B,MAAM,aAAa,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,WAAW,CAAC,CAAC;YACrE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAChE,IAAI,aAAa;gBAAE,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAClE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;QAChC,CAAC;IACH,CAAC;IAGD,aAAa;QACX,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,qBAAqB,EAAE,CAAC;IAC/B,CAAC;IAGD,cAAc,CAAC,EAAiB;QAC9B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,QAAQ,EAAE,CAAC,GAAG,EAAE,CAAC;oBACf,KAAK,KAAK;wBACR,EAAE,CAAC,cAAc,EAAE,CAAC;wBACpB,IAAI,CAAC,0BAA0B,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,QAAQ,EAAE,CAAC;wBACxD,MAAM;oBACR,KAAK,QAAQ;wBACX,CAAC,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;wBACnC,EAAE,CAAC,wBAAwB,EAAE,CAAC;wBAC9B,MAAM;gBACV,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,IAAI,EAAE,CAAC,GAAG,KAAK,KAAK,EAAE,CAAC;oBACrB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC,QAAQ,CAAC;oBACnC,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC;gBACtC,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAID,WAAW,CAAC,EAAc;QACxB,QAAQ,EAAE,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,YAAY;gBACf,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;oBACnB,IAAI,CAAC,qBAAqB,EAAE,CAAC;gBAC/B,CAAC;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;gBACrB,MAAM;YACR,KAAK,YAAY;gBACf,IAAI,IAAI,CAAC,WAAW,KAAK,WAAW,EAAE,CAAC;oBACrC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;oBACtB,IAAI,CAAC,mBAAmB,GAAG,EAAE,CAAC;oBAC9B,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;wBACjB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;wBACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;oBACJ,CAAC;gBACH,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,UAAU;QACd,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,UAAU,CACrC,IAAI,CAAC,aAAa,EAClB,IAAI,CAAC,kBAAkB,CACxB,CAAC;YACF,IAAI,CAAC,oBAAoB,GAAG,MAAM,CAAC,WAAW,CAC5C,IAAI,CAAC,oBAAoB,EACzB,kCAAkC,CACnC,CAAC;YACF,OAAO,IAAI,CAAC;QACd,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,GAAG,CAAC,CAAC;YACrE,OAAO,QAAQ,CAAC,aAA4B,CAAC;QAC/C,CAAC;IACH,CAAC;IAWO,cAAc,CACpB,cAAuB,EACvB,cAAwB;QAExB,IAAI,cAAc,IAAI,cAAc,EAAE,CAAC;YACrC,OAAO,CAAC,KAAK,CACX,gCAAgC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,GAC7D,cAAc,IAAI,cAAc,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAC/C,GACE,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAC/B,+DAA+D,CAChE,CAAC;QACJ,CAAC;IACH,CAAC;IAEO,0BAA0B,CAChC,WAAoB;QAEpB,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC;QAC5C,MAAM,MAAM,GACV,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAEhE,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YAC/C,OAAO,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAExC,IAAI,YAAY,GAAW,CAAC,CAAC;QAE7B,OAAO,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE;YACjD,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;gBAAE,OAAO,KAAK,CAAC;YACrC,YAAY,GAAG,KAAK,CAAC;YACrB,OAAO,IAAI,CAAC;QACd,CAAC,CAAC;YACA,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,YAAY,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACjE,CAAC,CAAC,OAAO,CAAC;IACd,CAAC;IAEO,qBAAqB;QAC3B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QACzC,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAC;QAChD,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;IAC3B,CAAC;IAEO,QAAQ,CAAC,QAAqB;QACpC,OAAO,QAAQ,KAAK,IAAI,CAAC,EAAE;YACzB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,UAAW,CAAC,aAAa;YACrC,CAAC,CAAC,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC;IAC1C,CAAC;IAYD,MAAM;QACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,QAAQ,EACR,sBAAsB,GACvB,GAAG,IAAI,CAAC;QACT,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,CAAC,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,EACxC,QAAQ,EAAC,GAAG,EACZ,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,eACxB,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ;YAErC,4DAAK,KAAK,EAAC,WAAW;gBACnB,OAAO,IAAI,OAAO,IAAI,CACrB,4DAAK,KAAK,EAAC,sBAAsB;oBAC/B,4DACE,KAAK,EAAE;4BACL,CAAC,SAAS,CAAC,EAAE,IAAI;4BACjB,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,IAAI;yBAC7B,GACI;oBACN,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CACvB,YAAM,IAAI,EAAC,cAAc,GAAG,CAC7B,CAAC,CAAC,CAAC,CACF,YACE,KAAK,EAAC,YAAY,EAClB,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACT,CACG,CACP;gBACD,4DACE,KAAK,EAAE;wBACL,CAAC,eAAe,CAAC,EAAE,IAAI;wBACvB,CAAC,SAAS,CAAC,EACT,OAAO,KAAK,SAAS,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,cAAc,CAAC;qBAChE;oBAED,4DAAK,KAAK,EAAC,YAAY;wBACrB,sEAAe,OAAO,EAAC,gBAAgB,EAAC,KAAK,EAAC,eAAe,IAC1D,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAK,OAAO,CAAM,CAAC,CAAC,CAAC,aAAI,OAAO,CAAK,CAAC,CAChD;wBACf,OAAO,IAAI,CACV,sEAAe,OAAO,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IAChD,OAAO,IAAI,4DAAI,OAAO,CAAK,CACd,CACjB,CACG;oBACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAChC,4DAAK,KAAK,EAAC,wBAAwB;wBACjC,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG;gBACL,CAAC,QAAQ,CAAC,CAAC,CAAC,CACX,4BACE,KAAK,EAAC,qBAAqB,EAC3B,KAAK,EAAC,MAAM,EACZ,UAAU,QACV,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,CAAC,aAAa,EAC5B,WAAW,EAAC,eAAe,GACL,CACzB,CAAC,CAAC,CAAC,CACF,iBACE,EAAE,EAAC,gBAAgB,EACnB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,gBACF,sBAAsB,GACvB,CACd,CACG,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcActivationTypes, IcStatusVariants } from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/*\n @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n /\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n private focusInteractiveElement: boolean;\n private shiftKeyPressed: boolean;\n\n @Element() el: HTMLIcToastElement;\n\n @State() isManual: boolean;\n @State() timerProgress = 100;\n @State() visible = false;\n\n /\n If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n /\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n /\n If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n /\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n @Watch(\"dismissMode\")\n dismissModeChangeHandler(newValue: IcActivationTypes): void {\n this.isManual = newValue === \"manual\";\n }\n\n /\n The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n /\n @Prop() heading!: string;\n\n /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\n /\n Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n /\n @Prop() neutralIconAriaLabel?: string;\n\n /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n !!this.message && this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout! < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel \|\| VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant \|\| this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant ? `${this.heading}${toastMessage}` : this.message \|\| \"\"\n );\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n }\n\n componentDidUpdate(): void {\n if (this.focusInteractiveElement && this.isManual) {\n this.resetAutoDismissTimer();\n\n const actionContent = getSlot(\n this.el,\n \"action\"\n ) as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n\n this.focusInteractiveElement = false;\n this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n this.shiftKeyPressed = false;\n }\n }\n\n @Watch(\"visible\")\n watchVisibleHandler(): void {\n if (this.visible) {\n const actionContent = getSlot(\n this.el,\n \"action\"\n ) as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n } else {\n this.interactiveElements = [];\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n this.resetAutoDismissTimer();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.visible) {\n if (this.isManual) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n } else {\n if (ev.key === \"Tab\") {\n this.shiftKeyPressed = ev.shiftKey;\n this.focusInteractiveElement = true;\n }\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n switch (ev.type) {\n case \"mouseenter\":\n if (!this.isManual) {\n this.resetAutoDismissTimer();\n }\n this.isManual = true;\n break;\n case \"mouseleave\":\n if (this.dismissMode === \"automatic\") {\n this.isManual = false;\n this.interactiveElements = [];\n if (this.visible) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n }\n }\n break;\n }\n }\n\n /\n @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement \| null> {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout!) 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong \|\| headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const firstEl = this.interactiveElements[0];\n const lastEl =\n this.interactiveElements[this.interactiveElements.length - 1];\n\n if (this.isActive(isBackwards ? firstEl : lastEl))\n return isBackwards ? lastEl : firstEl;\n\n let currentIndex: number = 0;\n\n return this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n })\n ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n : firstEl;\n }\n\n private resetAutoDismissTimer(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n return targetEl === this.el\n ? !!this.el.shadowRoot!.activeElement\n : document.activeElement === targetEl;\n }\n\n private onFocus = (): void => {\n if (this.focusInteractiveElement) {\n this.isManual = true;\n }\n };\n\n private onBlur = (): void => {\n this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"ic-toast-hidden\"]: !visible }}\n tabindex=\"0\"\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n role={isManual ? \"dialog\" : \"alert\"}\n aria-live={isManual ? null : \"polite\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-text\">\n <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\" class=\"toast-message\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n theme=\"dark\"\n monochrome\n size=\"icon\"\n progress={this.timerProgress}\n description=\"Dismiss timer\"\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"ic-toast.js","sourceRoot":"","sources":["../../../src/components/ic-toast/ic-toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Listen,\n Method,\n Prop,\n State,\n Watch,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\nimport {\n getSlot,\n isPropDefined,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcActivationTypes, IcStatusVariants } from \"../../utils/types\";\nimport { ActionAreaElementTypes } from \"./ic-toast.types\";\n\nconst AUTO_DISMISS_TIMER_REFRESH_RATE_MS = 1000;\nconst TOAST_HEADING_CHAR_LIMIT = 70;\nconst TOAST_MESSAGE_CHAR_LIMIT = 140;\n\n/*\n @slot action - IcButton or IcLink is placed below header and message. If used will default toast to manual `dismiss` type.\n * @slot neutral-icon - A custom neutral icon is placed on the left side of the component. If used will default toast to `neutral` variant.\n /\n@Component({\n tag: \"ic-toast\",\n styleUrl: \"ic-toast.css\",\n shadow: true,\n})\nexport class Toast {\n private dismissTimeout: number;\n private interactiveElements: ActionAreaElementTypes[] = [];\n private neutralVariantLabel: string;\n private timerRefreshInterval: number;\n private focusInteractiveElement: boolean;\n private shiftKeyPressed: boolean;\n\n @Element() el: HTMLIcToastElement;\n\n @State() isManual: boolean;\n @State() timerProgress = 100;\n @State() visible = false;\n\n /\n If toast dismissMode is set to `automatic`, use this prop to define the time before the toast dismisses (in MILLISECONDS)\n * (NOTE: Has a minimum value of `5000ms`)\n /\n @Prop({ mutable: true }) autoDismissTimeout? = 5000;\n\n /\n If toast can be manually dismissed, this prop sets a custom aria-label for the ic-button component\n /\n @Prop() dismissButtonAriaLabel? = \"dismiss\";\n\n /\n How the toast will be dismissed. If manual will display a dismiss button.\n /\n @Prop({ mutable: true }) dismissMode?: IcActivationTypes = \"manual\";\n @Watch(\"dismissMode\")\n dismissModeChangeHandler(newValue: IcActivationTypes): void {\n this.isManual = newValue === \"manual\";\n }\n\n /\n The title to display at the start of the toast. (NOTE: Should be no more than `70` characters)\n /\n @Prop() heading!: string;\n\n /\n The main body message of the toast. (NOTE: Should be no more than `140` characters)\n /\n @Prop() message?: string;\n\n /\n Provides a custom alt-text to be announced to screen readers, if slotting a custom neutral icon\n /\n @Prop() neutralIconAriaLabel?: string;\n\n /\n The variant of the toast being rendered\n /\n @Prop({ mutable: true }) variant?: IcStatusVariants;\n\n /\n Is emitted when the user dismisses the toast\n /\n @Event() icDismiss: EventEmitter<void>;\n\n disconnectedCallback(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n }\n\n componentWillLoad(): void {\n this.handleLongText(\n this.heading.length > TOAST_HEADING_CHAR_LIMIT,\n !!this.message && this.message?.length > TOAST_MESSAGE_CHAR_LIMIT\n );\n\n if (this.autoDismissTimeout! < 5000) this.autoDismissTimeout = 5000;\n\n if (isSlotUsed(this.el, \"action\")) this.dismissMode = \"manual\";\n this.isManual = this.dismissMode === \"manual\";\n\n if (isSlotUsed(this.el, \"neutral-icon\")) this.variant = \"neutral\";\n if (this.variant === \"neutral\") {\n this.neutralVariantLabel =\n this.neutralIconAriaLabel ?? VARIANT_ICONS[this.variant].ariaLabel;\n }\n\n if (this.isManual) {\n const toastMessage: string = isPropDefined(this.message)\n ? `. ${this.message}`\n : \"\";\n this.el.setAttribute(\n \"aria-label\",\n this.variant\n ? this.neutralVariantLabel \|\| VARIANT_ICONS[this.variant].ariaLabel\n : this.heading\n );\n (this.variant \|\| this.message) &&\n this.el.setAttribute(\n \"aria-description\",\n this.variant ? `${this.heading}${toastMessage}` : this.message \|\| \"\"\n );\n }\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.heading, propName: \"heading\" }],\n \"Toast\"\n );\n }\n\n componentDidUpdate(): void {\n if (this.focusInteractiveElement && this.isManual) {\n this.resetAutoDismissTimer();\n\n const actionContent = getSlot(\n this.el,\n \"action\"\n ) as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n\n this.focusInteractiveElement = false;\n this.findNextInteractiveElement(this.shiftKeyPressed).setFocus();\n this.shiftKeyPressed = false;\n }\n }\n\n @Watch(\"visible\")\n watchVisibleHandler(): void {\n if (this.visible) {\n const actionContent = getSlot(\n this.el,\n \"action\"\n ) as ActionAreaElementTypes;\n const dismissButton = this.el.shadowRoot?.querySelector(\"ic-button\");\n if (actionContent) this.interactiveElements.push(actionContent);\n if (dismissButton) this.interactiveElements.push(dismissButton);\n } else {\n this.interactiveElements = [];\n }\n }\n\n @Listen(\"icDismiss\", { capture: true })\n handleDismiss(): void {\n this.visible = false;\n this.resetAutoDismissTimer();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyboard(ev: KeyboardEvent): void {\n if (this.visible) {\n if (this.isManual) {\n switch (ev.key) {\n case \"Tab\":\n ev.preventDefault();\n this.findNextInteractiveElement(ev.shiftKey).setFocus();\n break;\n case \"Escape\":\n !ev.repeat && this.dismissAction();\n ev.stopImmediatePropagation();\n break;\n }\n } else {\n if (ev.key === \"Tab\") {\n this.shiftKeyPressed = ev.shiftKey;\n this.focusInteractiveElement = true;\n }\n }\n }\n }\n\n @Listen(\"mouseenter\")\n @Listen(\"mouseleave\")\n handleTimer(ev: MouseEvent): void {\n switch (ev.type) {\n case \"mouseenter\":\n if (!this.isManual) {\n this.resetAutoDismissTimer();\n }\n this.isManual = true;\n break;\n case \"mouseleave\":\n if (this.dismissMode === \"automatic\") {\n this.isManual = false;\n this.interactiveElements = [];\n if (this.visible) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n }\n }\n break;\n }\n }\n\n /\n @internal Used to display the individual toast.\n * @returns The element that previously had focus before the toast appeared\n /\n @Method()\n async setVisible(): Promise<HTMLElement \| null> {\n if (!this.visible) this.visible = true;\n if (!this.isManual) {\n this.dismissTimeout = window.setTimeout(\n this.dismissAction,\n this.autoDismissTimeout\n );\n this.timerRefreshInterval = window.setInterval(\n this.handleProgressChange,\n AUTO_DISMISS_TIMER_REFRESH_RATE_MS\n );\n return null;\n } else {\n window.setTimeout(() => this.interactiveElements[0].setFocus(), 200);\n return document.activeElement as HTMLElement;\n }\n }\n\n private dismissAction = (): void => {\n this.icDismiss.emit();\n };\n\n private handleProgressChange = () => {\n this.timerProgress -=\n (AUTO_DISMISS_TIMER_REFRESH_RATE_MS / this.autoDismissTimeout!) 100;\n };\n\n private handleLongText(\n headingTooLong: boolean,\n messageTooLong?: boolean\n ): void {\n if (messageTooLong \|\| headingTooLong) {\n console.error(\n `Too many characters in toast ${headingTooLong ? \"heading\" : \"\"}${\n headingTooLong && messageTooLong ? \" and \" : \"\"\n }${\n messageTooLong ? \"message\" : \"\"\n }. Refer to character limits specified in the prop description`\n );\n }\n }\n\n private findNextInteractiveElement(\n isBackwards: boolean\n ): ActionAreaElementTypes {\n const firstEl = this.interactiveElements[0];\n const lastEl =\n this.interactiveElements[this.interactiveElements.length - 1];\n\n if (this.isActive(isBackwards ? firstEl : lastEl))\n return isBackwards ? lastEl : firstEl;\n\n let currentIndex = 0;\n\n return this.interactiveElements.some((el, index) => {\n if (!this.isActive(el)) return false;\n currentIndex = index;\n return true;\n })\n ? this.interactiveElements[currentIndex + (isBackwards ? -1 : 1)]\n : firstEl;\n }\n\n private resetAutoDismissTimer(): void {\n window.clearTimeout(this.dismissTimeout);\n window.clearInterval(this.timerRefreshInterval);\n this.timerProgress = 100;\n }\n\n private isActive(targetEl: HTMLElement): boolean {\n return targetEl === this.el\n ? !!this.el.shadowRoot!.activeElement\n : document.activeElement === targetEl;\n }\n\n private onFocus = (): void => {\n if (this.focusInteractiveElement) {\n this.isManual = true;\n }\n };\n\n private onBlur = (): void => {\n this.handleTimer({ type: \"mouseleave\" } as MouseEvent);\n };\n\n render() {\n const {\n variant,\n heading,\n message,\n visible,\n isManual,\n dismissButtonAriaLabel,\n } = this;\n return (\n <Host\n class={{ [\"ic-toast-hidden\"]: !visible }}\n tabindex=\"0\"\n onFocus={this.onFocus}\n onBlur={this.onBlur}\n role={isManual ? \"dialog\" : \"alert\"}\n aria-live={isManual ? null : \"polite\"}\n >\n <div class=\"container\">\n {variant && visible && (\n <div class=\"toast-icon-container\">\n <div\n class={{\n [\"divider\"]: true,\n [`divider-${variant}`]: true,\n }}\n ></div>\n {variant === \"neutral\" ? (\n <slot name=\"neutral-icon\" />\n ) : (\n <span\n class=\"toast-icon\"\n innerHTML={VARIANT_ICONS[variant].icon}\n ></span>\n )}\n </div>\n )}\n <div\n class={{\n [\"toast-content\"]: true,\n [\"no-icon\"]:\n variant === \"neutral\" && !isSlotUsed(this.el, \"neutral-icon\"),\n }}\n >\n <div class=\"toast-text\">\n <ic-typography variant=\"subtitle-large\" class=\"toast-heading\">\n {visible && (isManual ? <h5>{heading}</h5> : <p>{heading}</p>)}\n </ic-typography>\n {message && (\n <ic-typography variant=\"body\" class=\"toast-message\">\n {visible && <p>{message}</p>}\n </ic-typography>\n )}\n </div>\n {isSlotUsed(this.el, \"action\") && (\n <div class=\"toast-action-container\">\n <slot name=\"action\" />\n </div>\n )}\n </div>\n {!isManual ? (\n <ic-loading-indicator\n class=\"toast-dismiss-timer\"\n theme=\"dark\"\n monochrome\n size=\"icon\"\n progress={this.timerProgress}\n description=\"Dismiss timer\"\n ></ic-loading-indicator>\n ) : (\n <ic-button\n id=\"dismiss-button\"\n innerHTML={closeIcon}\n onClick={this.dismissAction}\n variant=\"icon\"\n aria-label={dismissButtonAriaLabel}\n ></ic-button>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js CHANGED Viewed

@@ -452,25 +452,6 @@ export const WithGroupedNavigation = {
         placeholder="Search"
         label="Search"
       ></ic-search-bar>
-      <ic-navigation-button
-        label="Button One"
-        slot="buttons"
-        onclick="alert('test')"
-      >
-        <svg
-          slot="icon"
-          xmlns="http://www.w3.org/2000/svg"
-          height="24px"
-          viewBox="0 0 24 24"
-          width="24px"
-          fill="#000000"
-        >
-          <path d="M0 0h24v24H0V0z" fill="none" />
-          <path
-            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
-          />
-        </svg>
-      </ic-navigation-button>
       <ic-navigation-group slot="navigation" label="Navigation group">
         <ic-navigation-item label="One" href="/"></ic-navigation-item>
         <ic-navigation-item label="Two" href="/"></ic-navigation-item>
@@ -500,6 +481,14 @@ export const WithGroupedNavigation = {
         <ic-navigation-item label="Another Seven" href="/"></ic-navigation-item>
         <ic-navigation-item label="Another Eight" href="/"></ic-navigation-item>
       </ic-navigation-group>
+      <ic-navigation-group
+        slot="navigation"
+        label="Third navigation group"
+        expandable="true"
+      >
+        <ic-navigation-item label="Another One" href="/"></ic-navigation-item>
+        <ic-navigation-item label="Another Two" href="/"></ic-navigation-item>
+      </ic-navigation-group>
     </ic-top-navigation>`,
   name: "With grouped navigation",

package/dist/components/helpers.js CHANGED Viewed

@@ -592,6 +592,6 @@ const renderDynamicChildSlots = (mutationList, slotNames, ref) => {
     }
 };
-export { isSlottedInGroup as $, errorIcon as A, successIcon as B, slotHasContent as C, DEVICE_SIZES as D, IC_DEVICE_SIZES as E, hasClassificationBanner as F, elementOverflowsX as G, isMacDevice as H, IC_INHERITED_ARIA as I, getOptionsWithoutGroupTitlesCount as J, getNavItemParentDetails as K, getCssProperty as L, getSlotContent as M, getSlot as N, capitalize as O, getFilteredMenuOptions as P, handleHiddenFormButtonClick as Q, debounceEvent as R, getLabelFromValue as S, checkSlotInChildMutations as T, isMobileOrTablet as U, VARIANT_ICONS as V, isEmptyString as W, pxToRem as X, getBrandColorBrightness as Y, BLACK_MIN_COLOR_BRIGHTNESS as Z, WHITE_MAX_COLOR_BRIGHTNESS as _, isElInAGGrid as a, inheritAttributes as b, checkResizeObserver as c, renderFileHiddenInput as d, IcBrandForegroundEnum as e, renderDynamicChildSlots as f, getBrandFromContext as g, onComponentPropUndefinedChange as h, isSlotUsed as i, convertToRGBA as j, getBrandForegroundAppearance as k, isPropDefined as l, getSlotElements as m, getCurrentDeviceSize as n, onComponentRequiredPropUndefined as o, addFormResetListener as p, removeFormResetListener as q, removeDisabledFalse as r, renderHiddenInput as s, removeHiddenInput as t, getInputDescribedByText as u, hasValidationStatus as v, getInputHelperTextID as w, getInputValidationTextID as x, IcInformationStatus as y, warningIcon as z };
+export { isSlottedInGroup as $, errorIcon as A, successIcon as B, slotHasContent as C, DEVICE_SIZES as D, IC_DEVICE_SIZES as E, hasClassificationBanner as F, elementOverflowsX as G, isMacDevice as H, IC_INHERITED_ARIA as I, getOptionsWithoutGroupTitlesCount as J, getNavItemParentDetails as K, getCssProperty as L, getSlot as M, getSlotContent as N, capitalize as O, getFilteredMenuOptions as P, handleHiddenFormButtonClick as Q, debounceEvent as R, getLabelFromValue as S, checkSlotInChildMutations as T, isMobileOrTablet as U, VARIANT_ICONS as V, isEmptyString as W, pxToRem as X, getBrandColorBrightness as Y, BLACK_MIN_COLOR_BRIGHTNESS as Z, WHITE_MAX_COLOR_BRIGHTNESS as _, isElInAGGrid as a, inheritAttributes as b, checkResizeObserver as c, renderFileHiddenInput as d, IcBrandForegroundEnum as e, renderDynamicChildSlots as f, getBrandFromContext as g, onComponentPropUndefinedChange as h, isSlotUsed as i, convertToRGBA as j, getBrandForegroundAppearance as k, isPropDefined as l, getSlotElements as m, getCurrentDeviceSize as n, onComponentRequiredPropUndefined as o, addFormResetListener as p, removeFormResetListener as q, removeDisabledFalse as r, renderHiddenInput as s, removeHiddenInput as t, getInputDescribedByText as u, hasValidationStatus as v, getInputHelperTextID as w, getInputValidationTextID as x, IcInformationStatus as y, warningIcon as z };
 //# sourceMappingURL=helpers.js.map

package/dist/components/ic-button2.js CHANGED Viewed

@@ -8,7 +8,7 @@ const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="non
     <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
 </svg>`;
-const icButtonCss = "/*! 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;position:relative;--icon-width:100%;--icon-height:100%}.button,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-icon-primary) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background)}:host(.ic-button-variant-primary) ::slotted(a),:host(.ic-button-variant-icon-primary) ::slotted(a){color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background) !important}:host(.ic-button-variant-primary) .button:hover,:host(.ic-button-variant-icon-primary) .button:hover{background-color:var(--ic-button-primary-background-hover)}:host(.ic-button-variant-primary) ::slotted(a:hover),:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--ic-button-primary-background-hover) !important}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading) .button,:host(.ic-button-variant-icon-primary) .button:active{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-primary-background-pressed)}:host(.ic-button-variant-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary) ::slotted(a:active){background-color:var(--ic-button-primary-background-pressed) !important}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) .button{background:var(--ic-button-primary-background-disabled);color:var(--ic-button-primary-text-disabled)}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){background:var(--ic-button-primary-background-disabled) !important;color:var(--ic-button-primary-text-disabled) !important}:host(.ic-button-variant-primary.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button{color:var(--ic-button-primary-text-monochrome);background-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a){background-color:var(--ic-button-primary-background-monochrome) !important}:host(.ic-button-variant-primary.monochrome) .button:hover,:host(.ic-button-variant-icon-primary.monochrome) .button:hover{background-color:var(--ic-button-primary-background-hover-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-primary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-primary.monochrome) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button:active{background-color:var(--ic-button-primary-background-pressed-monochrome);--button-loading-inner-color:var(--ic-button-primary-text-monochrome);--button-loading-outer-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-primary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button{background-color:var(--ic-button-primary-background-disabled-monochrome);color:var(--ic-button-primary-text-disabled-monochrome)}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) ::slotted(a){background-color:var(\n    --ic-button-primary-background-disabled-monochrome\n  ) !important}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-icon-secondary) .button{border:var(--ic-border-width) solid var(--ic-button-secondary-border);color:var(--ic-button-secondary-text)}:host(.ic-button-variant-secondary) ::slotted(a),:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--ic-button-secondary-border) !important;color:var(--ic-button-secondary-text) !important}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) .button:hover{background-color:var(--ic-button-secondary-background-hover-active);border-color:var(--ic-button-secondary-border-hover);color:var(--ic-button-secondary-text-hover-active)}:host(.ic-button-variant-secondary) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-active\n  ) !important}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-icon-secondary) .button:active{border-color:var(--ic-button-secondary-border-pressed);background-color:var(--ic-button-secondary-background-pressed-active);color:var(--ic-button-secondary-text-pressed-active)}:host(.ic-button-variant-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-active\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--ic-button-secondary-border-pressed);background-color:var(\n    --loading-button-background,\n    var(--ic-button-secondary-background-pressed-active)\n  ) !important;color:var(--ic-button-secondary-text-pressed-active);--button-loading-inner-color:var(--ic-button-secondary-text-pressed-active);--button-loading-outer-color:var(--ic-button-secondary-background-pressed)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button{border-color:var(--ic-button-secondary-border-disabled);color:var(--ic-button-secondary-text-disabled);background:none}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background) .button,:host(.ic-button-variant-icon-secondary.background) .button{background-color:var(--ic-button-secondary-background-non-transparent)}:host(.ic-button-variant-secondary.background) ::slotted(a),:host(.ic-button-variant-icon-secondary.background) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent\n  ) !important}:host(.ic-button-variant-secondary.background.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  )}:host(.ic-button-variant-secondary.background.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  ) !important}:host(.ic-button-variant-secondary.background) .button:hover,:host(.ic-button-variant-icon-secondary.background) .button:hover{background-color:var(--ic-button-secondary-background-non-transparent-hover)}:host(.ic-button-variant-secondary.background) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-hover\n  ) !important}:host(.ic-button-variant-secondary.background) .button:active,:host(.ic-button-variant-icon-secondary.background) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  )}:host(.ic-button-variant-secondary.background) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button,:host(.ic-button-variant-icon-secondary.monochrome) .button{background-color:none;border:var(--ic-border-width) solid\n    var(--ic-button-secondary-border-monochrome);color:var(--ic-button-secondary-text-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a){background-color:none !important}:host(.ic-button-variant-secondary.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.monochrome) .button:hover{background-color:var(--ic-button-secondary-background-hover-monochrome);border-color:var(--ic-button-secondary-border-hover-monochrome);color:var(--ic-button-secondary-text-hover-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.monochrome) .button:active{background-color:var(--ic-button-secondary-background-pressed-monochrome);border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-secondary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  )}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button{background:none;border-color:var(--ic-button-secondary-border-disabled-monochrome);color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background.monochrome) .button,:host(.ic-button-variant-icon-secondary.background.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  );color:var(--ic-button-primary-text)}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  );color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  ) !important}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a),:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--ic-button-tertiary-text-active)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) .button:hover{background-color:var(--ic-button-tertiary-background-hover-active);color:var(--ic-button-tertiary-text-hover-active)}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-active\n  ) !important}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading) .button,:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--ic-button-tertiary-background-pressed-active);color:var(--ic-button-tertiary-text-pressed-active);--button-loading-inner-color:var(--ic-button-tertiary-text-pressed-active);--button-loading-outer-color:var(--ic-button-tertiary-background-pressed)}:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-active\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button{color:var(--ic-button-tertiary-text-disabled);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-tertiary.monochrome) .button,:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a){color:var(--ic-button-tertiary-text-monochrome)}:host(.ic-button-variant-tertiary.monochrome) .button:hover,:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover{background-color:var(--ic-button-tertiary-background-hover-monochrome);color:var(--ic-button-tertiary-text-hover-monochrome)}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.monochrome) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button{background-color:var(--ic-button-tertiary-background-pressed-monochrome);color:var(--ic-button-tertiary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-tertiary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  )}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button{color:var(--ic-button-tertiary-text-disabled-monochrome);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-icon-destructive) .button{color:var(--ic-button-destructive-text);background-color:var(--ic-button-destructive-background);text-transform:uppercase}:host(.ic-button-variant-destructive) ::slotted(a),:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-button-destructive-text) !important;background-color:var(--ic-button-destructive-background) !important;text-transform:uppercase !important}:host(.ic-button-variant-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) .button:hover{background-color:var(--ic-button-destructive-background-hover)}:host(.ic-button-variant-destructive) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-button-destructive-background-hover) !important}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button,:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-destructive-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-destructive-background-pressed)}:host(.ic-button-variant-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive) ::slotted(a:active){background-color:var(--ic-button-destructive-background-pressed) !important}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button{background-color:var(--ic-button-destructive-background-disabled);color:var(--ic-button-destructive-text-disabled)}:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a){background-color:var(--ic-button-destructive-background-disabled) !important}:host(.ic-button-variant-icon) .button{color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background);min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) ::slotted(a){color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background) !important;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover{color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover)}:host(.ic-button-variant-icon) ::slotted(a:hover){color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover) !important}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon.ic-button-loading) .button{color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti)}:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti) !important}:host(.ic-button-variant-icon.ic-button-disabled) .button{color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none !important}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:var(--ic-button-icon-monochrome)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;width:var(--ic-space-xl) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg)) !important;width:var(--ic-space-lg) !important;padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem) !important;width:2.5rem !important;padding:var(--ic-space-xs) !important}:host(.ic-button-full-width),:host(.ic-button-full-width) .button{width:100%}:host(.ic-button-full-width) ::slotted(a){width:100% !important}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--inner-color:var(--button-loading-inner-color);--outer-color:var(--button-loading-outer-color), transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button) .button:not(:active):focus ::slotted(svg){color:var(--ic-button-primary-text)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){background-color:inherit;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button,:host(.button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs)}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover,:host(.button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon) ::slotted(a:active:not(:focus)),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button,:host(.clear-button) .button,:host(.dismiss-icon) ::slotted(a),:host(.clear-button) ::slotted(a){background-color:inherit;color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon) .button:hover,:host(.clear-button) .button:hover,:host(.dismiss-icon) ::slotted(a:hover),:host(.clear-button) ::slotted(a:hover){color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon),:host(.clear-button){color:var(--ic-atoms-input-clear-button);margin:0 var(--ic-space-xxs)}:host(.dismiss-icon) .button:focus,:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){background-color:var(--ic-atoms-input-clear-button-focus-inner);color:var(--ic-button-primary-text);}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem;color:var(--ic-top-navigation-icon-active)}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(#menu-button.ic-theme-light){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-dark-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-dark-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-dark-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-dark-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-dark\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-pressed-dark\n  )}:host(#menu-button.ic-theme-dark){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-light-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-light-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-light-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-light-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-light\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-default\n  )}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}.search-submit-button ::slotted(a),.ic-button-variant-icon ::slotted(a),.clear-button ::slotted(a),.search-submit-button ::slotted(svg),.ic-button-variant-icon ::slotted(svg),.clear-button ::slotted(svg){color:HighlightText}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:white}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){color:white !important;background-color:inherit}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
+const icButtonCss = "/*! 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;position:relative;--icon-width:100%;--icon-height:100%}.button,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-icon-primary) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background)}:host(.ic-button-variant-primary) ::slotted(a),:host(.ic-button-variant-icon-primary) ::slotted(a){--ic-typography-color:var(--ic-button-primary-text);color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background) !important}:host(.ic-button-variant-primary) .button:hover,:host(.ic-button-variant-icon-primary) .button:hover{background-color:var(--ic-button-primary-background-hover)}:host(.ic-button-variant-primary) ::slotted(a:hover),:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--ic-button-primary-background-hover) !important}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading) .button,:host(.ic-button-variant-icon-primary) .button:active{color:var(--ic-button-primary-text);background-color:var(--ic-button-primary-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-primary-background-pressed)}:host(.ic-button-variant-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary) ::slotted(a:active){background-color:var(--ic-button-primary-background-pressed) !important}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) .button{background:var(--ic-button-primary-background-disabled);color:var(--ic-button-primary-text-disabled)}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){background:var(--ic-button-primary-background-disabled) !important;--ic-typography-color:var(--ic-button-primary-text-disabled) !important;color:var(--ic-button-primary-text-disabled) !important}:host(.ic-button-variant-primary.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button{color:var(--ic-button-primary-text-monochrome);background-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a){background-color:var(--ic-button-primary-background-monochrome) !important}:host(.ic-button-variant-primary.monochrome) .button:hover,:host(.ic-button-variant-icon-primary.monochrome) .button:hover{background-color:var(--ic-button-primary-background-hover-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-primary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-primary.monochrome) .button:active,:host(.ic-button-variant-icon-primary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-primary.monochrome) .button:active{background-color:var(--ic-button-primary-background-pressed-monochrome);--button-loading-inner-color:var(--ic-button-primary-text-monochrome);--button-loading-outer-color:var(--ic-button-primary-background-monochrome)}:host(.ic-button-variant-primary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-primary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-primary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) .button{background-color:var(--ic-button-primary-background-disabled-monochrome);color:var(--ic-button-primary-text-disabled-monochrome)}:host(.ic-button-variant-primary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-primary.ic-button-disabled.monochrome) ::slotted(a){background-color:var(\n    --ic-button-primary-background-disabled-monochrome\n  ) !important}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-icon-secondary) .button{border:var(--ic-border-width) solid var(--ic-button-secondary-border);color:var(--ic-button-secondary-text)}:host(.ic-button-variant-secondary) ::slotted(a),:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--ic-button-secondary-border) !important;color:var(--ic-button-secondary-text) !important;--ic-typography-color:var(--ic-button-secondary-text) !important}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) .button:hover{background-color:var(--ic-button-secondary-background-hover-active);border-color:var(--ic-button-secondary-border-hover);color:var(--ic-button-secondary-text-hover-active)}:host(.ic-button-variant-secondary) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-active\n  ) !important}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-icon-secondary) .button:active{border-color:var(--ic-button-secondary-border-pressed);background-color:var(--ic-button-secondary-background-pressed-active);color:var(--ic-button-secondary-text-pressed-active)}:host(.ic-button-variant-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-active\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--ic-button-secondary-border-pressed);background-color:var(\n    --loading-button-background,\n    var(--ic-button-secondary-background-pressed-active)\n  ) !important;color:var(--ic-button-secondary-text-pressed-active);--button-loading-inner-color:var(--ic-button-secondary-text-pressed-active);--button-loading-outer-color:var(--ic-button-secondary-background-pressed)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button{border-color:var(--ic-button-secondary-border-disabled);color:var(--ic-button-secondary-text-disabled);background:none}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background) .button,:host(.ic-button-variant-icon-secondary.background) .button{background-color:var(--ic-button-secondary-background-non-transparent)}:host(.ic-button-variant-secondary.background) ::slotted(a),:host(.ic-button-variant-icon-secondary.background) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent\n  ) !important}:host(.ic-button-variant-secondary.background.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  )}:host(.ic-button-variant-secondary.background.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-disabled\n  ) !important}:host(.ic-button-variant-secondary.background) .button:hover,:host(.ic-button-variant-icon-secondary.background) .button:hover{background-color:var(--ic-button-secondary-background-non-transparent-hover)}:host(.ic-button-variant-secondary.background) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-hover\n  ) !important}:host(.ic-button-variant-secondary.background) .button:active,:host(.ic-button-variant-icon-secondary.background) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  )}:host(.ic-button-variant-secondary.background) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-active\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button,:host(.ic-button-variant-icon-secondary.monochrome) .button{background-color:none;border:var(--ic-border-width) solid\n    var(--ic-button-secondary-border-monochrome);color:var(--ic-button-secondary-text-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a){background-color:none !important}:host(.ic-button-variant-secondary.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.monochrome) .button:hover{background-color:var(--ic-button-secondary-background-hover-monochrome);border-color:var(--ic-button-secondary-border-hover-monochrome);color:var(--ic-button-secondary-text-hover-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-secondary.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.monochrome) .button:active{background-color:var(--ic-button-secondary-background-pressed-monochrome);border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome)}:host(.ic-button-variant-secondary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-secondary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-loading.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  ) !important;border-color:var(--ic-button-secondary-border-pressed-monochrome);color:var(--ic-button-secondary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-secondary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-secondary-background-pressed-monochrome\n  )}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) .button{background:none;border-color:var(--ic-button-secondary-border-disabled-monochrome);color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-secondary.background.monochrome) .button,:host(.ic-button-variant-icon-secondary.background.monochrome) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  );color:var(--ic-button-primary-text)}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) .button{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  );color:var(--ic-button-secondary-text-disabled-monochrome)}:host(.ic-button-variant-secondary.background.monochrome.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.background.monochrome.ic-button-disabled) ::slotted(a){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-disabled\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:hover,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:hover{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-hover\n  ) !important}:host(.ic-button-variant-secondary.background.monochrome) .button:active,:host(.ic-button-variant-icon-secondary.background.monochrome) .button:active{background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  )}:host(.ic-button-variant-secondary.background.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.background.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-secondary-background-non-transparent-monochrome-active\n  ) !important}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a),:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--ic-button-tertiary-text-active);--ic-typography-color:var(--ic-button-tertiary-text-active)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) .button:hover{background-color:var(--ic-button-tertiary-background-hover-active);color:var(--ic-button-tertiary-text-hover-active)}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-active\n  ) !important}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading) .button,:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--ic-button-tertiary-background-pressed-active);color:var(--ic-button-tertiary-text-pressed-active);--button-loading-inner-color:var(--ic-button-tertiary-text-pressed-active);--button-loading-outer-color:var(--ic-button-tertiary-background-pressed)}:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-active\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button{color:var(--ic-button-tertiary-text-disabled);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a){background:none !important}:host(.ic-button-variant-tertiary.monochrome) .button,:host(.ic-button-variant-tertiary.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a){color:var(--ic-button-tertiary-text-monochrome);--ic-typography-color:var(--ic-button-tertiary-text-monochrome)}:host(.ic-button-variant-tertiary.monochrome) .button:hover,:host(.ic-button-variant-icon-tertiary.monochrome) .button:hover{background-color:var(--ic-button-tertiary-background-hover-monochrome);color:var(--ic-button-tertiary-text-hover-monochrome)}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:hover){background-color:var(\n    --ic-button-tertiary-background-hover-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.monochrome) .button:active,:host(.ic-button-variant-tertiary.ic-button-loading.monochrome) .button,:host(.ic-button-variant-icon-tertiary.monochrome) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-loading.monochrome) .button{background-color:var(--ic-button-tertiary-background-pressed-monochrome);color:var(--ic-button-tertiary-text-pressed-monochrome);--button-loading-inner-color:var(\n    --ic-button-tertiary-text-pressed-monochrome\n  );--button-loading-outer-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  )}:host(.ic-button-variant-tertiary.monochrome) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.monochrome) ::slotted(a:active){background-color:var(\n    --ic-button-tertiary-background-pressed-monochrome\n  ) !important}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) .button{color:var(--ic-button-tertiary-text-disabled-monochrome);background:none}:host(.ic-button-variant-tertiary.ic-button-disabled.monochrome) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled.monochrome) ::slotted(a){background:none !important}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-icon-destructive) .button{color:var(--ic-button-destructive-text);background-color:var(--ic-button-destructive-background);text-transform:uppercase}:host(.ic-button-variant-destructive) ::slotted(a),:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-button-destructive-text) !important;--ic-typography-color:var(--ic-button-destructive-text) !important;background-color:var(--ic-button-destructive-background) !important;text-transform:uppercase !important}:host(.ic-button-variant-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) .button:hover{background-color:var(--ic-button-destructive-background-hover)}:host(.ic-button-variant-destructive) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-button-destructive-background-hover) !important}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button,:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{color:var(--ic-button-primary-text);background-color:var(--ic-button-destructive-background-pressed);--button-loading-inner-color:var(--ic-button-primary-text);--button-loading-outer-color:var(--ic-button-destructive-background-pressed)}:host(.ic-button-variant-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive) ::slotted(a:active){background-color:var(--ic-button-destructive-background-pressed) !important}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button{background-color:var(--ic-button-destructive-background-disabled);color:var(--ic-button-destructive-text-disabled)}:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a){background-color:var(--ic-button-destructive-background-disabled) !important}:host(.ic-button-variant-icon) .button{color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background);min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) ::slotted(a){color:var(--ic-button-icon-color);background-color:var(--ic-button-icon-color-background) !important;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover{color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover)}:host(.ic-button-variant-icon) ::slotted(a:hover){color:var(--ic-button-icon-color-hover);background-color:var(--ic-button-icon-color-background-hover) !important}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon.ic-button-loading) .button{color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti)}:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){color:var(--ic-button-icon-color-active);background-color:var(--ic-button-icon-color-background-acti) !important}:host(.ic-button-variant-icon.ic-button-disabled) .button{color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none !important}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:var(--ic-button-icon-monochrome)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;width:var(--ic-space-xl) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg)) !important;width:var(--ic-space-lg) !important;padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem) !important;width:2.5rem !important;padding:var(--ic-space-xs) !important}:host(.ic-button-full-width),:host(.ic-button-full-width) .button{width:100%}:host(.ic-button-full-width) ::slotted(a){width:100% !important}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--inner-color:var(--button-loading-inner-color);--outer-color:var(--button-loading-outer-color), transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem;color:var(--ic-atoms-input-search-button)}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button) .button:not(:active):focus ::slotted(svg){color:var(--ic-button-primary-text)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){background-color:inherit;min-width:0;gap:var(--ic-space-xs)}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button,:host(.button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs)}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover,:host(.button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button:active:not(:focus),:host(.button-variant-icon) ::slotted(a:active:not(:focus)),:host(.button-variant-icon.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-icon.disabled) .button,:host(.button-variant-icon.disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button,:host(.clear-button) .button,:host(.dismiss-icon) ::slotted(a),:host(.clear-button) ::slotted(a){background-color:inherit;color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon) .button:hover,:host(.clear-button) .button:hover,:host(.dismiss-icon) ::slotted(a:hover),:host(.clear-button) ::slotted(a:hover){color:var(--ic-atoms-input-clear-button)}:host(.dismiss-icon),:host(.clear-button){color:var(--ic-atoms-input-clear-button);margin:0 var(--ic-space-xxs)}:host(.dismiss-icon) .button:focus,:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){background-color:var(--ic-atoms-input-clear-button-focus-inner);color:var(--ic-button-primary-text);}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem;color:var(--ic-top-navigation-icon-active)}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(#menu-button.ic-theme-light){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-dark-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-dark-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-dark-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-dark-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-dark\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-pressed-dark\n  )}:host(#menu-button.ic-theme-dark){--ic-button-secondary-background-hover-monochrome:var(\n    --ic-action-light-bg-hover\n  );--ic-button-secondary-background-pressed-monochrome:var(\n    --ic-action-light-bg-pressed\n  );--ic-button-secondary-text-hover-monochrome:var(--ic-action-light-hover);--ic-button-secondary-text-pressed-monochrome:var(--ic-action-light-pressed);--ic-button-secondary-border-hover-monochrome:var(\n    --ic-color-border-neutral-hover-light\n  );--ic-button-secondary-border-pressed-monochrome:var(\n    --ic-color-border-neutral-default\n  )}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}.search-submit-button ::slotted(a),.ic-button-variant-icon ::slotted(a),.clear-button ::slotted(a),.search-submit-button ::slotted(svg),.ic-button-variant-icon ::slotted(svg),.clear-button ::slotted(svg){color:HighlightText}:host(.ic-button-variant-icon.monochrome) ::slotted(a),:host(.ic-button-variant-icon.monochrome) ::slotted(svg){color:white}:host(.dismiss-icon) .button:not(:active):focus ::slotted(svg),:host(.clear-button) .button:not(:active):focus ::slotted(svg){color:white !important;background-color:inherit}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
 const IcButtonStyle0 = icButtonCss;
 var __rest = (undefined && undefined.__rest) || function (s, e) {
@@ -173,6 +173,63 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             var _a;
             return (_a = this.variant) === null || _a === void 0 ? void 0 : _a.startsWith("icon");
         };
+        this.arrangeRouterItem = () => {
+            var _a, _b, _c, _d;
+            const setStyles = (element, styles) => {
+                Object.entries(styles).forEach(([key, value]) => {
+                    element.style.setProperty(key, value);
+                });
+            };
+            const iconWrapper = document.createElement("div");
+            const icon = (_a = this.routerSlot) === null || _a === void 0 ? void 0 : _a.querySelector("svg");
+            const badge = (_b = this.routerSlot) === null || _b === void 0 ? void 0 : _b.querySelector("ic-badge");
+            const label = (_d = (_c = this.routerSlot) === null || _c === void 0 ? void 0 : _c.textContent) === null || _d === void 0 ? void 0 : _d.trim();
+            const icTypography = document.createElement("ic-typography");
+            setStyles(icTypography, {
+                "font-family": "var(--ic-font-body-family)",
+                "font-size": "0.875rem",
+                "font-weight": "600",
+            });
+            setStyles(this.routerSlot, {
+                gap: "0",
+            });
+            if (icon) {
+                setStyles(icon, {
+                    fill: "currentcolor",
+                });
+                icon.getAttribute("slot") === "left-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-right": "var(--ic-space-xs)",
+                    });
+                icon.getAttribute("slot") === "right-icon" &&
+                    setStyles(iconWrapper, {
+                        "margin-left": "var(--ic-space-xs)",
+                    });
+                if (icon.getAttribute("slot") === "top-icon") {
+                    setStyles(this.routerSlot, {
+                        display: "flex",
+                        "flex-direction": "column",
+                        "--height": "fit-content",
+                    });
+                }
+                iconWrapper.append(icon);
+            }
+            badge && iconWrapper.append(badge);
+            if (label) {
+                icTypography.textContent = label;
+            }
+            if (this.routerSlot) {
+                this.routerSlot.textContent = "";
+                if (icon && icon.getAttribute("slot") === "right-icon") {
+                    this.routerSlot.append(icTypography);
+                    this.routerSlot.append(iconWrapper);
+                }
+                else {
+                    this.routerSlot.append(iconWrapper);
+                    this.routerSlot.append(icTypography);
+                }
+            }
+        };
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -229,6 +286,7 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
             this.hostMutationObserver.observe(this.el, {
                 attributes: true,
             });
+            this.hasRouterSlot() && this.arrangeRouterItem();
         }
     }
     componentWillRender() {