@ukic/web-components 2.2.0 → 2.4.0

package/dist/collection/assets/success-icon.svg

@@ -1,5 +1,6 @@
 <svg aria-labelledby="success-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
     <title id="success-title">Success</title>
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+    <g id="check_circle">
+        <path id="Vector" d="M12.5 2C6.98 2 2.5 6.48 2.5 12C2.5 17.52 6.98 22 12.5 22C18.02 22 22.5 17.52 22.5 12C22.5 6.48 18.02 2 12.5 2ZM9.79 16.29L6.2 12.7C5.81 12.31 5.81 11.68 6.2 11.29C6.59 10.9 7.22 10.9 7.61 11.29L10.5 14.17L17.38 7.29C17.77 6.9 18.4 6.9 18.79 7.29C19.18 7.68 19.18 8.31 18.79 8.7L11.2 16.29C10.82 16.68 10.18 16.68 9.79 16.29Z" />
+    </g>
 </svg>

package/dist/collection/assets/warning-icon.svg

@@ -1,5 +1,6 @@
 <svg aria-labelledby="warning-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
     <title id="warning-title">Warning</title>
-    <path d="M0 0h24v24H0z" fill="none"/>
-    <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+    <g id="warning">
+        <path id="Vector" d="M4.47 20.5037H19.53C21.07 20.5037 22.03 18.8337 21.26 17.5037L13.73 4.49375C12.96 3.16375 11.04 3.16375 10.27 4.49375L2.74 17.5037C1.97 18.8337 2.93 20.5037 4.47 20.5037ZM12 13.5037C11.45 13.5037 11 13.0537 11 12.5037V10.5037C11 9.95375 11.45 9.50375 12 9.50375C12.55 9.50375 13 9.95375 13 10.5037V12.5037C13 13.0537 12.55 13.5037 12 13.5037ZM13 17.5037H11V15.5037H13V17.5037Z" />
+    </g>
 </svg>

package/dist/collection/collection-manifest.json

