@ukic/web-components 2.1.0-beta.9 → 2.3.0

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

@@ -1 +1 @@
-{"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\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 type IcSizes = \"default\" | \"large\" | \"small\";\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/close-icon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
     <path d="M0 0h24v24H0z" fill="none"/>
     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
     <title>close icon</title>

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

@@ -1,5 +1,6 @@
 <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"/>
+    <g id="close-octagon">
+        <path id="Vector" d="M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" />
+    </g>
 </svg>

package/dist/collection/assets/hamburger-menu-icon.svg

@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
   <path d="M0 0h24v24H0V0z" fill="none" />
   <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
   <title>menu icon</title>

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

@@ -1,5 +1,6 @@
 <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"/>
+    <g id="info">
+        <path id="Vector" d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 17C11.45 17 11 16.55 11 16V12C11 11.45 11.45 11 12 11C12.55 11 13 11.45 13 12V16C13 16.55 12.55 17 12 17ZM13 9H11V7H13V9Z" />
+    </g>
 </svg>

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

@@ -1,5 +1,6 @@
 <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 id="neutral-title">Neutral</title>
+    <g id="Icon">
+        <path id="Vector" d="M19.5 3H5.5C4.4 3 3.5 3.9 3.5 5V19C3.5 20.1 4.4 21 5.5 21H19.5C20.6 21 21.5 20.1 21.5 19V5C21.5 3.9 20.6 3 19.5 3ZM12.51 18C11.81 18 11.25 17.44 11.25 16.74C11.25 16.03 11.81 15.49 12.51 15.49C13.22 15.49 13.76 16.03 13.76 16.74C13.75 17.43 13.22 18 12.51 18ZM15.52 10.6C14.76 11.71 14.04 12.06 13.65 12.77C13.55 12.95 13.49 13.09 13.46 13.4C13.41 13.85 13.01 14.18 12.56 14.18H12.5C11.98 14.18 11.57 13.74 11.62 13.22C11.65 12.88 11.73 12.53 11.92 12.19C12.41 11.32 13.34 10.8 13.88 10.03C14.45 9.22 14.13 7.7 12.51 7.7C11.8 7.7 11.33 8.06 11.04 8.49C10.79 8.85 10.35 9.02 9.94 8.85C9.41 8.64 9.22 8 9.54 7.54C10.15 6.65 11.17 6 12.49 6C13.97 6 14.98 6.67 15.5 7.52C15.94 8.24 16.2 9.59 15.52 10.6Z" />
+    </g>
 </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,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

@@ -2,22 +2,27 @@
   "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-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",
@@ -25,17 +30,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",
@@ -45,18 +55,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-toast/ic-toast.js",
     "./components/ic-toast-region/ic-toast-region.js",
-    "./components/ic-tooltip/ic-tooltip.js",
-    "./components/ic-top-navigation/ic-top-navigation.js",
-    "./components/ic-typography/ic-typography.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

@@ -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 {
@@ -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

@@ -13,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;
@@ -31,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: {
@@ -73,28 +73,41 @@ export class Alert {
   }
   static get properties() {
     return {
-      "variant": {
-        "type": "string",
+      "announced": {
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "IcStatusVariants",
-          "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
-          "references": {
-            "IcStatusVariants": {
-              "location": "import",
-              "path": "../../utils/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",
@@ -143,54 +156,41 @@ 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,
         "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 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  /**\n   * The variant of the alert which will be rendered.\n   */\n  @Prop() variant?: IcStatusVariants = \"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={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-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"]}