npm - @ukic/web-components - Versions diffs - 3.0.0-alpha.4 → 3.0.0-alpha.5 - Mend

@ukic/web-components 3.0.0-alpha.4 → 3.0.0-alpha.5

Files changed (565) hide show

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-d1d2c456.js';
-import { D as DEVICE_SIZES, e as getCurrentDeviceSize, f as checkResizeObserver } from './helpers-e8797e8d.js';
+import { D as DEVICE_SIZES, e as getCurrentDeviceSize, f as checkResizeObserver } from './helpers-7bf8c67f.js';
 const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
@@ -24,7 +24,10 @@ const BreadcrumbGroup = class {
         };
         this.setBackBreadcrumb = () => {
             if (this.backBreadcrumbOnly) {
-                this.setBackBreadcrumbAttr();
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.revertLastParentCollapsedBreadcrumb();
             }
         };
         this.setBackBreadcrumbAttr = () => {
@@ -38,8 +41,8 @@ const BreadcrumbGroup = class {
             if (allBreadcrumbs.length === 1) {
                 return null;
             }
-            this.breadcrumbs = allBreadcrumbs.filter((breadcrumb) => !breadcrumb.getAttribute("current"));
-            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];
+            this.breadcrumbs = allBreadcrumbs;
+            this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];
             return this.breadcrumb;
         };
         this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
@@ -50,20 +53,32 @@ const BreadcrumbGroup = class {
             });
         };
         this.setCollapsed = () => {
+            const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+            const firstBreadcrumb = allBreadcrumbs[0];
+            if (this.collapsedBreadcrumbs) {
+                this.collapsedBreadcrumbs.forEach((breadcrumb) => {
+                    breadcrumb.classList.remove("visuallyhidden");
+                    breadcrumb.classList.remove("fade");
+                });
+            }
             if (this.collapsed) {
-                const allBreadcrumbs = Array.from(this.el.querySelectorAll(this.IC_BREADCRUMB));
+                this.renderCollapsedBreadcrumb();
                 this.collapsedBreadcrumbs = allBreadcrumbs
                     .splice(1, allBreadcrumbs.length - 2)
                     .filter((breadcrumb) => !breadcrumb.classList.contains("collapsed-breadcrumb-wrapper"));
-                this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
-                const firstBreadcrumb = allBreadcrumbs[0];
+                if (!this.backBreadcrumbOnly) {
+                    this.collapsedBreadcrumbs.forEach((breadcrumb) => breadcrumb.classList.add("hide"));
+                }
                 if (firstBreadcrumb) {
                     firstBreadcrumb.insertAdjacentElement("afterend", this.collapsedBreadcrumbWrapper);
                 }
             }
+            else {
+                this.collapsedBreadcrumbWrapper.remove();
+            }
         };
         this.clickHandler = () => {
-            this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);
+            this.handleHiddenCollapsedBreadcrumbs();
         };
         this.renderCollapsedBreadcrumb = () => {
             this.collapsedBreadcrumbWrapper = document.createElement("ic-breadcrumb");
@@ -88,8 +103,8 @@ const BreadcrumbGroup = class {
             this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);
             return this.collapsedBreadcrumbWrapper;
         };
