npm - @ukic/web-components - Versions diffs - 2.4.1 → 2.5.0 - Mend

@ukic/web-components 2.4.1 → 2.5.0

Files changed (486) hide show

package/dist/esm/ic-badge.entry.js ADDED Viewed

@@ -0,0 +1,152 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b006ae9d.js';
+import { I as IcThemeForegroundEnum } from './types-b2398b37.js';
+import { h as hexToRgba, r as rgbaStrToObj, g as getCssProperty, b as getParentElement, c as getParentElementType } from './helpers-81a88a11.js';
+const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.show){animation:expand var(--ic-transition-duration-slow)}:host(.hide){animation:shrink var(--ic-transition-duration-slow)}}:host{display:flex;height:var(--ic-space-md);min-width:var(--ic-space-md);width:-moz-fit-content;width:fit-content;border-radius:calc(2 * var(--ic-space-xxl));position:absolute}:host(.neutral){background-color:var(--ic-architectural-500)}:host(.light){background-color:var(--ic-architectural-40)}:host(.info){background-color:var(--ic-status-info)}:host(.warning){background-color:var(--ic-status-warning-mid)}:host(.error){background-color:var(--ic-status-error)}:host(.success){background-color:var(--ic-status-success)}:host(.small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.dot.default){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.dot.small){height:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs));min-width:calc(var(--ic-space-xxs) + var(--ic-space-xxxs))}:host(.dot.large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text)}:host(.foreground-light) ::slotted(*){fill:white}:host(.foreground-dark) ic-typography{color:var(--ic-color-primary-text)}:host(.foreground-light) ic-typography{color:white}:host(.text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.text.small) ic-typography{padding:0 0.2132rem}:host(.text.large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.icon.small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.icon.large) ::slotted(svg){width:calc(var(--ic-space-sm) + var(--ic-space-xxxs));height:calc(var(--ic-space-sm) + var(--ic-space-xxxs));padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}:host(.far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.far.small),:host(.dot.far.large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.dot.far),:host(.dot.far.small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.near){top:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));right:calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)))}:host(.dot.near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.inline){position:static}:host(.hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}@keyframes expand{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(0)}}";
+const Badge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.setBadgeColour = () => {
+      let colorRGBA = null;
+      if (this.customColor !== null) {
+        const firstChar = this.customColor.slice(0, 1);
+        if (firstChar === "#") {
+          colorRGBA = hexToRgba(this.customColor);
+        }
+        else if (firstChar.toLowerCase() === "r") {
+          colorRGBA = rgbaStrToObj(this.customColor);
+        }
+        this.customColorRGBA = colorRGBA;
+        this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;
+      }
+    };
+    this.getBadgeForeground = () => {
+      let red;
+      let green;
+      let blue;
+      switch (this.variant) {
+        case "custom":
+          red = this.customColorRGBA.r;
+          green = this.customColorRGBA.g;
+          blue = this.customColorRGBA.b;
+          break;
+        case "error":
+          red = parseInt(getCssProperty("--ic-status-error-r"));
+          green = parseInt(getCssProperty("--ic-status-error-g"));
+          blue = parseInt(getCssProperty("--ic-status-error-b"));
+          break;
+        case "success":
+          red = parseInt(getCssProperty("--ic-status-success-r"));
+          green = parseInt(getCssProperty("--ic-status-success-g"));
+          blue = parseInt(getCssProperty("--ic-status-success-b"));
+          break;
+        case "warning":
+          red = parseInt(getCssProperty("--ic-status-warning-r"));
+          green = parseInt(getCssProperty("--ic-status-warning-g"));
+          blue = parseInt(getCssProperty("--ic-status-warning-b"));
+          break;
+        case "info": {
+          const info = hexToRgba(getCssProperty("--ic-status-info"));
+          red = info.r;
+          green = info.g;
+          blue = info.b;
+          break;
+        }
+        case "neutral": {
+          const neutral = hexToRgba(getCssProperty("--ic-architectural-500"));
+          red = neutral.r;
+          green = neutral.g;
+          blue = neutral.b;
+          break;
+        }
+        case "light": {
+          const light = hexToRgba(getCssProperty("--ic-architectural-40"));
+          red = light.r;
+          green = light.g;
+          blue = light.b;
+          break;
+        }
+      }
+      const brightness = (red * 299 + green * 587 + blue * 114) / 1000;
+      this.foregroundColour =
+        brightness > 133.3505
+          ? IcThemeForegroundEnum.Dark
+          : IcThemeForegroundEnum.Light;
+    };
+    this.getTextLabel = () => {
+      let label;
+      if (this.textLabel !== null) {
+        if (this.maxNumber !== null) {
+          label =
+            Number(this.textLabel) > this.maxNumber
+              ? `${this.maxNumber}+`
+              : this.textLabel;
+        }
+        else {
+          label = this.textLabel;
+        }
+      }
+      return label;
+    };
+    this.setAccessibleLabel = () => {
+      if (getParentElement(this.el) !== null) {
+        if (getParentElementType(this.el) === "IC-TAB") {
+          getParentElement(this.el).setAttribute("aria-describedby", "badge");
+        }
+        else {
+          getParentElement(this.el).ariaLabel = `badge displaying ${this.accessibleLabel}`;
+        }
+      }
+    };
+    this.isAccessibleLabelDefined = () => {
+      return this.accessibleLabel !== undefined && this.accessibleLabel !== null;
+    };
+    this.visible = true;
+    this.accessibleLabel = undefined;
+    this.customColor = null;
+    this.maxNumber = undefined;
+    this.position = "far";
+    this.size = "default";
+    this.textLabel = undefined;
+    this.type = "text";
+    this.variant = "neutral";
+  }
+  componentWillLoad() {
+    this.variant === "custom" && this.setBadgeColour();
+    this.getBadgeForeground();
+    this.isAccessibleLabelDefined() && this.setAccessibleLabel();
+  }
+  /**
+   * Use to show the badge.
+   */
+  async showBadge() {
+    this.visible = true;
+  }
+  /**
+   * Use to hide the badge.
+   */
+  async hideBadge() {
+    this.visible = false;
+  }
+  render() {
+    const { position, size, type, variant, foregroundColour, visible } = this;
+    return (h(Host, { class: {
+        [`${position}`]: true,
+        [`${size}`]: true,
+        [`${variant}`]: true,
+        [`${type}`]: true,
+        [`foreground-${foregroundColour}`]: foregroundColour !== null,
+        ["show"]: visible,
+        ["hide"]: !visible,
+      }, id: "badge", "aria-label": this.isAccessibleLabelDefined() &&
+        `badge displaying ${this.accessibleLabel}` }, type === "icon" && h("slot", { name: "badge-icon" }), type === "text" && (h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
+Badge.style = icBadgeCss;
+export { Badge as ic_badge };
+//# sourceMappingURL=ic-badge.entry.js.map

package/dist/esm/ic-badge.entry.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"file":"ic-badge.entry.js","mappings":"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","names":[],"sources":["src/components/ic-badge/ic-badge.css?tag=ic-badge&encapsulation=shadow","src/components/ic-badge/ic-badge.tsx"],"sourcesContent":["@media (prefers-reduced-motion: no-preference) {\n :host(.show) {\n animation: expand var(--ic-transition-duration-slow);\n }\n\n :host(.hide) {\n animation: shrink var(--ic-transition-duration-slow);\n }\n}\n\n:host {\n display: flex;\n height: var(--ic-space-md);\n min-width: var(--ic-space-md);\n width: -moz-fit-content;\n width: fit-content;\n border-radius: calc(2 * var(--ic-space-xxl));\n position: absolute;\n}\n\n:host(.neutral) {\n background-color: var(--ic-architectural-500);\n}\n\n:host(.light) {\n background-color: var(--ic-architectural-40);\n}\n\n:host(.info) {\n background-color: var(--ic-status-info);\n}\n\n:host(.warning) {\n background-color: var(--ic-status-warning-mid);\n}\n\n:host(.error) {\n background-color: var(--ic-status-error);\n}\n\n:host(.success) {\n background-color: var(--ic-status-success);\n}\n\n:host(.small) {\n height: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.large) {\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n min-width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host(.dot.default) {\n height: var(--ic-space-xs);\n width: var(--ic-space-xs);\n min-width: var(--ic-space-xs);\n}\n\n:host(.dot.small) {\n height: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n min-width: calc(var(--ic-space-xxs) + var(--ic-space-xxxs));\n}\n\n:host(.dot.large) {\n height: var(--ic-space-sm);\n width: var(--ic-space-sm);\n min-width: var(--ic-space-sm);\n}\n\n:host(.foreground-dark) ::slotted(*) {\n fill: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ::slotted(*) {\n fill: white;\n}\n\n:host(.foreground-dark) ic-typography {\n color: var(--ic-color-primary-text);\n}\n\n:host(.foreground-light) ic-typography {\n color: white;\n}\n\n:host(.text) ic-typography {\n align-self: center;\n padding: 0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.text.small) ic-typography {\n padding: 0 0.2132rem;\n}\n\n:host(.text.large) ic-typography {\n padding: 0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n var(--ic-space-1px);\n}\n\n:host(.icon) ::slotted(svg) {\n width: var(--ic-space-sm);\n height: var(--ic-space-sm);\n padding: var(--ic-space-xxxs);\n}\n\n:host(.icon.small) ::slotted(svg) {\n width: var(--ic-space-xs);\n height: var(--ic-space-xs);\n}\n\n:host(.icon.large) ::slotted(svg) {\n width: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n height: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n}\n\n:host(.far) {\n top: calc(-1 * var(--ic-space-xs));\n right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.far.small),\n:host(.dot.far.large) {\n top: calc(-1 * var(--ic-space-xxs));\n right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.dot.far),\n:host(.dot.far.small) {\n top: calc(-1 * var(--ic-space-xxxs));\n right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.near) {\n top: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n right: calc(-1 * calc(var(--ic-space-xxs) + var(--ic-space-1px)));\n}\n\n:host(.dot.near) {\n top: calc(-1 * var(--ic-space-1px));\n right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.inline) {\n position: static;\n}\n\n:host(.hide) {\n visibility: hidden !important;\n transition: visibility var(--ic-transition-duration-slow);\n}\n\n@keyframes expand {\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n@keyframes shrink {\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n Method,\n Prop,\n State,\n h,\n} from \"@stencil/core\";\nimport {\n IcBadgePositions,\n IcBadgeTypes,\n IcBadgeVariants,\n IcColor,\n} from \"./ic-badge.types\";\nimport {\n IcColorRGBA,\n IcSizes,\n IcThemeForeground,\n IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n getCssProperty,\n getParentElement,\n getParentElementType,\n hexToRgba,\n rgbaStrToObj,\n} from \"../../utils/helpers\";\n\n@Component({\n tag: \"ic-badge\",\n styleUrl: \"ic-badge.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Badge {\n private customColorRGBA: IcColorRGBA;\n private foregroundColour: IcThemeForeground;\n\n @Element() el: HTMLIcBadgeElement;\n\n @State() visible: boolean = true;\n\n /**\n * The accessible label of the badge component to provide context for screen reader users.\n */\n @Prop() accessibleLabel?: string;\n\n /**\n * The custom badge colour. This will only style the badge component if variant=\"custom\".\n * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n */\n @Prop() customColor?: IcColor = null;\n\n /**\n * The maximum number shown on the badge appended with a +.\n * This will only be displayed if type=\"text\" and textLabel is not empty.\n */\n @Prop() maxNumber?: number;\n\n /**\n * The positioning of the badge in reference to the parent element.\n */\n @Prop() position?: IcBadgePositions = \"far\";\n\n /**\n * The size of the badge to be displayed.\n */\n @Prop() size?: IcSizes = \"default\";\n\n /**\n * The text displayed in the badge. This will only be displayed if type=\"text\".\n */\n @Prop() textLabel?: string;\n\n /**\n * The type of badge to be displayed.\n */\n @Prop() type?: IcBadgeTypes = \"text\";\n\n /**\n * The variant of the badge to be displayed.\n */\n @Prop() variant?: IcBadgeVariants = \"neutral\";\n\n componentWillLoad(): void {\n this.variant === \"custom\" && this.setBadgeColour();\n\n this.getBadgeForeground();\n\n this.isAccessibleLabelDefined() && this.setAccessibleLabel();\n }\n\n /**\n * Use to show the badge.\n */\n @Method()\n async showBadge(): Promise<void> {\n this.visible = true;\n }\n\n /**\n * Use to hide the badge.\n */\n @Method()\n async hideBadge(): Promise<void> {\n this.visible = false;\n }\n\n private setBadgeColour = () => {\n let colorRGBA = null;\n if (this.customColor !== null) {\n const firstChar = this.customColor.slice(0, 1);\n if (firstChar === \"#\") {\n colorRGBA = hexToRgba(this.customColor);\n } else if (firstChar.toLowerCase() === \"r\") {\n colorRGBA = rgbaStrToObj(this.customColor);\n }\n this.customColorRGBA = colorRGBA;\n this.el.style.backgroundColor = `rgba(${colorRGBA.r.toString()}, ${colorRGBA.g.toString()}, ${colorRGBA.b.toString()}, ${colorRGBA.a.toString()})`;\n }\n };\n\n private getBadgeForeground = () => {\n let red: number;\n let green: number;\n let blue: number;\n\n switch (this.variant) {\n case \"custom\":\n red = this.customColorRGBA.r;\n green = this.customColorRGBA.g;\n blue = this.customColorRGBA.b;\n break;\n case \"error\":\n red = parseInt(getCssProperty(\"--ic-status-error-r\"));\n green = parseInt(getCssProperty(\"--ic-status-error-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-error-b\"));\n break;\n case \"success\":\n red = parseInt(getCssProperty(\"--ic-status-success-r\"));\n green = parseInt(getCssProperty(\"--ic-status-success-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-success-b\"));\n break;\n case \"warning\":\n red = parseInt(getCssProperty(\"--ic-status-warning-r\"));\n green = parseInt(getCssProperty(\"--ic-status-warning-g\"));\n blue = parseInt(getCssProperty(\"--ic-status-warning-b\"));\n break;\n case \"info\": {\n const info = hexToRgba(getCssProperty(\"--ic-status-info\"));\n red = info.r;\n green = info.g;\n blue = info.b;\n break;\n }\n case \"neutral\": {\n const neutral = hexToRgba(getCssProperty(\"--ic-architectural-500\"));\n red = neutral.r;\n green = neutral.g;\n blue = neutral.b;\n break;\n }\n case \"light\": {\n const light = hexToRgba(getCssProperty(\"--ic-architectural-40\"));\n red = light.r;\n green = light.g;\n blue = light.b;\n break;\n }\n }\n\n const brightness = (red * 299 + green * 587 + blue * 114) / 1000;\n this.foregroundColour =\n brightness > 133.3505\n ? IcThemeForegroundEnum.Dark\n : IcThemeForegroundEnum.Light;\n };\n\n private getTextLabel = () => {\n let label;\n if (this.textLabel !== null) {\n if (this.maxNumber !== null) {\n label =\n Number(this.textLabel) > this.maxNumber\n ? `${this.maxNumber}+`\n : this.textLabel;\n } else {\n label = this.textLabel;\n }\n }\n return label;\n };\n\n private setAccessibleLabel = () => {\n if (getParentElement(this.el) !== null) {\n if (getParentElementType(this.el) === \"IC-TAB\") {\n getParentElement(this.el).setAttribute(\"aria-describedby\", \"badge\");\n } else {\n getParentElement(\n this.el\n ).ariaLabel = `badge displaying ${this.accessibleLabel}`;\n }\n }\n };\n\n private isAccessibleLabelDefined = () => {\n return this.accessibleLabel !== undefined && this.accessibleLabel !== null;\n };\n\n render() {\n const { position, size, type, variant, foregroundColour, visible } = this;\n\n return (\n <Host\n class={{\n [`${position}`]: true,\n [`${size}`]: true,\n [`${variant}`]: true,\n [`${type}`]: true,\n [`foreground-${foregroundColour}`]: foregroundColour !== null,\n [\"show\"]: visible,\n [\"hide\"]: !visible,\n }}\n id=\"badge\"\n aria-label={\n this.isAccessibleLabelDefined() &&\n `badge displaying ${this.accessibleLabel}`\n }\n >\n {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n {type === \"text\" && (\n <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n {this.getTextLabel()}\n </ic-typography>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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-14c9f375.js';
-import { D as DEVICE_SIZES, g as getCurrentDeviceSize, c as checkResizeObserver } from './helpers-b0e80358.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b006ae9d.js';
+import { D as DEVICE_SIZES, d as getCurrentDeviceSize, e as checkResizeObserver } from './helpers-81a88a11.js';
 import './types-b2398b37.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(.back) ol ::slotted(ic-breadcrumb){display:none}:host(.back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-14c9f375.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b006ae9d.js';
 import { C as Chevron } from './chevron-icon-589e3b46.js';
-import { i as isSlotUsed } from './helpers-b0e80358.js';
+import { i as isSlotUsed } from './helpers-81a88a11.js';
 import './types-b2398b37.js';
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-14c9f375.js';
-import { n as inheritAttributes, r as removeDisabledFalse, b as getThemeFromContext, i as isSlotUsed, p as IC_INHERITED_ARIA, a as onComponentRequiredPropUndefined } from './helpers-b0e80358.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b006ae9d.js';
+import { v as inheritAttributes, f as removeDisabledFalse, j as getThemeFromContext, i as isSlotUsed, w as IC_INHERITED_ARIA, a as onComponentRequiredPropUndefined } from './helpers-81a88a11.js';
 import { I as IcThemeForegroundEnum } from './types-b2398b37.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
-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;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--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{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;gap:var(--ic-space-xxs);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{cursor:pointer}.button:focus,:host .button:focus{box-shadow:var(--ic-border-focus)}:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:var(--ic-space-1px) solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{color:var(--button-default);min-width:0;gap:var(--ic-space-xs)}:host(.button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.button-variant-icon) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button: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) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--height, var(--ic-space-xxl));gap:var(--ic-space-xs);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--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-md);height:var(--ic-space-md);display:flex;justify-content:center;align-items:center}:host(.button-size-large) div.icon-container{width:calc(var(--ic-space-md) + var(--ic-space-xxs));height:calc(var(--ic-space-md) + var(--ic-space-xxs))}::slotted(*){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.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{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{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}@media (forced-colors: active){.button{border:0.125rem solid transparent}}: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;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-active);--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{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;gap:var(--ic-space-xxs);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{cursor:pointer}.button:focus,:host .button:focus,:host(.light) .button:focus{box-shadow:var(--ic-border-focus)}.button:focus-visible{outline:var(--ic-hc-focus-outline)}:host(.dark) .button{--button-default:var(--ic-action-dark);--button-default-hover:var(--ic-action-dark);--button-default-active:var(--ic-action-dark);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-active)}:host(.light) .button{--button-default:var(--ic-action-light);--button-default-hover:var(--ic-action-light);--button-default-active:var(--ic-action-light);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-active)}:host(.button-variant-primary.light) .button{color:var(--ic-color-primary-text);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.button-variant-primary.dark) .button{--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.disabled),:host(.disabled) .button,:host(.loading),:host(.loading) .button{pointer-events:none}:host(.button-variant-primary) .button{color:var(--ic-architectural-white);background-color:var(--button-default)}:host(.button-variant-primary) .button:hover:not(:focus){background-color:var(--button-default-hover)}:host(.button-variant-primary) .button:active:not(:focus),:host(.button-variant-primary.loading) .button{background-color:var(--button-default-active)}:host(.button-variant-primary.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-variant-primary.light.disabled) .button{background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.button-variant-secondary) .button{border:var(--ic-space-1px) solid var(--button-default);color:var(--button-default)}:host(.button-variant-secondary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.button-variant-secondary) .button:active:not(:focus){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-secondary.disabled) .button,:host(.button-variant-secondary.disabled) .button:hover,:host(.button-variant-secondary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-secondary.light.disabled) .button,:host(.button-variant-secondary.light.disabled) .button:hover,:host(.button-variant-secondary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-tertiary) .button{color:var(--button-default)}:host(.button-variant-tertiary) .button:hover:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-tertiary) .button:active:not(:focus),:host(.button-variant-tertiary.loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.button-variant-tertiary.disabled) .button,:host(.button-variant-tertiary.disabled) .button:hover,:host(.button-variant-tertiary.disabled) .button:active{border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.button-variant-tertiary.light.disabled) .button,:host(.button-variant-tertiary.light.disabled) .button:hover,:host(.button-variant-tertiary.light.disabled) .button:active{border-color:var(--ic-architectural-500);color:var(--ic-architectural-500);background:none}:host(.button-variant-icon) .button{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:not(:focus){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.button-variant-icon) .button: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) .button:hover,:host(.button-variant-icon.disabled) .button:active{color:var(--ic-architectural-300);background:none}:host(.button-variant-destructive) .button{color:var(--ic-architectural-white);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.button-variant-destructive) .button:hover:not(:focus){background-color:var(--ic-action-destructive-hover)}:host(.button-variant-destructive) .button:active:not(:focus),:host(.button-variant-destructive.loading) .button{background-color:var(--ic-action-destructive-active)}:host(.button-variant-destructive.disabled) .button{background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.button-size-default) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.button-size-large) .button{height:var(--height, var(--ic-space-xxl));gap:var(--ic-space-xs);padding:var(--ic-space-sm) var(--ic-space-md)}:host(.button-size-default.button-variant-icon) .button{height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.button-size-small.button-variant-icon) .button{height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.button-size-large.button-variant-icon) .button{height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.full-width),:host(.full-width) .button{width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--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-md);height:var(--ic-space-md);display:flex;justify-content:center;align-items:center}:host(.button-size-large) div.icon-container{width:calc(var(--ic-space-md) + var(--ic-space-xxs));height:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.button-size-large) div.icon-container{width:calc(var(--ic-space-md) + var(--ic-space-xxs));height:calc(var(--ic-space-md) + var(--ic-space-xxs))}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.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{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{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}@media (forced-colors: active){.button{border:0.125rem solid transparent}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
 var __rest = (undefined && undefined.__rest) || function (s, e) {
   var t = {};
@@ -247,7 +247,7 @@ const Button = class {
         ["light"]: this.appearance === IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
         ["with-badge"]: isSlotUsed(this.el, "badge"),
-      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
+      }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }