@ukic/web-components 3.19.0 → 3.21.0

package/dist/collection/components/ic-top-navigation/ic-top-navigation.js

@@ -211,19 +211,19 @@ export class TopNavigation {
         const attrs = Component == "a" && {
             href: href,
         };
-        return (h(Host, { key: 'ade1da5d58211501cd1d6747c46d105c49ef8e98', class: {
+        return (h(Host, { key: 'c0c457a694891bb06ad49c6601fb57d83e6ac6c6', class: {
                 "fullwidth-searchbar": hasFullWidthSearchBar,
                 "mobile-mode": overMobileBreakpoint,
                 [IcBrandForegroundEnum.Dark]: foregroundColor === IcBrandForegroundEnum.Dark,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'c0a641f02b5c568bcf2e75dd743f42bcacfa3df6', class: "top-navigation" }, h("ic-section-container", { key: 'f31505caa30741b6ae5a7091d01735c6b0b2eb07', aligned: contentAligned, "full-height": true }, h("header", { key: '6ab710016c32c632fefc7827114bba07cff300b1', role: "banner" }, h("div", { key: 'a5b18754252754ecf8f577a113a5e7ffe6214efd', class: "top-panel-container" }, h("div", { key: '473ebdef80637e47a30bf1f2570d9698ef819766', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '8082824e0d859123195ed0cc076858e861ed6f83', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: '4e6846d703b47491d7867d993fc91c680bb7f965', class: "app-icon-container" }, h("slot", { key: '5755567877527b6c4dea32d246295f13344a1116', name: "app-icon" }))), isSmallDeviceSize &&
+            } }, h("div", { key: 'fd5f04cfce660e81024b45ebee521d73d42a448d', class: "top-navigation" }, h("ic-section-container", { key: '028947110e4a66cccc58659ca164b2938cd7e533', aligned: contentAligned, "full-height": true }, h("header", { key: 'f528842ca7c9fe6a127e53cf7ea0c5af9aeebe79', role: "banner" }, h("div", { key: 'e23371a5539f686060f624053e8b04a2cef1f860', class: "top-panel-container" }, h("div", { key: '25ede4b34cb30ba1d25d3fb06a3f44e48ad4a4c9', class: "app-details-container" }, (hasTitle || hasAppTitleSlot) && (h(Component, Object.assign({ key: '666eddef4b8be110a1796083432cd754cda18152', class: "title-link" }, attrs), hasAppIcon && (h("div", { key: 'cb7c5cdf6ccc28c5dc5d7699e0332770aa5246f9', class: "app-icon-container" }, h("slot", { key: 'cd21e969e6fd23594aeb2b31468e81d1d68de7f7', name: "app-icon" }))), isSmallDeviceSize &&
             (!isEmptyString(shortAppTitle) || shortAppTitleSlot) ? (h("ic-typography", { variant: "subtitle-small", "aria-label": (!hasAppTitleSlot || !shortAppTitleSlot) &&
-                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '0d1119c72ec12921b9d8ac4c753549b5266a0a77', class: "app-status" }, h("ic-typography", { key: '0159177ab7abdf8ffacbc54fe2a00db8b51f4034', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: 'f83651366bf13750e9c637643290d01d9158cbb3', class: "app-version" }, h("ic-typography", { key: '61d5ddb22f858319246f352ea9db8cf2a380dbb7', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '38c8b6032287ae554d95affd0343d8e1a06e9672', class: "search-menu-container" }, h("div", { key: '177f304cb5d52052c1595d90a313187f5faf7fb8', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: '2573f4f3d0c07b9a8189739e71b1280ee10db8b7', class: "search-bar-container" }, h("slot", { key: '4ec2d201033b3f084a372a781d11a9171b7357db', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '2ed8494ed944a24944535339faaf87ff50bc2666', class: "navigation-tabs" }, h("span", { key: '8d4749293defd91560f3ed064a40b37ef7bef3f2', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '2f026275dcebbb493ab8dd2d337dc07e85fddd47', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'e33cbc8cd546a0fb563b8bdde108da0c2e80ef66',
+                `${appTitle} (${shortAppTitle})` }, h("h1", null, shortAppTitleSlot ? (h("slot", { name: "short-app-title" })) : (shortAppTitle)))) : (h("ic-typography", { variant: appTitleVariant }, h("h1", { class: "title-wrap" }, hasAppTitleSlot ? (h("slot", { name: "app-title" })) : (appTitle)))))), hasStatus && (h("div", { key: '938a6e6d13bfd92a87baf43934342fb426802d65', class: "app-status" }, h("ic-typography", { key: 'e3e8e83984ead5be2e4869e67640762af42f5f32', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), hasVersion && (h("div", { key: '1129e504a1db3af56d2c931e08bd15f992b5721f', class: "app-version" }, h("ic-typography", { key: 'c6f56458fc5f565055fdb0bde408e6078216d51b', variant: "label", class: "app-version-text", "aria-label": "app version" }, version)))), (hasSearchSlotContent || hasMenuContent) && (h("div", { key: '4523603a02eeb22eca466afc1d2cfa44755b8f17', class: "search-menu-container" }, h("div", { key: '77ff191542abaa41c8610418d54922e91268d364', class: "search-actions-container" }, !overMobileBreakpoint ? (h(Fragment, null, h("slot", { name: "search" }), hasIconButtons && (h("div", { class: "icon-buttons-container" }, h("slot", { name: "buttons" }))))) : (h(Fragment, null, hasSearchSlotContent && (h("ic-button", { id: "search-toggle-button", ref: (el) => (this.mobileSearchButtonEl = el), onMouseDown: searchButtonMouseDownHandler, variant: "icon-tertiary", monochrome: true, size: searchButtonSize, "aria-label": mobileSearchButtonTitle, theme: foregroundColor, onClick: searchButtonClickHandler }, h("slot", { name: "toggle-icon" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#ffffff" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }))))), hasMenuContent && (h("div", { class: "menu-button-container" }, h("span", { id: "navigation-landmark-button-text", class: "navigation-landmark-button-text", "aria-hidden": "true" }, "Main navigation button"), h("nav", { "aria-labelledby": "navigation-landmark-button-text", "aria-hidden": `${navMenuVisible}` }, h("ic-button", { id: "menu-button", ref: (el) => (this.menuButtonEl = el), theme: foregroundColor, variant: "secondary", monochrome: true, "aria-expanded": "false", "aria-haspopup": "true", "aria-label": `Open ${hasNavigation ? "navigation" : "app"} menu`, size: menuSize, onClick: menuButtonClick }, "Menu", h("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 0 24 24", width: "24px", fill: "#ffffff", slot: "left-icon" }, h("path", { d: "M0 0h24v24H0V0z", fill: "none" }), h("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" })))))))))))), mobileSearchBarVisible && (h("div", { key: 'e18aab12917ebdfead1c16c9d508c7feaf7797cb', class: "search-bar-container" }, h("slot", { key: '4bf9ae342c58629ea76dc7de395128afd695dc8b', name: "search" }))), hasNavigation && !overMobileBreakpoint && (h("div", { key: '30401c56949e21a33b18166da0ba2b07ad91c3f0', class: "navigation-tabs" }, h("span", { key: '72561ee2554f09e0ff33b29fb257e7dde0a99a0f', id: "navigation-landmark-text", class: "navigation-landmark-text", "aria-hidden": "true" }, "Main pages"), h("nav", { key: '411b215af2ef320d415af6e189a60dce1b730cdf', "aria-labelledby": "navigation-landmark-text", class: "nav-panel-container" }, h("ic-horizontal-scroll", { key: 'fac1019061aeaea2ea8197cc0100a23f0cd1a69d',
             // eslint-disable-next-line
             // @ts-ignore
-            monochrome: true, appearance: foregroundColor }, h("ul", { key: '7512b3b85f91075faaaeccd96ebac66e068a849e', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'e61779a3dbae4589b88209d8a93f30bda5f039b4', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: 'eb34ba01d4c4bb293e158f2fde8d01450fd74458', version: version, status: status, class: {
+            monochrome: true, appearance: foregroundColor }, h("ul", { key: 'b85234906c34f1fa03b56903656d6f18eb20829d', class: "navigation-item-list", tabindex: "-1" }, h("slot", { key: 'd8ef04882230955d8faba63b13edffeeb969e6e6', name: "navigation" }))))))))), navMenuVisible && (h("ic-navigation-menu", { key: '46b00abe99e079c940d24d4e9693c5445ebcbafa', version: version, status: status, class: {
                 inline,
-            } }, hasIconButtons && (h("div", { key: '996eda82c263a6d31a9ce7ec7aa56f529fe2fae9', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: 'ef23428fa633c02499144aff67d86dd5da8288e5', name: "buttons" }))), h("ul", { key: '1e1fc74c7d084bcc7890cd8449f59112b8b013d9', slot: "navigation" }, h("slot", { key: '7cd944be78c406c52085b9cd8d9f515007716103', name: "navigation" }))))));
+            } }, hasIconButtons && (h("div", { key: '29a9b4e6ba1733b2e96ad9b886bb879ade662d41', class: "menu-buttons-slot", slot: "buttons" }, h("slot", { key: '748b40fd29aedee029a4fa27e999cf9844483613', name: "buttons" }))), h("ul", { key: '20b81216ba0c01470673678a14d873fe8cbcaaae', slot: "navigation" }, h("slot", { key: 'fb9e239a48344888b970e865e103b1ee2f9156ed', name: "navigation" }))))));
     }
     static get is() { return "ic-top-navigation"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ic-top-navigation/ic-top-navigation.stories.js

@@ -389,6 +389,106 @@ export const WithNavigation = {
   },
 };
 
+export const WithHorizontalScroll = {
+  render: () =>
+    html`<ic-top-navigation
+      app-title="Application Name"
+      status="alpha"
+      version="v0.0.7"
+    >
+      <svg
+        slot="app-icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0V0z" 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 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+        />
+      </svg>
+      <ic-search-bar
+        slot="search"
+        placeholder="Search"
+        label="Search"
+      ></ic-search-bar>
+      <ic-navigation-button
+        label="Button One"
+        slot="buttons"
+        onclick="alert('test')"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0V0z" 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 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-5.5-2.5l7.51-3.49L17.5 6.5 9.99 9.99 6.5 17.5zm5.5-6.6c.61 0 1.1.49 1.1 1.1s-.49 1.1-1.1 1.1-1.1-.49-1.1-1.1.49-1.1 1.1-1.1z"
+          />
+        </svg>
+      </ic-navigation-button>
+      <ic-navigation-item
+        slot="navigation"
+        label="One"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Two thousand five hundred and sixty three"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Two thousand five hundred and sixty four"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Two thousand five hundred and sixty five"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Three"
+        href="/"
+        target="_blank"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Four"
+        href="/"
+        selected="true"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Five"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Six"
+        href="/"
+      ></ic-navigation-item>
+      <ic-navigation-item
+        slot="navigation"
+        label="Seven"
+        href="/"
+      ></ic-navigation-item>
+    </ic-top-navigation>`,
+
+  name: "With horizontal scroll",
+
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
 export const UsingUnnamedSlots = {
   render: () =>
     html`<ic-top-navigation

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

@@ -656,3 +656,9 @@ video {
     color: var(--ic-typography-color);
   }
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .trunc-btn {
+    transition: none;
+  }
+}

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

@@ -163,7 +163,7 @@ export class Typography {
     render() {
         var _a, _b;
         const { variant, applyVerticalMargins, maxLines, truncated, expanded, strikethrough, underline, italic, bold, theme, } = this;
-        return (h(Host, { key: 'af405939b9fe0b1d4410d862343471b849e4fdd7', class: {
+        return (h(Host, { key: '9628fbe7b5d9c10f640fe189fe454c332e1f6011', class: {
                 [`ic-typography-${variant}`]: true,
                 [`ic-typography-vertical-margins-${variant}`]: !!applyVerticalMargins,
                 ["ic-typography-bold"]: !!bold,
@@ -176,7 +176,7 @@ export class Typography {
             ((_b = (_a = this.el.getRootNode()) === null || _a === void 0 ? void 0 : _a.host) === null || _b === void 0 ? void 0 : _b.tagName) ===
                 "IC-TOOLTIP") &&
             maxLines &&
-            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: 'ca78a64f9853cbf2d26df99f3c13970ce94de37d', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
+            maxLines > 0 ? (h("div", { class: "trunc-wrapper", ref: (el) => (this.truncWrapperEl = el) }, h("slot", null))) : (h("slot", null)), variant === "body" && maxLines && maxLines > 0 && truncated && (h("button", { key: 'e66a10144ba334ab8b2530e2cf666634ce335717', class: { "trunc-btn": true, focus: this.truncButtonFocussed }, onFocus: this.truncButtonFocus, onBlur: this.truncButtonBlur, onMouseDown: this.truncButtonFocusFromMouse, onClick: this.toggleExpanded }, expanded ? "See less" : "See more"))));
     }
     static get is() { return "ic-typography"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/constants.js

@@ -125,4 +125,11 @@ export const IGNORED_KEYBOARD_CHARACTERS = [
     "Tab",
 ];
 export const IC_CUSTOM_ALLOWED_COMPONENTS = [];
+// Component tag names used in focus trapping helper functions
+export const IC_ACCORDION = "IC-ACCORDION";
+export const IC_ACCORDION_GROUP = "IC-ACCORDION-GROUP";
+export const IC_CHECKBOX = "IC-CHECKBOX";
+export const IC_SEARCH_BAR = "IC-SEARCH-BAR";
+export const IC_TAB_CONTEXT = "IC-TAB-CONTEXT";
+export const IC_TEXT_FIELD = "IC-TEXT-FIELD";
 //# sourceMappingURL=constants.js.map

package/dist/collection/utils/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,IAAI;KAChB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAa,EAAE,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\nimport aiIcon from \"../assets/ai-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n  neutral: {\n    icon: neutralIcon,\n    ariaLabel: \"Neutral\",\n  },\n  info: {\n    icon: infoIcon,\n    ariaLabel: \"For your information\",\n  },\n  warning: {\n    icon: warningIcon,\n    ariaLabel: \"Warning\",\n  },\n  error: {\n    icon: errorIcon,\n    ariaLabel: \"Error\",\n  },\n  success: {\n    icon: successIcon,\n    ariaLabel: \"Success\",\n  },\n  ai: {\n    icon: aiIcon,\n    ariaLabel: \"AI\",\n  },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n  \"aria-atomic\",\n  \"aria-autocomplete\",\n  \"aria-busy\",\n  \"aria-controls\",\n  \"aria-current\",\n  \"aria-describedby\",\n  \"aria-description\",\n  \"aria-details\",\n  \"aria-disabled\",\n  \"aria-dropeffect\",\n  \"aria-errormessage\",\n  \"aria-expanded\",\n  \"aria-flowto\",\n  \"aria-grabbed\",\n  \"aria-haspopup\",\n  \"aria-hidden\",\n  \"aria-invalid\",\n  \"aria-keyshortcuts\",\n  \"aria-label\",\n  \"aria-labelledby\",\n  \"aria-live\",\n  \"aria-owns\",\n  \"aria-relevant\",\n  \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n  XS: 576,\n  S: 768,\n  M: 992,\n  L: 1200,\n  XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n  \"ic-hero\",\n  \"ic-top-navigation\",\n  \"ic-footer\",\n  \"ic-side-navigation\",\n  \"ic-alert\",\n].join(\",\");\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n  [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n  \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n  \"Alt\",\n  \"AltGraph\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"AudioVolumeDown\",\n  \"AudioVolumeMute\",\n  \"AudioVolumeUp\",\n  \"CapsLock\",\n  \"ContextMenu\",\n  \"Control\",\n  \"Delete\",\n  \"End\",\n  \"Enter\",\n  \"Escape\",\n  \"F1\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"Home\",\n  \"Insert\",\n  \"Meta\",\n  \"NumLock\",\n  \"PageDown\",\n  \"PageUp\",\n  \"Shift\",\n  \"Tab\",\n];\n\nexport const IC_CUSTOM_ALLOWED_COMPONENTS: string[] = [];\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/utils/constants.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAE3C,sBAAsB;AACtB,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,sBAAsB;KAClC;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,OAAO;KACnB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,SAAS;KACrB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,MAAM;QACZ,SAAS,EAAE,IAAI;KAChB;CACF,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,aAAa;IACb,mBAAmB;IACnB,WAAW;IACX,eAAe;IACf,cAAc;IACd,kBAAkB;IAClB,kBAAkB;IAClB,cAAc;IACd,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,eAAe;IACf,aAAa;IACb,cAAc;IACd,eAAe;IACf,aAAa;IACb,cAAc;IACd,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;IACjB,WAAW;IACX,WAAW;IACX,eAAe;IACf,sBAAsB;CACvB,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,EAAE,EAAE,GAAG;IACP,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,GAAG;IACN,CAAC,EAAE,IAAI;IACP,EAAE,EAAE,KAAK;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACvC,SAAS;IACT,mBAAmB;IACnB,WAAW;IACX,oBAAoB;IACpB,UAAU;CACX,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,UAAU,CAAC,CAAC;AAMtD,MAAM,CAAC,MAAM,yBAAyB,GAAsB;IAC1D,UAAU,EAAE,CAAC,SAAS,EAAE,WAAW,CAAC;CACrC,CAAC;AAEF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,OAAO,CAAC;AAClD,MAAM,CAAC,MAAM,0BAA0B,GAAG,GAAG,CAAC;AAE9C,sFAAsF;AACtF,MAAM,CAAC,MAAM,2BAA2B,GAAG;IACzC,KAAK;IACL,UAAU;IACV,WAAW;IACX,WAAW;IACX,YAAY;IACZ,SAAS;IACT,iBAAiB;IACjB,iBAAiB;IACjB,eAAe;IACf,UAAU;IACV,aAAa;IACb,SAAS;IACT,QAAQ;IACR,KAAK;IACL,OAAO;IACP,QAAQ;IACR,IAAI;IACJ,KAAK;IACL,KAAK;IACL,KAAK;IACL,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;IACN,QAAQ;IACR,MAAM;IACN,SAAS;IACT,UAAU;IACV,QAAQ;IACR,OAAO;IACP,KAAK;CACN,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAa,EAAE,CAAC;AAEzD,8DAA8D;AAC9D,MAAM,CAAC,MAAM,YAAY,GAAG,cAAc,CAAC;AAC3C,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AACvD,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC;AACzC,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC;AAC7C,MAAM,CAAC,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAC/C,MAAM,CAAC,MAAM,aAAa,GAAG,eAAe,CAAC","sourcesContent":["import errorIcon from \"../assets/error-icon.svg\";\nimport infoIcon from \"../assets/info-icon.svg\";\nimport neutralIcon from \"../assets/neutral-icon.svg\";\nimport successIcon from \"../assets/success-icon.svg\";\nimport warningIcon from \"../assets/warning-icon.svg\";\nimport aiIcon from \"../assets/ai-icon.svg\";\n\n// Global status icons\nexport const VARIANT_ICONS = {\n  neutral: {\n    icon: neutralIcon,\n    ariaLabel: \"Neutral\",\n  },\n  info: {\n    icon: infoIcon,\n    ariaLabel: \"For your information\",\n  },\n  warning: {\n    icon: warningIcon,\n    ariaLabel: \"Warning\",\n  },\n  error: {\n    icon: errorIcon,\n    ariaLabel: \"Error\",\n  },\n  success: {\n    icon: successIcon,\n    ariaLabel: \"Success\",\n  },\n  ai: {\n    icon: aiIcon,\n    ariaLabel: \"AI\",\n  },\n};\n\n// Global ARIA attributes\nexport const IC_INHERITED_ARIA = [\n  \"aria-atomic\",\n  \"aria-autocomplete\",\n  \"aria-busy\",\n  \"aria-controls\",\n  \"aria-current\",\n  \"aria-describedby\",\n  \"aria-description\",\n  \"aria-details\",\n  \"aria-disabled\",\n  \"aria-dropeffect\",\n  \"aria-errormessage\",\n  \"aria-expanded\",\n  \"aria-flowto\",\n  \"aria-grabbed\",\n  \"aria-haspopup\",\n  \"aria-hidden\",\n  \"aria-invalid\",\n  \"aria-keyshortcuts\",\n  \"aria-label\",\n  \"aria-labelledby\",\n  \"aria-live\",\n  \"aria-owns\",\n  \"aria-relevant\",\n  \"aria-roledescription\",\n];\n\nexport const IC_DEVICE_SIZES = {\n  XS: 576,\n  S: 768,\n  M: 992,\n  L: 1200,\n  XL: 99999,\n};\n\nexport const IC_BLOCK_COLOR_COMPONENTS = [\n  \"ic-hero\",\n  \"ic-top-navigation\",\n  \"ic-footer\",\n  \"ic-side-navigation\",\n  \"ic-alert\",\n].join(\",\");\n\nexport const IC_FIXED_COLOR_COMPONENTS = [\"ic-alert\"];\n\nexport interface IcColorExceptions {\n  [details: string]: string[];\n}\n\nexport const IC_BLOCK_COLOR_EXCEPTIONS: IcColorExceptions = {\n  \"ic-alert\": [\"ic-link\", \"ic-button\"],\n};\n\n/* Range within which the chosen theme colour would not have a sufficient brightness difference with either of the black or white foreground colours\n * The brightness difference must be greater than 125 to provide good colour visibility\n * Calculated by:\n * - Using the brightness formula for both colours: https://www.w3.org/TR/AERT/#color-contrast\n * - Adding 125 to the brightness of the black foreground colour - RGB(11, 12, 12)\n * - Subtracting 125 from the brightness of the white foreground colour - RGB(255, 255, 255)\n */\nexport const BLACK_MIN_COLOR_BRIGHTNESS = 136.701;\nexport const WHITE_MAX_COLOR_BRIGHTNESS = 130;\n\n// Keyboard characters that do not affect the content of an input control when pressed\nexport const IGNORED_KEYBOARD_CHARACTERS = [\n  \"Alt\",\n  \"AltGraph\",\n  \"ArrowDown\",\n  \"ArrowLeft\",\n  \"ArrowRight\",\n  \"ArrowUp\",\n  \"AudioVolumeDown\",\n  \"AudioVolumeMute\",\n  \"AudioVolumeUp\",\n  \"CapsLock\",\n  \"ContextMenu\",\n  \"Control\",\n  \"Delete\",\n  \"End\",\n  \"Enter\",\n  \"Escape\",\n  \"F1\",\n  \"F10\",\n  \"F11\",\n  \"F12\",\n  \"F2\",\n  \"F3\",\n  \"F4\",\n  \"F5\",\n  \"F6\",\n  \"F7\",\n  \"F8\",\n  \"F9\",\n  \"Home\",\n  \"Insert\",\n  \"Meta\",\n  \"NumLock\",\n  \"PageDown\",\n  \"PageUp\",\n  \"Shift\",\n  \"Tab\",\n];\n\nexport const IC_CUSTOM_ALLOWED_COMPONENTS: string[] = [];\n\n// Component tag names used in focus trapping helper functions\nexport const IC_ACCORDION = \"IC-ACCORDION\";\nexport const IC_ACCORDION_GROUP = \"IC-ACCORDION-GROUP\";\nexport const IC_CHECKBOX = \"IC-CHECKBOX\";\nexport const IC_SEARCH_BAR = \"IC-SEARCH-BAR\";\nexport const IC_TAB_CONTEXT = \"IC-TAB-CONTEXT\";\nexport const IC_TEXT_FIELD = \"IC-TEXT-FIELD\";\n"]}

package/dist/collection/utils/helpers.js

@@ -1,6 +1,6 @@
 import { forceUpdate } from "@stencil/core";
-import { IcBrandForegroundEnum, } from "../utils/types";
-import { IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_FIXED_COLOR_COMPONENTS, } from "./constants";
+import { IcBrandForegroundEnum, } from "./types";
+import { IC_ACCORDION, IC_ACCORDION_GROUP, IC_BLOCK_COLOR_COMPONENTS, IC_BLOCK_COLOR_EXCEPTIONS, IC_CHECKBOX, IC_FIXED_COLOR_COMPONENTS, IC_SEARCH_BAR, IC_TAB_CONTEXT, IC_TEXT_FIELD, } from "./constants";
 const DARK_MODE_THRESHOLD = 133.3505;
 const ANYWHERE_SEARCH_POSITION = "anywhere";
 const icInput = "ic-input";
@@ -472,4 +472,171 @@ export const getElementInheritedTheme = (el) => {
 export const isSafari = /safari/i.test(window.navigator.userAgent) &&
     !/Edge/i.test(window.navigator.userAgent) &&
     !/chrome/i.test(window.navigator.userAgent);
+/**
+ * Focuses the provided element, or the next focusable element if it should be skipped. Used for focus trapping.
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export const focusElement = (focusAttemptCount, focusedElementIndex, interactiveElementList, shiftKey = false) => {
+    const element = interactiveElementList[focusedElementIndex];
+    if (!element) {
+        return;
+    }
+    let newFocusAttemptCount = focusAttemptCount;
+    if (newFocusAttemptCount++ > interactiveElementList.length) {
+        return;
+    }
+    let newFocusedElementIndex = focusedElementIndex;
+    if (shouldSkipElement(element)) {
+        newFocusedElementIndex = getFocusIndexBasedOnShiftKey(newFocusedElementIndex, shiftKey);
+        newFocusedElementIndex = getLoopedNextFocusIndexIfLastElement(newFocusedElementIndex, interactiveElementList);
+        return focusElement(newFocusAttemptCount, newFocusedElementIndex, interactiveElementList, shiftKey);
+    }
+    else {
+        switch (element.tagName) {
+            case IC_ACCORDION:
+            case IC_ACCORDION_GROUP:
+            case IC_CHECKBOX:
+            case IC_SEARCH_BAR:
+            case IC_TAB_CONTEXT:
+            case IC_TEXT_FIELD:
+                element.setFocus();
+                break;
+            default:
+                element.focus();
+        }
+        return { newFocusAttemptCount, newFocusedElementIndex };
+    }
+};
+/**
+ * Gets the index of the currently focused element. Used for focus trapping.
+ * @param el - host element of the component
+ * @param interactiveElementList - list of interactive elements
+ */
+export const getFocusedElementIndex = (el, interactiveElementList) => {
+    var _a;
+    for (let i = 0; i < interactiveElementList.length; i++) {
+        if (interactiveElementList[i] ===
+            (((_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) || document.activeElement)) {
+            return i;
+        }
+    }
+    return null;
+};
+/**
+ * Gets the next focusable element index based on whether the shift key is pressed. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param shiftKey - whether the shift key is pressed
+ */
+export const getFocusIndexBasedOnShiftKey = (focusedElementIndex, shiftKey) => (shiftKey ? (focusedElementIndex -= 1) : (focusedElementIndex += 1));
+/**
+ * Gets the next focusable element index, looping back to the start or end if necessary. Used for focus trapping.
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ */
+export const getLoopedNextFocusIndexIfLastElement = (focusedElementIndex, interactiveElementList) => {
+    if (focusedElementIndex > interactiveElementList.length - 1) {
+        return 0;
+    }
+    else if (focusedElementIndex < 0) {
+        return interactiveElementList.length - 1;
+    }
+    return focusedElementIndex;
+};
+/**
+ * Handles tab key press for focus trapping.
+ * @param el - host element of the component
+ * @param focusAttemptCount - number of focus attempts that have been made
+ * @param focusedElementIndex - current focused element index
+ * @param interactiveElementList - list of interactive elements
+ * @param shiftKey - whether the shift key is pressed
+ */
+export function handleFocusTrapTabKeyPress(el, focusAttemptCount, focusedElementIndex, interactiveElementList, shiftKey) {
+    var _a;
+    let newFocusAttemptCount = focusAttemptCount;
+    let newFocusedElementIndex = getFocusedElementIndex(el, interactiveElementList) || focusedElementIndex;
+    if (((_a = interactiveElementList[focusedElementIndex]) === null || _a === void 0 ? void 0 : _a.tagName) === IC_SEARCH_BAR) {
+        return {
+            newFocusAttemptCount,
+            newFocusedElementIndex,
+            preventDefault: false,
+        };
+    }
+    newFocusedElementIndex = getFocusIndexBasedOnShiftKey(newFocusedElementIndex, shiftKey);
+    newFocusedElementIndex = getLoopedNextFocusIndexIfLastElement(newFocusedElementIndex, interactiveElementList);
+    newFocusAttemptCount = 0;
+    const focusElementResult = focusElement(newFocusAttemptCount, newFocusedElementIndex, interactiveElementList, shiftKey);
+    if (focusElementResult) {
+        newFocusedElementIndex = focusElementResult.newFocusedElementIndex;
+        newFocusAttemptCount = focusElementResult.newFocusAttemptCount;
+    }
+    return { newFocusAttemptCount, newFocusedElementIndex, preventDefault: true };
+}
+/**
+ * Sets up listener and mutation observer to refresh interactive elements on slot changes. Used for focus trapping.
+ * @param contentWrapper - content wrapper element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export const refreshInteractiveElementsOnSlotChange = (contentWrapper, getInteractiveElements) => {
+    var _a;
+    let contentAreaSlot = null;
+    let contentAreaMutationObserver = null;
+    if (contentWrapper) {
+        contentAreaSlot = contentWrapper.querySelector("slot");
+        // Detect changes to slotted elements
+        contentAreaSlot === null || contentAreaSlot === void 0 ? void 0 : contentAreaSlot.addEventListener("slotchange", getInteractiveElements);
+        contentAreaMutationObserver = new MutationObserver(() => {
+            getInteractiveElements();
+        });
+        // Detect changes to children of slotted elements
+        (_a = getSlotElements(contentWrapper)) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
+            contentAreaMutationObserver === null || contentAreaMutationObserver === void 0 ? void 0 : contentAreaMutationObserver.observe(el, {
+                childList: true,
+                subtree: true,
+            });
+        });
+    }
+    return { contentAreaSlot, contentAreaMutationObserver };
+};
+/**
+ * Removes listener and disconnects mutation observer for slot changes. Used for focus trapping.
+ * @param contentAreaSlotMutationObserver - mutation observer for content area slot
+ * @param contentAreaSlot - content area slot element
+ * @param getInteractiveElements - function to get interactive elements
+ */
+export const removeInteractiveElementSlotChangeListener = (contentAreaSlot, contentAreaSlotMutationObserver, getInteractiveElements) => {
+    if (contentAreaSlot) {
+        contentAreaSlot.removeEventListener("slotchange", getInteractiveElements);
+        contentAreaSlotMutationObserver === null || contentAreaSlotMutationObserver === void 0 ? void 0 : contentAreaSlotMutationObserver.disconnect();
+    }
+};
+/**
+ * Determines whether an element should be skipped when focusing interactive elements. Used for focus trapping.
+ * @param element - element to check
+ */
+export const shouldSkipElement = (element) => {
+    if (!element) {
+        return true;
+    }
+    const isHidden = getComputedStyle(element).visibility === "hidden" ||
+        element.offsetHeight === 0 ||
+        element.hasAttribute("disabled") ||
+        (element.tagName === IC_ACCORDION_GROUP &&
+            element.hasAttribute("single-expansion"));
+    const radioEl = element.closest("ic-radio-option");
+    return (isHidden ||
+        (element.getAttribute("type") === "radio" &&
+            !!radioEl &&
+            !(radioEl.hasAttribute("selected") || element.tabIndex === 0)));
+};
+/**
+ * Gets all interactive elements slotted within a component. Used for focus trapping.
+ * @param el - host element of the component
+ */
+export const slottedInteractiveElements = (el) => Array.from(el.querySelectorAll(`a[href], button, input:not(.ic-input), textarea, select, details, [tabindex]:not([tabindex="-1"]),
+          ic-button, ic-checkbox, ic-select, ic-search-bar, ic-tab-context,
+          ic-back-to-top, ic-breadcrumb, ic-chip[dismissible="true"], ic-footer-link, ic-link, ic-navigation-button,
+          ic-navigation-item, ic-switch, ic-text-field, ic-accordion-group, ic-accordion, ic-date-input, ic-date-picker, ic-action-chip, ic-time-input`));
 //# sourceMappingURL=helpers.js.map