npm - @ukic/web-components - Versions diffs - 3.19.0 → 3.20.0 - Mend

@ukic/web-components 3.19.0 → 3.20.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (449) hide show

package/dist/components/ic-horizontal-scroll2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { F as elementOverflowsX, n as getSlotElements, c as checkResizeObserver, I as IcBrandForegroundEnum } from './helpers.js';
+import { K as elementOverflowsX, n as getSlotElements, c as checkResizeObserver, I as IcBrandForegroundEnum } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
@@ -170,22 +170,22 @@ const HorizontalScroll = /*@__PURE__*/ proxyCustomElement(class HorizontalScroll
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '5f340f9d11d2ca42a17eacea2b9ce38b35614151', class: {
+        return (h(Host, { key: '329d00bc4e7ebfab434cb41dd32e919820c5adb5', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '555d223168b83a595030b18c4d21874c1cf679bd', "aria-hidden": "true", class: {
+            } }, h("div", { key: 'ed231bf1fcd68399e29e790026b377bf8f96a14e', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: '9196738f3d7d2c48b9173af7b152828a00c56edd', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: 'c34f45cb44e242939985f792a21e482a11078fba', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: '89c1dc4017ec5a5ccd691c16c47957d35067d0b5', class: "scroll-splitter-left" })), h("slot", { key: 'bc45bafea5bad600701b74f097aae39c2e6b1e4d' }), h("div", { key: 'b961e7d153dccb0187f0aa8c02f73494f4233649', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'c5b52e4cfa655f8dc499e69da531870f4e4fe216', class: "scroll-splitter-left" })), h("slot", { key: '8478dc63668ed2e842182c47e9a3b27b77ac642f' }), h("div", { key: 'b9b0e21e69a40f7afda403db3db8b983257240c0', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: 'd0960807543d4513129f192ce975c7a0139a91a0', class: "scroll-splitter-right" }), h("ic-button", { key: '4844fbcec6360b939a67c3878e36f4b812685c22', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: '909936dddf54502bb1bdc3fdfdf36d59b5582238', class: "scroll-splitter-right" }), h("ic-button", { key: '4e9093a9da1b3e387933dfc2495f1279bb7ad180', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }

package/dist/components/ic-input-component-container2.js CHANGED Viewed

@@ -50,15 +50,15 @@ const InputComponentContainer = /*@__PURE__*/ proxyCustomElement(class InputComp
     }
     render() {
         const { size, validationStatus, disabled, readonly, multiLine, fullWidth, validationInline, } = this;
-        return (h(Host, { key: '20c111945d3fea6c2ec9ddcb70a0e5c74489fcd0', class: {
+        return (h(Host, { key: '86271007106caa930e823cd2a9b9242670a1d2c1', class: {
                 [`ic-input-component-container-${size}`]: true,
                 [`ic-input-component-container-${validationStatus}`]: validationStatus !== "" && !disabled && !readonly,
                 "ic-input-component-container-disabled": !!disabled,
                 "ic-input-component-container-readonly": !!readonly,
                 "ic-input-component-container-multiline": !!multiLine,
                 "ic-input-component-container-full-width": !!fullWidth,
-            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '10974ddaa6b7e895645b50a73501ef8004036e8d', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '29b14de6450c67f924e6820cc4ef74f20abad132', class: "icon-container" }, h("slot", { key: '9c35122ee4308cd2782cf405a80b4b986a4b3fe8', name: "left-icon" }))), h("slot", { key: '71782b3c047c6bc14d63bb2218fc825ee644ed12' }), validationInline &&
-            validationStatus === IcInformationStatus.Success && (h("span", { key: 'e3ad09a64f224428e5a38127390751d86b5db914', class: "inline-success", innerHTML: successIcon })))));
+            }, "aria-disabled": disabled ? "true" : null }, h("div", { key: '2b8e64e7cc2d78b34b816b080f7e5856b4aef254', class: "focus-indicator" }, slotHasContent(this.el, "left-icon") && (h("div", { key: '738e1d776664a7971bd97f36a68b8193849178ae', class: "icon-container" }, h("slot", { key: 'c6d5fa181367e1988b3e454b06c01345afa393ff', name: "left-icon" }))), h("slot", { key: '970ccdc08abd4dbf84248cc5708ab09ecbcbc0ae' }), validationInline &&
+            validationStatus === IcInformationStatus.Success && (h("span", { key: '6c7cbd9c69c11a8688972039ba519829805d3ab7', class: "inline-success", innerHTML: successIcon })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-input-container2.js CHANGED Viewed

@@ -17,11 +17,11 @@ const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer ext
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: '25d076eaba3bd1c7e469a5a3c44b26990dfcb43c' }, h("div", { key: '77559c5ab0557c9d42eb30d4a6487962dc8d2462', class: {
+        return (h(Host, { key: 'ffa7ae6f683f172205085d3ade5af4ed2b665f5e' }, h("div", { key: 'e010e17e975c12a26c9ae66cb604ca561882901b', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: '0b579f90ba6c9b7b5c515632b9e3f78a3a47c9a2' }))));
+            } }, h("slot", { key: '202931f1bc8d2ab341753c23464e266fd899a15d' }))));
     }
     static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {

package/dist/components/ic-input-label2.js CHANGED Viewed

@@ -70,11 +70,11 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: '632235f5528b1ee7cbdc981b1fd8f83f81317ac5', class: {
+        return (h(Host, { key: 'bc32f49e555f33d246a3710c0ccea33ca511728f', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: '4d5ffe88dcfd61697ac5c10bbfe72da69d6cd09e', variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: 'b5f8b55d18f914ed5ae2b3392661a08d35cbe3d9', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
             } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));

package/dist/components/ic-input-validation2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { z as getInputValidationTextID, i as isSlotUsed, A as IcInformationStatus } from './helpers.js';
-import { w as warningIcon, g as errorIcon, s as successIcon } from './constants.js';
+import { w as warningIcon, m as errorIcon, s as successIcon } from './constants.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icInputValidationCss = "ic-input-validation{max-width:var(--input-width, 20rem);display:flex}ic-input-validation.ic-input-validation-with-status{margin-top:var(--ic-space-xs)}ic-input-validation.ic-input-validation-full-width{width:100%;max-width:none}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-validation .sr-only{position:absolute;left:-9999px}";
@@ -43,14 +43,14 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
         const displayIcon = status !== "" ? ICON[status] : "";
-        return (h(Host, { key: '96d572f2475891bb27613f8bdfc137fc5a5eeceb', class: {
+        return (h(Host, { key: 'c9749e8bb3c64a0ec364063500c6e9d6a2606116', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
                 "ic-input-validation-with-status": status !== "",
-            } }, displayIcon !== "" && (h("span", { key: '8b8a9716ab6350d4959ba09254830e17d275258d', class: {
+            } }, displayIcon !== "" && (h("span", { key: '37f56d09513abdaf04e3cf0131d89c1e78c77dd1', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: '587682a13e0ef65b1fc31e7018827077728e1b5d', variant: "caption", class: "statustext" }, h("span", { key: '6c398ad4c73d27b90a9df1485902dcb4d4ea1b49', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: '542800ff7792e9bd075d2f682ca9e997ceb74fc2', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: 'edcd7ddf24ae842f40eada9fa221da19b9fb6c79', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: 'c48a3f1ec46a3c9cc5c57c271c90f7fa6f9f7ff4', variant: "caption", class: "statustext" }, h("span", { key: '445497c5225d3bdcf4505d0e27ef8af213a9fc11', id: this.for && getInputValidationTextID(this.for) }, isSlotUsed(this.el, "validation-message") ? (h("slot", { name: "validation-message" })) : (message)), h("span", { key: 'f9126a58e59ac9f05c88e8c4860f49eb3d394fa7', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: 'ee1a49b5c1765f153f4ee8e10cd94fa0e1549a54', name: "validation-message-adornment" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-layout-grid-item.js CHANGED Viewed

@@ -49,9 +49,9 @@ const LayoutGridItem = /*@__PURE__*/ proxyCustomElement(class LayoutGridItem ext
     }
     render() {
         const { hideInMobileMode } = this;
-        return (h(Host, { key: 'bf040e1b3ddbd7f275a026008bf6f011fa440b1d', class: {
+        return (h(Host, { key: '142d6bb3ec03f4e0b362b1d10da70a3ee7f215d5', class: {
                 "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
-            } }, h("slot", { key: '0833ce81285ee10fdfb943fe7d54d0e7db210313' })));
+            } }, h("slot", { key: '4711277515425bc6bff4d1089c14fafc3ab6032b' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-layout-grid.js CHANGED Viewed

@@ -131,10 +131,10 @@ const LayoutGrid = /*@__PURE__*/ proxyCustomElement(class LayoutGrid extends HTM
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '47ece5b026e7e3c97ed38bfe3bab840c1f19ab7c', class: {
+        return (h(Host, { key: 'edd252e9b99b8ae5a131062ac6f102b2e76d22ce', class: {
                 [`ic-layout-grid-aligned-${aligned}`]: true,
                 ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: 'f60fbe3bcc6218cf7340513a1699c13b0db377a0' })));
+            } }, h("slot", { key: '9d4b3b7d4f3379b01751707270f00f988e16b0a8' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-link2.js CHANGED Viewed

@@ -94,7 +94,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: 'ca6343037bc5985cf5062b7797e71e0dd0184fb3', class: {
+        return (h(Host, { key: '2b5806a3fa48ea9113346d0d9ac8ecd86e0c699a', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

package/dist/components/ic-loading-indicator2.js CHANGED Viewed

@@ -198,24 +198,24 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, internalType, label, max, min, monochrome, progress, size, theme, } = this;
-        return (h(Host, { key: '1ffb79fd15c3e0593690a4804bb7fc71650b3c8b', class: {
+        return (h(Host, { key: '2905a37e973a97b428414010c467764d9e2a9fd1', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
                 [`ic-loading-indicator-size-${size}`]: true,
-            } }, h("div", { key: '2a8feaec441a5f127316a735ab5de75574a6f153', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '1daa3ca4eff5bd9258a8ecd6a38bb65aa54f3b77', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: '6fa756abb41297cc5e8610b30c1cb3f03d953c2d', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'f1112dc701c88024573e6dc9096725ab4675ee2e', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${internalType}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '904bdab934ef67e6d7a9e767022e663e3d0277e9', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'd56cfeaee1b3e5f2e2068d9784414df0bbdab913', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${internalType}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '15447231a4e4f64e1fba0de4cf85a6c6daadeb6e', variant: "subtitle-small", class: "inner-text" }, innerLabel)), internalType === "circular" && (h("svg", { key: '1bf8ea4a7caf8abc6589bbc474151872d3e14360', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: 'c75483f7699d92c66ff743c0d2afd99625d14c23', cx: x, cy: y, r: r }), h("circle", { key: '9ace7b29af77992871d511417210923920f04549', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '6230e2f24f7e4e9872446a4642b4f18e2410b59d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), internalType === "circular" && (h("svg", { key: '19adf2a04d18a77082f44ab13404907cee59fde2', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '60be621b7acf27bc1bebd35a71f9666038c232f2', cx: x, cy: y, r: r }), h("circle", { key: '7197e37b0245ed0995cd414cb03d9a96c3a2ac8f', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '7b3d223169a32fab46d3000d6d75ec09ad053518', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '447314a91e8979587dd40c4a6635512af86f7fe8' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: 'cc98f0844fdb83d05ee52dee9d6545d263a15181', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '1631cea623f99ab6573dca4726480ac62207e5fe' }, indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-menu-group.js CHANGED Viewed

@@ -13,7 +13,7 @@ const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLE
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { key: '979b8fb6d5820b0bedb7b5fd0695ae1d45f28ce7', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '9ec6ec6fa6bb1eeeea72f74505bab6310e6d2e1f', variant: "subtitle-small" }, this.label)), h("span", { key: '720be07138e658bbaa4ed5131c5ec0ebea15c110', class: "menu-items-wrapper" }, h("slot", { key: 'd9740690e6caf5aaa3c54f96e6be45f38b6f1eea' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '44bb82e43b7de2acf8f955d77666455de0ef67fa' }))));
+        return (h(Host, { key: '1f0ba7349890547fbf0bab5c0853b94e4e2a7035', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '9263c78812e4b852a76d8e0353bd347df530ff19', variant: "subtitle-small" }, this.label)), h("span", { key: '2009a196f392ab0cdc88bfa5d6ac835d698e42dc', class: "menu-items-wrapper" }, h("slot", { key: '1db2daba73b7567a2a71556b0efead251f8b5e14' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '058408c1291cc200de221c780f599beed158f3cc' }))));
     }
     get el() { return this; }
     static get style() { return IcMenuGroupStyle0; }

package/dist/components/ic-menu2.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
-import { G as isMacDevice, o as onComponentRequiredPropUndefined, H as getOptionsWithoutGroupTitlesCount } from './helpers.js';
+import { L as isMacDevice, o as onComponentRequiredPropUndefined, M as getOptionsWithoutGroupTitlesCount } from './helpers.js';
 import { f as IC_CUSTOM_ALLOWED_COMPONENTS } from './constants.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
@@ -2308,7 +2308,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: '1e4da9c2108dc9df947dcf92f558fcbc14c3f686', class: {
+        return (h(Host, { key: '5e22882e9f1d08db292939afb816b3b174a73453', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -2317,7 +2317,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '0861edb24bdb21aecd3b70ec4d7f11112d4ad3eb', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: 'eaa102b0267705ceeaf965ea406c27674228f568', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -2345,7 +2345,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: 'aa5a9084985ac02f145acbc5d45ff726ae5d575e', class: "option-bar" }, h("ic-typography", { key: 'c9854cfb8d9ddf6b54a4b66445020f1e437dece7' }, h("p", { key: '47b9491c4332bc7d547df9a6edbd97290cdb9535' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'a07f28d90a7fd4efa5d3a0574f161a111a46c048', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: 'dba1e24902c69f0ff275392bbcc1a11dc4be9375', class: "option-bar" }, h("ic-typography", { key: 'eadf27270294c8ae5606666434f67edce83b0040' }, h("p", { key: 'e40a85be98f91018138b5c3e47e9dd568b4b3770' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '0bf467d9751a666ca94b5936143bacfb239f5667', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/ic-navigation-button.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { I as IC_INHERITED_ARIA } from './constants.js';
-import { b as inheritAttributes, o as onComponentRequiredPropUndefined, J as getElementInheritedTheme, l as getBrandForegroundAppearance, I as IcBrandForegroundEnum, i as isSlotUsed } from './helpers.js';
+import { b as inheritAttributes, o as onComponentRequiredPropUndefined, N as getElementInheritedTheme, l as getBrandForegroundAppearance, I as IcBrandForegroundEnum, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$5 } from './ic-button2.js';
 import { d as defineCustomElement$4 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -111,11 +111,11 @@ const NavigationButton = /*@__PURE__*/ proxyCustomElement(class NavigationButton
             target,
             theme,
         };
-        return (h(Host, { key: 'a277e7f5b36c9a2c7e7a02c488130727a7894a95', class: {
+        return (h(Host, { key: '538ea349b1f0791b0cd68898380fe4cfd41b5496', class: {
                 "in-side-menu": isMenuMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 dark: parentThemeDark,
-            } }, h("ic-button", Object.assign({ key: '50ebf0528b85ac029bd83547d12d850136c382d6', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: '10f847ba11eec3c7e398b15807865783ede32493', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: '37a37bf5dfbcb7ef4e90b86dde4d9efec521911d', name: "badge" }))));
+            } }, h("ic-button", Object.assign({ key: 'afee63c46529276cd2b77ef6d7c1c69b47a7ae15', ref: (el) => (this.buttonEl = el), class: { "popout-menu-button": isMenuMode }, "aria-label": !isMenuMode ? label : null, disableTooltip: isMenuMode, fullWidth: isMenuMode, monochrome: !isMenuMode, size: isMenuMode ? "medium" : "large", variant: isMenuMode ? "tertiary" : "icon-tertiary" }, buttonProps, inheritedAttributes), isMenuMode ? label : "", h("slot", { key: '8c2a89dfc8f974017cf5384355ce0f881218d038', slot: "left-icon", name: "icon" }), isSlotUsed(this.el, "badge") && h("slot", { key: '7fab4237f3f6745159d584df008e82214ecd3322', name: "badge" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-navigation-group.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, l as getBrandForegroundAppearance, q as getCurrentDeviceSize, K as getNavItemParentDetails } from './helpers.js';
+import { D as DEVICE_SIZES, l as getBrandForegroundAppearance, q as getCurrentDeviceSize, O as getNavItemParentDetails } from './helpers.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
@@ -271,7 +271,7 @@ const NavigationGroup = /*@__PURE__*/ proxyCustomElement(class NavigationGroup e
         const isTopNav = this.navigationType === "top";
         const isTopNavDesktop = !inTopNavSideMenu && isTopNav;
         const ariaExpanded = (isSideNav && expanded) || (isTopNav && dropdownOpen);
-        return (h(Host, { key: '15cdbd2b2ce19129b1ff6a845922036813e7ae99', class: {
+        return (h(Host, { key: '70e377a3055b6c000c860b0c3933efd73ded9876', class: {
                 "in-side-menu": inTopNavSideMenu,
                 "ic-navigation-group-expandable": expandable,
                 "ic-navigation-group-side-nav": isSideNav,

package/dist/components/ic-navigation-item.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, forceUpdate, Host } from '@stencil/core/internal/client';
-import { L as getCssProperty, D as DEVICE_SIZES, l as getBrandForegroundAppearance, q as getCurrentDeviceSize, K as getNavItemParentDetails } from './helpers.js';
+import { P as getCssProperty, D as DEVICE_SIZES, l as getBrandForegroundAppearance, q as getCurrentDeviceSize, O as getNavItemParentDetails } from './helpers.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { O as OpenInNew } from './OpenInNew.js';
 import { d as defineCustomElement$3 } from './ic-tooltip2.js';
@@ -203,7 +203,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
     render() {
         const { inTopNavSideMenu, isTopNavChild, selected, navigationType, focusStyle, isInitialRender, sideNavExpanded, displayNavigationTooltip, collapsedIconLabel, isSideNavMobile, expandable, isInSideNav, theme, } = this;
         const isTopNavChildDesktop = isTopNavChild && !inTopNavSideMenu;
-        return (h(Host, { key: '8c8d6840c525322be195b26b40b81de5b76a3bb9', class: {
+        return (h(Host, { key: 'e0752e0df8889387ca765848f4a7e31ecfba79f0', class: {
                 "navigation-item": true,
                 "navigation-item-selected": !isTopNavChild && selected,
                 "navigation-item-top-nav": !inTopNavSideMenu && navigationType === "top",
@@ -222,7 +222,7 @@ const NavigationItem = /*@__PURE__*/ proxyCustomElement(class NavigationItem ext
                 expandable,
                 [focusStyle]: isTopNavChild ? isInSideNav : !inTopNavSideMenu,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onBlur: isTopNavChildDesktop ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("ic-tooltip", { key: '20f1518fa353f8ab041ce7a71d8cbe0277ee9e6a', label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
+            }, onBlur: isTopNavChildDesktop ? this.handleBlur : null, onClick: this.handleClick, "aria-current": selected ? "page" : null, role: "listitem" }, h("ic-tooltip", { key: '996ecfbd2a8649e1601ea2161091d374bb56e331', label: this.generateTooltipLabel(), target: "navigation-item", placement: "right", class: {
                 "tooltip-navigation-item": true,
                 "tooltip-navigation-item-side-nav-collapsed": displayNavigationTooltip && isInSideNav,
                 "tooltip-long-label-navigation-item-side-nav-expanded": this.el.hasAttribute("[display-navigation-tooltip = 'true']"),

package/dist/components/ic-navigation-menu2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { M as getSlot, N as getSlotContent, i as isSlotUsed } from './helpers.js';
+import { Q as getSlot, R as getSlotContent, i as isSlotUsed } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$2 } from './ic-tooltip2.js';
@@ -131,16 +131,16 @@ const NavigationMenu = /*@__PURE__*/ proxyCustomElement(class NavigationMenu ext
         }
     }
     render() {
-        return (h(Host, { key: '5040ecf445a2131ca777cf9795f4fc25f9ee9d3f', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: '85b31d01281c8ea08c7fa09d37063fa6274ade9d', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '336cf9892c7698a887a6a8fa6f287c40b441c2ab', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: 'd2367e40e87f65ef92225fb0240f049723de8eea', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '665c9f21f3c81961edff4e959fa77a2c7479f475', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '3e9debb08e2efe3bc8b4a5266d1df14ee7ee3b8a', class: {
+        return (h(Host, { key: '5a79b217cf87852b89438451b49f8c0ecd64d594', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: '19ad13211281929be69da54673ab85db94d2d635', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '3a9508f13aa3681fc7c7136e2d3ffb30b5ffbeac', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '08c2ef423b60da0d3f592366ce30f2e8c9ad8ef6', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '89a14e10b43019fe3aab9cca7aa4585d9479ab61', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '0bf015f6f252f036e2505fe23438f6974e64cb49', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, h("ic-button", { key: '8fa44a70222a765adbe21298f81d2a8d9507b5ec', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon-tertiary", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: '9b5dc10d973f156783708c56f30e618db47a6de1', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9fa87211d3c594f36b6a7b0bd1d5298f8d04d4f4', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: 'f4ba3ba39a6c152d32fcfe4d67492effed09eae7', name: "navigation" })), this.hasButtons && (h("div", { key: 'ac05566d1578abbf6377417130e3eb17b177e67d', class: {
+            } }, h("ic-button", { key: '0d8c26de4c6e66c94b36a6f752986c60eda14190', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon-tertiary", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: '2de2610f0d3f1293ed49845557f9e243240b466f', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '4c985f39a7428d9ddeff986a65872e2ad62e6b06', d: "M14 1.41L12.59 0L7 5.59L1.41 0L0 1.41L5.59 7L0 12.59L1.41 14L7 8.41L12.59 14L14 12.59L8.41 7L14 1.41Z" })))), this.hasNavigation && h("slot", { key: '1b19a907151db4138840a54d1905a6095f63c083', name: "navigation" })), this.hasButtons && (h("div", { key: 'e355ac1c0c938646d88383b1bb6b89f0e83a877d', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, h("slot", { key: 'b41b238a5b9539d20fee6d1ef5d48e8318282e7b', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: 'f7e7f7ac77288dde96a92160e25cbe04e4762fc2', class: {
+            } }, h("slot", { key: '48572d7991b8bd6082c62da46509280d7ab340c6', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: 'ca9b1062bc21d613a6c2a71d1ed667ada6d29c23', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (h("div", { key: '7cff7f64f8040feb7605890db0131df0d854688a', class: "menu-status" }, h("ic-typography", { key: 'cc5124ab4a9c02e5f412755012c60e42c9e8bc55', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: '3a72f8253064a565c543a504aef7bd6efe7cb2cb', class: "menu-version" }, h("ic-typography", { key: 'e2060017d43524668f0da2e7b3385bb19ab3438e', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (h("div", { key: '0e5a9ea4b445f09db0b540437a41dd3216520bf2', class: "menu-status" }, h("ic-typography", { key: 'e1a4c5560c9ee894ed5931d72a9e8e26faa2f9aa', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: '9372910c9139ef10340e8f35b72c59974fe9aa20', class: "menu-version" }, h("ic-typography", { key: '154ad1b38bbb5fba621553896933799a6c219c71', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
     }
     get el() { return this; }
     static get style() { return IcNavigationMenuStyle0; }

package/dist/components/ic-page-header.js CHANGED Viewed

@@ -114,19 +114,19 @@ const PageHeader = /*@__PURE__*/ proxyCustomElement(class PageHeader extends HTM
         const navAriaLabel = `${isSlotUsed(this.el, "heading")
             ? (_b = (_a = this.el.querySelector('[slot="heading"]')) === null || _a === void 0 ? void 0 : _a.textContent) !== null && _b !== void 0 ? _b : ""
             : heading !== null && heading !== void 0 ? heading : ""} page sections`;
-        return (h(Host, { key: '6839f2d164672f2aa33e05134c3426e5374d1f06', class: {
+        return (h(Host, { key: 'b72fc99f5588d6c9549ba2fe0bacbfb9b0c133be', class: {
                 ["ic-page-header-sticky"]: !!sticky,
                 ["ic-page-header-sticky-desktop"]: !sticky && !!stickyDesktopOnly,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: '7d5137cb542941699de9cc5721ae28a17861dbf0', class: {
+            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: '0dd8b54fbbc330f0202d8b42075aa2ad7e944690', class: {
                 ["border-bottom"]: !!border,
                 ["tabs"]: isSlotUsed(this.el, "tabs"),
-            }, role: "presentation" }, h("ic-section-container", { key: '454a9621964544cff3503b6553e7a17c60da3832', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: '58cd2a99c294c0e74d7236dfadaed9df5a2e468a', class: "breadcrumb-area" }, h("slot", { key: '02a27ba25893819a676272f7b5c99ba111cec39a', name: "breadcrumbs" }))), h("div", { key: '252904de3b7c608bca4e42325880560ee7bdc431', class: "main-content" }, h("div", { key: 'f9256d53398c537fe19e6b27ed777542650de68b', class: "title-area" }, h("div", { key: 'a1d40860aa4a7191974e44f400b3b8d486e09bf4', class: "header-content" }, h("slot", { key: '81f3ac92b61b9943166ae930c7ada3662e494a60', name: "heading" }, h("ic-typography", { key: '78f00c7412b22c74b25db7ce1136edaa173c557b', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '6e9608ec80c3f05482ac3a8e60ee27d2e6f683ad' }, heading))), h("slot", { key: '59600cab7fe6df1e7fbb9786060c1338c1d24109', name: "heading-adornment" })), h("div", { key: '8008f53d6ee65c3ac3bb849e136e417a85fb185a', class: {
+            }, role: "presentation" }, h("ic-section-container", { key: '191d13b8e42c92543bbc3c8c85a88eeba47b7462', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: 'ceb08e816c6215199c33363b32c182c06de1c19e', class: "breadcrumb-area" }, h("slot", { key: 'e7a24051f7c9544eb1c629813b6a414cc2be42ec', name: "breadcrumbs" }))), h("div", { key: 'ad3ad094ae44d2cd5b12612d47487e9f94cb405b', class: "main-content" }, h("div", { key: '0b9da0f1195a8eaa974f985f0268fed78d051f6d', class: "title-area" }, h("div", { key: '314147f4f76b8827ee90bb68bad21fe931e55fb5', class: "header-content" }, h("slot", { key: 'a0d82decef083a02afbb103bcc94e6dfb809c9ab', name: "heading" }, h("ic-typography", { key: 'bb7ad7d29d53fe971d2298ec25fb377d2c525ed4', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '10dcebaa154cab7717654db7f8342c8781bbb500' }, heading))), h("slot", { key: '8933dd41330b29fdd6f534069d54ac1f7b8d956e', name: "heading-adornment" })), h("div", { key: '22d58adbadef2d8f594e08f5d62b24596d4be3bf', class: {
                 ["subheading-content"]: !!subheading || isSlotUsed(this.el, "subheading"),
                 ["small"]: size === "small",
-            } }, h("slot", { key: '2f7f52d845ac9ae2d4a7122c17dda2cd9439301d', name: "subheading" }, h("ic-typography", { key: 'c0aea12079ad430c8fc80de47dbc36998c7dafde', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: '522be093d57e17bd669e6a00de00b5d762371464', class: "action-area" }, h("slot", { key: '5044800dd45ad23bded19fb947103fc33fb224f9', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: 'c2ed3ac5f6683e17dff5e30bb4b0836c6882a62a', class: "input-area" }, h("slot", { key: '7fa5429dde9cafd6cf7a91e6c018c137c4596cb8', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
-            isSlotUsed(this.el, "tabs")) && (h("div", { key: '7adb7f57bb469ddb2f88303784c5bb4f47af3e7a', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
-            !isSlotUsed(this.el, "tabs") && h("slot", { key: '523c906aff9a5dcf0911b99e58a49bae70f6dc1a', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: '3d387ad3a2ca763d7837ad7604d7efbe46b3b2c9', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: 'dee59ffc315702860977ca50ca8bdf90459a6a63' }, h("ul", { key: 'ce68af19740fd60be9a08fa955643854eb5ac0c7', class: "tabs-slot" }, h("slot", { key: 'd2297a18b03a95711ae20beaef363b39462c3866', name: "tabs" })))))))))));
+            } }, h("slot", { key: '6a0e2482c20cd6e5c6ea74259c4f90ee59f372b8', name: "subheading" }, h("ic-typography", { key: 'd519ee27c3125320bc6b2a105b285148f791298c', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: 'db7b9b202c23c922149d77e3c378a7f369270022', class: "action-area" }, h("slot", { key: '018da769d0d0d85f56e8400270a182846028c8f8', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: '28495ab831e90484f64a731c2ac9589da255f7c9', class: "input-area" }, h("slot", { key: '0584473df8a5318ca3a91c81fa42085d98ec03e8', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+            isSlotUsed(this.el, "tabs")) && (h("div", { key: 'e9b414dd0c40f9c72c4099119f43b90998b660e3', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
+            !isSlotUsed(this.el, "tabs") && h("slot", { key: '6767b004d2c71a4e009a23eb73e9c33c976c3d22', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: '2966875a2e393299b01907959a925c960a1f5795', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: '3ab38c0a4933f7b38af7fc9bb039624a5d98f3fd' }, h("ul", { key: 'ce1c14207346ad570188c1e70f9ca39e0bfd2d68', class: "tabs-slot" }, h("slot", { key: '38f22f779dd42b5015faa5604dc5af848a72121b', name: "tabs" })))))))))));
     }
     get el() { return this; }
     static get style() { return IcPageHeaderStyle0; }

package/dist/components/ic-page-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-page-header.js","mappings":"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","names":[],"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["/! normalize.css v8.0.1 \| MIT License \| github.com/necolas/normalize.css /\n\n/* Document\n ========================================================================== /\n\n/\n 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n /\n\nhtml {\n line-height: 1.15; / 1 /\n -webkit-text-size-adjust: 100%; / 2 /\n}\n\n/ Sections\n ========================================================================== /\n\n/\n Remove the margin in all browsers.\n /\n\nbody {\n margin: 0;\n}\n\n/\n Render the `main` element consistently in IE.\n /\n\nmain {\n display: block;\n}\n\n/\n Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n /\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/ Grouping content\n ========================================================================== /\n\n/\n 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n /\n\nhr {\n box-sizing: content-box; / 1 /\n height: 0; / 1 /\n overflow: visible; / 2 /\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\npre {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/ Text-level semantics\n ========================================================================== /\n\n/\n Remove the gray background on active links in IE 10.\n /\n\na {\n background-color: transparent;\n}\n\n/\n 1. Remove the bottom border in Chrome 57-\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n /\n\nabbr[title] {\n border-bottom: none; / 1 /\n text-decoration: underline; / 2 /\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; / 2 /\n}\n\n/\n Add the correct font weight in Chrome, Edge, and Safari.\n /\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/\n 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n /\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; / 1 /\n font-size: 1em; / 2 /\n}\n\n/\n Add the correct font size in all browsers.\n /\n\nsmall {\n font-size: 80%;\n}\n\n/\n Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n /\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/ Embedded content\n ========================================================================== /\n\n/\n Remove the border on images inside links in IE 10.\n /\n\nimg {\n border-style: none;\n}\n\n/ Forms\n ========================================================================== /\n\n/\n 1. Change the font styles in all browsers.\n * 2. Remove the margin in Firefox and Safari.\n /\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: inherit; / 1 /\n font-size: 100%; / 1 /\n line-height: 1.15; / 1 /\n margin: 0; / 2 /\n}\n\n/\n Show the overflow in IE.\n * 1. Show the overflow in Edge.\n /\n\nbutton,\ninput {\n / 1 /\n overflow: visible;\n}\n\n/\n Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n /\n\nbutton,\nselect {\n / 1 /\n text-transform: none;\n}\n\n/\n Correct the inability to style clickable types in iOS and Safari.\n /\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n}\n\n/\n Remove the inner border and padding in Firefox.\n /\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/\n Restore the focus styles unset by the previous rule.\n /\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/\n Correct the padding in Firefox.\n /\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/\n 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n /\n\nlegend {\n box-sizing: border-box; / 1 /\n color: inherit; / 2 /\n display: table; / 1 /\n max-width: 100%; / 1 /\n padding: 0; / 3 /\n white-space: normal; / 1 /\n}\n\n/\n Add the correct vertical alignment in Chrome, Firefox, and Opera.\n /\n\nprogress {\n vertical-align: baseline;\n}\n\n/\n Remove the default vertical scrollbar in IE 10+.\n /\n\ntextarea {\n overflow: auto;\n}\n\n/\n 1. Add the correct box sizing in IE 10.\n * 2. Remove the padding in IE 10.\n /\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; / 1 /\n padding: 0; / 2 /\n}\n\n/\n Correct the cursor style of increment and decrement buttons in Chrome.\n /\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/\n 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n /\n\n[type=\"search\"] {\n -webkit-appearance: textfield; / 1 /\n outline-offset: -2px; / 2 /\n}\n\n/\n Remove the inner padding in Chrome and Safari on macOS.\n /\n\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/\n 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n /\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; / 1 /\n font: inherit; / 2 /\n}\n\n/ Interactive\n ========================================================================== /\n\n/\n * Add the correct display in Edge, IE 10+, and Firefox.\n /\n\ndetails {\n display: block;\n}\n\n/\n * Add the correct display in all browsers.\n /\n\nsummary {\n display: list-item;\n}\n\n/ Misc\n ========================================================================== /\n\n/\n Add the correct display in IE 10+.\n /\n\ntemplate {\n display: none;\n}\n\n/\n Add the correct display in IE 10.\n /\n\n[hidden] {\n display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n margin: 0;\n padding: 0;\n border: 0;\n font-size: 100%;\n font-style: inherit;\n vertical-align: baseline;\n}\n\n\n/\n @prop --ic-z-index-page-header: z-index of page-header\n /\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.ic-page-header-sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n background-color: var(--ic-page-header-background);\n}\n\nheader.border-bottom {\n border-bottom: var(--ic-border-default);\n border-bottom: var(--ic-space-1px) solid var(--ic-page-header-border);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n::slotted(ic-navigation-item) {\n --navigation-link-colour: var(--ic-color-text-primary);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n -moz-column-gap: var(--ic-space-md);\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n -moz-column-gap: var(--ic-space-md);\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n -webkit-hyphens: auto;\n hyphens: auto;\n}\n\n.subheading-content {\n margin-top: var(--ic-space-xs);\n}\n\n.subheading-content.small {\n margin-top: var(--ic-space-md);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: -moz-fit-content;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.ic-page-header-sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n private resizeObserver: ResizeObserver \| null = null;\n\n @Element() el: HTMLIcPageHeaderElement;\n\n @State() actionContent: Node[];\n @State() areButtonsReversed: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /\n The alignment of the page header.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n If `true`, a border will be displayed along the bottom of the page header.\n /\n @Prop() border?: boolean = true;\n\n /\n The title to render on the page header.\n /\n @Prop() heading?: string;\n\n /\n If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n /\n @Prop() reverseOrder?: boolean = false;\n\n /\n The size of the page header component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n If `true`, the page header will be sticky at all breakpoints.\n /\n @Prop() sticky?: boolean = false;\n\n /\n If `true`, the page header will only be sticky for viewport widths of 992px and above.\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n\n /\n The subtitle to render on the page header.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot?.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) \|\|\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n render() {\n const {\n size,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n theme,\n } = this;\n\n const navAriaLabel = `${\n isSlotUsed(this.el, \"heading\")\n ? this.el.querySelector('[slot=\"heading\"]')?.textContent ?? \"\"\n : heading ?? \"\"\n } page sections`;\n\n return (\n <Host\n class={{\n [\"ic-page-header-sticky\"]: !!sticky,\n [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-label={this.el.ariaLabel \|\| \"page header\"}\n >\n <header\n class={{\n [\"border-bottom\"]: !!border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n role=\"presentation\"\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div\n class={{\n [\"subheading-content\"]:\n !!subheading \|\| isSlotUsed(this.el, \"subheading\"),\n [\"small\"]: size === \"small\",\n }}\n >\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav aria-label={navAriaLabel}>\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-page-header.js","mappings":"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","names":[],"sources":["src/components/ic-page-header/ic-page-header.css?tag=ic-page-header&encapsulation=shadow","src/components/ic-page-header/ic-page-header.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-page-header: z-index of page-header\n /\n\n:host {\n display: block;\n z-index: var(--ic-z-index-page-header);\n}\n\n:host(.ic-page-header-sticky) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n}\n\nheader {\n background-color: var(--ic-page-header-background);\n}\n\nheader.border-bottom {\n border-bottom: var(--ic-border-default);\n border-bottom: var(--ic-space-1px) solid var(--ic-page-header-border);\n}\n\nheader.tabs {\n padding-top: var(--ic-space-md);\n}\n\n.breadcrumb-area {\n margin-bottom: var(--ic-space-md);\n}\n\n::slotted(ic-navigation-item) {\n --navigation-link-colour: var(--ic-color-text-primary);\n}\n\n.main-content {\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-areas:\n \"title-area action-area\"\n \"input-area action-area\";\n column-gap: var(--ic-space-md);\n justify-content: space-between;\n width: 100%;\n}\n\n.title-area {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 19rem;\n grid-area: title-area;\n}\n\n.header-content {\n display: flex;\n align-items: center;\n width: 100%;\n flex-wrap: wrap;\n column-gap: var(--ic-space-md);\n}\n\n.heading {\n display: inline-block;\n overflow-wrap: break-word;\n hyphens: auto;\n}\n\n.subheading-content {\n margin-top: var(--ic-space-xs);\n}\n\n.subheading-content.small {\n margin-top: var(--ic-space-md);\n}\n\n.action-area {\n display: flex;\n gap: var(--ic-space-md);\n flex-flow: row wrap;\n justify-self: end;\n justify-content: flex-end;\n height: fit-content;\n grid-area: action-area;\n}\n\n.input-area,\n.navigation-area {\n margin-top: var(--ic-space-md);\n width: 100%;\n}\n\n.tabs-slot {\n display: flex;\n overflow-x: auto;\n padding: 0.5rem;\n margin: -0.5rem;\n}\n\n.tabs-slot::-webkit-scrollbar {\n display: none;\n}\n\n.input-area {\n grid-area: input-area;\n}\n\n@media screen and (max-width: 576px) {\n ::slotted(ic-text-field) {\n --input-width: 100%;\n\n max-width: 20rem;\n }\n\n .main-content {\n grid-template-areas:\n \"title-area\"\n \"action-area\"\n \"input-area\";\n justify-content: flex-start;\n }\n\n .title-area {\n min-width: 0;\n }\n\n .action-area {\n min-width: 100%;\n margin-top: var(--ic-space-md);\n justify-content: start;\n }\n}\n\n@media screen and (min-width: 992px) {\n :host(.ic-page-header-sticky-desktop) {\n position: sticky;\n top: 0;\n box-shadow: var(--ic-elevation-overlay);\n z-index: var(--ic-z-index-sticky-page-header);\n }\n}\n","import { Component, Host, h, Prop, Element, State } from \"@stencil/core\";\n\nimport { IcAlignment, IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nimport {\n isSlotUsed,\n DEVICE_SIZES,\n getCurrentDeviceSize,\n checkResizeObserver,\n} from \"../../utils/helpers\";\n\n/\n @slot breadcrumbs - Content will be rendered in the breadcrumb area, above the title and action areas.\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot heading-adornment - Content will be rendered in the title area, adjacent to the heading.\n * @slot actions - Content will be rendered in the action area, adjacent to the title area.\n * @slot input - Content will be rendered in the input area, below the title area and adjacent to the action area.\n * @slot stepper - Content will be rendered in the navigation area, below the title and action areas. Note: stepper slot cannot be used when the tabs slot is being used.\n * @slot tabs - Content will be rendered in the navigation area, below the title and action areas. Note: the stepper slot cannot be used when the tabs slot is being used.\n /\n\n@Component({\n tag: \"ic-page-header\",\n styleUrl: \"ic-page-header.css\",\n shadow: true,\n})\nexport class PageHeader {\n private resizeObserver: ResizeObserver \| null = null;\n\n @Element() el: HTMLIcPageHeaderElement;\n\n @State() actionContent: Node[];\n @State() areButtonsReversed: boolean = false;\n @State() deviceSize: number = DEVICE_SIZES.XL;\n\n /\n The alignment of the page header.\n /\n @Prop() aligned?: IcAlignment = \"left\";\n\n /\n If `true`, a border will be displayed along the bottom of the page header.\n /\n @Prop() border?: boolean = true;\n\n /\n The title to render on the page header.\n /\n @Prop() heading?: string;\n\n /\n If `true`, the reading pattern and tab order will change in the action area for viewport widths of above 576px and when actions have not wrapped.\n /\n @Prop() reverseOrder?: boolean = false;\n\n /\n The size of the page header component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n If `true`, the page header will be sticky at all breakpoints.\n /\n @Prop() sticky?: boolean = false;\n\n /\n If `true`, the page header will only be sticky for viewport widths of 992px and above.\n /\n @Prop() stickyDesktopOnly?: boolean = false;\n\n /\n The subtitle to render on the page header.\n /\n @Prop() subheading?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n disconnectedCallback(): void {\n if (this.resizeObserver !== null) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentWillLoad(): void {\n this.actionContent = Array.from(\n this.el.querySelectorAll(`[slot=\"actions\"]`)\n );\n }\n\n componentDidLoad(): void {\n checkResizeObserver(this.runResizeObserver);\n }\n\n private resizeObserverCallback = () => {\n if (this.reverseOrder && isSlotUsed(this.el, \"actions\")) {\n this.applyReverseOrder();\n }\n };\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.resizeObserverCallback();\n });\n this.resizeObserver.observe(this.el);\n };\n\n private applyReverseOrder = (): void => {\n const currSize = getCurrentDeviceSize();\n if (currSize !== this.deviceSize) {\n this.deviceSize = currSize;\n }\n\n const actionArea = this.el.shadowRoot?.querySelector(\n \"div.action-area\"\n ) as HTMLElement;\n const actionHeights: number[] = [];\n\n / For each button in the actions slot, check the height of the button and push this number into the actionHeights array and then find the greatest number in this array (i.e. find the height of the tallest button) /\n for (let i = 0; i < this.actionContent.length; i++) {\n const action = this.actionContent[i] as HTMLElement;\n let actionHeight = action.offsetHeight;\n if (actionHeight === undefined) {\n actionHeight = 0;\n }\n actionHeights.push(actionHeight);\n }\n\n const max = Math.max(...actionHeights);\n\n / The smallest breakpoint displays buttons in the same order the user has slotted them in. When the device size is larger than the small breakpoint then the order of the button reverses due to best practice for reading patterns. If the device size is larger than the small breakpoint and the buttons have started to wrap then they follow the order the user has slotted them in. This logic is programmed based on the height of the action-area div that wraps the actions slot. If the height of the action-area div is taller than the height of the tallest button, then it is assumed that the taller height is caused by the buttons wrapping */\n let actionAreaHeight = actionArea.offsetHeight;\n\n if (actionAreaHeight === undefined) {\n actionAreaHeight = 0;\n }\n\n const appendActionContent = () => {\n this.actionContent = this.actionContent.reverse();\n this.actionContent.forEach((btn: string \| Node) => {\n this.el.append(btn);\n });\n this.areButtonsReversed = !this.areButtonsReversed;\n };\n\n if (\n (this.deviceSize > DEVICE_SIZES.S &&\n actionAreaHeight <= max &&\n !this.areButtonsReversed) \|\|\n (((this.deviceSize > DEVICE_SIZES.S && actionAreaHeight > max) \|\|\n this.deviceSize <= DEVICE_SIZES.S) &&\n this.areButtonsReversed)\n ) {\n appendActionContent();\n }\n };\n\n render() {\n const {\n size,\n border,\n heading,\n subheading,\n aligned,\n sticky,\n stickyDesktopOnly,\n theme,\n } = this;\n\n const navAriaLabel = `${\n isSlotUsed(this.el, \"heading\")\n ? this.el.querySelector('[slot=\"heading\"]')?.textContent ?? \"\"\n : heading ?? \"\"\n } page sections`;\n\n return (\n <Host\n class={{\n [\"ic-page-header-sticky\"]: !!sticky,\n [\"ic-page-header-sticky-desktop\"]: !sticky && !!stickyDesktopOnly,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n aria-label={this.el.ariaLabel \|\| \"page header\"}\n >\n <header\n class={{\n [\"border-bottom\"]: !!border,\n [\"tabs\"]: isSlotUsed(this.el, \"tabs\"),\n }}\n role=\"presentation\"\n >\n <ic-section-container\n aligned={aligned}\n fullHeight={isSlotUsed(this.el, \"tabs\")}\n >\n {isSlotUsed(this.el, \"breadcrumbs\") && (\n <div class=\"breadcrumb-area\">\n <slot name=\"breadcrumbs\" />\n </div>\n )}\n <div class=\"main-content\">\n <div class=\"title-area\">\n <div class=\"header-content\">\n <slot name=\"heading\">\n <ic-typography\n variant={size === \"small\" ? \"h4\" : \"h2\"}\n class=\"heading\"\n >\n <h2>{heading}</h2>\n </ic-typography>\n </slot>\n <slot name=\"heading-adornment\" />\n </div>\n <div\n class={{\n [\"subheading-content\"]:\n !!subheading \|\| isSlotUsed(this.el, \"subheading\"),\n [\"small\"]: size === \"small\",\n }}\n >\n <slot name=\"subheading\">\n <ic-typography variant=\"body\">{subheading}</ic-typography>\n </slot>\n </div>\n </div>\n {isSlotUsed(this.el, \"actions\") && (\n <div class=\"action-area\">\n <slot name=\"actions\" />\n </div>\n )}\n {isSlotUsed(this.el, \"input\") && (\n <div class=\"input-area\">\n <slot name=\"input\" />\n </div>\n )}\n </div>\n\n {(isSlotUsed(this.el, \"stepper\") \|\|\n isSlotUsed(this.el, \"tabs\")) && (\n <div class=\"navigation-area\">\n {isSlotUsed(this.el, \"stepper\") &&\n !isSlotUsed(this.el, \"tabs\") && <slot name=\"stepper\" />}\n {isSlotUsed(this.el, \"tabs\") && (\n <nav aria-label={navAriaLabel}>\n <ic-horizontal-scroll>\n <ul class=\"tabs-slot\">\n <slot name=\"tabs\" />\n </ul>\n </ic-horizontal-scroll>\n </nav>\n )}\n </div>\n )}\n </ic-section-container>\n </header>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/ic-pagination-item2.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { r as removeDisabledFalse, O as capitalize } from './helpers.js';
+import { r as removeDisabledFalse, S as capitalize } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icPaginationItemCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}a{text-align:center}.item-container{display:flex;justify-content:center;align-items:center;width:calc(var(--ic-space-xl) + var(--ic-space-sm));height:var(--ic-space-xl);margin:var(--ic-space-xxs) var(--ic-space-xxxs);cursor:pointer;text-decoration:none}button{background:none;border:none;outline:inherit;position:relative}.ellipsis{pointer-events:none;--ic-typography-color:var(--ic-pagination-ellipsis)}.monochrome .ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome)}.item-container:focus{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.page{--ic-typography-color:var(--ic-pagination-page-number)}.monochrome .page{--ic-typography-color:var(--ic-pagination-page-number-monochrome)}.simple-current{min-width:calc(var(--ic-space-xxl) + var(--ic-space-md));height:var(--ic-space-lg);cursor:default}.item-container.page:hover:not(.selected):not(:focus){border-radius:var(--ic-border-radius);background-color:var(--ic-pagination-hover)}.item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed)}.monochrome .item-container.page:hover:not(.selected):not(:focus){background-color:var(--ic-pagination-hover-monochrome)}.monochrome .item-container.page:active:not(.selected):not(:focus){background-color:var(--ic-pagination-pressed-monochrome)}.selected{pointer-events:none;outline:none}.selected::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-pagination-selected-banner)}.monochrome .selected::after{background-color:var(--ic-pagination-selected-banner-monochrome)}.page-selected{--ic-typography-color:var(--ic-pagination-text)}.item-container.page.light:hover:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-hover)}.item-container.page.light:active:not(.selected):not(:focus){background-color:var(--ic-action-light-bg-pressed)}ic-typography.light,ic-typography.page-selected.light{--ic-typography-color:var(--ic-architectural-white)}.selected.light::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome)}.item-container.page.dark:hover:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-hover)}.item-container.page.dark:active:not(.selected):not(:focus){background-color:var(--ic-action-dark-bg-pressed)}ic-typography.dark{--ic-typography-color:var(--ic-color-text-primary)}.selected.dark::after{content:\"\";height:var(--ic-space-xxs);width:100%;position:absolute;bottom:0;background-color:var(--ic-action-monochrome-dark)}.disabled{--ic-typography-color:var(--ic-pagination-text-disabled);pointer-events:none;cursor:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.disabled.page ic-typography{--ic-typography-color:var(--ic-pagination-page-number-disabled)}.disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-disabled)}.monochrome .disabled.page{--ic-typography-color:var(--ic-pagination-page-number-monochrome-disabled)}.monochrome .disabled.ellipsis{--ic-typography-color:var(--ic-pagination-ellipsis-monochrome-disabled)}@media (forced-colors: active){.selected::after{background-color:Highlight}.selected.light::after{background-color:Highlight}.selected.dark::after{background-color:Highlight}.disabled{--ic-typography-color:GrayText}}";
@@ -47,7 +47,7 @@ const PaginationItem = /*@__PURE__*/ proxyCustomElement(class PaginationItem ext
     }
     render() {
         const { page, selected, type, disabled, label, capitalizedLabel, monochrome, } = this;
-        return (h("a", { key: '89475a5ee9cb95171d34ae94ec68107c70e67248', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
+        return (h("a", { key: '684b55732fcbfd4922afc8b158ae509d7d487af7', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: !!disabled,

package/dist/components/ic-pagination.js CHANGED Viewed

@@ -288,14 +288,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (h(Host, { key: '841c501b441241eae4281c4c2aea7f51d4e5b1e8', class: {
+        return (h(Host, { key: '06b3adf0d59e3e20e2192fa3836d13c4577003fe', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (h("nav", { key: '888a15822151817834e8f92a8a50f4d5fd37c715', class: {
+            } }, type === "simple" && (h("nav", { key: '75f6cfc6bd708870bb6dd4e6b1d44ab63f9f3bf5', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: 'f89f2dc683fa0c48dda8a9b8b0ae9fb041a93624', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: 'edddd73145108a1ebd09ed068dee9c301a168365', class: {
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '24ddac40513c65ac26604271f6a1ab268f107dfe', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("nav", { key: '5c864426c60fced527cf6457aded27e8c29fd26f', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: 'a0dca70d2eb4840d1316ae4a4600fe03aeb0f710', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (h("span", { key: '52bb61a07010197513bd02b450b79895cb80030c', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     get el() { return this; }
     static get watchers() { return {