@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.3

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-f1cf5156.js');
+const helpers = require('./helpers-69219f14.js');
 
-const icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-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 ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-neutral) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-light-text)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-light-icon)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-primary-text-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-primary-text-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-primary-text-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-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(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-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(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}@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 icBadgeCss = "@media (prefers-reduced-motion: no-preference){:host(.ic-badge-show){animation:expand var(--ic-transition-duration-slow)}:host(.ic-badge-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 ic-typography{--ic-typography-color:var(--ic-badge-text)}:host(.ic-badge-neutral){background-color:var(--ic-badge-neutral) !important}:host(.ic-badge-light) ic-typography{--ic-typography-color:var(--ic-badge-light-text)}:host(.ic-badge-light) ::slotted(*){fill:var(--ic-badge-light-icon)}:host(.ic-badge-info){background-color:var(--ic-badge-info) !important}:host(.ic-badge-light){background-color:var(--ic-badge-light) !important}:host(.ic-badge-warning){background-color:var(--ic-badge-warning) !important}:host(.ic-badge-warning) ic-typography{--ic-typography-color:var(--ic-badge-warning-text)}:host(.ic-badge-warning) ::slotted(*){fill:var(--ic-badge-warning-icon)}:host(.ic-badge-error){background-color:var(--ic-badge-error) !important}:host(.ic-badge-success){background-color:var(--ic-badge-success) !important}:host(.ic-badge-small){height:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host(.ic-badge-large){height:calc(var(--ic-space-md) + var(--ic-space-xxs));min-width:calc(var(--ic-space-md) + var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-medium){height:var(--ic-space-xs);width:var(--ic-space-xs);min-width:var(--ic-space-xs)}:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large){height:var(--ic-space-sm);width:var(--ic-space-sm);min-width:var(--ic-space-sm)}:host ::slotted(*){fill:var(--ic-badge-icon)}:host(.ic-badge-foreground-dark) ::slotted(*){fill:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ::slotted(*){fill:white}:host(.ic-badge-foreground-dark) ic-typography{--ic-typography-color:var(--ic-color-text-primary-light)}:host(.ic-badge-foreground-light) ic-typography{--ic-typography-color:var(--ic-color-primary-text-dark)}:host(.ic-badge-text) ic-typography{align-self:center;padding:0 calc((var(--ic-space-xs) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-text.ic-badge-small) ic-typography{padding:0 0.2132rem}:host(.ic-badge-text.ic-badge-large) ic-typography{padding:0 calc((var(--ic-space-sm) + var(--ic-space-1px)) / 2)\n    var(--ic-space-1px)}:host(.ic-badge-icon) ::slotted(svg){width:var(--ic-space-sm);height:var(--ic-space-sm);padding:var(--ic-space-xxxs)}:host(.ic-badge-icon.ic-badge-small) ::slotted(svg){width:var(--ic-space-xs);height:var(--ic-space-xs)}:host(.ic-badge-icon.ic-badge-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(.ic-badge-far){top:calc(-1 * var(--ic-space-xs));right:calc(-1 * var(--ic-space-xs))}:host(.ic-badge-far.ic-badge-small),:host(.ic-badge-dot.ic-badge-far.ic-badge-large){top:calc(-1 * var(--ic-space-xxs));right:calc(-1 * var(--ic-space-xxs))}:host(.ic-badge-dot.ic-badge-far),:host(.ic-badge-dot.ic-badge-far.ic-badge-small){top:calc(-1 * var(--ic-space-xxxs));right:calc(-1 * var(--ic-space-xxxs))}:host(.ic-badge-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(.ic-badge-dot.ic-badge-near){top:calc(-1 * var(--ic-space-1px));right:calc(-1 * var(--ic-space-1px))}:host(.ic-badge-inline){position:static}:host(.ic-badge-hide){visibility:hidden !important;transition:visibility var(--ic-transition-duration-slow)}.sr-only{position:absolute;left:-9999px}@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) {

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

@@ -1 +1 @@
-{"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","getThemeForegroundColor","isPropDefined","onComponentRequiredPropUndefined","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(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-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: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-neutral) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-light-text);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-light-icon);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-primary-text-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-primary-text-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-primary-text-dark);\n}\n\n:host(.ic-badge-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(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-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(.ic-badge-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(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-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(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\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 { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getThemeForegroundColor,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\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  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label 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 = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The 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  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getThemeForegroundColor(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-badge.entry.cjs.js","mappings":"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","names":["convertToRGBA","getThemeForegroundColor","isPropDefined","onComponentRequiredPropUndefined","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(.ic-badge-show) {\n    animation: expand var(--ic-transition-duration-slow);\n  }\n\n  :host(.ic-badge-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: fit-content;\n  border-radius: calc(2 * var(--ic-space-xxl));\n  position: absolute;\n}\n\n:host ic-typography {\n  --ic-typography-color: var(--ic-badge-text);\n}\n\n:host(.ic-badge-neutral) {\n  background-color: var(--ic-badge-neutral) !important;\n}\n\n:host(.ic-badge-light) ic-typography {\n  --ic-typography-color: var(--ic-badge-light-text);\n}\n\n:host(.ic-badge-light) ::slotted(*) {\n  fill: var(--ic-badge-light-icon);\n}\n\n:host(.ic-badge-info) {\n  background-color: var(--ic-badge-info) !important;\n}\n\n:host(.ic-badge-light) {\n  background-color: var(--ic-badge-light) !important;\n}\n\n:host(.ic-badge-warning) {\n  background-color: var(--ic-badge-warning) !important;\n}\n\n:host(.ic-badge-warning) ic-typography {\n  --ic-typography-color: var(--ic-badge-warning-text);\n}\n\n:host(.ic-badge-warning) ::slotted(*) {\n  fill: var(--ic-badge-warning-icon);\n}\n\n:host(.ic-badge-error) {\n  background-color: var(--ic-badge-error) !important;\n}\n\n:host(.ic-badge-success) {\n  background-color: var(--ic-badge-success) !important;\n}\n\n:host(.ic-badge-small) {\n  height: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-medium) {\n  height: var(--ic-space-xs);\n  width: var(--ic-space-xs);\n  min-width: var(--ic-space-xs);\n}\n\n:host(.ic-badge-dot.ic-badge-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(.ic-badge-dot.ic-badge-large) {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-sm);\n  min-width: var(--ic-space-sm);\n}\n\n:host ::slotted(*) {\n  fill: var(--ic-badge-icon);\n}\n\n:host(.ic-badge-foreground-dark) ::slotted(*) {\n  fill: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ::slotted(*) {\n  fill: white;\n}\n\n:host(.ic-badge-foreground-dark) ic-typography {\n  --ic-typography-color: var(--ic-color-text-primary-light);\n}\n\n:host(.ic-badge-foreground-light) ic-typography {\n  --ic-typography-color: var(--ic-color-primary-text-dark);\n}\n\n:host(.ic-badge-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(.ic-badge-text.ic-badge-small) ic-typography {\n  padding: 0 0.2132rem;\n}\n\n:host(.ic-badge-text.ic-badge-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(.ic-badge-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(.ic-badge-icon.ic-badge-small) ::slotted(svg) {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n:host(.ic-badge-icon.ic-badge-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(.ic-badge-far) {\n  top: calc(-1 * var(--ic-space-xs));\n  right: calc(-1 * var(--ic-space-xs));\n}\n\n:host(.ic-badge-far.ic-badge-small),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-large) {\n  top: calc(-1 * var(--ic-space-xxs));\n  right: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-badge-dot.ic-badge-far),\n:host(.ic-badge-dot.ic-badge-far.ic-badge-small) {\n  top: calc(-1 * var(--ic-space-xxxs));\n  right: calc(-1 * var(--ic-space-xxxs));\n}\n\n:host(.ic-badge-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(.ic-badge-dot.ic-badge-near) {\n  top: calc(-1 * var(--ic-space-1px));\n  right: calc(-1 * var(--ic-space-1px));\n}\n\n:host(.ic-badge-inline) {\n  position: static;\n}\n\n:host(.ic-badge-hide) {\n  visibility: hidden !important;\n  transition: visibility var(--ic-transition-duration-slow);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\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 { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\nimport {\n  IcBadgePositions,\n  IcBadgeTypes,\n  IcBadgeVariants,\n} from \"./ic-badge.types\";\nimport {\n  IcSizes,\n  IcThemeForeground,\n  IcColor,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  convertToRGBA,\n  getThemeForegroundColor,\n  isPropDefined,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot badge-icon - Icon will be rendered inside the badge if type is set to icon.\n */\n@Component({\n  tag: \"ic-badge\",\n  styleUrl: \"ic-badge.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Badge {\n  private ariaLabel: string = null;\n  private foregroundColour: IcThemeForeground;\n  private parentAriaLabel: string;\n\n  @Element() el: HTMLIcBadgeElement;\n\n  /**\n   * The accessible label of the badge component to provide context for screen reader users.\n   */\n  @Prop() accessibleLabel?: string;\n\n  @Watch(\"accessibleLabel\")\n  accessibleLabelHandler(): void {\n    this.setAccessibleLabel();\n  }\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  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n  }\n\n  /**\n   * The maximum number shown on the badge appended with a +.\n   * This will only be displayed if type=\"text\" and label 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 = \"medium\";\n\n  /**\n   * The text displayed in the badge. This will only be displayed if type=\"text\".\n   */\n  @Prop() label?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The 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  @Watch(\"variant\")\n  variantHandler(): void {\n    if (this.variant === \"custom\") {\n      this.setBadgeColour();\n    }\n  }\n\n  /**\n   * If `true`, the badge will be displayed.\n   */\n  @Prop() visible: boolean = true;\n\n  @Watch(\"visible\")\n  visibleHandler(): void {\n    this.setAccessibleLabel();\n  }\n\n  componentWillLoad(): void {\n    this.variant === \"custom\" && this.setBadgeColour();\n\n    const ariaLabel = this.el.parentElement?.ariaLabel;\n    if (ariaLabel) this.parentAriaLabel = ariaLabel;\n    this.setAccessibleLabel();\n  }\n\n  componentDidLoad(): void {\n    this.type === \"text\" &&\n      onComponentRequiredPropUndefined(\n        [{ prop: this.label, propName: \"label\" }],\n        \"Badge\"\n      );\n  }\n\n  private setBadgeColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.el.style.backgroundColor = `rgba(${r}, ${g}, ${b}, ${a})`;\n      this.foregroundColour = getThemeForegroundColor(\n        (r * 299 + g * 587 + b * 114) / 1000\n      );\n    }\n  };\n\n  private getLabel = () =>\n    this.maxNumber && Number(this.label) > this.maxNumber\n      ? `${this.maxNumber}+`\n      : this.label;\n\n  // Set aria-label on badge and / or parent element\n  // Aria-describedby seems to not work, probably due to shadow DOM\n  private setAccessibleLabel = () => {\n    const parentEl = this.el.parentElement;\n    const defaultAriaLabel = this.isAccessibleLabelDefined()\n      ? this.accessibleLabel\n      : this.label || \"with badge being displayed\";\n\n    if (parentEl) {\n      const { tagName } = parentEl;\n      if (\n        tagName !== \"IC-CARD\" &&\n        (tagName !== \"IC-TAB\" || (tagName === \"IC-TAB\" && this.parentAriaLabel))\n      ) {\n        const ariaLabelPrefix = this.parentAriaLabel\n          ? `${this.parentAriaLabel} ,`\n          : \"\";\n        parentEl.ariaLabel = this.visible\n          ? `${ariaLabelPrefix} ${defaultAriaLabel}`\n          : undefined;\n      } else {\n        this.ariaLabel = `, ${defaultAriaLabel}`;\n      }\n    }\n  };\n\n  private isAccessibleLabelDefined = () =>\n    isPropDefined(this.accessibleLabel) && this.accessibleLabel !== null;\n\n  render() {\n    const {\n      ariaLabel,\n      el,\n      foregroundColour,\n      getLabel,\n      position,\n      size,\n      label,\n      type,\n      variant,\n      visible,\n      theme,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-badge-${position}`]: true,\n          [`ic-badge-${size}`]: true,\n          [`ic-badge-${variant}`]: true,\n          [`ic-badge-${type}`]: true,\n          [`ic-badge-foreground-${foregroundColour}`]:\n            foregroundColour !== null && variant === \"custom\",\n          [`${visible ? \"ic-badge-show\" : \"ic-badge-hide\"}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        id={el.id || null}\n        aria-label={ariaLabel}\n        role=\"status\"\n      >\n        {type === \"icon\" && <slot name=\"badge-icon\"></slot>}\n        {type === \"text\" && label && (\n          <ic-typography variant={size === \"small\" ? \"badge-small\" : \"badge\"}>\n            {getLabel()}\n          </ic-typography>\n        )}\n        {type === \"dot\" && <span class=\"sr-only\">badge</span>}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-f1cf5156.js');
+const helpers = require('./helpers-69219f14.js');
 
 const icBreadcrumbGroupCss = ":host{display:block}:host ol{display:flex;list-style-type:none;align-items:center;flex-wrap:wrap;padding:0;margin:0}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb){display:none}:host(.ic-breadcrumb-group-back) ol ::slotted(ic-breadcrumb.show){display:flex}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.hide){display:none;opacity:0;visibility:hidden}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.visuallyhidden){display:block;opacity:0;transition:all var(--ic-easing-transition-slow)}:host(.ic-breadcrumb-group-collapsed) ol ::slotted(ic-breadcrumb.fade){opacity:1}";
 

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
 const chevronIcon = require('./chevron-icon-3bf07531.js');
-const helpers = require('./helpers-f1cf5156.js');
+const helpers = require('./helpers-69219f14.js');
 
 const backIcon = `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z" fill="currentColor"/>
 </svg>
 `;
 
-const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron-monochrome)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-page-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-page-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-hyperlink);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
+const icBreadcrumbCss = ":host{display:block;margin:var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0}:host .breadcrumb{display:flex;align-items:center;white-space:nowrap;gap:var(--ic-space-xs);min-height:var(--ic-space-lg)}:host .chevron{width:var(--ic-space-lg);height:var(--ic-space-lg)}:host .chevron svg{color:var(--ic-breadcrumb-icon-chevron)}:host(.ic-breadcrumb-monochrome) .chevron svg{color:var(--ic-breadcrumb-icon-chevron-monochrome)}:host(:first-child) .chevron{display:none}.back-icon svg{color:var(--ic-breadcrumb-page-icon)}:host(.ic-breadcrumb-monochrome) .back-icon svg{color:var(--ic-breadcrumb-page-icon-monochrome)}:host(.ic-breadcrumb-back){display:flex;align-items:center}:host(.ic-breadcrumb-back) .chevron{display:none}ic-link{--breadcrumb-link-display:inline-flex;--breadcrumb-link-align-items:center;--breadcrumb-link-gap:var(--ic-space-xs)}:host([aria-current=\"page\"]) .current-page-container{display:flex;align-items:center;gap:var(--ic-space-xs);color:var(--ic-breadcrumb-text)}:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container{color:var(--ic-breadcrumb-text-monochrome)}:host(.collapsed-breadcrumb-wrapper){margin-right:var(--ic-space-xs) !important;display:flex;align-items:center;gap:var(--ic-space-xs)}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb){border:none;background-color:transparent;color:var(--ic-color-hyperlink-default);text-decoration:underline;font-weight:var(--ic-font-weight-bold);cursor:pointer}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){outline:var(--ic-hc-focus-outline);border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}.hide,:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide){display:none}@media (forced-colors: active){.back-icon svg{color:currentcolor}}@supports (text-underline-offset: 25%){ic-link{--breadcrumb-link-display:flex}:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:25%;border-bottom:0 !important;margin-bottom:0 !important}}";
 
 const Breadcrumb = class {
     constructor(hostRef) {

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

@@ -1 +1 @@
-{"file":"ic-breadcrumb.entry.cjs.js","mappings":"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","names":["isPropDefined","h","isSlotUsed","Host","chevronIcon"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: var(--ic-space-xs);\n  min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n  color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n  color: var(--ic-breadcrumb-icon-chevron-monochrome);\n}\n\n:host(:first-child) .chevron {\n  display: none;\n}\n\n.back-icon svg {\n  color: var(--ic-breadcrumb-page-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n  color: var(--ic-breadcrumb-page-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n  display: flex;\n  align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n  display: none;\n}\n\nic-link {\n  --breadcrumb-link-display: inline-flex;\n  --breadcrumb-link-align-items: center;\n  --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n  color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n  margin-right: var(--ic-space-xs) !important;\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n  border: none;\n  background-color: transparent;\n  color: var(--ic-hyperlink);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n  outline: var(--ic-hc-focus-outline);\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .back-icon svg {\n    color: currentcolor;\n  }\n}\n\n@supports (text-underline-offset: 25%) {\n  ic-link {\n    --breadcrumb-link-display: flex;\n  }\n\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Breadcrumb {\n  @Element() el: HTMLIcBreadcrumbElement;\n\n  /**\n   * If `true`, aria-current will be set on the breadcrumb.\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * The URL that the breadcrumb link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The title of the breadcrumb.\n   */\n  @Prop() pageTitle!: string;\n\n  /**\n   * @internal If `true`, back icon will be displayed.\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  /**\n   * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  /**\n   * Sets focus on the breadcrumb.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n      this.el.shadowRoot.querySelector(\"ic-link\").focus();\n    }\n  }\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        theme={this.theme}\n        monochrome={this.monochrome}\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    const currentPage = \"current-page\";\n    if (icLink) {\n      icLink.classList.remove(currentPage);\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(currentPage);\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", currentPage);\n        }\n      }\n    }\n  };\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n    const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-back\": this.showBackIcon,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          \"ic-breadcrumb-monochrome\": this.monochrome,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-breadcrumb.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,eAAe,GAAG,quEAAquE;;MCkBhvE,UAAU;;;QA+Cb,4BAAuB,GAAG,CAChC,OAAgB,EAChB,SAAiB,EACjB,aAAqB,EACrB,IAAY;YAEZ,MAAM,YAAY,GAChB,SAAS,KAAK,IAAI,IAAIA,qBAAa,CAAC,SAAS,CAAC,IAAI,SAAS,KAAK,EAAE,CAAC;YAErE,IAAI,OAAO,IAAI,YAAY,EAAE;gBAC3B,QACEC,kBACE,KAAK,EAAE;wBACL,wBAAwB,EAAE,OAAO;qBAClC,IAEAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAID,kBAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACL,EACP;aACH;YAED,QACEA,qBACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,iBAAiB,sBACL,IAAI,CAAC,YAAY,IAAI,aAAa,IAAI,aAAa,IAEpE,IAAI,CAAC,YAAY,KAChBA,iBAAK,KAAK,EAAC,WAAW,EAAC,SAAS,EAAE,QAAQ,GAAQ,CACnD,EACAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,IAAID,kBAAM,IAAI,EAAC,MAAM,GAAQ,EACxD,SAAS,CACF,EACV;SACH,CAAC;QAEM,+BAA0B,GAAG;YACnC,MAAM,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;YAChD,MAAM,WAAW,GAAG,cAAc,CAAC;YACnC,IAAI,MAAM,EAAE;gBACV,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;gBACrC,IAAI,IAAI,CAAC,OAAO,EAAE;oBAChB,MAAM,mBAAmB,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC;oBACnE,IAAI,CAAC,mBAAmB,EAAE;wBACxB,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,EAAE,WAAW,CAAC,CAAC;qBACtD;iBACF;aACF;SACF,CAAC;uBA5F0B,KAAK;;0BAUF,KAAK;;4BAUa,KAAK;qBAKxB,SAAS;;IAEvC,mBAAmB;QACjB,IAAI,CAAC,0BAA0B,EAAE,CAAC;KACnC;;;;IAMD,MAAM,QAAQ;QACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAC/C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,KAAK,EAAE,CAAC;SACrD;KACF;IAuDD,MAAM;QACJ,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;QAC1C,MAAM,aAAa,GAAG,GACpB,SAAS,IAAI,SAAS,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CACvD,cAAc,CAAC;QAEf,MAAM,YAAY,GAChB,SAAS,KAAK,IAAI,IAAID,qBAAa,CAAC,SAAS,CAAC,IAAI,SAAS,KAAK,EAAE,CAAC;QACrE,MAAM,OAAO,GAAG,IAAI,KAAK,IAAI,IAAIA,qBAAa,CAAC,IAAI,CAAC,IAAI,IAAI,KAAK,EAAE,CAAC;QAEpE,QACEC,QAACE,UAAI,IACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,CAAC,YAAY;gBACvC,CAAC,YAAY,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,KAAK,SAAS;gBACpD,0BAA0B,EAAE,IAAI,CAAC,UAAU;aAC5C,kBACa,OAAO,IAAI,MAAM,EAC/B,IAAI,EAAC,UAAU,IAEfF,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,SAAS,EAAEG,mBAAW,EAAE,KAAK,EAAC,SAAS,iBAAa,MAAM,GAAG,EAClE,IAAI,CAAC,YAAY,IAAI,aAAa,KACjCH,kBACE,EAAE,EAAE,aAAa,EACjB,KAAK,EAAC,MAAM,IACZ,WAAW,SAAS,EAAE,CAAQ,CACjC,EACA,YAAY,IAAI,OAAO,IACtB,IAAI,CAAC,uBAAuB,CAC1B,OAAO,EACP,SAAS,EACT,aAAa,EACb,IAAI,CACL,KAEDA,qBAAQ,CACT,CACG,CACD,EACP;KACH;;;;;;;;","names":["isPropDefined","h","isSlotUsed","Host","chevronIcon"],"sources":["src/components/ic-breadcrumb/ic-breadcrumb.css?tag=ic-breadcrumb&encapsulation=shadow","src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"sourcesContent":[":host {\n  display: block;\n  margin: var(--ic-space-xs) var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n:host .breadcrumb {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  gap: var(--ic-space-xs);\n  min-height: var(--ic-space-lg);\n}\n\n:host .chevron {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n:host .chevron svg {\n  color: var(--ic-breadcrumb-icon-chevron);\n}\n\n:host(.ic-breadcrumb-monochrome) .chevron svg {\n  color: var(--ic-breadcrumb-icon-chevron-monochrome);\n}\n\n:host(:first-child) .chevron {\n  display: none;\n}\n\n.back-icon svg {\n  color: var(--ic-breadcrumb-page-icon);\n}\n\n:host(.ic-breadcrumb-monochrome) .back-icon svg {\n  color: var(--ic-breadcrumb-page-icon-monochrome);\n}\n\n:host(.ic-breadcrumb-back) {\n  display: flex;\n  align-items: center;\n}\n\n:host(.ic-breadcrumb-back) .chevron {\n  display: none;\n}\n\nic-link {\n  --breadcrumb-link-display: inline-flex;\n  --breadcrumb-link-align-items: center;\n  --breadcrumb-link-gap: var(--ic-space-xs);\n}\n\n:host([aria-current=\"page\"]) .current-page-container {\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  color: var(--ic-breadcrumb-text);\n}\n\n:host([aria-current=\"page\"].ic-breadcrumb-monochrome) .current-page-container {\n  color: var(--ic-breadcrumb-text-monochrome);\n}\n\n:host(.collapsed-breadcrumb-wrapper) {\n  margin-right: var(--ic-space-xs) !important;\n  display: flex;\n  align-items: center;\n  gap: var(--ic-space-xs);\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb) {\n  border: none;\n  background-color: transparent;\n  color: var(--ic-color-hyperlink-default);\n  text-decoration: underline;\n  font-weight: var(--ic-font-weight-bold);\n  cursor: pointer;\n}\n\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n  outline: var(--ic-hc-focus-outline);\n  border-bottom: 0.25rem solid !important;\n  margin-bottom: -0.25rem !important;\n  text-decoration: none;\n}\n\n.hide,\n:host(.collapsed-breadcrumb-wrapper) ::slotted(.hide) {\n  display: none;\n}\n\n@media (forced-colors: active) {\n  .back-icon svg {\n    color: currentcolor;\n  }\n}\n\n@supports (text-underline-offset: 25%) {\n  ic-link {\n    --breadcrumb-link-display: flex;\n  }\n\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:hover),\n  :host(.collapsed-breadcrumb-wrapper) ::slotted(.collapsed-breadcrumb:focus) {\n    text-decoration-line: underline;\n    text-decoration-thickness: 25%;\n    text-underline-offset: 25%;\n    border-bottom: 0 !important;\n    margin-bottom: 0 !important;\n  }\n}\n","import { Component, Host, Prop, h, Element, Method } from \"@stencil/core\";\nimport { IcBreadcrumbDefault } from \"./ic-breadcrumb.types\";\n\nimport chevronIcon from \"../../assets/chevron-icon.svg\";\nimport backIcon from \"../../assets/back-icon.svg\";\nimport { isPropDefined, isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n */\n@Component({\n  tag: \"ic-breadcrumb\",\n  styleUrl: \"ic-breadcrumb.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Breadcrumb {\n  @Element() el: HTMLIcBreadcrumbElement;\n\n  /**\n   * If `true`, aria-current will be set on the breadcrumb.\n   */\n  @Prop() current?: boolean = false;\n\n  /**\n   * The URL that the breadcrumb link points to.\n   */\n  @Prop() href?: string;\n\n  /**\n   * @internal If `true`, the breadcrumb will display as black in the light theme, and white in the dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The title of the breadcrumb.\n   */\n  @Prop() pageTitle!: string;\n\n  /**\n   * @internal If `true`, back icon will be displayed.\n   */\n  @Prop({ reflect: true }) showBackIcon: boolean = false;\n\n  /**\n   * @internal Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  componentWillRender(): void {\n    this.setSlottedCurrentPageClass();\n  }\n\n  /**\n   * Sets focus on the breadcrumb.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"ic-link\")) {\n      this.el.shadowRoot.querySelector(\"ic-link\").focus();\n    }\n  }\n\n  private renderDefaultBreadcrumb = (\n    current: boolean,\n    pageTitle: string,\n    describedById: string,\n    href: string\n  ): IcBreadcrumbDefault => {\n    const hasPageTitle =\n      pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n\n    if (current && hasPageTitle) {\n      return (\n        <span\n          class={{\n            \"current-page-container\": current,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n          {pageTitle}\n        </span>\n      );\n    }\n\n    return (\n      <ic-link\n        theme={this.theme}\n        monochrome={this.monochrome}\n        href={href}\n        class=\"breadcrumb-link\"\n        aria-describedby={this.showBackIcon && describedById && describedById}\n      >\n        {this.showBackIcon && (\n          <div class=\"back-icon\" innerHTML={backIcon}></div>\n        )}\n        {isSlotUsed(this.el, \"icon\") && <slot name=\"icon\"></slot>}\n        {pageTitle}\n      </ic-link>\n    );\n  };\n\n  private setSlottedCurrentPageClass = () => {\n    const icLink = this.el.querySelector(\"ic-link\");\n    const currentPage = \"current-page\";\n    if (icLink) {\n      icLink.classList.remove(currentPage);\n      if (this.current) {\n        const hasCurrentPageClass = icLink.classList.contains(currentPage);\n        if (!hasCurrentPageClass) {\n          icLink.classList.add(\"breadcrumb-link\", currentPage);\n        }\n      }\n    }\n  };\n\n  render() {\n    const { current, href, pageTitle } = this;\n    const describedById = `${\n      pageTitle && pageTitle.toLowerCase().replace(\" \", \"-\")\n    }-describedby`;\n\n    const hasPageTitle =\n      pageTitle !== null && isPropDefined(pageTitle) && pageTitle !== \"\";\n    const hasHref = href !== null && isPropDefined(href) && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          \"ic-breadcrumb-back\": this.showBackIcon,\n          [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n          \"ic-breadcrumb-monochrome\": this.monochrome,\n        }}\n        aria-current={current && \"page\"}\n        role=\"listitem\"\n      >\n        <div class=\"breadcrumb\">\n          <span innerHTML={chevronIcon} class=\"chevron\" aria-hidden=\"true\" />\n          {this.showBackIcon && describedById && (\n            <span\n              id={describedById}\n              class=\"hide\"\n            >{`Back to ${pageTitle}`}</span>\n          )}\n          {hasPageTitle && hasHref ? (\n            this.renderDefaultBreadcrumb(\n              current,\n              pageTitle,\n              describedById,\n              href\n            )\n          ) : (\n            <slot />\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f982899d.js');
-const helpers = require('./helpers-f1cf5156.js');
+const helpers = require('./helpers-69219f14.js');
 const popper = require('./popper-31badbf8.js');
 
 const arrowDropdown = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M7 9.5L12 14.5L17 9.5H7Z" fill="currentColor"/>
 </svg>`;
 
-const icButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-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,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-dark) .button,:host(.ic-button-dark) ::slotted(a){--button-default:var(--ic-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(.ic-button-light) .button,:host(.ic-button-light) ::slotted(a){--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(.white-background) .button,:host(.white-background) ::slotted(a){--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n    --ic-action-default-bg-active-no-alpha\n  );background-color:var(--ic-architectural-white)}:host(.white-background.ic-button-dark) .button,:host(.white-background.ic-button-dark) ::slotted(a){--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}:host(.ic-button-variant-primary.ic-button-light) .button,:host(.ic-button-variant-primary.ic-button-light) ::slotted(a){color:var(--ic-color-primary-text-light);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-active)}:host(.ic-button-variant-primary.ic-button-dark) .button,:host(.ic-button-variant-primary.ic-button-dark) ::slotted(a){color:var(--ic-color-primary-text-dark);--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-active)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default)}:host(.ic-button-variant-primary) .button:hover{background-color:var(--button-default-hover)}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active{background-color:var(--button-default-active)}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-secondary) ::slotted(a:active),:host(.ic-button-variant-secondary.ic-button-loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a){color:var(--button-default)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-500)}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.ic-button-variant-destructive) .button:hover{background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-active)}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover,:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-icon.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon.ic-button-disabled) .button,:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-primary) .button:hover,:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--button-default-hover)}:host(.ic-button-variant-icon-primary) .button:active,:host(.ic-button-variant-icon-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-loading) .button{background:var(--button-default-active)}:host(.ic-button-variant-icon-primary.ic-button-loading) .button ic-loading-indicator{--inner-color:var(--ic-architectural-white)}:host(.ic-button-variant-icon-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:var(--ic-architectural-200)}:host(.ic-button-variant-icon-primary.ic-button-light) .button,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a){color:var(--ic-color-primary-text-light)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:hover){background:var(--ic-action-light-hover)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:active,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) ::slotted(a){background:var(--ic-action-light-active)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:hover){background:var(--ic-action-dark-hover)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:active,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) ::slotted(a){background:var(--ic-action-dark-active)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-secondary) .button:active,:host(.ic-button-variant-icon-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:active){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-icon-destructive) .button:active,:host(.ic-button-variant-icon-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-active)}:host(.ic-button-variant-icon-destructive.ic-button-loading) .button ic-loading-indicator{--inner-color:var(--ic-architectural-white)}:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:active){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-full-width),:host(.ic-button-full-width) .button,:host(.ic-button-full-width) ::slotted(a){width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(.white-background) ::slotted(a){background-color:var(--ic-architectural-white) !important}:host(.ic-button-variant-primary) ::slotted(a){background-color:var(--button-default) !important}:host(.ic-button-variant-primary) ::slotted(a:hover){background-color:var(--button-default-hover) !important}:host(.ic-button-variant-primary) ::slotted(a:active){background-color:var(--button-default-active) !important}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200) !important}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600) !important}:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default) !important}:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important;border-color:var(--button-default-hover) !important}:host(.ic-button-variant-secondary) ::slotted(a:active){border-color:var(--button-default-active) !important;background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300) !important;background:none !important}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500) !important}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important}:host(.ic-button-variant-tertiary) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-tertiary) ::slotted(a:active:focus),:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:active){background:none !important}:host(.ic-button-variant-destructive) ::slotted(a){background-color:var(--ic-action-destructive) !important}:host(.ic-button-variant-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover) !important}:host(.ic-button-variant-destructive) ::slotted(a:active){background-color:var(--ic-action-destructive-active) !important}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xs) !important}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
+const icButtonCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block;position:relative;--button-default:var(--ic-action-default);--button-default-hover:var(--ic-action-default-hover);--button-default-active:var(--ic-action-default-pressed);--button-default-background-hover:var(--ic-action-default-bg-hover);--button-default-background-active:var(--ic-action-default-bg-active);--icon-width:100%;--icon-height:100%}.button,::slotted(a){font-family:var(--ic-font-body-family);text-decoration:none;font-weight:600;font-size:0.875rem;transition:var(--ic-easing-transition-fast);border-radius:var(--ic-border-radius);min-width:var(--min-width, 6.25rem);display:inline-flex;flex-direction:row;justify-content:center;align-items:center;background:none;border:none;box-sizing:border-box;white-space:nowrap;vertical-align:middle}:host(.with-badge) .button{border-radius:0.2188rem}.button:hover,::slotted(a:hover){cursor:pointer}.button:focus,::slotted(a:focus){box-shadow:var(--ic-border-focus)}.button:focus-visible,::slotted(a:focus-visible){outline:var(--ic-hc-focus-outline)}:host(.ic-button-dark) .button,:host(.ic-button-dark) ::slotted(a){--button-default:var(--ic-color-border-neutral-black);--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-pressed);--button-default-background-hover:var(--ic-action-dark-bg-hover);--button-default-background-active:var(--ic-action-dark-bg-pressed)}:host(.ic-button-light) .button,:host(.ic-button-light) ::slotted(a){--button-default:var(--ic-color-border-neutral-white);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-pressed);--button-default-background-hover:var(--ic-action-light-bg-hover);--button-default-background-active:var(--ic-action-light-bg-pressed)}:host(.white-background) .button,:host(.white-background) ::slotted(a){--button-default-background-hover:var(--ic-action-default-bg-hover-no-alpha);--button-default-background-active:var(\n    --ic-action-default-bg-active-no-alpha\n  );background-color:var(--ic-architectural-white)}:host(.white-background.ic-button-dark) .button,:host(.white-background.ic-button-dark) ::slotted(a){--button-default-background-hover:var(--ic-action-dark-bg-hover-no-alpha);--button-default-background-active:var(--ic-action-dark-bg-active-no-alpha)}:host(.ic-button-variant-primary.ic-button-light) .button,:host(.ic-button-variant-primary.ic-button-light) ::slotted(a){color:var(--ic-color-text-primary-light);--button-default-hover:var(--ic-action-light-hover);--button-default-active:var(--ic-action-light-pressed)}:host(.ic-button-variant-primary.ic-button-dark) .button,:host(.ic-button-variant-primary.ic-button-dark) ::slotted(a){color:var(--ic-color-text-primary-dark);--button-default-hover:var(--ic-action-dark-hover);--button-default-active:var(--ic-action-dark-pressed)}:host(.ic-button-disabled),:host(.ic-button-disabled) .button,:host(.ic-button-disabled) ::slotted(a),:host(.ic-button-loading),:host(.ic-button-loading) .button{pointer-events:none}:host(.top-icon) .button{flex-direction:column;--height:fit-content}:host(.top-icon) .button .icon-container{margin-right:0}:host(.ic-button-variant-primary) .button,:host(.ic-button-variant-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default)}:host(.ic-button-variant-primary) .button:hover{background-color:var(--button-default-hover)}:host(.ic-button-variant-primary.ic-button-loading) .button,:host(.ic-button-variant-primary) .button:active{background-color:var(--button-default-active)}:host(.ic-button-variant-primary.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600);color:var(--ic-architectural-500)}:host(.ic-button-variant-secondary) .button,:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default)}:host(.ic-button-variant-secondary) .button:hover,:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-secondary) .button:active,:host(.ic-button-variant-secondary) ::slotted(a:active){border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-secondary.ic-button-loading) .button{border-color:var(--button-default);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-secondary.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-tertiary) .button,:host(.ic-button-variant-tertiary) ::slotted(a){color:var(--button-default)}:host(.ic-button-variant-tertiary) .button:hover,:host(.ic-button-variant-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-tertiary) .button:active,:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-500)}:host(.ic-button-variant-destructive) .button,:host(.ic-button-variant-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);text-transform:uppercase}:host(.ic-button-variant-destructive) .button:hover{background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-destructive) .button:active,:host(.ic-button-variant-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-pressed)}:host(.ic-button-variant-destructive.ic-button-disabled) .button,:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-variant-icon) .button,:host(.ic-button-variant-icon) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon) .button:hover,:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon) .button:active:not(:focus),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-icon.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon.ic-button-disabled) .button,:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-primary) .button,:host(.ic-button-variant-icon-primary) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-primary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-primary) .button:hover,:host(.ic-button-variant-icon-primary) ::slotted(a:hover){background-color:var(--button-default-hover)}:host(.ic-button-variant-icon-primary) .button:active,:host(.ic-button-variant-icon-primary) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-loading) .button{background:var(--button-default-active)}:host(.ic-button-variant-icon-primary.ic-button-disabled) .button,:host(.ic-button-variant-icon-primary.ic-button-disabled) ::slotted(a){color:var(--ic-architectural-300);background:var(--ic-architectural-200)}:host(.ic-button-variant-icon-primary.ic-button-light) .button,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a){color:var(--ic-color-text-primary-light)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:hover){background:var(--ic-action-light-hover)}:host(.ic-button-variant-icon-primary.ic-button-light) .button:active,:host(.ic-button-variant-icon-primary.ic-button-light) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-light.ic-button-loading) ::slotted(a){background:var(--ic-action-light-pressed)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:hover,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:hover){background:var(--ic-action-dark-hover)}:host(.ic-button-variant-icon-primary.ic-button-dark) .button:active,:host(.ic-button-variant-icon-primary.ic-button-dark) ::slotted(a:active),:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) .button,:host(.ic-button-variant-icon-primary.ic-button-dark.ic-button-loading) ::slotted(a){background:var(--ic-action-dark-pressed)}:host(.ic-button-variant-icon-secondary) .button,:host(.ic-button-variant-icon-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default);color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-secondary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-secondary) .button:hover,:host(.ic-button-variant-icon-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover);border-color:var(--button-default-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-secondary) .button:active,:host(.ic-button-variant-icon-secondary) ::slotted(a:active),:host(.ic-button-variant-icon-secondary.ic-button-loading) .button{border-color:var(--button-default-active);background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300);color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500);color:var(--ic-architectural-500)}:host(.ic-button-variant-icon-tertiary) .button,:host(.ic-button-variant-icon-tertiary) ::slotted(a){color:var(--button-default);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-tertiary) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-tertiary) .button:hover,:host(.ic-button-variant-icon-tertiary) ::slotted(a:hover){background-color:var(--button-default-background-hover);color:var(--button-default-hover)}:host(.ic-button-variant-icon-tertiary) .button:active,:host(.ic-button-variant-icon-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon-tertiary.ic-button-loading) .button{background-color:var(--button-default-background-active);color:var(--button-default-active)}:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-tertiary.ic-button-disabled) ::slotted(a:active){color:var(--ic-architectural-300);background:none}:host(.ic-button-variant-icon-destructive) .button,:host(.ic-button-variant-icon-destructive) ::slotted(a){color:var(--ic-color-white-text);background-color:var(--ic-action-destructive);min-width:0;gap:var(--ic-space-xs);margin:var(--ic-space-1px) 0}:host(.ic-button-variant-icon-destructive) .icon-container{width:var(--ic-space-lg) !important;height:var(--ic-space-lg) !important}:host(.ic-button-variant-icon-destructive) .button:hover,:host(.ic-button-variant-icon-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover)}:host(.ic-button-variant-icon-destructive) .button:active,:host(.ic-button-variant-icon-destructive) ::slotted(a:active),:host(.ic-button-variant-icon-destructive.ic-button-loading) .button{background-color:var(--ic-action-destructive-pressed)}:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:hover,:host(.ic-button-variant-icon-destructive.ic-button-disabled) .button:active,:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon-destructive.ic-button-disabled) ::slotted(a:active){background:var(--ic-architectural-200);color:var(--ic-architectural-300)}:host(.ic-button-size-medium) .button{height:var(--height, 2.5rem);padding:var(--ic-space-xs) var(--ic-space-md)}:host(.ic-button-size-small) .button{height:var(--height, var(--ic-space-xl));padding:var(--ic-space-xxs) var(--ic-space-md)}:host(.ic-button-size-large) .button{height:var(--height, var(--ic-space-xxl));padding:var(--ic-space-sm) var(--ic-space-md)}:host(.ic-button-size-medium.ic-button-variant-icon) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-medium.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-medium.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-xl));width:var(--ic-space-xl);padding:0.375rem}:host(.ic-button-size-small.ic-button-variant-icon) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) .button,:host(.ic-button-size-small.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-small.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-small.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-small.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-lg));width:var(--ic-space-lg);padding:var(--ic-space-xxs)}:host(.ic-button-size-large.ic-button-variant-icon) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) .button,:host(.ic-button-size-large.ic-button-variant-icon-secondary) .button,:host(.ic-button-size-large.ic-button-variant-icon-tertiary) .button,:host(.ic-button-size-large.ic-button-variant-icon-destructive) .button,:host(.ic-button-size-large.ic-button-variant-icon-primary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-secondary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-tertiary) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon-destructive) ::slotted(a),:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){height:var(--height, 2.5rem);width:2.5rem;padding:var(--ic-space-xs)}:host(.ic-button-full-width),:host(.ic-button-full-width) .button,:host(.ic-button-full-width) ::slotted(a){width:100%}div.loading-container{position:relative;align-items:center;width:100%}ic-loading-indicator{--outer-color:transparent}ic-loading-indicator.ic-theme-dark.ic-loading-indicator-monochrome{--inner-color:var(--ic-action-light)}@keyframes loading-animation{0%{width:0%;left:0%}25%{width:0%;left:0%;opacity:0}50%{width:100%;left:0%;opacity:1}75%{width:0%;left:100%}100%{width:0%;left:100%;opacity:0}}div.icon-container{box-sizing:border-box;width:var(--ic-space-lg);height:var(--ic-space-lg);display:flex;justify-content:center;align-items:center;margin-right:var(--ic-space-xs)}div.right-icon{margin-right:auto;margin-left:var(--ic-space-xs)}:host(.ic-button-full-width) .right-icon{margin-right:var(--ic-space-xs)}::slotted(:not(ic-badge)){width:var(--icon-width) !important;height:var(--icon-height) !important;fill:currentcolor !important;pointer-events:none}:host(.ic-button-variant-icon) .button .icon-container{margin:0;pointer-events:none}:host(.search-submit-button) ::slotted(svg){--icon-height:1.25rem;--icon-width:1.25rem}:host(.search-submit-button-small) ::slotted(svg){--icon-height:1rem;--icon-width:1rem}:host(.clear-button){margin:0 var(--ic-space-xxs)}:host(.clear-button) .button:focus,:host(.calendar-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:focus{box-shadow:none}:host(.search-submit-button) .button:not(:active):focus{box-shadow:none;background-color:var(--ic-action-default-bg-hover)}:host(.search-submit-button){display:flex;align-items:center;margin:0 var(--ic-space-xxs)}:host(.menu-close-button) ::slotted(svg){--icon-height:0.875rem;--icon-width:0.875rem}:host(.popout-menu-button) .button{height:var(--height);justify-content:left;border-radius:0;white-space:pre-line;text-align:start}:host(.popout-menu-button) div.icon-container{flex:none}:host(.popout-menu-button) .button:focus{box-shadow:var(--ic-border-focus-inset);border-radius:var(--ic-border-radius-inset)}.ic-button-describedby{display:none}:host .ic-tooltip{display:block}:host .arrow-dropdown{margin-top:auto}:host .dropdown-expanded{transform:rotate(180deg);margin-bottom:var(--ic-space-xxxs)}:host(.dropdown-no-icon) .button{padding-right:var(--ic-space-xs)}slot[name=\"router-item\"]::slotted(a){pointer-events:all}::slotted(a){font-size:0.875rem !important;border:none !important;vertical-align:middle !important}:host(.white-background) ::slotted(a){background-color:var(--ic-architectural-white) !important}:host(.ic-button-variant-primary) ::slotted(a){background-color:var(--button-default) !important}:host(.ic-button-variant-primary) ::slotted(a:hover){background-color:var(--button-default-hover) !important}:host(.ic-button-variant-primary) ::slotted(a:active){background-color:var(--button-default-active) !important}:host(.ic-button-variant-primary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-destructive.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-200) !important}:host(.ic-button-variant-primary.ic-button-light.ic-button-disabled) ::slotted(a){background:var(--ic-architectural-600) !important}:host(.ic-button-variant-secondary) ::slotted(a){border:var(--ic-border-width) solid var(--button-default) !important}:host(.ic-button-variant-secondary) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important;border-color:var(--button-default-hover) !important}:host(.ic-button-variant-secondary) ::slotted(a:active){border-color:var(--button-default-active) !important;background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-300) !important;background:none !important}:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-secondary.ic-button-light.ic-button-disabled) ::slotted(a:active),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-tertiary.ic-button-light.ic-button-disabled) ::slotted(a:active){border-color:var(--ic-architectural-500) !important}:host(.ic-button-variant-tertiary) ::slotted(a:hover),:host(.ic-button-variant-icon) ::slotted(a:hover){background-color:var(--button-default-background-hover) !important}:host(.ic-button-variant-tertiary) ::slotted(a:active:not(:focus)),:host(.ic-button-variant-tertiary) ::slotted(a:active:focus),:host(.ic-button-variant-tertiary) ::slotted(a:active),:host(.ic-button-variant-icon) ::slotted(a:active:not(:focus)){background-color:var(--button-default-background-active) !important}:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:hover),:host(.ic-button-variant-icon.ic-button-disabled) ::slotted(a:active){background:none !important}:host(.ic-button-variant-destructive) ::slotted(a){background-color:var(--ic-action-destructive) !important}:host(.ic-button-variant-destructive) ::slotted(a:hover){background-color:var(--ic-action-destructive-hover) !important}:host(.ic-button-variant-destructive) ::slotted(a:active){background-color:var(--ic-action-destructive-pressed) !important}:host(.ic-button-size-medium) ::slotted(a){height:var(--height, 2.5rem) !important;padding:var(--ic-space-xs) var(--ic-space-md) !important}:host(.ic-button-size-small) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:var(--ic-space-xxs) var(--ic-space-md) !important}:host(.ic-button-size-large) ::slotted(a){height:var(--height, var(--ic-space-xxl)) !important;padding:var(--ic-space-sm) var(--ic-space-md) !important}:host(.ic-button-size-medium.ic-button-variant-icon) ::slotted(a){height:var(--height, var(--ic-space-xl)) !important;padding:0.375rem !important}:host(.ic-button-size-small.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xxs) !important}:host(.ic-button-size-large.ic-button-variant-icon) ::slotted(a){padding:var(--ic-space-xs) !important}@media (forced-colors: active){.button,::slotted(a){border:0.125rem solid transparent !important}}:host(.flip) ::slotted(svg){transform:scaleX(-1)}";
 
 var __rest = (undefined && undefined.__rest) || function (s, e) {
     var t = {};
@@ -275,15 +275,14 @@ const Button = class {
             describedby = this.describedById;
         }
         const ButtonContent = () => {
+            const darkAppearance = this.variant.includes("primary") ||
+                this.variant.includes("destructive") ||
+                this.appearance === helpers.IcThemeForegroundEnum.Dark ||
+                this.appearance === helpers.IcThemeForegroundEnum.Light;
             return (index.h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel, "aria-expanded": this.dropdown && `${this.dropdownExpanded}` }, buttonAttrs, inheritedAttributes, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), "aria-describedby": describedby, part: "button" }), this.hasIconSlot("left") && !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "left-icon" }))), this.hasIconSlot("top") &&
                 !this.hasIconSlot("left") &&
                 !this.hasIconSlot("right") &&
-                !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "top-icon" }))), this.loading ? (index.h("div", { class: "loading-container" }, index.h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
-                    this.variant === "destructive" ||
-                    this.appearance === helpers.IcThemeForegroundEnum.Dark ||
-                    this.appearance === helpers.IcThemeForegroundEnum.Light
-                    ? "light"
-                    : "dark" }))) : (index.h("slot", null)), this.hasIconSlot("right") && !this.loading && !this.dropdown && (index.h("div", { class: { "icon-container": true, "right-icon": true } }, index.h("slot", { name: "right-icon" }))), this.dropdown &&
+                !this.loading && (index.h("div", { class: "icon-container" }, index.h("slot", { name: "top-icon" }))), this.loading ? (index.h("div", { class: "loading-container" }, index.h("ic-loading-indicator", { type: "linear", monochrome: darkAppearance, theme: darkAppearance ? "dark" : "light" }))) : (index.h("slot", null)), this.hasIconSlot("right") && !this.loading && !this.dropdown && (index.h("div", { class: { "icon-container": true, "right-icon": true } }, index.h("slot", { name: "right-icon" }))), this.dropdown &&
                 !this.loading &&
                 this.variant !== "icon" &&
                 this.variant !== "destructive" && (index.h("span", { class: {
@@ -318,7 +317,7 @@ const Button = class {
 };
 Button.style = icButtonCss;
 
-const icLoadingIndicatorCss = "/*! 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:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-action-default);--outer-color:var(--ic-architectural-100);--label-color:var(--ic-color-primary-text);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-light){--inner-color:var(--ic-architectural-white);--outer-color:var(--ic-architectural-800);--label-color:var(--ic-architectural-white)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(--compact-step-inner-color, var(--ic-status-info))}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-color-tertiary-text)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-hc-border)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
+const icLoadingIndicatorCss = "/*! 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:block;--linear-border-radius:0.25rem;--inner-color:var(--ic-loading-indicator-inner-color);--outer-color:var(--ic-loading-indicator-outer-color);--label-color:var(--ic-loading-indicator-label-color);--margin:none;--linear-line-height:var(--ic-space-xs)}:host(.ic-loading-indicator-monochrome){--inner-color:var(--ic-loading-indicator-inner-color-monochrome);--outer-color:var(--ic-loading-indicator-outer-color-monochrome);--label-color:var(--ic-loading-indicator-label-color-monochrome)}.ic-loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center}:host([size=\"small\"]){--circular-diameter:2.5rem;--linear-line-height:var(--ic-space-xxs)}:host([size=\"medium\"]){--circular-diameter:5rem}:host([size=\"large\"]){--circular-diameter:7.5rem}:host([size=\"icon\"]){display:inline-block;--margin:var(--ic-space-xxxs);--circular-diameter:1.25rem}:host(.ic-loading-indicator-label){--margin:0 0 var(--ic-space-xs) 0}.ic-loading-label{--ic-typography-color:var(--label-color);margin-left:var(--label-margin-left)}.ic-loading-circular-outer{height:var(--circular-diameter);width:var(--circular-diameter)}.ic-loading-circular-outer.indeterminate{animation:circular-animation 1s linear;animation-iteration-count:infinite}@keyframes circular-animation{100%{transform:rotate(360deg)}}.ic-loading-circular-outer,.ic-loading-linear-outer{margin:var(--margin)}.ic-loading-linear-outer{background-color:var(--outer-color);height:var(--linear-line-height);width:100%;border-radius:var(--linear-border-radius);overflow:hidden}.ic-loading-linear-inner{position:relative;height:100%;background-color:var(--inner-color);border-radius:var(--linear-border-radius)}.indeterminate>.ic-loading-linear-inner{animation:linear-animation 2s infinite}.determinate>.ic-loading-linear-inner{transition:width 0.5s;width:var(--linear-width)}:host(.ic-loading-indicator-full-width){--linear-border-radius:none}@keyframes linear-animation{0%{width:0%;left:-1%}25%{width:0%;left:-1%}50%{width:101%;left:-1%}75%{width:0%;left:101%}100%{width:0%;left:101%}}.ic-loading-circular-svg{position:relative;width:100%;height:100%;transform:rotate(-90deg)}.ic-loading-circular-svg circle{width:100%;height:100%;fill:none;stroke:var(--compact-step-outer-color, var(--outer-color));stroke-width:var(--circular-line-width);stroke-linecap:round}.ic-loading-circular-svg circle:nth-child(2){--circular-indeterminate:calc(\n    (0.25 * var(--stroke-dasharray)) - var(--stroke-dasharray)\n  );stroke-dasharray:var(--stroke-dasharray), var(--stroke-dasharray);stroke-dashoffset:var(--stroke-dashoffset, var(--circular-indeterminate));stroke:var(--compact-step-inner-color, var(--inner-color))}:host(.inner-label) .ic-loading-circular-inner{height:100%;display:grid}:host(.inner-label) .ic-loading-circular-svg,.inner-text{grid-column:1;grid-row:1}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:var(--ic-architectural-300)}.inner-text{display:flex;align-items:center;justify-content:center;width:var(--ic-space-lg);height:inherit;overflow:hidden;margin:auto;--ic-typography-color:var(\n    --ic-step-indicator-text-current,\n    var(--ic-status-info-default)\n  )}:host(.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-step-indicator-text-disabled)}:host(.ic-loading-indicator-light.not-required.compact-step-progress-indicator) .inner-text{--ic-typography-color:var(--ic-architectural-400)}@media (forced-colors: active){.indeterminate>.ic-loading-circular-inner{forced-color-adjust:none}.ic-loading-linear-outer{border:var(--ic-border-hc)}.ic-loading-linear-inner{background-color:canvastext}.ic-loading-circular-svg circle{stroke:Background}.ic-loading-circular-svg circle:nth-child(2){stroke:canvastext}:host(.not-required.compact-step-progress-indicator) .ic-loading-circular-svg circle:nth-child(2){stroke:GrayText}}";
 
 const LoadingIndicator = class {
     constructor(hostRef) {
@@ -440,17 +439,18 @@ const LoadingIndicator = class {
         this.indeterminate = undefined;
         this.indicatorLabel = undefined;
         this.clipInnerElement = false;
-        this.appearance = "dark";
         this.description = "Loading";
         this.fullWidth = false;
         this.innerLabel = undefined;
         this.labelDuration = 8000;
         this.max = 100;
         this.min = 0;
+        this.monochrome = false;
         this.size = "medium";
         this.type = "circular";
         this.label = undefined;
         this.progress = undefined;
+        this.theme = "inherit";
     }
     watchPropHandler() {
         this.updateLabel();
@@ -487,13 +487,14 @@ const LoadingIndicator = class {
         }
     }
     render() {
-        const { appearance, label, description, size, fullWidth, innerLabel } = this;
+        const { theme, label, description, size, fullWidth, innerLabel, monochrome, } = this;
         const { x, y, r } = this.setCircleXY();
         return (index.h(index.Host, { class: {
-                ["ic-loading-indicator-light"]: appearance === helpers.IcThemeForegroundEnum.Light,
-                ["ic-loading-indicator-label"]: !!label,
-                ["ic-loading-indicator-full-width"]: fullWidth,
-                ["inner-label"]: !!innerLabel,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                "ic-loading-indicator-label": !!label,
+                "ic-loading-indicator-full-width": fullWidth,
+                "inner-label": !!innerLabel,
+                "ic-loading-indicator-monochrome": monochrome,
             } }, index.h("div", { class: "ic-loading-container", part: "ic-loading-container" }, index.h("div", { ref: (el) => (this.outerElement = el), class: this.calcOuterClass(), role: "progressbar", "aria-labelledby": this.label && this.size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": this.progress, "aria-valuemin": this.min, "aria-valuemax": this.max }, index.h("div", { ref: (el) => (this.innerElement = el), class: `ic-loading-${this.type}-inner` }, this.innerLabel &&
             this.innerLabel !== undefined &&
             this.size === "small" && (index.h("ic-typography", { variant: "subtitle-small", class: "inner-text" }, this.innerLabel)), this.type === "circular" && (index.h("svg", { class: "ic-loading-circular-svg", viewBox: `0 0 ${this.circularDiameter || 0} ${this.circularDiameter || 0}` }, index.h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }), index.h("circle", { cx: `${x}`, cy: `${y}`, r: `${r}` }))))), label && size !== "icon" && (index.h("ic-typography", { id: "ic-loading-label", class: "ic-loading-label", role: "status", variant: this.getLabelVariant() }, index.h("p", null, this.indicatorLabel))))));
@@ -506,7 +507,7 @@ const LoadingIndicator = class {
 };
 LoadingIndicator.style = icLoadingIndicatorCss;
 
-const icTooltipCss = "/*! 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(.ic-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay)}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-hc-border)}}";
+const icTooltipCss = "/*! 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(.ic-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.on-dialog) .ic-tooltip-container{transform:translate(\n    var(--tooltip-translate-x),\n    var(--tooltip-translate-y)\n  ) !important}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-border-hc)}}";
 
 const Tooltip = class {
     constructor(hostRef) {