@ukic/web-components 2.1.0-beta.8 → 2.2.0

package/dist/cjs/types-3eb02246.js.map

@@ -1 +1 @@
-{"file":"types-3eb02246.js","mappings":";;AAAYA;AAAZ,WAAY,mBAAmB;EAC7B,0CAAmB,CAAA;EACnB,sCAAe,CAAA;EACf,0CAAmB,CAAA;AACrB,CAAC,EAJWA,2BAAmB,KAAnBA,2BAAmB,QAI9B;AAkEWC;AAAZ,WAAY,qBAAqB;EAC/B,4CAAmB,CAAA;EACnB,sCAAa,CAAA;EACb,wCAAe,CAAA;AACjB,CAAC,EAJWA,6BAAqB,KAArBA,6BAAqB;;","names":["IcInformationStatus","IcThemeForegroundEnum"],"sources":["./src/utils/types.ts"],"sourcesContent":["export enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport interface IcValueEventDetail {\n  value: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"],"version":3}
+{"file":"types-3eb02246.js","mappings":";;AAwBYA;AAAZ,WAAY,mBAAmB;EAC7B,0CAAmB,CAAA;EACnB,sCAAe,CAAA;EACf,0CAAmB,CAAA;AACrB,CAAC,EAJWA,2BAAmB,KAAnBA,2BAAmB,QAI9B;AAkEWC;AAAZ,WAAY,qBAAqB;EAC/B,4CAAmB,CAAA;EACnB,sCAAa,CAAA;EACb,wCAAe,CAAA;AACjB,CAAC,EAJWA,6BAAqB,KAArBA,6BAAqB;;","names":["IcInformationStatus","IcThemeForegroundEnum"],"sources":["./src/utils/types.ts"],"sourcesContent":["export type IcFocusableComponents =\n  | HTMLIcBreadcrumbElement\n  | HTMLIcButtonElement\n  | HTMLIcCardElement\n  | HTMLIcCheckboxElement\n  | HTMLIcChipElement\n  | HTMLIcLinkElement\n  | HTMLIcNavigationButtonElement\n  | HTMLIcNavigationGroupElement\n  | HTMLIcNavigationItemElement\n  | HTMLIcRadioOptionElement\n  | HTMLIcSearchBarElement\n  | HTMLIcSelectElement\n  | HTMLIcSwitchElement\n  | HTMLIcTabElement\n  | HTMLIcTextFieldElement;\n\nexport type IcStatusVariants =\n  | \"neutral\"\n  | \"info\"\n  | \"warning\"\n  | \"error\"\n  | \"success\";\n\nexport enum IcInformationStatus {\n  Warning = \"warning\",\n  Error = \"error\",\n  Success = \"success\",\n}\n\nexport type IcInformationStatusOrEmpty = \"warning\" | \"error\" | \"success\" | \"\";\n\nexport type IcNavType = \"side\" | \"top\" | \"page-header\";\n\n// From: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete\nexport type IcAutocompleteTypes =\n  | \"on\"\n  | \"off\"\n  | \"name\"\n  | \"honorific-prefix\"\n  | \"given-name\"\n  | \"additional-name\"\n  | \"family-name\"\n  | \"honorific-suffix\"\n  | \"nickname\"\n  | \"email\"\n  | \"username\"\n  | \"new-password\"\n  | \"current-password\"\n  | \"one-time-code\"\n  | \"organization-title\"\n  | \"organization\"\n  | \"street-address\"\n  | \"address-line1\"\n  | \"address-line2\"\n  | \"address-line3\"\n  | \"address-level4\"\n  | \"address-level3\"\n  | \"address-level2\"\n  | \"address-level1\"\n  | \"country\"\n  | \"country-name\"\n  | \"postal-code\"\n  | \"cc-name\"\n  | \"cc-given-name\"\n  | \"cc-additional-name\"\n  | \"cc-family-name\"\n  | \"cc-family-name\"\n  | \"cc-number\"\n  | \"cc-exp\"\n  | \"cc-exp-month\"\n  | \"cc-exp-year\"\n  | \"cc-csc\"\n  | \"cc-type\"\n  | \"transaction-currency\"\n  | \"transaction-amount\"\n  | \"language\"\n  | \"bday\"\n  | \"bday-day\"\n  | \"bday-month\"\n  | \"bday-year\"\n  | \"sex\"\n  | \"tel\"\n  | \"tel-country-code\"\n  | \"tel-national\"\n  | \"tel-area-code\"\n  | \"tel-local\"\n  | \"tel-extension\"\n  | \"impp\"\n  | \"url\"\n  | \"photo\";\n\nexport type IcAlignment = \"left\" | \"center\" | \"full-width\";\n\nexport enum IcThemeForegroundEnum {\n  Default = \"default\",\n  Dark = \"dark\",\n  Light = \"light\",\n}\n\nexport type IcThemeForeground = \"default\" | \"dark\" | \"light\";\n\nexport type IcThemeForegroundNoDefault = \"dark\" | \"light\";\n\nexport type IcTheme = {\n  mode: IcThemeForeground;\n  color: IcColorRGB;\n};\n\nexport type IcAdditionalFieldTypes = \"static\" | \"dynamic\";\n\nexport type IcColorRGB = {\n  r: number;\n  g: number;\n  b: number;\n};\n\nexport type IcColorRGBA = IcColorRGB & {\n  a: number;\n};\n\nexport type IcActivationTypes = \"automatic\" | \"manual\";\n\nexport type IcAutocorrectStates = \"on\" | \"off\";\n\nexport type IcNavParentDetails = {\n  navType: IcNavType | \"\";\n  parent: HTMLElement;\n};\n\nexport type IcTypographyVariants =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"subtitle-large\"\n  | \"subtitle-small\"\n  | \"body\"\n  | \"label\"\n  | \"label-uppercase\"\n  | \"caption\"\n  | \"caption-uppercase\"\n  | \"code-large\"\n  | \"code-small\"\n  | \"code-extra-small\";\n\nexport interface IcMenuOption {\n  value?: string;\n  label: string;\n  description?: string;\n  disabled?: boolean;\n  recommended?: boolean;\n  children?: IcMenuOption[];\n  loading?: boolean;\n  timedOut?: boolean;\n}\n\nexport type IcSearchMatchPositions = \"start\" | \"anywhere\";\n\nexport type IcCallbackFunctionNoReturn = (...args: unknown[]) => void;\n\nexport type IcRequiredPropsTypes =\n  | string\n  | boolean\n  | number\n  | HTMLElement\n  | IcMenuOption[];\n\nexport type IcPropObject = { prop: IcRequiredPropsTypes; propName: string };\n\nexport type IcRelatedTarget = EventTarget | undefined;\n\nexport type IcOrientation = \"horizontal\" | \"vertical\";\n\nexport interface IcValueEventDetail {\n  value: string;\n  keyPressed?: string;\n}\nexport interface IcBlurEventDetail {\n  relatedTarget: IcRelatedTarget;\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
-    <title>error icon</title>
+<svg aria-labelledby="error-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+    <title id="error-title">Error</title>
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
 </svg>

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+<svg aria-labelledby="info-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+    <title id="info-title">For your information</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 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
-    <title>info icon</title>
 </svg>

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+<svg aria-labelledby="neutral-title" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+    <title id="neutral-title">Neutral</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 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
-    <title>neutral icon</title>
 </svg>

package/dist/collection/assets/pagination-first-last.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1709 8.825L7.34589 5L11.1709 1.175L9.99589 0L4.99589 5L9.99589 10L11.1709 8.825ZM0.829224 0H2.49589V10H0.829224V0Z" fill="currentColour"/>
+</svg>

package/dist/collection/assets/pagination-next-previous.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="10" viewBox="0 0 8 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.08748 0L0.912476 1.175L4.72914 5L0.912476 8.825L2.08748 10L7.08748 5L2.08748 0Z" fill="currentColor"/>
+</svg>

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
-    <title>success icon</title>
+<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"/>
 </svg>

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

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
-    <title>warning icon</title>
+<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"/>
 </svg>

package/dist/collection/collection-manifest.json

@@ -2,21 +2,26 @@
   "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-classification-banner/ic-classification-banner.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-footer/ic-footer.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",
@@ -24,17 +29,22 @@
     "./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-navigation-item/ic-navigation-item.js",
-    "./components/ic-navigation-menu/ic-navigation-menu.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-side-navigation/ic-side-navigation.js",
     "./components/ic-skeleton/ic-skeleton.js",
     "./components/ic-status-tag/ic-status-tag.js",
     "./components/ic-step/ic-step.js",
@@ -44,16 +54,15 @@
     "./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-text-field/ic-text-field.js",
     "./components/ic-theme/ic-theme.js",
-    "./components/ic-tooltip/ic-tooltip.js",
-    "./components/ic-top-navigation/ic-top-navigation.js",
-    "./components/ic-typography/ic-typography.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": "2.20.0",
-    "typescriptVersion": "4.8.4"
+    "version": "3.4.2",
+    "typescriptVersion": "5.0.4"
   },
   "collections": [],
   "bundles": []

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

@@ -605,7 +605,7 @@ video {
   }
 
   .alert-action-container {
-    margin-bottom: 0.875rem;
+    margin-bottom: var(--ic-space-xs);
   }
 }
 

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

@@ -1,19 +1,8 @@
 import { Host, h, } from "@stencil/core";
-import neutralIcon from "../../assets/neutral-icon.svg";
-import infoIcon from "../../assets/info-icon.svg";
-import warningIcon from "../../assets/warning-icon.svg";
-import errorIcon from "../../assets/error-icon.svg";
-import successIcon from "../../assets/success-icon.svg";
 import closeIcon from "../../assets/close-icon.svg";
 import { isSlotUsed } from "../../utils/helpers";
 import { IcThemeForegroundEnum } from "../../utils/types";
-const icon = {
-  neutral: neutralIcon,
-  info: infoIcon,
-  warning: warningIcon,
-  error: errorIcon,
-  success: successIcon,
-};
+import { VARIANT_ICONS } from "../../utils/constants";
 /**
  * @slot message - Content is placed to the right of the title.
  * @slot action - Content is placed to the right of the message.
@@ -24,14 +13,17 @@ export class Alert {
       this.dismiss.emit();
       this.icDismiss.emit();
     };
-    this.variant = "neutral";
+    this.alertTitleWrap = false;
+    this.visible = true;
+    this.announced = true;
+    this.dismissible = false;
     this.heading = "";
     this.message = undefined;
     this.titleAbove = false;
-    this.dismissible = false;
-    this.announced = true;
-    this.visible = true;
-    this.alertTitleWrap = false;
+    this.variant = "neutral";
+  }
+  componentDidLoad() {
+    this.alertTitleShouldWrap();
   }
   handleClick() {
     this.visible = !this.visible;
@@ -42,9 +34,6 @@ export class Alert {
     if (titleHeight > 24)
       this.alertTitleWrap = true;
   }
-  componentDidLoad() {
-    this.alertTitleShouldWrap();
-  }
   render() {
     const { variant, heading, message, titleAbove, dismissible, announced, visible, } = this;
     return (visible && (h(Host, { role: announced && "alert", class: {
@@ -59,7 +48,7 @@ export class Alert {
         ["alert-icon"]: true,
         ["svg-container"]: true,
         [`icon-${variant}`]: true,
-      }, innerHTML: icon[variant] })), h("div", { class: "alert-content" }, h("div", { class: {
+      }, innerHTML: VARIANT_ICONS[variant].icon })), h("div", { class: "alert-content" }, h("div", { class: {
         ["alert-message"]: true,
         ["alert-message-title-above"]: titleAbove || this.alertTitleWrap,
       } }, heading && (h("ic-typography", { class: {
@@ -84,28 +73,41 @@ export class Alert {
   }
   static get properties() {
     return {
-      "variant": {
-        "type": "string",
+      "announced": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcAlertVariants",
-          "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-          "references": {
-            "IcAlertVariants": {
-              "location": "import",
-              "path": "./ic-alert.types"
-            }
-          }
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "The variant of the alert which will be rendered."
+          "text": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers."
         },
-        "attribute": "variant",
+        "attribute": "announced",
         "reflect": false,
-        "defaultValue": "\"neutral\""
+        "defaultValue": "true"
+      },
+      "dismissible": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the alert will have a close icon at the end to dismiss it."
+        },
+        "attribute": "dismissible",
+        "reflect": false,
+        "defaultValue": "false"
       },
       "heading": {
         "type": "string",
@@ -160,48 +162,35 @@ export class Alert {
         "reflect": false,
         "defaultValue": "false"
       },
-      "dismissible": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the alert will have a close icon at the end to dismiss it."
-        },
-        "attribute": "dismissible",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "announced": {
-        "type": "boolean",
+      "variant": {
+        "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
+          "original": "IcStatusVariants",
+          "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+          "references": {
+            "IcStatusVariants": {
+              "location": "import",
+              "path": "../../utils/types"
+            }
+          }
         },
         "required": false,
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "If `true`, the alert will have the 'alert' ARIA role and will be announced to screen readers."
+          "text": "The variant of the alert which will be rendered."
         },
-        "attribute": "announced",
+        "attribute": "variant",
         "reflect": false,
-        "defaultValue": "true"
+        "defaultValue": "\"neutral\""
       }
     };
   }
   static get states() {
     return {
-      "visible": {},
-      "alertTitleWrap": {}
+      "alertTitleWrap": {},
+      "visible": {}
     };
   }
   static get events() {

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":"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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 neutralIcon from \"../../assets/neutral-icon.svg\";\nimport infoIcon from \"../../assets/info-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport closeIcon from \"../../assets/close-icon.svg\";\nimport { IcAlertVariants } from \"./ic-alert.types\";\nimport { isSlotUsed } from \"../../utils/helpers\";\nimport { IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst icon = {\n  neutral: neutralIcon,\n  info: infoIcon,\n  warning: warningIcon,\n  error: errorIcon,\n  success: successIcon,\n};\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  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcAlertVariants = \"neutral\";\n  /**\n   * The optional title to display at the start of the alert.\n   */\n  @Prop() heading?: string = \"\";\n  /**\n   * The main body message of the alert.\n   */\n  @Prop() message?: string;\n  /**\n   * If `true`, the title and message will appear inline instead of above and below.\n   */\n  @Prop() titleAbove?: boolean = false;\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   * 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  @State() visible: boolean = true;\n\n  @State() alertTitleWrap: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\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  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  componentDidLoad(): void {\n    this.alertTitleShouldWrap();\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={icon[variant]}\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 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"]}

