npm - @ukic/web-components - Versions diffs - 3.10.0 → 3.12.0 - Mend

@ukic/web-components 3.10.0 → 3.12.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 (676) hide show

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

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
-import { b as inheritAttributes, o as onComponentRequiredPropUndefined, M as getElementInheritedTheme, l as getBrandForegroundAppearance, e as IcBrandForegroundEnum, i as isSlotUsed, I as IC_INHERITED_ARIA } from './helpers.js';
+import { I as IC_INHERITED_ARIA } from './constants.js';
+import { b as inheritAttributes, o as onComponentRequiredPropUndefined, G as getElementInheritedTheme, k 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';

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

	@@ -1 +1 @@
1	- {"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n margin-right: var(--ic-space-xs);\n list-style: none;\n}\n\n:host(.in-side-menu) {\n margin-right: 0;\n}\n\n:host::part(button) {\n height: 100%;\n min-height: 2.5rem;\n}\n\n:host(:not(.in-side-menu)) ::part(button):focus {\n box-shadow: var(--ic-border-focus-light);\n}\n\n:host(:not(.in-side-menu).dark) ::part(button):focus {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.in-side-menu) ::part(button) {\n color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n color: var(--ic-top-navigation-icon-hover);\n background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n color: var(--ic-top-navigation-icon-pressed);\n background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n margin-left: var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n} from \"@stencil/core\";\n\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n getBrandForegroundAppearance,\n getElementInheritedTheme,\n inheritAttributes,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/*\n @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n /\n\n@Component({\n tag: \"ic-navigation-button\",\n styleUrl: \"ic-navigation-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationButton {\n private buttonEl?: HTMLIcButtonElement;\n private inheritedAttributes: { [k: string]: string } = {};\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcNavigationButtonElement;\n\n /\n The display mode.\n /\n @State() mode: IcNavButtonModes = \"navbar\";\n\n /\n The parent theme used to inherit external colour tokens such as focus indicator.\n /\n @State() parentThemeDark = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label info to display.\n /\n @Prop() label!: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: 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({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Navigation Button\"\n );\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentWillRender(): void {\n this.el\n .querySelector(`[slot=\"icon\"]`)\n ?.setAttribute(\"viewBox\", \"0 0 24 24\");\n this.parentThemeChangeHandler();\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.mode = \"menu\";\n this.theme = (this.el.parentElement as HTMLIcTopNavigationElement).theme;\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.mode = \"navbar\";\n this.updateTheme();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail: { mode } }: CustomEvent<IcBrand>): void {\n this.updateTheme(mode);\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n parentThemeChangeHandler(): void {\n this.parentThemeDark = getElementInheritedTheme(this.el) === \"dark\";\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.setFocus();\n }\n\n /\n Triggered when attributes of host element change\n */\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private updateTheme(\n mode: IcBrandForeground = getBrandForegroundAppearance()\n ) {\n this.theme =\n mode === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n\n render() {\n const {\n download,\n href,\n inheritedAttributes,\n label,\n mode,\n parentThemeDark,\n referrerpolicy,\n rel,\n target,\n theme,\n } = this;\n\n const isMenuMode = mode === \"menu\";\n\n const buttonProps = {\n download,\n href,\n referrerpolicy,\n rel,\n target,\n theme,\n };\n\n return (\n <Host\n class={{\n \"in-side-menu\": isMenuMode,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n dark: parentThemeDark,\n }}\n >\n <ic-button\n ref={(el) => (this.buttonEl = el)}\n class={{ \"popout-menu-button\": isMenuMode }}\n aria-label={!isMenuMode ? label : null}\n disableTooltip={isMenuMode}\n fullWidth={isMenuMode}\n monochrome={!isMenuMode}\n size={isMenuMode ? \"medium\" : \"large\"}\n variant={isMenuMode ? \"tertiary\" : \"icon-tertiary\"}\n {...buttonProps}\n {...inheritedAttributes}\n >\n {isMenuMode ? label : \"\"}\n <slot slot=\"left-icon\" name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-navigation-button.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-button/ic-navigation-button.css?tag=ic-navigation-button&encapsulation=shadow","src/components/ic-navigation-button/ic-navigation-button.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n margin-right: var(--ic-space-xs);\n list-style: none;\n}\n\n:host(.in-side-menu) {\n margin-right: 0;\n}\n\n:host::part(button) {\n height: 100%;\n min-height: 2.5rem;\n}\n\n:host(:not(.in-side-menu)) ::part(button):focus {\n box-shadow: var(--ic-border-focus-light);\n}\n\n:host(:not(.in-side-menu).dark) ::part(button):focus {\n box-shadow: var(--ic-border-focus-dark);\n}\n\n:host(.in-side-menu) ::part(button) {\n color: var(--ic-top-navigation-icon-active);\n}\n\n:host(.in-side-menu) ::part(button):hover {\n color: var(--ic-top-navigation-icon-hover);\n background-color: var(--ic-top-navigation-icon-hover-background);\n}\n\n:host(.in-side-menu) ::part(button):active {\n color: var(--ic-top-navigation-icon-pressed);\n background-color: var(--ic-top-navigation-icon-pressed-background);\n}\n\n:host(.in-side-menu) ::slotted(ic-badge) {\n margin-left: var(--ic-space-xs);\n}\n","import {\n Component,\n Element,\n Host,\n Listen,\n Method,\n Prop,\n State,\n forceUpdate,\n h,\n} from \"@stencil/core\";\n\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n getBrandForegroundAppearance,\n getElementInheritedTheme,\n inheritAttributes,\n isSlotUsed,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\nimport { IcNavButtonModes } from \"./ic-navigation-button.types\";\n\nconst MUTABLE_ATTRIBUTES = [...IC_INHERITED_ARIA, \"title\"];\n\n/*\n @slot icon - Content will be placed to the left of the button label.\n * @slot badge - Badge component overlaying the top right of the button.\n /\n\n@Component({\n tag: \"ic-navigation-button\",\n styleUrl: \"ic-navigation-button.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class NavigationButton {\n private buttonEl?: HTMLIcButtonElement;\n private inheritedAttributes: { [k: string]: string } = {};\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcNavigationButtonElement;\n\n /\n The display mode.\n /\n @State() mode: IcNavButtonModes = \"navbar\";\n\n /\n The parent theme used to inherit external colour tokens such as focus indicator.\n /\n @State() parentThemeDark = false;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it.\n /\n @Prop() download: string \| boolean = false;\n\n /\n The URL that the link points to. This will render the button as an \"a\" tag.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n The label info to display.\n /\n @Prop() label!: string;\n\n /\n How much of the referrer to send when following the link.\n /\n @Prop() referrerpolicy?: ReferrerPolicy;\n\n /\n The relationship of the linked URL as space-separated link types.\n /\n @Prop() rel?: string;\n\n /\n The place to display the linked URL, as the name for a browsing context (a tab, window, or iframe).\n /\n @Prop() target?: 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({ mutable: true }) theme: IcThemeMode = \"inherit\";\n\n componentWillLoad(): void {\n this.inheritedAttributes = inheritAttributes(this.el, MUTABLE_ATTRIBUTES);\n }\n\n componentDidLoad(): void {\n this.updateTheme();\n onComponentRequiredPropUndefined(\n [{ prop: this.label, propName: \"label\" }],\n \"Navigation Button\"\n );\n\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n componentWillRender(): void {\n this.el\n .querySelector(`[slot=\"icon\"]`)\n ?.setAttribute(\"viewBox\", \"0 0 24 24\");\n this.parentThemeChangeHandler();\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"icNavigationMenuOpened\", { target: \"document\" })\n navBarMenuOpenHandler(): void {\n this.mode = \"menu\";\n this.theme = (this.el.parentElement as HTMLIcTopNavigationElement).theme;\n }\n\n @Listen(\"icNavigationMenuClosed\", { target: \"document\" })\n navBarMenuCloseHandler(): void {\n this.mode = \"navbar\";\n this.updateTheme();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail: { mode } }: CustomEvent<IcBrand>): void {\n this.updateTheme(mode);\n }\n\n @Listen(\"icThemeChange\", { target: \"document\" })\n parentThemeChangeHandler(): void {\n this.parentThemeDark = getElementInheritedTheme(this.el) === \"dark\";\n }\n\n /\n Sets focus on the native `button`.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.buttonEl?.setFocus();\n }\n\n /\n Triggered when attributes of host element change\n */\n private hostMutationCallback = (mutationList: MutationRecord[]): void => {\n let forceComponentUpdate = false;\n mutationList.forEach(({ attributeName }) => {\n if (attributeName) {\n const attribute = this.el.getAttribute(attributeName);\n if (attribute && MUTABLE_ATTRIBUTES.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private updateTheme(\n mode: IcBrandForeground = getBrandForegroundAppearance()\n ) {\n this.theme =\n mode === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n\n render() {\n const {\n download,\n href,\n inheritedAttributes,\n label,\n mode,\n parentThemeDark,\n referrerpolicy,\n rel,\n target,\n theme,\n } = this;\n\n const isMenuMode = mode === \"menu\";\n\n const buttonProps = {\n download,\n href,\n referrerpolicy,\n rel,\n target,\n theme,\n };\n\n return (\n <Host\n class={{\n \"in-side-menu\": isMenuMode,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n dark: parentThemeDark,\n }}\n >\n <ic-button\n ref={(el) => (this.buttonEl = el)}\n class={{ \"popout-menu-button\": isMenuMode }}\n aria-label={!isMenuMode ? label : null}\n disableTooltip={isMenuMode}\n fullWidth={isMenuMode}\n monochrome={!isMenuMode}\n size={isMenuMode ? \"medium\" : \"large\"}\n variant={isMenuMode ? \"tertiary\" : \"icon-tertiary\"}\n {...buttonProps}\n {...inheritedAttributes}\n >\n {isMenuMode ? label : \"\"}\n <slot slot=\"left-icon\" name=\"icon\"></slot>\n {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n </ic-button>\n </Host>\n );\n }\n}\n"],"version":3}

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, N as getNavItemParentDetails } from './helpers.js';
+import { D as DEVICE_SIZES, k as getBrandForegroundAppearance, n as getCurrentDeviceSize, H 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: '70872453ddb1b66747a517e4757ef0d5fbb6337c', class: {
+        return (h(Host, { key: '393cd6fdb52feac00792c6045472ffb466c45663', 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 { O as getCssProperty, D as DEVICE_SIZES, l as getBrandForegroundAppearance, q as getCurrentDeviceSize, N as getNavItemParentDetails } from './helpers.js';
+import { J as getCssProperty, D as DEVICE_SIZES, k as getBrandForegroundAppearance, n as getCurrentDeviceSize, H 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';

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 { P as getSlot, Q as getSlotContent, i as isSlotUsed } from './helpers.js';
+import { K as getSlot, L 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: '559f8e30c0ea9585c1cd85db3fbb432f0afa6476', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: 'acd727b39a74104530268e38ee3d7b89ac79e97d', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: '8142144f62990711e407791838feedfb3f25a9d6', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '4c52bc614ede7b80e3cd233ed43f16e22701bcdb', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '90569f1809e977cda9f8c2695c1108d2d4976318', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '503d419f95dadd93abdd2d54821f791bdf050b8d', class: {
+        return (h(Host, { key: '10788f4141f818f0f6d162ab14ef31f387a0a088', class: { [`ic-theme-${this.theme}`]: this.theme !== "inherit" } }, h("div", { key: '073fc0b5677787aea69610218e31c98af2d0bcf6', class: "popout-modal", onClick: this.closeMenu }), h("div", { key: 'b1c089216c1b0d048ed5f7ab22b493f18e6c1925', class: "popout-menu", role: "dialog", "aria-modal": "true", "aria-label": `${this.hasNavigation ? "Navigation" : "App"} menu` }, h("span", { key: '7cd1e985e623de53c4b54d145e3c5778e5b42d9d', "aria-hidden": "true", id: "navigation-landmark-text", class: "navigation-landmark-text" }, "Main navigation"), h("nav", { key: '96b72f2b119115ff4c7ae045def9f77e075a3da8', "aria-labelledby": "navigation-landmark-text", "aria-hidden": this.hasNavigation ? "false" : "true" }, h("div", { key: '7f6f200c07a572b08bc40feb3bc4626fd236b82a', class: {
                 ["menu-close-button-container"]: true,
                 ["nav-group-first"]: this.navGroupFirst,
-            } }, h("ic-button", { key: '1120f293997c552117944e4361575605de0fcaf2', ref: (el) => (this.closeButton = el), id: "menu-close-button", class: "menu-close-button", variant: "icon", size: "large", "aria-label": `Close ${this.hasNavigation ? "navigation" : "app"} menu`, onClick: this.closeMenu }, h("svg", { key: '3dc7a4fcafd3e72c558bb3aa07e9051b992da933', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '5ed28065cad4812472d9c036926b119ad625ad53', 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: '07e9e48d1c18782dd993ded29fa10c110e33ac45', name: "navigation" })), this.hasButtons && (h("div", { key: 'c612c03b21a75159952df5fef4d8e4675016f08f', class: {
+            } }, h("ic-button", { key: '4f2f8c7694c1a38b21da8c526fdb987aecdf5a80', 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: '9dc1c3ec5b42c3ce30a8a5d08f0478dc288029ff', width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8afa8a42d3a4d90884d80d2997f26f62343c7c28', 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: '6f4b56a9ac5d20aeac2e95e7153644d47eb149ea', name: "navigation" })), this.hasButtons && (h("div", { key: 'e93f88be7521de76edae1845a6dfb472435ff552', class: {
                 ["menu-buttons-container"]: true,
                 ["menu-buttons-container-nav-item-above"]: this.navItemAboveButtons,
-            } }, h("slot", { key: '131e946d6f9e945fe7b1cbd4fde77b98b9b70a0c', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '384bda4e21929e99d7fe5a00e4cfc24099c8e6a3', class: {
+            } }, h("slot", { key: 'c5c8f1021794b892fbb72511bb01336a75ce0127', name: "buttons" }))), (this.status !== "" || this.version !== "") && (h("div", { key: '2fd5a79a68bec985b82699c8ec6df946ac4a84e4', class: {
                 ["menu-status-version-container"]: true,
                 ["status-version-no-buttons"]: !this.hasButtons,
-            } }, this.status !== "" && (h("div", { key: 'd24f9fd062b4bde97398c554e00d29a4b167cda7', class: "menu-status" }, h("ic-typography", { key: 'd4637e8dde7947670ad8fd74a459de41c5b7cbae', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: '249add67c9c6edc58003c2359861f203e411bf64', class: "menu-version" }, h("ic-typography", { key: '3115e920fb4ce107b2d377eeefef649159a1f0f1', variant: "label", class: "menu-version-text", "aria-label": "app version" }, this.version))))))));
+            } }, this.status !== "" && (h("div", { key: 'c99d654ffe4ed2bd091b626af0afd9d93952e19b', class: "menu-status" }, h("ic-typography", { key: 'aa8aa2cba8d295a9cd1bee92920db503fee41249', variant: "label-uppercase", "aria-label": "app tag", class: "menu-status-text" }, this.status))), this.version !== "" && (h("div", { key: 'e20bad59ea61b6670905a158be44aa0af25b4560', class: "menu-version" }, h("ic-typography", { key: '561be48d1ceacba55142d69237586ac93032af8c', 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-navigation-menu2.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-navigation-menu: z-index of navigation menu\n /\n\n:host {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-navigation-menu);\n}\n\n.popout-modal {\n position: absolute;\n inset: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 16rem;\n bottom: 0;\n background-color: var(--ic-top-navigation-menu-background);\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 11.875rem;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.status-version-no-buttons {\n border-top: var(--ic-space-1px) solid var(--ic-architectural-200);\n}\n\n.menu-status {\n background-color: var(--ic-status-tag-neutral);\n\n --ic-typography-color: var(--ic-color-text-inverted);\n\n border-radius: var(--ic-space-md);\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-status-tag-outlined-background-neutral-contrast);\n\n --ic-typography-color: var(--ic-color-text-primary-light);\n\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow-wrap: break-word;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\nconst NAV_GROUP_TAG = \"IC-NAVIGATION-GROUP\";\nconst NAV_ITEM_TAG = \"IC-NAVIGATION-ITEM\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n private closeButton?: HTMLIcButtonElement;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement \| null = null;\n private navBarEl: HTMLIcTopNavigationElement \| null;\n private navGroupFirst: boolean = false;\n private navigationEls: HTMLElement[];\n private navItemAboveButtons: boolean = false;\n\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n The status info to display.\n /\n @Prop() status?: 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 /\n The version info to display.\n /\n @Prop() version?: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n this.navigationEls = getSlotContent(this.el, \"navigation\") as HTMLElement[];\n\n if (this.navigationEls) {\n this.hasNavigation = true;\n const lastEl = this.navigationEls[this.navigationEls.length - 1];\n if (lastEl.tagName === NAV_ITEM_TAG) {\n this.navItemAboveButtons = true;\n } else if (lastEl.tagName === NAV_GROUP_TAG) {\n lastEl.addEventListener(\"navigationGroupExpanded\", ((\n event: CustomEvent\n ) => {\n this.setLastTabStop(event.detail.expanded);\n }) as EventListener);\n }\n const firstEl = this.navigationEls[0];\n if (firstEl.tagName === NAV_GROUP_TAG) {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation && this.navigationEls) {\n this.setLastTabStop(false);\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private setLastTabStop = (lastNavGroupExpanded: boolean) => {\n let lastEl = this.navigationEls[\n this.navigationEls.length - 1\n ] as HTMLElement;\n\n if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {\n const childNavItems = lastEl.children;\n lastEl = childNavItems[childNavItems.length - 1] as HTMLElement;\n }\n\n if (lastEl.tagName === NAV_ITEM_TAG) {\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n lastEl = slotContent as HTMLElement;\n }\n }\n\n this.lastTabStop = lastEl;\n };\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n this.closeButton?.focus();\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n case NAV_ITEM_TAG:\n case NAV_GROUP_TAG:\n focusEl = this.lastTabStop as HTMLElement;\n focusEl.focus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n render() {\n return (\n <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path 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\" />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div\n class={{\n [\"menu-status-version-container\"]: true,\n [\"status-version-no-buttons\"]: !this.hasButtons,\n }}\n >\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-navigation-menu2.js","mappings":"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","names":[],"sources":["src/components/ic-navigation-menu/ic-navigation-menu.css?tag=ic-navigation-menu&encapsulation=shadow","src/components/ic-navigation-menu/ic-navigation-menu.tsx"],"sourcesContent":["/*\n @prop --ic-z-index-navigation-menu: z-index of navigation menu\n /\n\n:host {\n display: block;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n min-height: 100% !important;\n background: rgb(0 0 0 / 60%);\n z-index: var(--ic-z-index-navigation-menu);\n}\n\n.popout-modal {\n position: absolute;\n inset: 0;\n}\n\n.popout-menu {\n position: fixed;\n top: 0;\n right: 0;\n width: 16rem;\n bottom: 0;\n background-color: var(--ic-top-navigation-menu-background);\n color: var(--ic-top-navigation-nav-item);\n\n --ic-typography-color: var(--ic-top-navigation-nav-item);\n\n box-shadow: var(--ic-elevation-overlay);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n:host(.inline) .popout-menu {\n position: absolute;\n}\n\n.menu-close-button-container {\n position: relative;\n left: 11.875rem;\n padding: var(--ic-space-md) 0;\n}\n\n.nav-group-first {\n padding-bottom: 0;\n}\n\n.menu-buttons-container {\n padding: var(--ic-space-sm) 0;\n border-bottom: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-buttons-container-nav-item-above {\n margin-top: var(--ic-space-md);\n border-top: var(--ic-border-width) solid var(--ic-architectural-200);\n}\n\n.menu-status-version-container {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ic-space-xs);\n padding: var(--ic-space-md) var(--ic-space-md) var(--ic-space-xl);\n}\n\n.status-version-no-buttons {\n border-top: var(--ic-space-1px) solid var(--ic-architectural-200);\n}\n\n.menu-status {\n background-color: var(--ic-status-tag-neutral);\n\n --ic-typography-color: var(--ic-color-text-inverted);\n\n border-radius: var(--ic-space-md);\n width: fit-content;\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-version {\n border-radius: var(--ic-space-md);\n background-color: var(--ic-status-tag-outlined-background-neutral-contrast);\n\n --ic-typography-color: var(--ic-color-text-primary-light);\n\n padding: var(--ic-space-xxs) var(--ic-space-sm);\n}\n\n.menu-status-text,\n.menu-version-text {\n overflow-wrap: break-word;\n}\n\n.navigation-landmark-text {\n position: absolute;\n width: var(--ic-space-1px);\n height: var(--ic-space-1px);\n padding: 0;\n margin: calc(-1 var(--ic-space-1px));\n overflow: hidden;\n}\n","import {\n Component,\n Element,\n Host,\n Prop,\n h,\n Event,\n EventEmitter,\n Listen,\n} from \"@stencil/core\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { getSlot, getSlotContent, isSlotUsed } from \"../../utils/helpers\";\n\nconst NAV_GROUP_TAG = \"IC-NAVIGATION-GROUP\";\nconst NAV_ITEM_TAG = \"IC-NAVIGATION-ITEM\";\n\n/*\n @slot navigation - Content will be rendered at top of panel.\n * @slot buttons - Content will be rendered above version info and below navigation.\n /\n@Component({\n tag: \"ic-navigation-menu\",\n styleUrl: \"ic-navigation-menu.css\",\n shadow: true,\n})\nexport class NavigationMenu {\n private closeButton?: HTMLIcButtonElement;\n private hasButtons: boolean = false;\n private hasNavigation: boolean = false;\n private lastTabStop: HTMLElement \| null = null;\n private navBarEl: HTMLIcTopNavigationElement \| null;\n private navGroupFirst: boolean = false;\n private navigationEls: HTMLElement[];\n private navItemAboveButtons: boolean = false;\n\n @Element() el: HTMLIcNavigationMenuElement;\n\n /\n The status info to display.\n /\n @Prop() status?: 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 /\n The version info to display.\n /\n @Prop() version?: string = \"\";\n\n /\n @internal - Emitted when the menu is closed.\n */\n @Event() icNavigationMenuClose: EventEmitter<void>;\n\n componentWillLoad(): void {\n this.navBarEl = document.querySelector(\"ic-top-navigation\");\n this.navigationEls = getSlotContent(this.el, \"navigation\") as HTMLElement[];\n\n if (this.navigationEls) {\n this.hasNavigation = true;\n const lastEl = this.navigationEls[this.navigationEls.length - 1];\n if (lastEl.tagName === NAV_ITEM_TAG) {\n this.navItemAboveButtons = true;\n } else if (lastEl.tagName === NAV_GROUP_TAG) {\n lastEl.addEventListener(\"navigationGroupExpanded\", ((\n event: CustomEvent\n ) => {\n this.setLastTabStop(event.detail.expanded);\n }) as EventListener);\n }\n const firstEl = this.navigationEls[0];\n if (firstEl.tagName === NAV_GROUP_TAG) {\n this.navGroupFirst = true;\n }\n }\n const buttonContent = getSlotContent(this.el, \"buttons\");\n\n if (buttonContent !== null) {\n this.hasButtons = true;\n this.lastTabStop = buttonContent[buttonContent.length - 1] as HTMLElement;\n } else {\n if (this.hasNavigation && this.navigationEls) {\n this.setLastTabStop(false);\n }\n }\n }\n\n componentDidLoad(): void {\n this.focusCloseButton();\n }\n\n componentWillRender(): void {\n this.hasNavigation = isSlotUsed(this.el, \"navigation\");\n this.hasButtons = isSlotUsed(this.el, \"buttons\");\n }\n\n @Listen(\"navItemClicked\")\n navItemClickHandler(): void {\n this.closeMenu();\n }\n\n @Listen(\"keydown\", { target: \"document\" })\n handleKeyDown(ev: KeyboardEvent): void {\n if (ev.key === \"Tab\") {\n if (ev.shiftKey) {\n if (document.activeElement === this.navBarEl) {\n ev.preventDefault();\n this.focusLastTabStop();\n }\n } else if (\n document.activeElement === this.lastTabStop \|\|\n this.lastTabStop === null\n ) {\n ev.preventDefault();\n this.focusCloseButton();\n }\n } else if (ev.key === \"Escape\") {\n this.closeMenu();\n }\n }\n\n private setLastTabStop = (lastNavGroupExpanded: boolean) => {\n let lastEl = this.navigationEls[\n this.navigationEls.length - 1\n ] as HTMLElement;\n\n if (lastEl.tagName === NAV_GROUP_TAG && lastNavGroupExpanded) {\n const childNavItems = lastEl.children;\n lastEl = childNavItems[childNavItems.length - 1] as HTMLElement;\n }\n\n if (lastEl.tagName === NAV_ITEM_TAG) {\n //check for slotted content i.e. react router link\n const slotContent = getSlot(lastEl, \"navigation-item\");\n if (slotContent !== null) {\n lastEl = slotContent as HTMLElement;\n }\n }\n\n this.lastTabStop = lastEl;\n };\n\n private closeMenu = () => {\n this.icNavigationMenuClose.emit();\n };\n\n private focusCloseButton = () => {\n this.closeButton?.focus();\n };\n\n private focusLastTabStop = () => {\n let focusEl;\n if (this.lastTabStop !== null) {\n switch (this.lastTabStop.tagName) {\n case \"IC-NAVIGATION-BUTTON\":\n case NAV_ITEM_TAG:\n case NAV_GROUP_TAG:\n focusEl = this.lastTabStop as HTMLElement;\n focusEl.focus();\n break;\n case \"A\":\n this.lastTabStop.focus();\n break;\n }\n }\n };\n\n render() {\n return (\n <Host class={{ [`ic-theme-${this.theme}`]: this.theme !== \"inherit\" }}>\n <div class=\"popout-modal\" onClick={this.closeMenu}></div>\n <div\n class=\"popout-menu\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-label={`${this.hasNavigation ? \"Navigation\" : \"App\"} menu`}\n >\n <span\n aria-hidden=\"true\"\n id=\"navigation-landmark-text\"\n class=\"navigation-landmark-text\"\n >\n Main navigation\n </span>\n <nav\n aria-labelledby=\"navigation-landmark-text\"\n aria-hidden={this.hasNavigation ? \"false\" : \"true\"}\n >\n <div\n class={{\n [\"menu-close-button-container\"]: true,\n [\"nav-group-first\"]: this.navGroupFirst,\n }}\n >\n <ic-button\n ref={(el) => (this.closeButton = el)}\n id=\"menu-close-button\"\n class=\"menu-close-button\"\n variant=\"icon-tertiary\"\n size=\"large\"\n aria-label={`Close ${\n this.hasNavigation ? \"navigation\" : \"app\"\n } menu`}\n onClick={this.closeMenu}\n >\n <svg\n width=\"14\"\n height=\"14\"\n viewBox=\"0 0 14 14\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path 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\" />\n </svg>\n </ic-button>\n </div>\n {this.hasNavigation && <slot name=\"navigation\"></slot>}\n </nav>\n {this.hasButtons && (\n <div\n class={{\n [\"menu-buttons-container\"]: true,\n [\"menu-buttons-container-nav-item-above\"]:\n this.navItemAboveButtons,\n }}\n >\n <slot name=\"buttons\"></slot>\n </div>\n )}\n {(this.status !== \"\" \|\| this.version !== \"\") && (\n <div\n class={{\n [\"menu-status-version-container\"]: true,\n [\"status-version-no-buttons\"]: !this.hasButtons,\n }}\n >\n {this.status !== \"\" && (\n <div class=\"menu-status\">\n <ic-typography\n variant=\"label-uppercase\"\n aria-label=\"app tag\"\n class=\"menu-status-text\"\n >\n {this.status}\n </ic-typography>\n </div>\n )}\n {this.version !== \"\" && (\n <div class=\"menu-version\">\n <ic-typography\n variant=\"label\"\n class=\"menu-version-text\"\n aria-label=\"app version\"\n >\n {this.version}\n </ic-typography>\n </div>\n )}\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { D as DEVICE_SIZES, i as isSlotUsed, q as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
+import { D as DEVICE_SIZES, i as isSlotUsed, n as getCurrentDeviceSize, c as checkResizeObserver } from './helpers.js';
 import { d as defineCustomElement$7 } from './ic-button2.js';
 import { d as defineCustomElement$6 } from './ic-horizontal-scroll2.js';
 import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
@@ -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: '3f81ad49917a1bebdda22330e6f5330ddb8e4607', class: {
+        return (h(Host, { key: 'ef9b1c5acf30851bedddd8f840fae60b545dfd3f', 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: '4e676a6514eadeea3d5cae863e75af7ff3b94649', class: {
+            }, "aria-label": this.el.ariaLabel || "page header" }, h("header", { key: 'e3f5ec39b13afbd9be424125fa43ea4634a90418', class: {
                 ["border-bottom"]: !!border,
                 ["tabs"]: isSlotUsed(this.el, "tabs"),
-            }, role: "presentation" }, h("ic-section-container", { key: 'f5c3eceb50af527dc0a6e9ae0a37f31a22334234', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: 'e5c57032784f736af68fb587d49c2d91dd6dfe2f', class: "breadcrumb-area" }, h("slot", { key: 'ebd6a9ea582e9ab9352475fd93a1d01da8691ce5', name: "breadcrumbs" }))), h("div", { key: 'f017c563594f1cd82ae1f2dc56f1303933a358b7', class: "main-content" }, h("div", { key: '6e9fd38352c39faac30c7bc0b3d3bb1bf0541bde', class: "title-area" }, h("div", { key: '214882f62caa4ed6ff23f9f87414c82fa4f1ee7b', class: "header-content" }, h("slot", { key: 'fd99c8e27de2c92f4b8ba0c15c4daf681709531f', name: "heading" }, h("ic-typography", { key: 'd7230bbe28b9fb91f03e87fdaaf41b6deca5a542', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: '63fe762aba268afa25aff458fc1e824272544f33' }, heading))), h("slot", { key: '2039cc87272f3ab1a479350223238e537b6ee2f4', name: "heading-adornment" })), h("div", { key: 'd1253c48dbd399c24a059e62f2545f477811e815', class: {
+            }, role: "presentation" }, h("ic-section-container", { key: '7b58d10dbc3e72c05db7fdc67342eedfde9ed139', aligned: aligned, fullHeight: isSlotUsed(this.el, "tabs") }, isSlotUsed(this.el, "breadcrumbs") && (h("div", { key: '386e595418e6234228b2518c430d59248b68641f', class: "breadcrumb-area" }, h("slot", { key: 'c11be2d0fdccd46ff3ac512a2816b7d6ceceac72', name: "breadcrumbs" }))), h("div", { key: 'd9d1bd5b030a28dbdccbdbb80a5ef609bcc927df', class: "main-content" }, h("div", { key: '4743493c932b474fad24fc708ca05648d516f3fe', class: "title-area" }, h("div", { key: '34fb35fd36f2ef0d8edf3efa0b7e62323be512bb', class: "header-content" }, h("slot", { key: '1830379330d7f2a2742dd5ed75c5ea1755d7f8aa', name: "heading" }, h("ic-typography", { key: '44e86892aa90b0af8eb1def5733852a4e8225dbb', variant: size === "small" ? "h4" : "h2", class: "heading" }, h("h2", { key: 'be25fb99e3e8e5c81c209d1bcd57680718bdc5b8' }, heading))), h("slot", { key: 'c907d0d661b042a77232979fd99a375dcfcc96fe', name: "heading-adornment" })), h("div", { key: 'a7561b492f4d5135b4d8957694e498a50ca42645', class: {
                 ["subheading-content"]: !!subheading || isSlotUsed(this.el, "subheading"),
                 ["small"]: size === "small",
-            } }, h("slot", { key: '656675e2ded3fdd2027b0215709cf6faaab7322c', name: "subheading" }, h("ic-typography", { key: 'fe3bb6b5feb0b725d77e6cf8f5edc212f4c4b506', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: 'f4a2e70fd311c12810eabc05e3a865e4efbba6b8', class: "action-area" }, h("slot", { key: 'a89c115c6e17021786908022ffc58abe07a88343', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: 'a26a7f73e3ee189f6bd9310339cda77cf128a309', class: "input-area" }, h("slot", { key: '245383298b97190b21f9723326ac34422bd197ac', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
-            isSlotUsed(this.el, "tabs")) && (h("div", { key: 'c80f1d04a4300b4f80ff4e2dfa418f985a13e047', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
-            !isSlotUsed(this.el, "tabs") && h("slot", { key: '5646084a82aefc58c4912f9b765149393973f8c0', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: 'd7cccfe9d053d1e6849d57665157c841f2434a36', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: '2ca15ea3dc35db5f9a9003cdbce55b113bae12c8' }, h("ul", { key: '3007121bcc05264e5df9986b5231693808b72368', class: "tabs-slot" }, h("slot", { key: 'd124be273a3cbc36154b2add48ea1c7a36d6e592', name: "tabs" })))))))))));
+            } }, h("slot", { key: '6dc20fc584493c88e1a3baaf5badf583ad4bf694', name: "subheading" }, h("ic-typography", { key: 'a1baec7c38856a1d982e7be6cdba10f59ca01351', variant: "body" }, subheading)))), isSlotUsed(this.el, "actions") && (h("div", { key: '1b5c8bc9cdcb8398379665c2ca60a470a8e5a486', class: "action-area" }, h("slot", { key: 'dcc940cea6c4a0b5871aa1501752fed22cc5f932', name: "actions" }))), isSlotUsed(this.el, "input") && (h("div", { key: '8d0ff957c398f1ac9d8cbc7c78ec18c9b2710a43', class: "input-area" }, h("slot", { key: '3dc09d1512ad8ce911ddee0a2dddafb8ae52450c', name: "input" })))), (isSlotUsed(this.el, "stepper") ||
+            isSlotUsed(this.el, "tabs")) && (h("div", { key: '9f527e5a1c67ec718a55fa4756249bb0f4c6a6fe', class: "navigation-area" }, isSlotUsed(this.el, "stepper") &&
+            !isSlotUsed(this.el, "tabs") && h("slot", { key: 'c8f71660620ec8d74dcefb02f2663a625e539a4d', name: "stepper" }), isSlotUsed(this.el, "tabs") && (h("nav", { key: 'b2aef6529f53572613bf7a0996e6f1644c98463b', "aria-label": navAriaLabel }, h("ic-horizontal-scroll", { key: 'fcb0cd4af39f445f6dd6e84d46e9289a2623ce8f' }, h("ul", { key: '20c1b075f4f784856f4b067d25d4b1aff1720327', class: "tabs-slot" }, h("slot", { key: '3f35ee8f7b07edbe36f979aee6638e0e430d9ea0', name: "tabs" })))))))))));
     }
     get el() { return this; }
     static get style() { return IcPageHeaderStyle0; }

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, R as capitalize } from './helpers.js';
+import { r as removeDisabledFalse, M 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: '9b34e182ea83cdb24f48997314fe5f456d37e5f8', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
+        return (h("a", { key: 'ed0d1ec644f4332880be47cf2240ce08e8ba8f5c', class: { ["monochrome"]: !!monochrome } }, type === "ellipsis" ? (h("div", { class: {
                 ["item-container"]: true,
                 ["ellipsis"]: true,
                 ["disabled"]: !!disabled,

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

@@ -259,14 +259,14 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (h(Host, { key: '2acdd8b04920cef0c72fc4651292abc9bd69ec1e', class: {
+        return (h(Host, { key: 'fb99bef90dd70acdcc38a49c5ead06d6d8351ed4', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (h("nav", { key: 'b63e353f7fe95cf279ae4ed80431a4c7dab237ef', class: {
+            } }, type === "simple" && (h("nav", { key: '5134a43228fbd8a137fd3e34607a1139bc09c9cc', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '6399e68f44cd106050e227c0492cea207911193f', 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: 'c7dba8035b72f606bc69ae9daac63f150671a309', class: {
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), h("ic-pagination-item", { key: '911c4ad52e99e400db64354740ebcc8f8fbed41b', 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: '9e803dc371d2ae0a6de0bb82fca25a8d4ad2cdb1', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": "Pagination Navigation" }, 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: 'a7f3861bf255d89f193da8e630865c972e319a71', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": "Pagination Navigation" }, 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: '61a05ee70fe739149339df6527a8aca0613ce56f', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { n as getSlotElements, m as isPropDefined } from './helpers.js';
+import { m as getSlotElements, l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$6 } from './ic-button2.js';
 import { d as defineCustomElement$5 } from './ic-loading-indicator2.js';
 import { d as defineCustomElement$4 } from './ic-menu-item2.js';
@@ -285,17 +285,17 @@ const PopoverMenu = /*@__PURE__*/ proxyCustomElement(class PopoverMenu extends H
         this.popperProps = props;
     }
     render() {
-        return (h(Host, { key: '5ffa8a51af3508448af45892be2854e7caadfc1d', class: {
+        return (h(Host, { key: 'b3b80be668dab0b1bf8e9c86a92871a2ccf7fa05', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: 'c3160d601be3e64a081da71a369e5c91258000ae', id: this.parentPopover === undefined
+            } }, h("div", { key: '2354b0125ce713af1824928f0f63bfc4e1a51539', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, h("span", { key: 'ae7a23ecfc8d5bba00f00e921292d227be204de4', class: {
+            } }, h("span", { key: 'a0fe248c348b955225eb3cbd9d4713dd4d2260f5', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("span", { key: '003ba26d863d718db5b8b6d2ff54710e02eb7677' }, h("span", { key: '4db795ec37a6ac82956e483bb2bf5a73961377e5', role: "menu" }, h("ic-menu-item", { key: 'a102e3c94bb5ba26c8f37c1948230f5dd2bd2c5a', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'e97bd20445b09d2ba20bfbf9a6808a9e925b1c39', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '1e8b35769c14f03ee11c26250f84d0dc23963dc0', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: 'cfbbf43ec26066f7aa1879baf0ef4c8705248bcb', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '54ac1fa4283a77f2678a21e2869be48db726aa09', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '986dfbed5c2337812f4ac529910240cfc4ffe216' }))))));
+            } }, isPropDefined(this.submenuId) && (h("span", { key: 'b0f4cd227ca7e89a65a05ff7e168c902d90fbd27' }, h("span", { key: '2cae5777f8e07730803524dca57d2489755af132', role: "menu" }, h("ic-menu-item", { key: '65be6ed2c83365bfc8888f9d1232fe34b61b9547', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: '51312621130f75922f672a78e96c5f143844fd23', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: 'db43490c2526d8aef7b985109b0592d6e47d97fb', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: 'd1f5dea7708ece652f7033fc879ebd2ecf9485e4', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '57da0710affbfada09d7bb4f040b235bbd86bee4', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '745f05595c859f9c6259716dc4c4635d66cd95fc' }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-popover-menu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.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-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n display: flex;\n flex-direction: column;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: -moz-fit-content;\n height: fit-content;\n max-height: var(--max-height, -moz-fit-content);\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport {\n createPopper,\n Instance as PopperInstance,\n Options,\n} from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst MENU_SELECTOR = \"div.menu-body\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n @State() popperProps: Partial<Options> = {};\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n /\n @Prop() fixedPositioning: boolean = false;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\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 /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(MENU_SELECTOR);\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n /\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n /\n @internal This method allows props to be added to the PopperJS createPopper instance outside of the popover menu\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n ...this.popperProps,\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <div\n class=\"menu-body\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-popover-menu.js","mappings":"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","names":[],"sources":["src/components/ic-popover-menu/ic-popover-menu.css?tag=ic-popover-menu&encapsulation=shadow","src/components/ic-popover-menu/ic-popover-menu.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/*\n @prop --ic-z-index-popover: z-index of popover menu. \n* @prop --max-height: Maximum height of the popover menu.\n* @prop --popover-width: Default width of the popover menu.\n/\n\n@media (prefers-reduced-motion: no-preference) {\n :host .opening-from-parent {\n animation: slide-in var(--ic-transition-duration-slow) ease-in-out;\n }\n\n :host .opening-from-child {\n animation: slide-out var(--ic-transition-duration-slow) ease-in-out;\n }\n}\n\n:host {\n border-radius: var(--ic-border-radius);\n color: var(--ic-popover-nav-text);\n\n --ic-typography-color: var(--ic-popover-nav-text);\n\n position: relative;\n z-index: var(--ic-z-index-popover);\n box-sizing: border-box;\n box-shadow: var(--ic-elevation-overlay);\n display: none;\n}\n\n:host(.on-dialog) {\n inset: auto !important;\n}\n\n:host(.on-dialog-fix-translate) {\n transform: translate(0, var(--ic-space-xs)) !important;\n}\n\n:host(.on-dialog-translate-y) {\n transform: translate(0, calc(-1 var(--translate-y))) !important;\n}\n\n.menu {\n border: var(--ic-border-default);\n border-color: var(--ic-popover-border);\n border-radius: var(--ic-border-radius);\n background-color: var(--ic-popover-background);\n visibility: hidden;\n height: 0;\n display: flex;\n flex-direction: column;\n}\n\n:host(:focus-within) {\n box-shadow: var(--ic-border-focus);\n}\n\n.menu:focus-visible {\n outline: none;\n}\n\n:host(.ic-popover-menu-open) {\n display: block;\n min-width: calc(20rem - var(--ic-space-xl));\n width: var(--popover-width, 20rem);\n max-width: calc(100vw - var(--ic-space-xl));\n}\n\n:host(.ic-popover-menu-open) .menu {\n visibility: visible;\n height: fit-content;\n max-height: var(--max-height, fit-content);\n overflow-y: auto;\n overflow-x: hidden;\n}\n\n.parent-label {\n --ic-typography-color: var(--ic-popover-parent-label);\n\n margin: var(--ic-space-xs) var(--ic-space-xs) 0;\n}\n\n@keyframes slide-in {\n from {\n opacity: 0;\n transform: translateX(10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n\n@keyframes slide-out {\n from {\n opacity: 0;\n transform: translateX(-10rem);\n }\n\n to {\n opacity: 1;\n transform: translateX(0);\n }\n}\n","import {\n Component,\n Element,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n State,\n Method,\n Event,\n EventEmitter,\n} from \"@stencil/core\";\nimport { getSlotElements, isPropDefined } from \"../../utils/helpers\";\nimport {\n createPopper,\n Instance as PopperInstance,\n Options,\n} from \"@popperjs/core\";\nimport { IcThemeMode } from \"../../utils/types\";\n\nconst MENU_SELECTOR = \"div.menu-body\";\n\n@Component({\n tag: \"ic-popover-menu\",\n styleUrl: \"ic-popover-menu.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class PopoverMenu {\n private anchorEl: HTMLElement \| null;\n private ARIA_LABEL: string = \"aria-label\";\n private backButton?: HTMLIcMenuItemElement;\n private currentFocus: number;\n private popoverMenuEls: HTMLIcMenuItemElement[] = [];\n private popperInstance: PopperInstance \| null;\n\n @Element() el: HTMLIcPopoverMenuElement;\n\n @State() openingFromChild: boolean = false;\n @State() openingFromParent: boolean = false;\n @State() popperProps: Partial<Options> = {};\n\n /*\n The ID of the element the popover menu will anchor itself to. This is required unless the popover is a submenu.\n /\n @Prop() anchor?: string;\n\n /\n Setting to `true` can help in situations where tooltip content is clipped by a parent element.\n /\n @Prop() fixedPositioning: boolean = false;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentLabel?: string;\n\n /\n @internal The parent popover menu of a child popover menu.\n /\n @Prop() parentPopover?: HTMLIcPopoverMenuElement;\n\n /\n The unique identifier for a popover submenu.\n /\n @Prop() submenuId?: string;\n\n /\n @internal The level of menu being displayed.\n /\n @Prop() submenuLevel?: number = 1;\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 /\n If `true`, the popover menu will be displayed.\n /\n @Prop({ reflect: true, mutable: true }) open?: boolean \| undefined =\n undefined;\n\n @Watch(\"open\")\n watchOpenHandler(): void {\n const popoverArr = this.el.parentElement?.querySelectorAll(\n `ic-popover-menu`\n ) as NodeListOf<HTMLIcPopoverMenuElement>;\n if (this.open) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n if (\n this.parentPopover !== undefined &&\n !this.popoverMenuEls.some((menuItem) => menuItem.id)\n ) {\n this.backButton && this.popoverMenuEls.unshift(this.backButton);\n }\n\n this.currentFocus = 0;\n // Needed so that anchorEl isn't always focused\n setTimeout(this.setButtonFocus, 50);\n } else if (this.popperInstance) {\n if (popoverArr.length > 0) {\n popoverArr.forEach((popover) => {\n if (popover !== this.el) {\n popover.open = false;\n }\n });\n }\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n /\n Emitted when the popover menu is closed.\n /\n @Event() icPopoverClosed: EventEmitter<HTMLIcMenuItemElement>;\n\n disconnectedCallback(): void {\n if (this.popperInstance) {\n this.popperInstance.destroy();\n this.popperInstance = null;\n }\n }\n\n componentDidLoad(): void {\n const slotWrapper = this.el.shadowRoot?.querySelector(MENU_SELECTOR);\n if (slotWrapper) {\n const popoverMenuElements = getSlotElements(slotWrapper);\n\n if (popoverMenuElements !== null) {\n this.addMenuItems(popoverMenuElements);\n }\n }\n\n if (\n this.submenuId === undefined &&\n this.el.getAttribute(this.ARIA_LABEL) === null\n ) {\n console.error(\n `No aria-label specified for popover menu component - aria-label required`\n );\n }\n\n this.watchOpenHandler();\n }\n\n componentWillRender(): void {\n this.anchorEl = this.findAnchorEl(this.anchor);\n }\n\n componentDidRender(): void {\n if (this.open && !this.popperInstance) {\n this.initPopperJS();\n }\n }\n\n @Listen(\"handleMenuItemClick\")\n handleMenuItemClick(ev: CustomEvent<HTMLIcMenuItemElement>): void {\n if (!ev.detail.submenuTriggerFor && ev.detail.label !== \"Back\") {\n this.closeMenu(false, ev.detail);\n }\n }\n\n // This is listening for the event emitted when a menu item is acting as a trigger button\n @Listen(\"triggerPopoverMenuInstance\", { capture: true })\n handleSubmenuChange(ev: Event): void {\n // Finds the trigger menu item that has emitted the event\n const target = ev.target as HTMLIcMenuItemElement;\n this.open = false;\n\n // Find the popover menu that the menu item triggers (i.e. submenu-trigger-for === submenu-id).\n const childEl = document.querySelector(\n `ic-popover-menu[submenu-id=${target.submenuTriggerFor}]`\n ) as HTMLIcPopoverMenuElement;\n // Set the parent popover menu of the submenu and open the submenu\n childEl.parentPopover = this.el;\n childEl.anchor = this.anchor;\n childEl.ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n childEl.openFromParent();\n childEl.submenuLevel = this.submenuLevel! + 1;\n // Set the label in the submenu using the label of the menu item that has emitted the event\n childEl.parentLabel = target.label;\n }\n\n @Listen(\"click\", { target: \"document\" })\n handleClick(ev: Event): void {\n if (this.open && this.isNotPopoverMenuEl(ev)) {\n // If menu is open and the next click on the document is not a popover El, close the popover\n this.closeMenu();\n }\n }\n\n // Manages the keyboard navigation in the popover menu\n @Listen(\"keydown\", {})\n handleKeyDown(ev: KeyboardEvent): void {\n switch (ev.key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n ev.preventDefault();\n this.currentFocus = this.getNextItemToSelect(\n this.currentFocus,\n ev.key === \"ArrowDown\"\n );\n this.setButtonFocus();\n break;\n case \"Home\":\n //Sets home focus as first element, or back button\n this.currentFocus = 0;\n this.setButtonFocus();\n break;\n case \"End\":\n //Sets end focus as last element\n this.currentFocus = this.popoverMenuEls.length - 1;\n this.setButtonFocus();\n break;\n case \"Escape\":\n case \"Tab\":\n ev.preventDefault();\n if (this.open) {\n this.closeMenu(true);\n this.el.blur();\n }\n break;\n }\n }\n\n /\n @internal Opens the menu from the child menu.\n /\n @Method()\n async openFromChild(): Promise<void> {\n this.open = true;\n this.openingFromChild = true;\n\n setTimeout(() => (this.openingFromChild = false), 1000);\n }\n\n /\n @internal Opens the menu from the parent menu.\n /\n @Method()\n async openFromParent(): Promise<void> {\n this.open = true;\n this.openingFromParent = true;\n\n setTimeout(() => (this.openingFromParent = false), 1000);\n }\n\n private setButtonFocus = () => {\n this.popoverMenuEls[this.currentFocus]?.focus();\n };\n\n // Checks that the popover menu has an anchor\n private findAnchorEl = (anchor: string \| undefined): HTMLElement \| null => {\n let anchorElement: HTMLElement \| null = null;\n if (!anchor) {\n this.submenuId === undefined &&\n console.error(\"No anchor specified for popover component\");\n } else {\n anchorElement = document.querySelector(\n anchor.indexOf(\"#\") === 0 ? anchor : \"#\" + anchor\n );\n if (anchorElement === null) {\n console.error(`Popover anchor element '${anchor}' not found`);\n }\n }\n return anchorElement;\n };\n\n private isNotPopoverMenuEl = (ev: Event) => {\n const { id, tagName } = ev.target as HTMLElement;\n return (\n id !== this.anchor &&\n tagName !== \"IC-MENU-ITEM\" &&\n tagName !== \"IC-MENU-GROUP\" &&\n tagName !== \"IC-POPOVER-MENU\"\n );\n };\n\n /\n @internal Close the menu, emit icPopoverClosed of the root popover\n * @param setFocusToAnchor when true return focus to anchor element when menu is closed\n /\n @Method()\n async closeMenu(\n setFocusToAnchor = false,\n menuElement?: HTMLIcMenuItemElement\n ): Promise<void> {\n this.open = false;\n if (this.parentPopover) {\n this.parentPopover.closeMenu(setFocusToAnchor, menuElement);\n } else {\n if (setFocusToAnchor) {\n this.anchorEl?.focus();\n }\n this.icPopoverClosed.emit(menuElement);\n }\n }\n\n /\n @internal This method allows props to be added to the PopperJS createPopper instance outside of the popover menu\n * @param props object - createPopper props set externally\n */\n @Method()\n async setExternalPopperProps<T extends Partial<Options>>(props: T) {\n this.popperProps = props;\n }\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numButtons = this.popoverMenuEls.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n // Check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numButtons;\n } else if (nextItem > numButtons) {\n nextItem = 0;\n }\n\n return nextItem;\n };\n\n private addMenuItems = (elements: Element[] \| NodeListOf<ChildNode>) => {\n for (let i = 0; i < elements.length; i++) {\n const el = elements[i] as HTMLIcMenuItemElement;\n if (el.tagName === \"IC-MENU-ITEM\") {\n this.popoverMenuEls.push(el);\n } else if (el.tagName === \"IC-MENU-GROUP\") {\n const groupSlotWrapper = el.shadowRoot?.querySelector(\n \".menu-items-wrapper\"\n );\n if (groupSlotWrapper) {\n const menuGroupElements = getSlotElements(groupSlotWrapper);\n menuGroupElements && this.addMenuItems(menuGroupElements);\n }\n }\n }\n };\n\n private getMenuAriaLabel = (): string \| null => {\n const ariaLabel = this.el.getAttribute(this.ARIA_LABEL);\n\n if (isPropDefined(this.submenuId)) {\n return `${ariaLabel}, within nested level ${this.submenuLevel} ${this.parentLabel} submenu,`;\n } else {\n return ariaLabel;\n }\n };\n\n private handleBackButtonClick = (): void => {\n this.parentPopover?.openFromChild();\n this.open = false;\n };\n\n private initPopperJS = () => {\n if (this.anchorEl) {\n this.popperInstance = createPopper(this.anchorEl, this.el, {\n strategy: this.fixedPositioning ? \"fixed\" : \"absolute\",\n placement: \"bottom-start\",\n modifiers: [\n {\n name: \"offset\",\n options: {\n offset: [0, 4],\n },\n },\n {\n name: \"flip\",\n options: {\n fallbackPlacements: [\"top-start\", \"top-end\", \"bottom-end\"],\n rootBoundary: \"viewport\",\n },\n },\n ],\n ...this.popperProps,\n });\n }\n };\n\n render() {\n return (\n <Host\n class={{\n [\"ic-popover-menu-open\"]: !!this.open,\n [`ic-theme-${this.theme}`]: this.theme !== \"inherit\",\n }}\n >\n <div\n id={\n this.parentPopover === undefined\n ? `ic-popover-submenu-${this.submenuId}`\n : \"\"\n }\n class={{\n menu: true,\n }}\n >\n <span\n class={{\n \"opening-from-parent\": this.openingFromParent,\n \"opening-from-child\": this.openingFromChild,\n }}\n >\n {isPropDefined(this.submenuId) && (\n <span>\n <span role=\"menu\">\n <ic-menu-item\n class=\"ic-popover-submenu-back-button\"\n ref={(el) => (this.backButton = el)}\n label=\"Back\"\n onClick={this.handleBackButtonClick}\n id={`ic-popover-submenu-back-button-${this.submenuLevel}`}\n >\n <svg\n slot=\"icon\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"submenu-back-icon\"\n >\n <path\n d=\"M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z\"\n fill=\"currentColor\"\n />\n </svg>\n </ic-menu-item>\n </span>\n <ic-typography variant=\"subtitle-small\" class=\"parent-label\">\n {this.parentLabel}\n </ic-typography>\n </span>\n )}\n <div\n class=\"menu-body\"\n aria-label={this.getMenuAriaLabel()}\n role=\"menu\"\n >\n <slot></slot>\n </div>\n </span>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -1,10 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { F as slotHasContent, r as removeDisabledFalse, c as checkResizeObserver, o as onComponentRequiredPropUndefined, x as hasValidationStatus } from './helpers.js';
+import { A as slotHasContent, r as removeDisabledFalse, c as checkResizeObserver, o as onComponentRequiredPropUndefined, w as hasValidationStatus } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-input-label2.js';
 import { d as defineCustomElement$3 } from './ic-input-validation2.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
-const icRadioGroupCss = "/*! 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}:host{display:block;--ic-input-label-text-color:var(--ic-radio-button-input-field-label);--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-radio-button-state-text);--ic-input-validation-error:var(--ic-radio-button-state-icon-error)}ic-input-label.error{--ic-input-label-text-color:var(--ic-radio-button-input-field-label-error)}ic-input-label.disabled{--ic-input-label-text-color:var(\n    --ic-radio-button-input-field-label-disabled\n  );--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle-disabled\n  )}ic-input-validation{margin-top:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label:not(.with-helper) .ic-typography-label,ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-radio-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}ic-input-label .helpertext{display:block}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.ic-radio-group-small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-radio-group-small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
+const icRadioGroupCss = "/*! 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}:host{display:block;--ic-input-label-text-color:var(--ic-radio-button-input-field-label);--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-radio-button-state-text);--ic-input-validation-error:var(--ic-radio-button-state-icon-error)}ic-input-label.error{--ic-input-label-text-color:var(--ic-radio-button-input-field-label-error)}ic-input-label.disabled{--ic-input-label-text-color:var(\n    --ic-radio-button-input-field-label-disabled\n  );--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle-disabled\n  )}ic-input-validation.show-validation{margin-top:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-validation.show-validation{margin-top:calc(var(--ic-space-sm) / 2)}ic-input-label:not(.with-helper) .ic-typography-label,ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-radio-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}ic-input-label .helpertext{display:block}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.ic-radio-group-small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-radio-group-small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
 const IcRadioGroupStyle0 = icRadioGroupCss;
 const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTMLElement {
@@ -39,6 +39,10 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
          * The size of the radio group component.
          */
         this.size = "medium";
+        /**
+         * The value of the `aria-live` attribute on the validation message.
+         */
+        this.validationAriaLive = "polite";
         /**
          * The validation status - e.g. 'error' | 'warning' | 'success'.
          */
@@ -232,17 +236,20 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         }
     }
     render() {
-        const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationStatus, validationText, theme, } = this;
-        return (h(Host, { key: '94f34265abb206036b1d9ded9dd959647a710999', onKeyDown: handleKeyDown, class: {
+        const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationAriaLive, validationStatus, validationText, theme, } = this;
+        const showValidation = hasValidationStatus(validationStatus, disabled);
+        return (h(Host, { key: '4ea2e0ca7614fb4ce6563ea146f86d72707a399a', onKeyDown: handleKeyDown, class: {
                 "ic-radio-group-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: 'ecb2a958a94beb49129c1548fafa4c3220036218', role: "radiogroup", "aria-label": `${label}${required ? ", required" : ""}` }, !hideLabel && (h("ic-input-label", { key: 'f11f98513d71d6ea942519fc38a91e96824da3e7', class: {
+            } }, h("fieldset", { key: 'ebad7a878454455a15892bf53c43bdcb914b77c4', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (h("legend", { key: 'aac1f37c7b1d4d5bc621bd3030dc9eef60417659' }, h("ic-input-label", { key: 'fd04e3f74c89b633996eb22e60902e988a8ac8ef', class: {
                 [`${validationStatus}`]: true,
                 ["disabled"]: !!disabled,
-            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '88578f95a79fe95d58294a93e8470dd663b42903', name: "helper-text", slot: "helper-text" }))), h("div", { key: '9a5ea35f9f684085a25b40def44a29a992306ac1', class: {
+            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '66325d58018dff189c975e3e4fc01249b51b6b9f', name: "helper-text", slot: "helper-text" })))), h("div", { key: '6d2d332396c87b798d5d160bdb5977c0a8ad6751', class: {
                 "radio-buttons-container": true,
                 horizontal: currentOrientation === this.RADIO_HORIZONTAL,
-            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'dafa17bf5bc76e8697f802a3376bb2bfe1cc249e' }))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { key: '6b8a5b2aa258870a00b462d48a978b5cd3a4e33b', ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'fb0a1b41503ba88ce9bda3c0bc8236ae0a7e3795' }))), h("ic-input-validation", { key: 'f9f7c2bdffd83d705149f74fe2caad93e57dd85b', class: {
+                "show-validation": showValidation,
+            }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -260,6 +267,7 @@ const RadioGroup = /*@__PURE__*/ proxyCustomElement(class RadioGroup extends HTM
         "orientation": [1],
         "required": [4],
         "size": [1],
+        "validationAriaLive": [1, "validation-aria-live"],
         "validationStatus": [1, "validation-status"],
         "validationText": [1, "validation-text"],
         "theme": [1],