@@ -1,68 +1,69 @@
 {
   "entries": [
-    "./components/ic-alert/ic-alert.js",
-    "./components/ic-back-to-top/ic-back-to-top.js",
-    "./components/ic-classification-banner/ic-classification-banner.js",
-    "./components/ic-footer/ic-footer.js",
-    "./components/ic-breadcrumb/ic-breadcrumb.js",
-    "./components/ic-breadcrumb-group/ic-breadcrumb-group.js",
-    "./components/ic-button/ic-button.js",
-    "./components/ic-card/ic-card.js",
-    "./components/ic-checkbox/ic-checkbox.js",
-    "./components/ic-checkbox-group/ic-checkbox-group.js",
-    "./components/ic-text-field/ic-text-field.js",
-    "./components/ic-chip/ic-chip.js",
-    "./components/ic-data-entity/ic-data-entity.js",
-    "./components/ic-data-row/ic-data-row.js",
-    "./components/ic-dialog/ic-dialog.js",
-    "./components/ic-divider/ic-divider.js",
-    "./components/ic-typography/ic-typography.js",
-    "./components/ic-footer-link/ic-footer-link.js",
-    "./components/ic-footer-link-group/ic-footer-link-group.js",
-    "./components/ic-hero/ic-hero.js",
-    "./components/ic-horizontal-scroll/ic-horizontal-scroll.js",
-    "./components/ic-navigation-item/ic-navigation-item.js",
-    "./components/ic-input-component-container/ic-input-component-container.js",
-    "./components/ic-input-container/ic-input-container.js",
-    "./components/ic-input-label/ic-input-label.js",
-    "./components/ic-input-validation/ic-input-validation.js",
-    "./components/ic-link/ic-link.js",
-    "./components/ic-loading-indicator/ic-loading-indicator.js",
-    "./components/ic-menu/ic-menu.js",
-    "./components/ic-menu-group/ic-menu-group.js",
-    "./components/ic-menu-item/ic-menu-item.js",
-    "./components/ic-navigation-button/ic-navigation-button.js",
-    "./components/ic-navigation-group/ic-navigation-group.js",
-    "./components/ic-side-navigation/ic-side-navigation.js",
-    "./components/ic-top-navigation/ic-top-navigation.js",
-    "./components/ic-page-header/ic-page-header.js",
-    "./components/ic-navigation-menu/ic-navigation-menu.js",
-    "./components/ic-pagination/ic-pagination.js",
-    "./components/ic-pagination-item/ic-pagination-item.js",
-    "./components/ic-popover-menu/ic-popover-menu.js",
-    "./components/ic-radio-group/ic-radio-group.js",
-    "./components/ic-radio-option/ic-radio-option.js",
-    "./components/ic-search-bar/ic-search-bar.js",
-    "./components/ic-section-container/ic-section-container.js",
-    "./components/ic-select/ic-select.js",
-    "./components/ic-skeleton/ic-skeleton.js",
-    "./components/ic-status-tag/ic-status-tag.js",
-    "./components/ic-step/ic-step.js",
-    "./components/ic-stepper/ic-stepper.js",
-    "./components/ic-switch/ic-switch.js",
-    "./components/ic-tab/ic-tab.js",
-    "./components/ic-tab-context/ic-tab-context.js",
-    "./components/ic-tab-group/ic-tab-group.js",
-    "./components/ic-tab-panel/ic-tab-panel.js",
-    "./components/ic-theme/ic-theme.js",
-    "./components/ic-toast/ic-toast.js",
-    "./components/ic-toast-region/ic-toast-region.js",
-    "./components/ic-tooltip/ic-tooltip.js"
+    "components/ic-alert/ic-alert.js",
+    "components/ic-back-to-top/ic-back-to-top.js",
+    "components/ic-classification-banner/ic-classification-banner.js",
+    "components/ic-footer/ic-footer.js",
+    "components/ic-breadcrumb/ic-breadcrumb.js",
+    "components/ic-breadcrumb-group/ic-breadcrumb-group.js",
+    "components/ic-button/ic-button.js",
+    "components/ic-card/ic-card.js",
+    "components/ic-checkbox/ic-checkbox.js",
+    "components/ic-checkbox-group/ic-checkbox-group.js",
+    "components/ic-text-field/ic-text-field.js",
+    "components/ic-chip/ic-chip.js",
+    "components/ic-data-entity/ic-data-entity.js",
+    "components/ic-data-row/ic-data-row.js",
+    "components/ic-dialog/ic-dialog.js",
+    "components/ic-divider/ic-divider.js",
+    "components/ic-empty-state/ic-empty-state.js",
+    "components/ic-typography/ic-typography.js",
+    "components/ic-footer-link/ic-footer-link.js",
+    "components/ic-footer-link-group/ic-footer-link-group.js",
+    "components/ic-hero/ic-hero.js",
+    "components/ic-horizontal-scroll/ic-horizontal-scroll.js",
+    "components/ic-navigation-item/ic-navigation-item.js",
+    "components/ic-input-component-container/ic-input-component-container.js",
+    "components/ic-input-container/ic-input-container.js",
+    "components/ic-input-label/ic-input-label.js",
+    "components/ic-input-validation/ic-input-validation.js",
+    "components/ic-link/ic-link.js",
+    "components/ic-loading-indicator/ic-loading-indicator.js",
+    "components/ic-menu/ic-menu.js",
+    "components/ic-menu-group/ic-menu-group.js",
+    "components/ic-menu-item/ic-menu-item.js",
+    "components/ic-navigation-button/ic-navigation-button.js",
+    "components/ic-navigation-group/ic-navigation-group.js",
+    "components/ic-side-navigation/ic-side-navigation.js",
+    "components/ic-top-navigation/ic-top-navigation.js",
+    "components/ic-page-header/ic-page-header.js",
+    "components/ic-navigation-menu/ic-navigation-menu.js",
+    "components/ic-pagination/ic-pagination.js",
+    "components/ic-pagination-item/ic-pagination-item.js",
+    "components/ic-popover-menu/ic-popover-menu.js",
+    "components/ic-radio-group/ic-radio-group.js",
+    "components/ic-radio-option/ic-radio-option.js",
+    "components/ic-search-bar/ic-search-bar.js",
+    "components/ic-section-container/ic-section-container.js",
+    "components/ic-select/ic-select.js",
+    "components/ic-skeleton/ic-skeleton.js",
+    "components/ic-status-tag/ic-status-tag.js",
+    "components/ic-step/ic-step.js",
+    "components/ic-stepper/ic-stepper.js",
+    "components/ic-switch/ic-switch.js",
+    "components/ic-tab/ic-tab.js",
+    "components/ic-tab-context/ic-tab-context.js",
+    "components/ic-tab-group/ic-tab-group.js",
+    "components/ic-tab-panel/ic-tab-panel.js",
+    "components/ic-theme/ic-theme.js",
+    "components/ic-toast/ic-toast.js",
+    "components/ic-toast-region/ic-toast-region.js",
+    "components/ic-tooltip/ic-tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.4.2",
-    "typescriptVersion": "5.0.4"
+    "version": "4.2.1",
+    "typescriptVersion": "5.1.6"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/ic-alert/ic-alert.css

@@ -454,23 +454,23 @@ video {
 }
 
 .container-neutral {
-  background-color: var(--ic-architectural-40);
+  background-color: var(--ic-status-unknown-light);
 }
 
 .container-info {
-  background-color: var(--ic-status-info-background);
+  background-color: var(--ic-status-info-light);
 }
 
 .container-warning {
-  background-color: var(--ic-status-warning-background);
+  background-color: var(--ic-status-warning-light);
 }
 
 .container-error {
-  background-color: var(--ic-status-error-background);
+  background-color: var(--ic-status-error-light);
 }
 
 .container-success {
-  background-color: var(--ic-status-success-background);
+  background-color: var(--ic-status-success-light);
 }
 
 .alert-icon-container {
@@ -487,7 +487,7 @@ video {
 }
 
 .divider-neutral {
-  background-color: var(--ic-architectural-500);
+  background-color: var(--ic-status-unknown);
 }
 
 .divider-info {
@@ -495,7 +495,7 @@ video {
 }
 
 .divider-warning {
-  background-color: var(--ic-status-warning-mid);
+  background-color: var(--ic-status-warning);
 }
 
 .divider-error {
@@ -519,7 +519,7 @@ video {
 }
 
 .icon-neutral > svg {
-  fill: var(--ic-architectural-500);
+  fill: var(--ic-status-unknown);
 }
 
 :host([variant="info"]) .alert-icon svg {
@@ -527,7 +527,7 @@ video {
 }
 
 :host([variant="warning"]) .alert-icon svg {
-  fill: var(--ic-status-warning-mid);
+  fill: var(--ic-status-warning);
 }
 
 :host([variant="error"]) .alert-icon svg {

package/dist/collection/components/ic-alert/ic-alert.js

@@ -156,7 +156,7 @@ export class Alert {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the title and message will appear inline instead of above and below."
+          "text": "If `true`, the title and message will appear above and below instead of inline."
         },
         "attribute": "title-above",
         "reflect": false,
@@ -171,7 +171,8 @@ export class Alert {
           "references": {
             "IcStatusVariants": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcStatusVariants"
             }
           }
         },

package/dist/collection/components/ic-alert/ic-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,OAAO,EACP,KAAK,EAEL,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,CAAC,GACF,MAAM,eAAe,CAAC;AACvB,OAAO,SAAS,MAAM,6BAA6B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,qBAAqB,EAAoB,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;;GAGG;AAMH,MAAM,OAAO,KAAK;;IAuDR,kBAAa,GAAG,GAAS,EAAE;MACjC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;IACxB,CAAC,CAAC;0BAvDiC,KAAK;mBACZ,IAAI;qBAKF,IAAI;uBAKF,KAAK;mBAKV,EAAE;;sBAUE,KAAK;mBAKC,SAAS;;EAY9C,gBAAgB;IACd,IAAI,CAAC,oBAAoB,EAAE,CAAC;EAC9B,CAAC;EAGD,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;EAC/B,CAAC;EAOO,oBAAoB;;IAC1B,MAAM,WAAW,GACf,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,cAAc,CAAC,0CAAE,YAAY,CAAC;IACjE,IAAI,WAAW,GAAG,EAAE;MAAE,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;EACnD,CAAC;EAED,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,OAAO,EACP,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,EACT,OAAO,GACR,GAAG,IAAI,CAAC;IAET,OAAO,CACL,OAAO,IAAI,CACT,EAAC,IAAI,IACH,IAAI,EAAE,SAAS,IAAI,OAAO,EAC1B,KAAK,EAAE;QACL,CAAC,qBAAqB,CAAC,IAAI,CAAC,EAAE,IAAI;OACnC;MAED,WACE,KAAK,EAAE;UACL,CAAC,WAAW,CAAC,EAAE,IAAI;UACnB,CAAC,aAAa,OAAO,EAAE,CAAC,EAAE,IAAI;SAC/B;QAED,WAAK,KAAK,EAAC,sBAAsB;UAC/B,WACE,KAAK,EAAE;cACL,CAAC,SAAS,CAAC,EAAE,IAAI;cACjB,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,IAAI;aAC7B,GACI;UACP,YACE,KAAK,EAAE;cACL,CAAC,YAAY,CAAC,EAAE,IAAI;cACpB,CAAC,eAAe,CAAC,EAAE,IAAI;cACvB,CAAC,QAAQ,OAAO,EAAE,CAAC,EAAE,IAAI;aAC1B,EACD,SAAS,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,IAAI,GAChC,CACJ;QACN,WAAK,KAAK,EAAC,eAAe;UACxB,WACE,KAAK,EAAE;cACL,CAAC,eAAe,CAAC,EAAE,IAAI;cACvB,CAAC,2BAA2B,CAAC,EAC3B,UAAU,IAAI,IAAI,CAAC,cAAc;aACpC;YAEA,OAAO,IAAI,CACV,qBACE,KAAK,EAAE;gBACL,CAAC,aAAa,CAAC,EAAE,IAAI;gBACrB,CAAC,mBAAmB,CAAC,EAAE,UAAU,IAAI,IAAI,CAAC,cAAc;eACzD,EACD,OAAO,EAAC,gBAAgB;cAExB,aAAI,OAAO,CAAK,CACF,CACjB;YACD,YAAM,IAAI,EAAC,SAAS;cAClB,qBAAe,OAAO,EAAC,MAAM,IAAE,OAAO,CAAiB,CAClD,CACH;UACL,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,IAAI,CAChC,WAAK,KAAK,EAAC,wBAAwB;YACjC,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG;QACN,WAAK,KAAK,EAAC,wBAAwB,IAChC,WAAW,IAAI,CACd,iBACE,KAAK,EAAE;YACL,CAAC,eAAe,CAAC,EAAE,IAAI;YACvB,CAAC,cAAc,CAAC,EAAE,IAAI;WACvB,EACD,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,OAAO,EAAC,MAAM,EACd,UAAU,EAAE,qBAAqB,CAAC,IAAI,EACtC,KAAK,EAAC,SAAS,GACJ,CACd,CACG,CACF,CACD,CACR,CACF,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced?: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the title and message will appear inline instead of above and below.\n   */\n  @Prop() titleAbove?: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"neutral\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private alertTitleShouldWrap() {\n    const titleHeight =\n      this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n    if (titleHeight > 24) this.alertTitleWrap = true;\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced && \"alert\"}\n          class={{\n            [IcThemeForegroundEnum.Dark]: true,\n          }}\n        >\n          <div\n            class={{\n              [\"container\"]: true,\n              [`container-${variant}`]: true,\n            }}\n          >\n            <div class=\"alert-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              <span\n                class={{\n                  [\"alert-icon\"]: true,\n                  [\"svg-container\"]: true,\n                  [`icon-${variant}`]: true,\n                }}\n                innerHTML={VARIANT_ICONS[variant].icon}\n              ></span>\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  [\"alert-message\"]: true,\n                  [\"alert-message-title-above\"]:\n                    titleAbove || this.alertTitleWrap,\n                }}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      [\"alert-title\"]: true,\n                      [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{\n                    [\"svg-container\"]: true,\n                    [\"dismiss-icon\"]: true,\n                  }}\n                  innerHTML={closeIcon}\n                  onClick={this.dismissAction}\n                  variant=\"icon\"\n                  appearance={IcThemeForegroundEnum.Dark}\n                  title=\"dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-alert.js","sourceRoot":"","sources":["../../../src/components/ic-alert/ic-alert.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  State,\n  Listen,\n  Prop,\n  h,\n} from \"@stencil/core\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum, IcStatusVariants } from \"../../utils/types\";\nimport { VARIANT_ICONS } from \"../../utils/constants\";\n\n/**\n * @slot message - Content is placed to the right of the title.\n * @slot action - Content is placed to the right of the message.\n */\n@Component({\n  tag: \"ic-alert\",\n  styleUrl: \"ic-alert.css\",\n  shadow: true,\n})\nexport class Alert {\n  @Element() el: HTMLIcAlertElement;\n\n  @State() alertTitleWrap: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers.\n   */\n  @Prop() announced?: boolean = true;\n\n  /**\n   * If `true`, the alert will have a close icon at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n\n  /**\n   * If `true`, the title and message will appear above and below instead of inline.\n   */\n  @Prop() titleAbove?: boolean = false;\n\n  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"neutral\";\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the alert.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private alertTitleShouldWrap() {\n    const titleHeight =\n      this.el.shadowRoot.querySelector(\".alert-title\")?.clientHeight;\n    if (titleHeight > 24) this.alertTitleWrap = true;\n  }\n\n  render() {\n    const {\n      variant,\n      heading,\n      message,\n      titleAbove,\n      dismissible,\n      announced,\n      visible,\n    } = this;\n\n    return (\n      visible && (\n        <Host\n          role={announced && \"alert\"}\n          class={{\n            [IcThemeForegroundEnum.Dark]: true,\n          }}\n        >\n          <div\n            class={{\n              [\"container\"]: true,\n              [`container-${variant}`]: true,\n            }}\n          >\n            <div class=\"alert-icon-container\">\n              <div\n                class={{\n                  [\"divider\"]: true,\n                  [`divider-${variant}`]: true,\n                }}\n              ></div>\n              <span\n                class={{\n                  [\"alert-icon\"]: true,\n                  [\"svg-container\"]: true,\n                  [`icon-${variant}`]: true,\n                }}\n                innerHTML={VARIANT_ICONS[variant].icon}\n              ></span>\n            </div>\n            <div class=\"alert-content\">\n              <div\n                class={{\n                  [\"alert-message\"]: true,\n                  [\"alert-message-title-above\"]:\n                    titleAbove || this.alertTitleWrap,\n                }}\n              >\n                {heading && (\n                  <ic-typography\n                    class={{\n                      [\"alert-title\"]: true,\n                      [\"alert-title-above\"]: titleAbove || this.alertTitleWrap,\n                    }}\n                    variant=\"subtitle-large\"\n                  >\n                    <p>{heading}</p>\n                  </ic-typography>\n                )}\n                <slot name=\"message\">\n                  <ic-typography variant=\"body\">{message}</ic-typography>\n                </slot>\n              </div>\n              {isSlotUsed(this.el, \"action\") && (\n                <div class=\"alert-action-container\">\n                  <slot name=\"action\" />\n                </div>\n              )}\n            </div>\n            <div class=\"dismiss-icon-container\">\n              {dismissible && (\n                <ic-button\n                  class={{\n                    [\"svg-container\"]: true,\n                    [\"dismiss-icon\"]: true,\n                  }}\n                  innerHTML={closeIcon}\n                  onClick={this.dismissAction}\n                  variant=\"icon\"\n                  appearance={IcThemeForegroundEnum.Dark}\n                  title=\"dismiss\"\n                ></ic-button>\n              )}\n            </div>\n          </div>\n        </Host>\n      )\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js

@@ -2,6 +2,9 @@ import { Host, h } from "@stencil/core";
 import chevronIcon from "../../assets/chevron-icon.svg";
 import backIcon from "../../assets/back-icon.svg";
 import { isSlotUsed } from "../../utils/helpers";
+/**
+ * @slot icon - Content will be rendered to the left of the breadcrumb page title.
+ */
 export class Breadcrumb {
   constructor() {
     this.renderDefaultBreadcrumb = (current, pageTitle, describedById, href) => {
@@ -149,7 +152,8 @@ export class Breadcrumb {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"

package/dist/collection/components/ic-breadcrumb/ic-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { isSlotUsed } from \"../../utils/helpers\";\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   * @slot icon - Content will be rendered to the left of the breadcrumb page title.\n   */\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   * 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  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 && pageTitle !== undefined && 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        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 && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\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.js","sourceRoot":"","sources":["../../../src/components/ic-breadcrumb/ic-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["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 { isSlotUsed } from \"../../utils/helpers\";\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   * 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  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 && pageTitle !== undefined && 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        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 && pageTitle !== undefined && pageTitle !== \"\";\n    const hasHref = href !== null && href !== undefined && href !== \"\";\n\n    return (\n      <Host\n        class={{\n          back: this.showBackIcon,\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"]}

package/dist/collection/components/ic-button/ic-button.css

@@ -467,7 +467,7 @@ video {
   border-radius: var(--ic-border-radius);
   min-width: var(--min-width, 6.25rem);
   display: inline-flex;
-  gap: var(--ic-space-xs);
+  gap: var(--ic-space-xxs);
   flex-direction: row;
   justify-content: center;
   align-items: center;
@@ -478,6 +478,10 @@ video {
   vertical-align: middle;
 }
 
+:host(.with-badge) .button {
+  border-radius: 0.2188rem;
+}
+
 .button:hover {
   cursor: pointer;
 }
@@ -641,6 +645,12 @@ video {
 :host(.button-variant-icon) .button {
   color: var(--button-default);
   min-width: 0;
+  gap: var(--ic-space-xs);
+}
+
+:host(.button-variant-icon) .icon-container {
+  width: var(--ic-space-lg) !important;
+  height: var(--ic-space-lg) !important;
 }
 
 :host(.button-variant-icon) .button:hover:not(:focus) {
@@ -697,6 +707,7 @@ video {
 
 :host(.button-size-large) .button {
   height: var(--height, var(--ic-space-xxl));
+  gap: var(--ic-space-xs);
   padding: var(--ic-space-sm) var(--ic-space-md);
 }
 
@@ -770,13 +781,18 @@ ic-loading-indicator {
 
 div.icon-container {
   box-sizing: border-box;
-  width: var(--ic-space-lg);
-  height: var(--ic-space-lg);
+  width: var(--ic-space-md);
+  height: var(--ic-space-md);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
+:host(.button-size-large) div.icon-container {
+  width: calc(var(--ic-space-md) + var(--ic-space-xxs));
+  height: calc(var(--ic-space-md) + var(--ic-space-xxs));
+}
+
 ::slotted(*) {
   width: var(--icon-width) !important;
   height: var(--icon-height) !important;

package/dist/collection/components/ic-button/ic-button.js

@@ -11,12 +11,14 @@ var __rest = (this && this.__rest) || function (s, e) {
   return t;
 };
 import { Host, h, } from "@stencil/core";
-import { getThemeFromContext, inheritAttributes, removeDisabledFalse, } from "../../utils/helpers";
+import { getThemeFromContext, inheritAttributes, isSlotUsed, removeDisabledFalse, } from "../../utils/helpers";
 import { IC_INHERITED_ARIA } from "../../utils/constants";
 import { IcThemeForegroundEnum, } from "../../utils/types";
 let buttonIds = 0;
 /**
- * @slot icon - Content will be placed to the left of the button label.
+ * @slot icon - Deprecated. This slot should not be used anymore. Use left-icon or right-icon slot instead.
+ * @slot left-icon - Content will be placed to the left of the button label.
+ * @slot right-icon - Content will be placed to the right of the button label.
  */
 export class Button {
   constructor() {
@@ -125,6 +127,9 @@ export class Button {
   async updateAriaLabel(newValue) {
     if (this.hasTooltip) {
       this.tooltipEl.label = newValue;
+      this.buttonEl.setAttribute("aria-label", null);
+    }
+    else {
       this.buttonEl.setAttribute("aria-label", newValue);
     }
   }
@@ -132,6 +137,14 @@ export class Button {
     const iconEl = this.el.querySelector(`[slot="icon"]`);
     return iconEl !== null;
   }
+  hasLeftIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="left-icon"]`);
+    return iconEl !== null;
+  }
+  hasRightIconSlot() {
+    const iconEl = this.el.querySelector(`[slot="right-icon"]`);
+    return iconEl !== null;
+  }
   handleHiddenFormButtonClick(form) {
     const hiddenFormButton = document.createElement("button");
     hiddenFormButton.setAttribute("type", this.el.type);
@@ -192,22 +205,26 @@ export class Button {
       describedBy = this.describedById;
     }
     const ButtonContent = () => {
-      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
+      return (h(TagType, Object.assign({ class: "button", "aria-disabled": this.loading || this.disabled ? "true" : null, "aria-label": this.loading ? "Loading" : ariaLabel }, buttonAttrs, restInheritedAttributes, titleAttr, { onFocus: this.onFocus, onBlur: this.onBlur, ref: (el) => (this.buttonEl = el), id: buttonId, "aria-describedby": this.hasTooltip && ariaLabel ? null : describedBy, part: "button" }), this.hasIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "icon" }))), this.hasLeftIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "left-icon" }))), this.loading ? (h("div", { class: "loading-container" }, h("ic-loading-indicator", { type: "linear", appearance: this.variant === "primary" ||
           this.variant === "destructive" ||
           this.appearance === IcThemeForegroundEnum.Dark ||
           this.appearance === IcThemeForegroundEnum.Light
           ? "light"
-          : "dark" }))) : (h("slot", null))));
+          : "dark" }))) : (h("slot", null)), this.hasRightIconSlot() && !this.loading && (h("div", { class: "icon-container" }, h("slot", { name: "right-icon" })))));
     };
     return (h(Host, { class: {
         ["disabled"]: this.disabled && !this.loading,
         [`button-variant-${this.variant}`]: true,
         [`button-size-${this.size}`]: true,
         ["loading"]: this.loading,
-        ["loading-with-icon"]: this.loading && this.hasIconSlot(),
+        ["loading-with-icon"]: this.loading &&
+          (this.hasIconSlot() ||
+            this.hasLeftIconSlot() ||
+            this.hasRightIconSlot()),
         ["dark"]: this.appearance === IcThemeForegroundEnum.Dark,
         ["light"]: this.appearance === IcThemeForegroundEnum.Light,
         ["full-width"]: this.fullWidth,
+        ["with-badge"]: isSlotUsed(this.el, "badge"),
       }, onClick: this.handleClick }, this.hasTooltip && (h("ic-tooltip", { class: { ["tooltip-disabled"]: this.disableTooltip }, ref: (el) => (this.tooltipEl = el), label: tooltipText, target: buttonId, placement: this.tooltipPlacement }, h(ButtonContent, null))), !this.hasTooltip && h(ButtonContent, null), this.describedByContent && (h("span", { id: describedBy, class: "ic-button-describedby" }, this.describedByContent))));
   }
   static get is() { return "ic-button"; }
@@ -234,7 +251,8 @@ export class Button {
           "references": {
             "IcThemeForeground": {
               "location": "import",
-              "path": "../../utils/types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcThemeForeground"
             }
           }
         },
@@ -482,7 +500,8 @@ export class Button {
           "resolved": "\"\" | \"no-referrer\" | \"no-referrer-when-downgrade\" | \"origin\" | \"origin-when-cross-origin\" | \"same-origin\" | \"strict-origin\" | \"strict-origin-when-cross-origin\" | \"unsafe-url\"",
           "references": {
             "ReferrerPolicy": {
-              "location": "global"
+              "location": "global",
+              "id": "global::ReferrerPolicy"
             }
           }
         },
@@ -516,12 +535,13 @@ export class Button {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "IcButtonSizes",
+          "original": "IcSizes",
           "resolved": "\"default\" | \"large\" | \"small\"",
           "references": {
-            "IcButtonSizes": {
+            "IcSizes": {
               "location": "import",
-              "path": "./ic-button.types"
+              "path": "../../utils/types",
+              "id": "src/utils/types.ts::IcSizes"
             }
           }
         },
@@ -561,7 +581,8 @@ export class Button {
           "references": {
             "IcButtonTooltipPlacement": {
               "location": "import",
-              "path": "./ic-button.types"
+              "path": "./ic-button.types",
+              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTooltipPlacement"
             }
           }
         },
@@ -584,7 +605,8 @@ export class Button {
           "references": {
             "IcButtonTypes": {
               "location": "import",
-              "path": "./ic-button.types"
+              "path": "./ic-button.types",
+              "id": "src/components/ic-button/ic-button.types.ts::IcButtonTypes"
             }
           }
         },
@@ -607,7 +629,8 @@ export class Button {
           "references": {
             "IcButtonVariants": {
               "location": "import",
-              "path": "./ic-button.types"
+              "path": "./ic-button.types",
+              "id": "src/components/ic-button/ic-button.types.ts::IcButtonVariants"
             }
           }
         },
@@ -669,7 +692,8 @@ export class Button {
           "parameters": [],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"
@@ -688,7 +712,8 @@ export class Button {
             }],
           "references": {
             "Promise": {
-              "location": "global"
+              "location": "global",
+              "id": "global::Promise"
             }
           },
           "return": "Promise<void>"