package/dist/collection/components/ic-alert/{ic-alert.test.a11y.js → test/a11y/ic-alert.test.a11y.js}

@@ -1,6 +1,6 @@
 import { fixture } from "@open-wc/testing-helpers";
 import { axe } from "jest-axe";
-import { checkShadowElementRendersCorrectly } from "../../utils/testa11y.helpers";
+import { checkShadowElementRendersCorrectly } from "../../../../utils/testa11y.helpers";
 describe("ic-alert", () => {
   it("passes accessibility", async () => {
     const el = await fixture(`<ic-alert heading="Test" message="Test message"/>`);

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

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.test.a11y.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/a11y/ic-alert.test.a11y.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AAC/B,OAAO,EAAE,kCAAkC,EAAE,MAAM,oCAAoC,CAAC;AAExF,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EACxB,EAAE,CAAC,sBAAsB,EAAE,KAAK,IAAI,EAAE;IACpC,MAAM,EAAE,GAAG,MAAM,OAAO,CACtB,mDAAmD,CACpD,CAAC;IACF,kCAAkC,CAAC,EAAE,CAAC,CAAC;IACvC,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE,CAAC;EAC7C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { fixture } from \"@open-wc/testing-helpers\";\nimport { axe } from \"jest-axe\";\nimport { checkShadowElementRendersCorrectly } from \"../../../../utils/testa11y.helpers\";\n\ndescribe(\"ic-alert\", () => {\n  it(\"passes accessibility\", async () => {\n    const el = await fixture(\n      `<ic-alert heading=\"Test\" message=\"Test message\"/>`\n    );\n    checkShadowElementRendersCorrectly(el);\n    expect(await axe(el)).toHaveNoViolations();\n  });\n});\n"]}

package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js

@@ -0,0 +1,16 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("ic-alert component", () => {
+  it("should close on dismiss icon click", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<ic-alert dismissible=true></ic-alert>`);
+    await page.waitForChanges();
+    let alert = await page.find("ic-alert >>> .container");
+    const dismissButton = await page.find("ic-alert >>> .dismiss-icon");
+    expect(alert).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    alert = await page.find("ic-alert >>> .container");
+    expect(alert).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-alert.e2e.js.map

package/dist/collection/components/ic-alert/test/basic/ic-alert.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ic-alert.e2e.js","sourceRoot":"","sources":["../../../../../src/components/ic-alert/test/basic/ic-alert.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;EAClC,EAAE,CAAC,oCAAoC,EAAE,KAAK,IAAI,EAAE;IAClD,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,wCAAwC,CAAC,CAAC;IAChE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,IAAI,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IACvD,MAAM,aAAa,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,4BAA4B,CAAC,CAAC;IAEpE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAC7B,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC;IAErC,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAE5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;IAEnD,MAAM,CAAC,KAAK,CAAC,CAAC,QAAQ,EAAE,CAAC;EAC3B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from \"@stencil/core/testing\";\n\ndescribe(\"ic-alert component\", () => {\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newE2EPage();\n    await page.setContent(`<ic-alert dismissible=true></ic-alert>`);\n    await page.waitForChanges();\n\n    let alert = await page.find(\"ic-alert >>> .container\");\n    const dismissButton = await page.find(\"ic-alert >>> .dismiss-icon\");\n\n    expect(alert).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    alert = await page.find(\"ic-alert >>> .container\");\n\n    expect(alert).toBeNull();\n  });\n});\n"]}

package/dist/collection/components/ic-alert/test/basic/ic-alert.spec.js

@@ -0,0 +1,182 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Alert } from "../../ic-alert";
+describe("ic-alert component", () => {
+  it("should render with a heading when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Test heading"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Test heading" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Test heading
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render with a message when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="Test message"></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="Test message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                    <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    Test message
+                                </ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+        </ic-alert>`);
+  });
+  it("should render an action in the correct position when supplied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This has an action"><button slot="action"></button></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" message="This has an action" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                        <span class="alert-icon icon-neutral svg-container">
+                            svg
+                        </span>
+                    </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <slot name="message">
+                                <ic-typography variant="body">
+                                    This has an action
+                                </ic-typography>
+                            </slot>
+                        </div>
+                        <div class="alert-action-container">
+                            <slot name="action"></slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container">
+                    </div>
+                </div>
+            </mock:shadow-root>
+            <button slot="action"></button>
+        </ic-alert>`);
+  });
+  it("should render with a dismiss icon when the prop is applied", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+            <ic-alert class="dark" message="This is dismissible" dismissible=true role="alert">
+                <mock:shadow-root>
+                    <div class="container container-neutral">
+                        <div class="alert-icon-container">
+                            <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                        <div class="alert-content">
+                            <div class="alert-message">
+                                <slot name="message">
+                                    <ic-typography variant="body">
+                                        This is dismissible
+                                    </ic-typography>
+                                </slot>
+                            </div>
+                        </div>
+                        <div class="dismiss-icon-container">
+                            <ic-button appearance="dark" class="dismiss-icon svg-container" title="dismiss" variant="icon">
+                                svg
+                            </ic-button>
+                        </div>
+                    </div>
+                </mock:shadow-root>
+            </ic-alert>`);
+  });
+  it("should render an element in the message slot", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert heading="Using custom message"><ic-typography variant="h1" slot="message">Custom h1 message</ic-typography></ic-alert>`,
+    });
+    expect(page.root).toEqualHtml(`
+        <ic-alert class="dark" heading="Using custom message" role="alert">
+            <mock:shadow-root>
+                <div class="container container-neutral">
+                    <div class="alert-icon-container">
+                        <div class="divider divider-neutral"></div>
+                            <span class="alert-icon icon-neutral svg-container">
+                                svg
+                            </span>
+                        </div>
+                    <div class="alert-content">
+                        <div class="alert-message">
+                            <ic-typography class="alert-title" variant="subtitle-large">
+                                <p>
+                                    Using custom message
+                                </p>
+                            </ic-typography>
+                            <slot name="message">
+                                <ic-typography variant="body"></ic-typography>
+                            </slot>
+                        </div>
+                    </div>
+                    <div class="dismiss-icon-container"></div>
+                </div>
+            </mock:shadow-root>
+            <ic-typography variant="h1" slot="message">Custom h1 message</ic-typography>
+        </ic-alert>`);
+  });
+  it("should close on dismiss icon click", async () => {
+    const page = await newSpecPage({
+      components: [Alert],
+      html: `<ic-alert message="This is dismissible" dismissible=true></ic-alert>`,
+    });
+    let alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    const dismissButton = await page.root.shadowRoot.querySelector("ic-button");
+    expect(alert).not.toBeNull();
+    expect(dismissButton).not.toBeNull();
+    await dismissButton.click();
+    await page.waitForChanges();
+    alert = await page.root.shadowRoot.querySelector("div.container-neutral");
+    expect(alert).toBeNull();
+  });
+});
+//# sourceMappingURL=ic-alert.spec.js.map