-        this.handleHiddenCollapsedBreadcrumbs = (collapsedBreadcrumbWrapper) => {
-            collapsedBreadcrumbWrapper.remove();
+        this.handleHiddenCollapsedBreadcrumbs = () => {
+            this.collapsedBreadcrumbWrapper.remove();
             this.collapsedBreadcrumbs.forEach((breadcrumb) => {
                 breadcrumb.classList.add("visuallyhidden");
                 breadcrumb.classList.remove("hide");
@@ -111,11 +126,18 @@ const BreadcrumbGroup = class {
             breadcrumb.addEventListener("transitionend", this.transitionendHandler);
         };
         this.setLastParentCollapsedBackBreadcrumb = () => {
+            this.lastParentBreadcrumb = this.getLastParentBreadcrumb();
             this.setBackBreadcrumbAttr();
-            this.lastParentBreadcrumb.classList.remove("hide");
+            if (this.lastParentBreadcrumb) {
+                this.lastParentBreadcrumb.classList.remove("hide");
+                this.lastParentBreadcrumb.classList.add("show");
+            }
         };
         this.revertLastParentCollapsedBreadcrumb = () => {
             this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, "false");
+            if (this.collapsed) {
+                this.lastParentBreadcrumb.classList.add("hide");
+            }
         };
         this.resizeObserverCallback = (currSize) => {
             if (currSize !== this.deviceSize) {
@@ -163,6 +185,9 @@ const BreadcrumbGroup = class {
     watchBackBreadcrumbHandler() {
         this.setBackBreadcrumb();
     }
+    watchCollapsedHandler() {
+        this.setCollapsed();
+    }
     watchMonochromeHandler() {
         this.setBreadcrumbMonochrome();
     }
@@ -179,15 +204,12 @@ const BreadcrumbGroup = class {
         else {
             checkResizeObserver(this.runResizeObserver);
         }
-        if (this.collapsed) {
-            this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();
-            if (allBreadcrumbs.length > 2) {
-                if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
-                    this.setLastParentCollapsedBackBreadcrumb();
-                }
-                else {
-                    this.setCollapsed();
-                }
+        if (this.collapsed && allBreadcrumbs.length > 2) {
+            if (getCurrentDeviceSize() === DEVICE_SIZES.S) {
+                this.setLastParentCollapsedBackBreadcrumb();
+            }
+            else {
+                this.setCollapsed();
             }
         }
     }
@@ -207,6 +229,7 @@ const BreadcrumbGroup = class {
     get el() { return getElement(this); }
     static get watchers() { return {
         "backBreadcrumbOnly": ["watchBackBreadcrumbHandler"],
+        "collapsed": ["watchCollapsedHandler"],
         "monochrome": ["watchMonochromeHandler"],
         "theme": ["watchThemeHandler"]
     }; }

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

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n ol\n ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n /\n @Prop() collapsed: boolean = false;\n\n /\n If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.setBreadcrumbMonochrome();\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.setBreadcrumbTheme();\n }\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setBreadcrumbTheme();\n this.setBreadcrumbMonochrome();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed) {\n this.collapsedBreadcrumbWrapper = this.renderCollapsedBreadcrumb();\n\n if (allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBreadcrumbTheme = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.theme = this.theme;\n });\n };\n\n private setBreadcrumbMonochrome = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.monochrome = this.monochrome;\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumbAttr();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs.filter(\n (breadcrumb) => !breadcrumb.getAttribute(\"current\")\n );\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 1];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n if (this.collapsed) {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n\n const firstBreadcrumb = allBreadcrumbs[0];\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs(this.collapsedBreadcrumbWrapper);\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = (\n collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement\n ) => {\n collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.setBackBreadcrumbAttr();\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n \"ic-breadcrumb-group-collapsed\": this.collapsed,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-breadcrumb-group/ic-breadcrumb-group.css?tag=ic-breadcrumb-group&encapsulation=shadow","src/components/ic-breadcrumb-group/ic-breadcrumb-group.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n:host ol {\n display: flex;\n list-style-type: none;\n align-items: center;\n flex-wrap: wrap;\n padding: 0;\n margin: 0;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb) {\n display: none;\n}\n\n:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show) {\n display: flex;\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide) {\n display: none;\n opacity: 0;\n visibility: hidden;\n}\n\n:host(.ic-breadcrumb-group-collapsed)\n ol\n ::slotted(ic-breadcrumb.visuallyhidden) {\n display: block;\n opacity: 0;\n transition: all var(--ic-easing-transition-slow);\n}\n\n:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade) {\n opacity: 1;\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from \"@stencil/core\";\nimport {\n checkResizeObserver,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n} from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n@Component({\n tag: \"ic-breadcrumb-group\",\n styleUrl: \"ic-breadcrumb-group.css\",\n shadow: true,\n})\n\n// Added ResizeObserver to find out width of breadcrumbs and parents. Use side navigation long title for ref.\nexport class BreadcrumbGroup {\n private ADD_CLASS_DELAY = 50;\n private breadcrumb: HTMLIcBreadcrumbElement;\n private breadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbEl: HTMLButtonElement;\n private collapsedBreadcrumbs: HTMLIcBreadcrumbElement[];\n private collapsedBreadcrumbWrapper: HTMLIcBreadcrumbElement;\n private IC_BREADCRUMB: string = \"ic-breadcrumb\";\n private resizeObserver: ResizeObserver = null;\n private SHOW_BACK_ICON: string = \"show-back-icon\";\n\n @Element() el: HTMLIcBreadcrumbGroupElement;\n\n @State() deviceSize: number = DEVICE_SIZES.XL;\n @State() expandedBreadcrumbs: boolean = false;\n\n /*\n If `true`, display only a single breadcrumb for the parent page with a back icon.\n /\n @Prop() backBreadcrumbOnly: boolean = false;\n @Watch(\"backBreadcrumbOnly\")\n watchBackBreadcrumbHandler(): void {\n this.setBackBreadcrumb();\n }\n\n /\n If `true`, all breadcrumbs between the first and last breadcrumb will be collapsed.\n /\n @Prop() collapsed: boolean = false;\n @Watch(\"collapsed\")\n watchCollapsedHandler(): void {\n this.setCollapsed();\n }\n\n /\n If `true`, the breadcrumb group will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n @Watch(\"monochrome\")\n watchMonochromeHandler(): void {\n this.setBreadcrumbMonochrome();\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n */\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(): void {\n this.setBreadcrumbTheme();\n }\n\n componentWillLoad(): void {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n this.setBreadcrumbTheme();\n this.setBreadcrumbMonochrome();\n\n if (this.backBreadcrumbOnly) {\n this.setBackBreadcrumb();\n } else {\n checkResizeObserver(this.runResizeObserver);\n }\n\n if (this.collapsed && allBreadcrumbs.length > 2) {\n if (getCurrentDeviceSize() === DEVICE_SIZES.S) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setCollapsed();\n }\n }\n }\n\n disconnectedCallback(): void {\n this.breadcrumb &&\n this.breadcrumb.removeEventListener(\n \"transitionend\",\n this.transitionendHandler\n );\n\n this.collapsedBreadcrumbEl &&\n this.collapsedBreadcrumbEl.removeEventListener(\n \"click\",\n this.clickHandler\n );\n }\n\n private setBreadcrumbTheme = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.theme = this.theme;\n });\n };\n\n private setBreadcrumbMonochrome = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n allBreadcrumbs.forEach((breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.monochrome = this.monochrome;\n });\n };\n\n private setBackBreadcrumb = () => {\n if (this.backBreadcrumbOnly) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.revertLastParentCollapsedBreadcrumb();\n }\n };\n\n private setBackBreadcrumbAttr = () => {\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.add(\"show\");\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"true\");\n }\n };\n\n private getLastParentBreadcrumb = (): HTMLIcBreadcrumbElement \| null => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n\n if (allBreadcrumbs.length === 1) {\n return null;\n }\n\n this.breadcrumbs = allBreadcrumbs;\n this.breadcrumb = this.breadcrumbs[this.breadcrumbs.length - 2];\n\n return this.breadcrumb;\n };\n\n private lastParentBreadcrumb = this.getLastParentBreadcrumb();\n\n private setDefaultBreadcrumbs = () => {\n const allBreadcrumbs = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n allBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n });\n };\n\n private setCollapsed = () => {\n const allBreadcrumbs: HTMLIcBreadcrumbElement[] = Array.from(\n this.el.querySelectorAll(this.IC_BREADCRUMB)\n );\n const firstBreadcrumb = allBreadcrumbs[0];\n if (this.collapsedBreadcrumbs) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.remove(\"visuallyhidden\");\n breadcrumb.classList.remove(\"fade\");\n });\n }\n\n if (this.collapsed) {\n this.renderCollapsedBreadcrumb();\n\n this.collapsedBreadcrumbs = allBreadcrumbs\n .splice(1, allBreadcrumbs.length - 2)\n .filter(\n (breadcrumb) =>\n !breadcrumb.classList.contains(\"collapsed-breadcrumb-wrapper\")\n );\n if (!this.backBreadcrumbOnly) {\n this.collapsedBreadcrumbs.forEach((breadcrumb) =>\n breadcrumb.classList.add(\"hide\")\n );\n }\n\n if (firstBreadcrumb) {\n firstBreadcrumb.insertAdjacentElement(\n \"afterend\",\n this.collapsedBreadcrumbWrapper\n );\n }\n } else {\n this.collapsedBreadcrumbWrapper.remove();\n }\n };\n\n private clickHandler = () => {\n this.handleHiddenCollapsedBreadcrumbs();\n };\n\n private renderCollapsedBreadcrumb = () => {\n this.collapsedBreadcrumbWrapper = document.createElement(\"ic-breadcrumb\");\n this.collapsedBreadcrumbWrapper.classList.add(\n \"collapsed-breadcrumb-wrapper\"\n );\n this.collapsedBreadcrumbEl = document.createElement(\"button\");\n\n const ariaLabel = document.createElement(\"span\");\n ariaLabel.id = \"collapsed-button-label\";\n ariaLabel.innerText = \"Collapsed breadcrumbs\";\n ariaLabel.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-labelledby\",\n \"collapsed-button-label\"\n );\n\n const ariaDescribed = document.createElement(\"span\");\n ariaDescribed.id = \"collapsed-button-described\";\n ariaDescribed.innerText = \"Select to view collapsed breadcrumbs\";\n ariaDescribed.className = \"hide\";\n this.collapsedBreadcrumbEl.setAttribute(\n \"aria-describedby\",\n \"collapsed-button-described\"\n );\n\n this.collapsedBreadcrumbEl.id = \"collapsed-ellipsis\";\n this.collapsedBreadcrumbEl.innerText = \"...\";\n this.collapsedBreadcrumbEl.classList.add(\"collapsed-breadcrumb\");\n this.collapsedBreadcrumbEl.addEventListener(\"click\", this.clickHandler);\n\n this.collapsedBreadcrumbWrapper.append(ariaDescribed);\n this.collapsedBreadcrumbWrapper.append(ariaLabel);\n this.collapsedBreadcrumbWrapper.append(this.collapsedBreadcrumbEl);\n\n return this.collapsedBreadcrumbWrapper;\n };\n\n private handleHiddenCollapsedBreadcrumbs = () => {\n this.collapsedBreadcrumbWrapper.remove();\n this.collapsedBreadcrumbs.forEach((breadcrumb) => {\n breadcrumb.classList.add(\"visuallyhidden\");\n breadcrumb.classList.remove(\"hide\");\n setTimeout(() => {\n breadcrumb.classList.add(\"fade\");\n }, this.ADD_CLASS_DELAY);\n\n this.removeVisuallyHiddenClass(breadcrumb);\n });\n this.expandedBreadcrumbs = true;\n // Set focus to first unhidden breadcrumb\n this.collapsedBreadcrumbs[0].setFocus();\n };\n\n private transitionendHandler = (event: TransitionEvent) => {\n if (event.propertyName === \"opacity\") {\n (event.target as HTMLElement).classList.remove(\"visuallyhidden\");\n }\n };\n\n private removeVisuallyHiddenClass = (breadcrumb: HTMLIcBreadcrumbElement) => {\n breadcrumb.addEventListener(\"transitionend\", this.transitionendHandler);\n };\n\n private setLastParentCollapsedBackBreadcrumb = () => {\n this.lastParentBreadcrumb = this.getLastParentBreadcrumb();\n this.setBackBreadcrumbAttr();\n if (this.lastParentBreadcrumb) {\n this.lastParentBreadcrumb.classList.remove(\"hide\");\n this.lastParentBreadcrumb.classList.add(\"show\");\n }\n };\n\n private revertLastParentCollapsedBreadcrumb = () => {\n this.lastParentBreadcrumb.setAttribute(this.SHOW_BACK_ICON, \"false\");\n if (this.collapsed) {\n this.lastParentBreadcrumb.classList.add(\"hide\");\n }\n };\n\n private resizeObserverCallback = (currSize: number) => {\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n\n if (this.deviceSize <= DEVICE_SIZES.S) {\n this.el.setAttribute(\"back-breadcrumb-only\", \"true\");\n if (this.collapsed) {\n this.setLastParentCollapsedBackBreadcrumb();\n } else {\n this.setBackBreadcrumb();\n }\n } else {\n this.el.setAttribute(\"back-breadcrumb-only\", \"false\");\n if (this.collapsed && this.breadcrumbs && this.breadcrumbs.length > 2) {\n this.revertLastParentCollapsedBreadcrumb();\n if (this.expandedBreadcrumbs) {\n this.setDefaultBreadcrumbs();\n } else {\n this.setCollapsed();\n }\n } else {\n this.setDefaultBreadcrumbs();\n }\n }\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n const currSize = getCurrentDeviceSize();\n this.resizeObserverCallback(currSize);\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n render() {\n return (\n <Host\n class={{\n \"ic-breadcrumb-group-back\": this.backBreadcrumbOnly,\n \"ic-breadcrumb-group-collapsed\": this.collapsed,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <nav aria-label=\"breadcrumbs\">\n <ol>\n <slot />\n </ol>\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,13 +1,13 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-d1d2c456.js';
 import { C as Chevron } from './chevron-icon-589e3b46.js';
-import { i as isSlotUsed, d as isPropDefined } from './helpers-e8797e8d.js';
+import { i as isSlotUsed, d as isPropDefined } from './helpers-7bf8c67f.js';
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
 </svg>
 `;
-const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron-monochrome)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-page-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-page-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-color-hyperlink-default);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg,:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-color-hyperlink-default);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
 const Breadcrumb = class {
     constructor(hostRef) {

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

	@@ -1 +1 @@
1	- {"file":"ic-breadcrumb.entry.js","mappings":";;;;;;;;;AAAA,MAAM,eAAe,GAAG,~~quEAAquE~~;;~~MCkBhvE~~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","names":["chevronIcon"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n ~~color~~: ~~var(--ic-breadcrumb-icon-chevron);\n}\n\n:~~host(.ic-breadcrumb-monochrome) .chevron svg {\n color: var(--ic-breadcrumb-icon-chevron~~-monochrome~~);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-breadcrumb-~~page-~~icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n color: var(--ic-breadcrumb-~~page-~~icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n display: flex;\n align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-color-hyperlink-default);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-underline-offset: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n theme={this.theme}\n monochrome={this.monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": this.showBackIcon,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n \"ic-breadcrumb-monochrome\": this.monochrome,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-breadcrumb.entry.js","mappings":"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","names":["chevronIcon"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n display: block;\n margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n display: flex;\n align-items: center;\n white-space: nowrap;\n gap: var(--ic-space-xs);\n min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n width: var(--ic-space-lg);\n height: var(--ic-space-lg);\n}\n\n:host .chevron svg,\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(:first-child) .chevron {\n display: none;\n}\n\n.back-icon svg {\n color: var(--ic-breadcrumb-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n color: var(--ic-breadcrumb-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n display: flex;\n align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n display: none;\n}\n\nic-link {\n --breadcrumb-link-display: inline-flex;\n --breadcrumb-link-align-items: center;\n --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n margin-right: var(--ic-space-xs) !important;\n display: flex;\n align-items: center;\n gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n border: none;\n background-color: transparent;\n color: var(--ic-color-hyperlink-default);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n outline: var(--ic-hc-focus-outline);\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n display: none;\n}\n\n@media (forced-colors: active) {\n .back-icon svg {\n color: currentcolor;\n }\n}\n\n@supports (text-underline-offset: 25%) {\n ic-link {\n --breadcrumb-link-display: flex;\n }\n\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 25%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/*\n @slot icon - Content will be rendered to the left of the breadcrumb page title.\n /\n@Component({\n tag: \"ic-breadcrumb\",\n styleUrl: \"ic-breadcrumb.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Breadcrumb {\n @Element() el: HTMLIcBreadcrumbElement;\n\n /\n If `true`, aria-current will be set on the breadcrumb.\n /\n @Prop() current?: boolean = false;\n\n /\n The URL that the breadcrumb link points to.\n /\n @Prop() href?: string;\n\n /\n @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n /\n @Prop() monochrome?: boolean = false;\n\n /\n The title of the breadcrumb.\n /\n @Prop() pageTitle!: string;\n\n /\n @internal If `true`, back icon will be displayed.\n /\n @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n /\n @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n componentWillRender(): void {\n this.setSlottedCurrentPageClass();\n }\n\n /\n Sets focus on the breadcrumb.\n */\n @Method()\n async setFocus(): Promise<void> {\n if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n this.el.shadowRoot.querySelector(\"ic-link\").focus();\n }\n }\n\n private renderDefaultBreadcrumb = (\n current: boolean,\n pageTitle: string,\n describedById: string,\n href: string\n ): IcBreadcrumbDefault => {\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n if (current && hasPageTitle) {\n return (\n <span\n class={{\n \"current-page-container\": current,\n }}\n >\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </span>\n );\n }\n\n return (\n <ic-link\n theme={this.theme}\n monochrome={this.monochrome}\n href={href}\n class=\"breadcrumb-link\"\n aria-describedby={this.showBackIcon && describedById && describedById}\n >\n {this.showBackIcon && (\n <div class=\"back-icon\" innerHTML={backIcon}></div>\n )}\n {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n {pageTitle}\n </ic-link>\n );\n };\n\n private setSlottedCurrentPageClass = () => {\n const icLink = this.el.querySelector(\"ic-link\");\n const currentPage = \"current-page\";\n if (icLink) {\n icLink.classList.remove(currentPage);\n if (this.current) {\n const hasCurrentPageClass = icLink.classList.contains(currentPage);\n if (!hasCurrentPageClass) {\n icLink.classList.add(\"breadcrumb-link\", currentPage);\n }\n }\n }\n };\n\n render() {\n const { current, href, pageTitle } = this;\n const describedById = `${\n pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n }-describedby`;\n\n const hasPageTitle =\n pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n return (\n <Host\n class={{\n \"ic-breadcrumb-back\": this.showBackIcon,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n \"ic-breadcrumb-monochrome\": this.monochrome,\n }}\n aria-current={current && \"page\"}\n role=\"listitem\"\n >\n <div class=\"breadcrumb\">\n <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n {this.showBackIcon && describedById && (\n <span\n id={describedById}\n class=\"hide\"\n >{`Back to ${pageTitle}`}</span>\n )}\n {hasPageTitle && hasHref ? (\n this.renderDefaultBreadcrumb(\n current,\n pageTitle,\n describedById,\n href\n )\n ) : (\n <slot />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,12 +1,12 @@
 import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-d1d2c456.js';
-import { w as IC_INHERITED_ARIA, r as removeDisabledFalse, v as inheritAttributes, Z as renderFileHiddenInput, h as getThemeFromContext, I as IcThemeForegroundEnum, i as isSlotUsed, a as onComponentRequiredPropUndefined } from './helpers-e8797e8d.js';
+import { w as IC_INHERITED_ARIA, r as removeDisabledFalse, v as inheritAttributes, Z as renderFileHiddenInput, h as getThemeFromContext, I as IcThemeForegroundEnum, i as isSlotUsed, a as onComponentRequiredPropUndefined } from './helpers-7bf8c67f.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <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;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-pressed);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--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-dark) .button,:host(.ic-button-dark) ::slotted(a){--button-default:var(--ic-color-border-neutral-black);--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-pressed);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-pressed)}:host(.ic-button-light) .button,:host(.ic-button-light) ::slotted(a){--button-default:var(--ic-color-border-neutral-white);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-pressed);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-pressed)}:host(.white-background) .button,:host(.white-background) ::slotted(a){--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n    --ic-action-default-bg-active-no-alpha\n  );background-color:var(--ic-architectural-white)}:host(.white-background.ic-button-dark) .button,:host(.white-background.ic-button-dark) ::slotted(a){--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}:host(.ic-button-variant-primary.ic-button-light) .button,:host(.ic-button-variant-primary.ic-button-light) ::slotted(a){color:var(--ic-color-text-primary-light);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-pressed)}:host(.ic-button-variant-primary.ic-button-dark) .button,:host(.ic-button-variant-primary.ic-button-dark) ::slotted(a){color:var(--ic-color-text-primary-dark);--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-pressed)}: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-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default)}:host(.ic-button-variant-primary) .button:hover{background-color:var(--button-default-hover)}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active{background-color:var(--button-default-active)}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-secondary) ::slotted(a:active){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-secondary.ic-button-loading) .button{border-color:var(--button-default);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a){color:var(--button-default)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-500)}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.ic-button-variant-destructive) .button:hover{background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-pressed)}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}: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,:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-icon.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon.ic-button-disabled) .button,:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}: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-primary) .button:hover,:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--button-default-hover)}:host(.ic-button-variant-icon-primary) .button:active,:host(.ic-button-variant-icon-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-loading) .button{background:var(--button-default-active)}:host(.ic-button-variant-icon-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:var(--ic-architectural-200)}:host(.ic-button-variant-icon-primary.ic-button-light) .button,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a){color:var(--ic-color-text-primary-light)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:hover){background:var(--ic-action-light-hover)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:active,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) ::slotted(a){background:var(--ic-action-light-pressed)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:hover){background:var(--ic-action-dark-hover)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:active,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) ::slotted(a){background:var(--ic-action-dark-pressed)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}: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-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-secondary) .button:active,:host(.ic-button-variant-icon-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}: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-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:active){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-icon-destructive) .button:active,:host(.ic-button-variant-icon-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-pressed)}:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:active){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}: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-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}: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,: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),:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}: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,: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));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}: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,: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);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-full-width),:host(.ic-button-full-width) .button,:host(.ic-button-full-width) ::slotted(a){width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome{--inner-color:var(--ic-action-light)}@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}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}: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){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}: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(.white-background) ::slotted(a){background-color:var(--ic-architectural-white) !important}:host(.ic-button-variant-primary) ::slotted(a){background-color:var(--button-default) !important}:host(.ic-button-variant-primary) ::slotted(a:hover){background-color:var(--button-default-hover) !important}:host(.ic-button-variant-primary) ::slotted(a:active){background-color:var(--button-default-active) !important}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200) !important}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600) !important}:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default) !important}:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important;border-color:var(--button-default-hover) !important}:host(.ic-button-variant-secondary) ::slotted(a:active){border-color:var(--button-default-active) !important;background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300) !important;background:none !important}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500) !important}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important}:host(.ic-button-variant-tertiary) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-tertiary) ::slotted(a:active:focus),:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:active){background:none !important}:host(.ic-button-variant-destructive) ::slotted(a){background-color:var(--ic-action-destructive) !important}:host(.ic-button-variant-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover) !important}:host(.ic-button-variant-destructive) ::slotted(a:active){background-color:var(--ic-action-destructive-pressed) !important}: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) ::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) ::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) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xs) !important}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}}: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){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  )}: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  )}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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);margin:var(--ic-space-1px) 0}: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}@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)}";
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -90,7 +90,6 @@ const Button = class {
         this.describedByContent = null;
         this.title = null;
         this.accept = "*";
-        this.appearance = "default";
         this.ariaControlsId = undefined;
         this.ariaOwnsId = undefined;
         this.disabled = false;
@@ -110,12 +109,14 @@ const Button = class {
         this.href = undefined;
         this.hreflang = undefined;
         this.loading = false;
+        this.monochrome = false;
         this.multiple = false;
         this.referrerpolicy = undefined;
         this.rel = undefined;
         this.selectedFiles = undefined;
         this.size = "medium";
         this.target = undefined;
+        this.theme = "inherit";
         this.tooltipPlacement = "bottom";
         this.transparentBackground = true;
         this.type = "button";
@@ -230,7 +231,8 @@ const Button = class {
     updateTheme(newTheme = null) {
         const foregroundColor = getThemeFromContext(this.el, newTheme);
         if (foregroundColor !== IcThemeForegroundEnum.Default) {
-            this.appearance = foregroundColor;
+            this.theme = foregroundColor;
+            this.monochrome = true;
         }
     }
     render() {
@@ -271,14 +273,10 @@ const Button = class {
             describedby = this.describedById;
         }
         const ButtonContent = () => {
-            const darkAppearance = this.variant.includes("primary") ||
-                this.variant.includes("destructive") ||
-                this.appearance === IcThemeForegroundEnum.Dark ||
-                this.appearance === IcThemeForegroundEnum.Light;
             return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedby, part: "button" }), this.hasIconSlot("left") && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.hasIconSlot("top") &&
                 !this.hasIconSlot("left") &&
                 !this.hasIconSlot("right") &&
-                !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "top-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", monochrome: darkAppearance, theme: darkAppearance ? "dark" : "light" }))) : (h("slot", null)), this.hasIconSlot("right") && !this.loading && !this.dropdown && (h("div", { class: { "icon-container": true, "right-icon": true } }, h("slot", { name: "right-icon" }))), this.dropdown &&
+                !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "top-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", monochrome: this.monochrome, theme: this.theme }))) : (h("slot", null)), this.hasIconSlot("right") && !this.loading && !this.dropdown && (h("div", { class: { "icon-container": true, "right-icon": true } }, h("slot", { name: "right-icon" }))), this.dropdown &&
                 !this.loading &&
                 this.variant !== "icon" &&
                 this.variant !== "destructive" && (h("span", { class: {
@@ -287,21 +285,21 @@ const Button = class {
                 }, innerHTML: arrowDropdown }))));
         };
         return (h(Host, { class: {
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
+                [`monochrome`]: this.monochrome,
                 ["ic-button-disabled"]: this.disabled && !this.loading,
                 [`ic-button-variant-${this.variant}`]: true,
                 [`ic-button-size-${this.size}`]: true,
                 ["ic-button-loading"]: this.loading,
-                ["ic-button-dark"]: this.appearance === IcThemeForegroundEnum.Dark,
-                ["ic-button-light"]: this.appearance === IcThemeForegroundEnum.Light,
                 ["ic-button-full-width"]: this.fullWidth,
                 ["with-badge"]: isSlotUsed(this.el, "badge"),
                 ["dropdown-no-icon"]: this.dropdown &&
                     !isSlotUsed(this.el, "icon") &&
                     !isSlotUsed(this.el, "left-icon"),
                 ["top-icon"]: isSlotUsed(this.el, "top-icon"),
-                ["white-background"]: this.variant === "secondary" &&
+                ["background"]: this.variant === "secondary" &&
                     !this.transparentBackground &&
-                    this.appearance !== "light",
+                    this.theme === "light",
             }, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-owns": this.ariaOwnsId, "aria-controls": this.ariaControlsId, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, this.hasTooltip && (h("ic-tooltip", { id: describedby, label: title || ariaLabel, target: buttonId, placement: this.tooltipPlacement, silent: this.isIconVariant() && !!ariaLabel }, this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null)))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip &&
             (this.hasRouterSlot() ? (h("slot", { name: "router-item" })) : (h(ButtonContent, null))), this.describedByContent && (h("span", { id: describedby, class: "ic-button-describedby" }, this.describedByContent))));
     }