@ukic/web-components 2.4.0 → 2.5.0

package/dist/cjs/ic-badge.cjs.entry.js

@@ -0,0 +1,156 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-afe53465.js');
+const types = require('./types-7d67439f.js');
+const helpers = require('./helpers-d166f875.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) {
+    index.registerInstance(this, hostRef);
+    this.setBadgeColour = () => {
+      let colorRGBA = null;
+      if (this.customColor !== null) {
+        const firstChar = this.customColor.slice(0, 1);
+        if (firstChar === "#") {
+          colorRGBA = helpers.hexToRgba(this.customColor);
+        }
+        else if (firstChar.toLowerCase() === "r") {
+          colorRGBA = helpers.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(helpers.getCssProperty("--ic-status-error-r"));
+          green = parseInt(helpers.getCssProperty("--ic-status-error-g"));
+          blue = parseInt(helpers.getCssProperty("--ic-status-error-b"));
+          break;
+        case "success":
+          red = parseInt(helpers.getCssProperty("--ic-status-success-r"));
+          green = parseInt(helpers.getCssProperty("--ic-status-success-g"));
+          blue = parseInt(helpers.getCssProperty("--ic-status-success-b"));
+          break;
+        case "warning":
+          red = parseInt(helpers.getCssProperty("--ic-status-warning-r"));
+          green = parseInt(helpers.getCssProperty("--ic-status-warning-g"));
+          blue = parseInt(helpers.getCssProperty("--ic-status-warning-b"));
+          break;
+        case "info": {
+          const info = helpers.hexToRgba(helpers.getCssProperty("--ic-status-info"));
+          red = info.r;
+          green = info.g;
+          blue = info.b;
+          break;
+        }
+        case "neutral": {
+          const neutral = helpers.hexToRgba(helpers.getCssProperty("--ic-architectural-500"));
+          red = neutral.r;
+          green = neutral.g;
+          blue = neutral.b;
+          break;
+        }
+        case "light": {
+          const light = helpers.hexToRgba(helpers.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
+          ? types.IcThemeForegroundEnum.Dark
+          : types.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 (helpers.getParentElement(this.el) !== null) {
+        if (helpers.getParentElementType(this.el) === "IC-TAB") {
+          helpers.getParentElement(this.el).setAttribute("aria-describedby", "badge");
+        }
+        else {
+          helpers.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 (index.h(index.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" && index.h("slot", { name: "badge-icon" }), type === "text" && (index.h("ic-typography", { variant: size === "small" ? "badge-small" : "badge" }, this.getTextLabel()))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return index.getElement(this); }
+};
+Badge.style = icBadgeCss;
+
+exports.ic_badge = Badge;
+
+//# sourceMappingURL=ic-badge.cjs.entry.js.map

package/dist/cjs/ic-badge.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ic-badge.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,UAAU,GAAG,s/FAAs/F;;MCoC5/F,KAAK;;;IA0ER,mBAAc,GAAG;MACvB,IAAI,SAAS,GAAG,IAAI,CAAC;MACrB,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,EAAE;QAC7B,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QAC/C,IAAI,SAAS,KAAK,GAAG,EAAE;UACrB,SAAS,GAAGA,iBAAS,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SACzC;aAAM,IAAI,SAAS,CAAC,WAAW,EAAE,KAAK,GAAG,EAAE;UAC1C,SAAS,GAAGC,oBAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;SAC5C;QACD,IAAI,CAAC,eAAe,GAAG,SAAS,CAAC;QACjC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC;OACpJ;KACF,CAAC;IAEM,uBAAkB,GAAG;MAC3B,IAAI,GAAW,CAAC;MAChB,IAAI,KAAa,CAAC;MAClB,IAAI,IAAY,CAAC;MAEjB,QAAQ,IAAI,CAAC,OAAO;QAClB,KAAK,QAAQ;UACX,GAAG,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;UAC7B,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;UAC/B,IAAI,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;UAC9B,MAAM;QACR,KAAK,OAAO;UACV,GAAG,GAAG,QAAQ,CAACC,sBAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;UACtD,KAAK,GAAG,QAAQ,CAACA,sBAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;UACxD,IAAI,GAAG,QAAQ,CAACA,sBAAc,CAAC,qBAAqB,CAAC,CAAC,CAAC;UACvD,MAAM;QACR,KAAK,SAAS;UACZ,GAAG,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UACxD,KAAK,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UAC1D,IAAI,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UACzD,MAAM;QACR,KAAK,SAAS;UACZ,GAAG,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UACxD,KAAK,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UAC1D,IAAI,GAAG,QAAQ,CAACA,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UACzD,MAAM;QACR,KAAK,MAAM,EAAE;UACX,MAAM,IAAI,GAAGF,iBAAS,CAACE,sBAAc,CAAC,kBAAkB,CAAC,CAAC,CAAC;UAC3D,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC;UACb,KAAK,GAAG,IAAI,CAAC,CAAC,CAAC;UACf,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC;UACd,MAAM;SACP;QACD,KAAK,SAAS,EAAE;UACd,MAAM,OAAO,GAAGF,iBAAS,CAACE,sBAAc,CAAC,wBAAwB,CAAC,CAAC,CAAC;UACpE,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC;UAChB,KAAK,GAAG,OAAO,CAAC,CAAC,CAAC;UAClB,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC;UACjB,MAAM;SACP;QACD,KAAK,OAAO,EAAE;UACZ,MAAM,KAAK,GAAGF,iBAAS,CAACE,sBAAc,CAAC,uBAAuB,CAAC,CAAC,CAAC;UACjE,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC;UACd,KAAK,GAAG,KAAK,CAAC,CAAC,CAAC;UAChB,IAAI,GAAG,KAAK,CAAC,CAAC,CAAC;UACf,MAAM;SACP;OACF;MAED,MAAM,UAAU,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC;MACjE,IAAI,CAAC,gBAAgB;QACnB,UAAU,GAAG,QAAQ;YACjBC,2BAAqB,CAAC,IAAI;YAC1BA,2BAAqB,CAAC,KAAK,CAAC;KACnC,CAAC;IAEM,iBAAY,GAAG;MACrB,IAAI,KAAK,CAAC;MACV,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;QAC3B,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE;UAC3B,KAAK;YACH,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC,SAAS;gBACnC,GAAG,IAAI,CAAC,SAAS,GAAG;gBACpB,IAAI,CAAC,SAAS,CAAC;SACtB;aAAM;UACL,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC;SACxB;OACF;MACD,OAAO,KAAK,CAAC;KACd,CAAC;IAEM,uBAAkB,GAAG;MAC3B,IAAIC,wBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,EAAE;QACtC,IAAIC,4BAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,QAAQ,EAAE;UAC9CD,wBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,YAAY,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;SACrE;aAAM;UACLA,wBAAgB,CACd,IAAI,CAAC,EAAE,CACR,CAAC,SAAS,GAAG,oBAAoB,IAAI,CAAC,eAAe,EAAE,CAAC;SAC1D;OACF;KACF,CAAC;IAEM,6BAAwB,GAAG;MACjC,OAAO,IAAI,CAAC,eAAe,KAAK,SAAS,IAAI,IAAI,CAAC,eAAe,KAAK,IAAI,CAAC;KAC5E,CAAC;mBAvK0B,IAAI;;uBAWA,IAAI;;oBAWE,KAAK;gBAKlB,SAAS;;gBAUJ,MAAM;mBAKA,SAAS;;EAE7C,iBAAiB;IACf,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;IAEnD,IAAI,CAAC,kBAAkB,EAAE,CAAC;IAE1B,IAAI,CAAC,wBAAwB,EAAE,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC9D;;;;EAMD,MAAM,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;GACrB;;;;EAMD,MAAM,SAAS;IACb,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;GACtB;EAuGD,MAAM;IACJ,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAE1E,QACEE,QAACC,UAAI,IACH,KAAK,EAAE;QACL,CAAC,GAAG,QAAQ,EAAE,GAAG,IAAI;QACrB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,GAAG,OAAO,EAAE,GAAG,IAAI;QACpB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,cAAc,gBAAgB,EAAE,GAAG,gBAAgB,KAAK,IAAI;QAC7D,CAAC,MAAM,GAAG,OAAO;QACjB,CAAC,MAAM,GAAG,CAAC,OAAO;OACnB,EACD,EAAE,EAAC,OAAO,gBAER,IAAI,CAAC,wBAAwB,EAAE;QAC/B,oBAAoB,IAAI,CAAC,eAAe,EAAE,IAG3C,IAAI,KAAK,MAAM,IAAID,kBAAM,IAAI,EAAC,YAAY,GAAQ,EAClD,IAAI,KAAK,MAAM,KACdA,2BAAe,OAAO,EAAE,IAAI,KAAK,OAAO,GAAG,aAAa,GAAG,OAAO,IAC/D,IAAI,CAAC,YAAY,EAAE,CACN,CACjB,CACI,EACP;GACH;;;;;;;;","names":["hexToRgba","rgbaStrToObj","getCssProperty","IcThemeForegroundEnum","getParentElement","getParentElementType","h","Host"],"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/cjs/ic-breadcrumb-group.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54d2bed9.js');
+const index = require('./index-afe53465.js');
 const helpers = require('./helpers-d166f875.js');
 require('./types-7d67439f.js');
 

package/dist/cjs/ic-breadcrumb.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54d2bed9.js');
+const index = require('./index-afe53465.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
 const helpers = require('./helpers-d166f875.js');
 require('./types-7d67439f.js');

package/dist/cjs/ic-button_3.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-54d2bed9.js');
+const index = require('./index-afe53465.js');
 const helpers = require('./helpers-d166f875.js');
 const types = require('./types-7d67439f.js');
 const popper = require('./popper-31badbf8.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(.loading-with-icon) .button{min-width:var(--min-width, 8.25rem)}: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 = {};
@@ -33,6 +33,19 @@ const Button = class {
     this.describedByEl = null;
     this.describedById = null;
     this.mutationObserver = null;
+    this.setViewBox = () => {
+      let iconEl;
+      if (this.hasLeftIconSlot()) {
+        iconEl = this.el.querySelector(`[slot="left-icon"]`);
+      }
+      else if (this.hasRightIconSlot()) {
+        iconEl = this.el.querySelector(`[slot="right-icon"]`);
+      }
+      else {
+        iconEl = null;
+      }
+      return iconEl;
+    };
     this.handleClick = () => {
       if ((this.el.type === "submit" || this.el.type === "reset") &&
         !!this.el.closest("FORM")) {
@@ -45,6 +58,11 @@ const Button = class {
     this.onBlur = () => {
       this.icBlur.emit();
     };
+    this.loadingWidth = () => {
+      if (this.loading) {
+        this.el.style.setProperty("--min-width", `${this.el.getBoundingClientRect().width}px`);
+      }
+    };
     // triggered when text content of sibling element in light DOM changes
     this.mutationCallback = () => {
       this.describedByContent = this.describedByEl.innerText;
@@ -77,6 +95,9 @@ const Button = class {
       this.mutationObserver.disconnect();
     }
   }
+  componentWillUpdate() {
+    this.loadingWidth();
+  }
   componentWillLoad() {
     this.inheritedAttributes = helpers.inheritAttributes(this.el, [
       ...helpers.IC_INHERITED_ARIA,
@@ -109,6 +130,10 @@ const Button = class {
       });
     }
   }
+  componentWillRender() {
+    var _a;
+    (_a = this.setViewBox()) === null || _a === void 0 ? void 0 : _a.setAttribute("viewBox", "0 0 24 24");
+  }
   handleHostClick(event) {
     if (this.disabled || this.loading) {
       event.stopImmediatePropagation();
@@ -222,15 +247,11 @@ const Button = class {
         [`button-variant-${this.variant}`]: true,
         [`button-size-${this.size}`]: true,
         ["loading"]: this.loading,
-        ["loading-with-icon"]: this.loading &&
-          (this.hasIconSlot() ||
-            this.hasLeftIconSlot() ||
-            this.hasRightIconSlot()),
         ["dark"]: this.appearance === types.IcThemeForegroundEnum.Dark,
         ["light"]: this.appearance === types.IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
         ["with-badge"]: helpers.isSlotUsed(this.el, "badge"),
-      }, onClick: this.handleClick }, this.hasTooltip && (index.h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, index.h(ButtonContent, null))), !this.hasTooltip && index.h(ButtonContent, null), this.describedByContent && (index.h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
+      }, onClick: this.handleClick }, this.hasTooltip && (index.h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, index.h(ButtonContent, null))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { name: "badge" }), !this.hasTooltip && index.h(ButtonContent, null), this.describedByContent && (index.h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
   }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }