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

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

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

	@@ -1 +1 @@
1	- {"file":"ic-input-component-container2.js","mappings":";;;AAAA,MAAM,4BAA4B,GAAG,qoKAAqoK,CAAC;AAC3qK,wCAAe,4BAA4B;;MCoB9B,uBAAuB;IAJpC;;;;;;QAWU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,qBAAgB,GAAgC,EAAE,CAAC;KAqD5D;IArFC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,GAAG,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,GACjD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,wCAAwC,EAAE,CAAC,CAAC,SAAS;gBACrD,yCAAyC,EAAE,CAAC,CAAC,SAAS;aACvD,mBACc,QAAQ,GAAG,MAAM,GAAG,IAAI,IAEvC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KACnC,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,8DAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,6DAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n * @prop --border-color-hover: Border colour of the input component container on hover\n * @prop --border-color-pressed: Border colour of the input component container when pressed\n * @prop --border-color-disabled: Border colour of the input component container when disabled\n * @prop --border-color-error: Border colour of the error variant for input component container\n * @prop --border-color-error-hover: Border colour of the error hover variant for input component container\n * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container\n * @prop --border-color-warning: Border colour of the warning variant for input component container\n * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container\n * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container\n * @prop --border-color-success: Border colour of the success variant for input component container\n * @prop --border-color-success-hover: Border colour of the success hover variant for input component container\n * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n min-height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--input-bg-color, var(--ic-color-background-primary));\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.ic-input-component-container-full-width {\n width: 100%;\n}\n\nic-input-component-container.ic-input-component-container-disabled,\nic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed\n var(--border-color-disabled, var(--ic-color-border-neutral-disabled));\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly {\n height: auto;\n background: transparent;\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error, var(--ic-color-border-error));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-hover, var(--ic-color-border-error-hover));\n}\n\nic-input-component-container.ic-input-component-container-error:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-pressed, var(--ic-color-border-error-pressed));\n}\n\nic-input-component-container.ic-input-component-container-warning {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning, var(--ic-color-border-warning));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-warning:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-hover, var(--ic-color-border-warning-hover));\n}\n\nic-input-component-container.ic-input-component-container-warning:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));\n}\n\nic-input-component-container.ic-input-component-container-success {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success, var(--ic-color-border-success));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-success:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-hover, var(--ic-color-border-success-hover));\n}\n\nic-input-component-container.ic-input-component-container-success:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-pressed, var(--ic-color-border-success-pressed));\n}\n\nic-input-component-container.ic-input-component-container-small {\n height: var(--ic-space-xl);\n min-height: var(--ic-space-xl);\n}\n\nic-input-component-container.ic-input-component-container-large {\n height: var(--ic-space-xxl);\n min-height: var(--ic-space-xxl);\n}\n\nic-input-component-container.ic-input-component-container-multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.ic-input-component-container-multiline\n .icon-container,\nic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small\n .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.ic-input-component-container-readonly\n .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-input-component-container-success-icon-inline-color);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-input-component-container-hover-border);\n border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n border-color: var(\n --border-color-pressed,\n var(--ic-color-border-neutral-pressed)\n );\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.ic-input-component-container-disabled,\n ic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n","import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n removeDisabledFalse,\n renderDynamicChildSlots,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n private hostMutationObserver: MutationObserver;\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine?: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly?: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline?: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"left-icon\", this)\n );\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n\n render() {\n const {\n size,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n validationInline,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]:\n validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": !!disabled,\n \"ic-input-component-container-readonly\": !!readonly,\n \"ic-input-component-container-multiline\": !!multiLine,\n \"ic-input-component-container-full-width\": !!fullWidth,\n }}\n aria-disabled={disabled ? \"true\" : null}\n >\n <div class=\"focus-indicator\">\n {slotHasContent(this.el, \"left-icon\") && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span class=\"inline-success\" innerHTML={successIcon} />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-component-container2.js","mappings":";;;;AAAA,MAAM,4BAA4B,GAAG,qoKAAqoK,CAAC;AAC3qK,wCAAe,4BAA4B;;MCoB9B,uBAAuB;IAJpC;;;;;;QAWU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,cAAS,GAAa,KAAK,CAAC;;;;QAK5B,aAAQ,GAAa,KAAK,CAAC;;;;QAK3B,SAAI,GAAa,QAAQ,CAAC;;;;QAK1B,qBAAgB,GAAa,KAAK,CAAC;;;;QAKnC,qBAAgB,GAAgC,EAAE,CAAC;KAqD5D;IArFC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAgCD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,IAAI,CAAC,oBAAoB,GAAG,IAAI,gBAAgB,CAAC,CAAC,YAAY,KAC5D,uBAAuB,CAAC,YAAY,EAAE,WAAW,EAAE,IAAI,CAAC,CACzD,CAAC;QACF,IAAI,CAAC,oBAAoB,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;KACjE;IAED,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,SAAS,EACT,gBAAgB,GACjB,GAAG,IAAI,CAAC;QAET,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,gCAAgC,IAAI,EAAE,GAAG,IAAI;gBAC9C,CAAC,gCAAgC,gBAAgB,EAAE,GACjD,gBAAgB,KAAK,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,uCAAuC,EAAE,CAAC,CAAC,QAAQ;gBACnD,wCAAwC,EAAE,CAAC,CAAC,SAAS;gBACrD,yCAAyC,EAAE,CAAC,CAAC,SAAS;aACvD,mBACc,QAAQ,GAAG,MAAM,GAAG,IAAI,IAEvC,4DAAK,KAAK,EAAC,iBAAiB,IACzB,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,KACnC,4DAAK,KAAK,EAAC,gBAAgB,IACzB,6DAAM,IAAI,EAAC,WAAW,GAAG,CACrB,CACP,EACD,8DAAa,EAEZ,gBAAgB;YACf,gBAAgB,KAAK,mBAAmB,CAAC,OAAO,KAC9C,6DAAM,KAAK,EAAC,gBAAgB,EAAC,SAAS,EAAE,WAAW,GAAI,CACxD,CACC,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-component-container/ic-input-component-container.css?tag=ic-input-component-container","src/components/ic-input-component-container/ic-input-component-container.tsx"],"sourcesContent":["ic-input-component-container {\n /*\n @prop --border-color: Border colour of the input component container\n * @prop --border-color-hover: Border colour of the input component container on hover\n * @prop --border-color-pressed: Border colour of the input component container when pressed\n * @prop --border-color-disabled: Border colour of the input component container when disabled\n * @prop --border-color-error: Border colour of the error variant for input component container\n * @prop --border-color-error-hover: Border colour of the error hover variant for input component container\n * @prop --border-color-error-pressed: Border colour of the error pressed variant for input component container\n * @prop --border-color-warning: Border colour of the warning variant for input component container\n * @prop --border-color-warning-hover: Border colour of the warning hover variant for input component container\n * @prop --border-color-warning-pressed: Border colour of the warning pressed variant for input component container\n * @prop --border-color-success: Border colour of the success variant for input component container\n * @prop --border-color-success-hover: Border colour of the success hover variant for input component container\n * @prop --border-color-success-pressed: Border colour of the success pressed variant for input component container\n /\n\n display: flex;\n border: var(--ic-border-width) solid\n var(--border-color, var(--ic-architectural-400));\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-slow);\n height: 2.5rem;\n min-height: 2.5rem;\n width: var(--input-width, 20rem);\n padding: var(--ic-space-1px);\n background-color: var(--input-bg-color, var(--ic-color-background-primary));\n box-sizing: border-box;\n fill: var(--ic-architectural-400);\n outline: none;\n}\n\nic-input-component-container.ic-input-component-container-full-width {\n width: 100%;\n}\n\nic-input-component-container.ic-input-component-container-disabled,\nic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed\n var(--border-color-disabled, var(--ic-color-border-neutral-disabled));\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-small.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-large.ic-input-component-container-readonly {\n height: auto;\n background: transparent;\n}\n\nic-input-component-container.ic-input-component-container-readonly,\nic-input-component-container.ic-input-component-container-readonly:hover {\n border: none;\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error, var(--ic-color-border-error));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-error:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-hover, var(--ic-color-border-error-hover));\n}\n\nic-input-component-container.ic-input-component-container-error:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-error-pressed, var(--ic-color-border-error-pressed));\n}\n\nic-input-component-container.ic-input-component-container-warning {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning, var(--ic-color-border-warning));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-warning:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-hover, var(--ic-color-border-warning-hover));\n}\n\nic-input-component-container.ic-input-component-container-warning:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-warning-pressed, var(--ic-color-border-warning-pressed));\n}\n\nic-input-component-container.ic-input-component-container-success {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success, var(--ic-color-border-success));\n padding: 0;\n}\n\nic-input-component-container.ic-input-component-container-success:hover {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-hover, var(--ic-color-border-success-hover));\n}\n\nic-input-component-container.ic-input-component-container-success:focus-within {\n border: var(--ic-space-xxxs) solid\n var(--border-color-success-pressed, var(--ic-color-border-success-pressed));\n}\n\nic-input-component-container.ic-input-component-container-small {\n height: var(--ic-space-xl);\n min-height: var(--ic-space-xl);\n}\n\nic-input-component-container.ic-input-component-container-large {\n height: var(--ic-space-xxl);\n min-height: var(--ic-space-xxl);\n}\n\nic-input-component-container.ic-input-component-container-multiline {\n height: auto;\n}\n\nic-input-component-container .icon-container {\n margin-top: var(--ic-space-xxs);\n margin-left: 0.438rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container.ic-input-component-container-multiline\n .icon-container,\nic-input-component-container.ic-input-component-container-multiline.ic-input-component-container-small\n .icon-container {\n margin-top: 0.375rem;\n display: block;\n}\n\nic-input-component-container.ic-input-component-container-readonly\n .icon-container {\n margin-left: -0.313rem;\n}\n\nic-input-component-container.ic-input-component-container-disabled\n ::placeholder {\n display: none;\n}\n\nic-input-component-container .inline-success {\n margin: var(--ic-space-xs) 0.375rem;\n display: flex;\n align-items: center;\n}\n\nic-input-component-container .inline-success > svg {\n fill: var(--ic-input-component-container-success-icon-inline-color);\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-component-container:hover {\n border: var(--ic-input-component-container-hover-border);\n border-color: var(--border-color-hover, var(--ic-color-border-neutral-hover));\n color: var(--ic-action-monochrome-hover-dark);\n}\n\nic-input-component-container:focus {\n border: var(--ic-border-pressed);\n border-color: var(\n --border-color-pressed,\n var(--ic-color-border-neutral-pressed)\n );\n}\n\n.focus-indicator {\n display: flex;\n width: 100%;\n margin: -0.125rem;\n padding: 0.125rem;\n border-radius: var(--ic-border-radius);\n transition: var(--ic-easing-transition-fast);\n}\n\n.focus-indicator:focus-within,\n.focus-indicator-enabled {\n box-shadow: var(--ic-border-focus);\n}\n\n.focus-indicator.ic-input-component-container-dark:focus-within {\n box-shadow: var(--ic-border-focus);\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n ic-input-component-container,\n .focus-indicator {\n transition: none;\n }\n\n ic-input-component-container:focus-within {\n border: var(--ic-border-width) solid Highlight;\n outline: 0.125rem solid Highlight;\n }\n\n ic-input-component-container.ic-input-component-container-disabled,\n ic-input-component-container.ic-input-component-container-disabled:hover {\n border: var(--ic-border-width) dashed GrayText;\n }\n}\n","import { Component, Element, Host, Prop, Watch, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n IcSizes,\n} from \"../../utils/types\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport {\n removeDisabledFalse,\n renderDynamicChildSlots,\n slotHasContent,\n} from \"../../utils/helpers\";\n\n/\n @slot left-icon - Content will be placed to the left of the input.\n /\n@Component({\n tag: \"ic-input-component-container\",\n styleUrl: \"ic-input-component-container.css\",\n})\nexport class InputComponentContainer {\n private hostMutationObserver: MutationObserver;\n @Element() el: HTMLIcInputComponentContainerElement;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n @Watch(\"disabled\")\n watchDisabledHandler(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n If `true`, the input component container will fill the width of the container it is in.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n If `true`, the input component container will allow for multiple lines.\n /\n @Prop() multiLine?: boolean = false;\n\n /\n If `true`, the readonly state will be set.\n /\n @Prop() readonly?: boolean = false;\n\n /\n The size of the input component container component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n If `true`, the validation will display inline.\n /\n @Prop() validationInline?: boolean = false;\n\n /\n The validation status of the input component container - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver((mutationList) =>\n renderDynamicChildSlots(mutationList, \"left-icon\", this)\n );\n this.hostMutationObserver.observe(this.el, { childList: true });\n }\n\n render() {\n const {\n size,\n validationStatus,\n disabled,\n readonly,\n multiLine,\n fullWidth,\n validationInline,\n } = this;\n\n return (\n <Host\n class={{\n [`ic-input-component-container-${size}`]: true,\n [`ic-input-component-container-${validationStatus}`]:\n validationStatus !== \"\" && !disabled && !readonly,\n \"ic-input-component-container-disabled\": !!disabled,\n \"ic-input-component-container-readonly\": !!readonly,\n \"ic-input-component-container-multiline\": !!multiLine,\n \"ic-input-component-container-full-width\": !!fullWidth,\n }}\n aria-disabled={disabled ? \"true\" : null}\n >\n <div class=\"focus-indicator\">\n {slotHasContent(this.el, \"left-icon\") && (\n <div class=\"icon-container\">\n <slot name=\"left-icon\" />\n </div>\n )}\n <slot></slot>\n\n {validationInline &&\n validationStatus === IcInformationStatus.Success && (\n <span class=\"inline-success\" innerHTML={successIcon} />\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -17,11 +17,11 @@ const InputContainer = /*@__PURE__*/ proxyCustomElement(class InputContainer ext
         this.readonly = false;
     }
     render() {
-        return (h(Host, { key: '32ae22db5e182cc2c092c8f48e61d42a318284a0' }, h("div", { key: 'bae9ef74f7f92004ec99c387a213822315c505ba', class: {
+        return (h(Host, { key: 'd7a6f03073013efef8534f6305e64f66d2b58b91' }, h("div", { key: 'f93b5ad4fc27eed8fabf3fd83de73906b4592ca4', class: {
                 ["component-container"]: true,
                 ["disabled"]: !!this.disabled,
                 ["readonly"]: !!this.readonly,
-            } }, h("slot", { key: 'acca571eaa0d8f19b0e3379d2592409aacf9dd95' }))));
+            } }, h("slot", { key: '59074f71d915aebc3205308c0406b4f6ab2a73ae' }))));
     }
     static get style() { return IcInputContainerStyle0; }
 }, [4, "ic-input-container", {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, y as getInputHelperTextID } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, x as getInputHelperTextID } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 const icInputLabelCss = "ic-input-label{margin-bottom:var(--ic-space-xs);--ic-typography-color:var(\n    --ic-input-label-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-label.with-helper{margin-bottom:0}ic-input-label.ic-input-label-readonly{--ic-typography-color:var(--ic-input-label-readonly-typography-color)}ic-input-label .helpertext,ic-input-label .helpertext ::slotted(*){margin-top:var(--ic-space-xxxs);padding-bottom:var(--ic-input-label-helpertext-padding, 0);--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-normal{--ic-typography-color:var(\n    --ic-input-label-helper-text-color,\n    var(--ic-color-text-secondary)\n  )}ic-input-label .helpertext-readonly{--ic-typography-color:var(--ic-input-label-readonly-helpertext-color)}ic-input-label .readonly-label{--ic-typography-color:var(--ic-input-label-readonly-label-color)}ic-input-label .error-label{--ic-typography-color:var(--ic-input-label-error-label-color)}";
@@ -70,11 +70,11 @@ const InputLabel = /*@__PURE__*/ proxyCustomElement(class InputLabel extends HTM
             "helpertext-readonly": readonly,
         };
         const helperTextSlot = this.el.querySelector("slot[name='helper-text']");
-        return (h(Host, { key: 'da58fe3cac026661d1c624c69c56c6e64ff3c07a', class: {
+        return (h(Host, { key: 'b4ae951684bc9fbacd077fd7586a60a680cb1114', class: {
                 "ic-input-label-disabled": !!disabled,
                 "ic-input-label-readonly": readonly,
                 "with-helper": this.isHelperTextSlotUsed(helperTextSlot) || helperText !== "",
-            } }, !hideLabel && (h("ic-typography", { key: 'bb221e5f51681a0caa721c66f03fd475e4e08749', variant: "label", class: {
+            } }, !hideLabel && (h("ic-typography", { key: 'dd5d6d73707aadd9cc59225224fffadefecda9c7', variant: "label", class: {
                 "readonly-label": readonly,
                 "error-label": status === "error" && !(readonly || disabled),
             } }, readonly || !useLabelTag ? (`${labelText}`) : (h("label", { htmlFor: this.for }, labelText)))), this.isHelperTextSlotUsed(helperTextSlot) ? (h("span", { id: helperTextId, class: helperTextClass }, h("slot", { name: "helper-text" }))) : (helperText !== "" && (h("ic-typography", { variant: "caption", class: helperTextClass }, h("span", { id: helperTextId }, helperText))))));

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

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, z as getInputValidationTextID, A as IcInformationStatus, B as warningIcon, C as errorIcon, E as successIcon } from './helpers.js';
+import { o as onComponentRequiredPropUndefined, y as getInputValidationTextID, z as IcInformationStatus } from './helpers.js';
+import { w as warningIcon, f as errorIcon, s as successIcon } from './constants.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}";
+const icInputValidationCss = "ic-input-validation{width:var(--input-width, 20rem);margin-top:var(--ic-space-xs);display:flex}ic-input-validation.ic-input-validation-full-width{width:100%}ic-input-validation span.status-icon{padding-right:var(--ic-space-xxs)}ic-input-validation span.status-icon>svg{height:1.25rem;width:1.25rem}ic-input-validation span.icon-success>svg{fill:var(--ic-input-validation-success-icon-color)}ic-input-validation span.icon-error>svg{fill:var(--ic-input-validation-error, var(--ic-atoms-status-icon-error))}ic-input-validation span.icon-warning>svg{fill:var(--ic-input-validation-warning-icon-color)}ic-input-validation .statustext{flex-grow:1;color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  );--ic-typography-color:var(\n    --ic-input-validation-status-text-color,\n    var(--ic-color-text-primary)\n  )}ic-input-validation .sr-only{position:absolute;left:-9999px}";
 const IcInputValidationStyle0 = icInputValidationCss;
-const icon = {
+const ICON = {
     [IcInformationStatus.Warning]: warningIcon,
     [IcInformationStatus.Error]: errorIcon,
     [IcInformationStatus.Success]: successIcon,
 };
+const INVISIBLE_CHAR = "\u200B";
 const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation extends HTMLElement {
     constructor() {
         super();
@@ -27,21 +29,33 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
          */
         this.status = "";
     }
+    watchMessageHandler(newValue) {
+        // Force detectable DOM changes
+        // Invisible character used as screen readers can ignore whitespace changes e.g. "" and " "
+        this.messageEl.textContent = INVISIBLE_CHAR;
+        setTimeout(() => {
+            this.messageEl.textContent = newValue;
+        }, 100); // Delay to help ensure screen readers detect change
+    }
     componentDidLoad() {
         onComponentRequiredPropUndefined([{ prop: this.message, propName: "message" }], "Input Validation");
+        this.messageEl.textContent = INVISIBLE_CHAR;
     }
     render() {
         const { ariaLiveMode, fullWidth, status, message } = this;
-        const displayIcon = status !== "" ? icon[status] : "";
-        return (h(Host, { key: '149fe6ed6f86bb49ff8179e617542c048da4b80f', class: {
+        const displayIcon = status !== "" ? ICON[status] : "";
+        return (h(Host, { key: '34ecf789f9c0821d672bcdf532f778b8132bb595', class: {
                 [`ic-input-validation-${status}`]: status !== "",
                 "ic-input-validation-full-width": !!fullWidth,
-            } }, displayIcon !== "" && (h("span", { key: 'e9e0ad999d435642e02a9f9c4abb95840fe13b3f', class: {
+            } }, displayIcon !== "" && (h("span", { key: '8d40b240e1e7647725c0359205a638eae4cb2cee', class: {
                 "status-icon": true,
                 [`icon-${status}`]: true,
-            }, innerHTML: displayIcon })), h("ic-typography", { key: '7494901b17b7bb3c91167e95190c415fd06f03c9', variant: "caption", class: "statustext" }, h("span", { key: '5e7d2d4cdcef0d32d5338f25365bc9831203a9c9', "aria-live": ariaLiveMode, id: this.for && getInputValidationTextID(this.for) }, message)), h("slot", { key: '445c0fe4b8effa3b9d98a9b240921e613ef43e24', name: "validation-message-adornment" })));
+            }, innerHTML: displayIcon })), h("ic-typography", { key: '841555cf1e183663ed22863bb98ccbf18dc5747d', variant: "caption", class: "statustext" }, h("span", { key: '8f9cde8e980016736a58129b3928a8f90da8054c', id: this.for && getInputValidationTextID(this.for) }, message), h("span", { key: '3497fb929f8e6d55db69462405d4d2655741511b', ref: (el) => (this.messageEl = el), class: "sr-only", "aria-live": ariaLiveMode })), h("slot", { key: '58ac53581ef92420a088eb50bfb1e9fcedad5660', name: "validation-message-adornment" })));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "message": ["watchMessageHandler"]
+    }; }
     static get style() { return IcInputValidationStyle0; }
 }, [4, "ic-input-validation", {
         "ariaLiveMode": [1, "aria-live-mode"],
@@ -49,6 +63,8 @@ const InputValidation = /*@__PURE__*/ proxyCustomElement(class InputValidation e
         "fullWidth": [4, "full-width"],
         "message": [1],
         "status": [1]
+    }, undefined, {
+        "message": ["watchMessageHandler"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

	@@ -1 +1 @@
1	- {"file":"ic-input-validation2.js","mappings":"~~;;;;~~AAAA,MAAM,oBAAoB,GAAG,~~m1BAAm1B,~~CAAC;~~AACj3B~~,gCAAe,oBAAoB;;ACenC,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC3C,CAAC;~~MASW~~,eAAe;IAJ5B;;;;;;~~QAUU~~,iBAAY,GAA4B,QAAQ,CAAC;;;;QAUjD,cAAS,GAAa,KAAK,CAAC;;;;~~QAU5B~~,WAAM,GAAgC,EAAE,CAAC;~~KA0ClD~~;~~IAxCC~~,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;~~KACH~~;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAO,CAAC,GAAG,EAAE,CAAC;QACvD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;aAC9C,IAEA,WAAW,KAAK,EAAE,KACjB,6DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,~~EAED~~,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,~~0EACa~~,~~YAAY,EACvB,~~EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,~~IAEjD~~,OAAO,CACH,~~CACO~~,~~EAEhB~~,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n","import { Element, Component, Host, Prop, h } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst ~~icon~~ = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode?: IcAriaLiveModeVariants = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for?: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n */\n @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? ~~icon~~[status!] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span~~\n aria-live={ariaLiveMode}\n~~ id={this.for && getInputValidationTextID(this.for)}\n >\n {~~message~~}\n </span>\n </ic-typography>\n\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-input-validation2.js","mappings":";;;;;AAAA,MAAM,oBAAoB,GAAG,+4BAA+4B,CAAC;AAC76B,gCAAe,oBAAoB;;ACenC,MAAM,IAAI,GAAG;IACX,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;IAC1C,CAAC,mBAAmB,CAAC,KAAK,GAAG,SAAS;IACtC,CAAC,mBAAmB,CAAC,OAAO,GAAG,WAAW;CAC3C,CAAC;AACF,MAAM,cAAc,GAAG,QAAQ,CAAC;MASnB,eAAe;IAJ5B;;;;;;QAYU,iBAAY,GAA4B,QAAQ,CAAC;;;;QAUjD,cAAS,GAAa,KAAK,CAAC;;;;QAmB5B,WAAM,GAAgC,EAAE,CAAC;KA4ClD;IAxDC,mBAAmB,CAAC,QAAgB;;;QAGlC,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;QAC5C,UAAU,CAAC;YACT,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,QAAQ,CAAC;SACvC,EAAE,GAAG,CAAC,CAAC;KACT;IAOD,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,kBAAkB,CACnB,CAAC;QACF,IAAI,CAAC,SAAS,CAAC,WAAW,GAAG,cAAc,CAAC;KAC7C;IAED,MAAM;QACJ,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QAC1D,MAAM,WAAW,GAAG,MAAM,KAAK,EAAE,GAAG,IAAI,CAAC,MAAO,CAAC,GAAG,EAAE,CAAC;QACvD,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,CAAC,uBAAuB,MAAM,EAAE,GAAG,MAAM,KAAK,EAAE;gBAChD,gCAAgC,EAAE,CAAC,CAAC,SAAS;aAC9C,IAEA,WAAW,KAAK,EAAE,KACjB,6DACE,KAAK,EAAE;gBACL,aAAa,EAAE,IAAI;gBACnB,CAAC,QAAQ,MAAM,EAAE,GAAG,IAAI;aACzB,EACD,SAAS,EAAE,WAAW,GACtB,CACH,EACD,sEAAe,OAAO,EAAC,SAAS,EAAC,KAAK,EAAC,YAAY,IACjD,6DAAM,EAAE,EAAE,IAAI,CAAC,GAAG,IAAI,wBAAwB,CAAC,IAAI,CAAC,GAAG,CAAC,IACrD,OAAO,CACH,EAEP,6DACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,SAAS,GAAG,EAAqB,CAAC,EACrD,KAAK,EAAC,SAAS,eACJ,YAAY,GACjB,CACM,EAChB,6DAAM,IAAI,EAAC,8BAA8B,GAAQ,CAC5C,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/ic-input-validation/ic-input-validation.css?tag=ic-input-validation","src/components/ic-input-validation/ic-input-validation.tsx"],"sourcesContent":["ic-input-validation {\n width: var(--input-width, 20rem);\n margin-top: var(--ic-space-xs);\n display: flex;\n}\n\nic-input-validation.ic-input-validation-full-width {\n width: 100%;\n}\n\nic-input-validation span.status-icon {\n padding-right: var(--ic-space-xxs);\n}\n\nic-input-validation span.status-icon > svg {\n height: 1.25rem;\n width: 1.25rem;\n}\n\nic-input-validation span.icon-success > svg {\n fill: var(--ic-input-validation-success-icon-color);\n}\n\nic-input-validation span.icon-error > svg {\n fill: var(--ic-input-validation-error, var(--ic-atoms-status-icon-error));\n}\n\nic-input-validation span.icon-warning > svg {\n fill: var(--ic-input-validation-warning-icon-color);\n}\n\nic-input-validation .statustext {\n flex-grow: 1;\n color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n\n --ic-typography-color: var(\n --ic-input-validation-status-text-color,\n var(--ic-color-text-primary)\n );\n}\n\nic-input-validation .sr-only {\n position: absolute;\n left: -9999px;\n}\n","import { Element, Component, Host, Prop, h, Watch } from \"@stencil/core\";\n\nimport {\n IcInformationStatus,\n IcInformationStatusOrEmpty,\n} from \"../../utils/types\";\nimport errorIcon from \"../../assets/error-icon.svg\";\nimport successIcon from \"../../assets/success-icon.svg\";\nimport warningIcon from \"../../assets/warning-icon.svg\";\n\nimport {\n getInputValidationTextID,\n onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcAriaLiveModeVariants } from \"./ic-input-validation.types\";\n\nconst ICON = {\n [IcInformationStatus.Warning]: warningIcon,\n [IcInformationStatus.Error]: errorIcon,\n [IcInformationStatus.Success]: successIcon,\n};\nconst INVISIBLE_CHAR = \"\\u200B\";\n\n/*\n @slot validation-message-adornment - Content will be placed to the right of the validation message.\n /\n@Component({\n tag: \"ic-input-validation\",\n styleUrl: \"ic-input-validation.css\",\n})\nexport class InputValidation {\n private messageEl!: HTMLSpanElement;\n\n @Element() el: HTMLIcInputValidationElement;\n\n /\n The ARIA live mode to apply to the message.\n /\n @Prop() ariaLiveMode?: IcAriaLiveModeVariants = \"polite\";\n\n /\n The ID of the form element the validation is bound to.\n /\n @Prop() for?: string;\n\n /\n If `true`, the input validation will fill the width of the container.\n /\n @Prop() fullWidth?: boolean = false;\n\n /\n The validation message to display.\n /\n @Prop() message!: string;\n @Watch(\"message\")\n watchMessageHandler(newValue: string) {\n // Force detectable DOM changes\n // Invisible character used as screen readers can ignore whitespace changes e.g. \"\" and \" \"\n this.messageEl.textContent = INVISIBLE_CHAR;\n setTimeout(() => {\n this.messageEl.textContent = newValue;\n }, 100); // Delay to help ensure screen readers detect change\n }\n\n /\n The status of the validation - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() status?: IcInformationStatusOrEmpty = \"\";\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.message, propName: \"message\" }],\n \"Input Validation\"\n );\n this.messageEl.textContent = INVISIBLE_CHAR;\n }\n\n render() {\n const { ariaLiveMode, fullWidth, status, message } = this;\n const displayIcon = status !== \"\" ? ICON[status!] : \"\";\n return (\n <Host\n class={{\n [`ic-input-validation-${status}`]: status !== \"\",\n \"ic-input-validation-full-width\": !!fullWidth,\n }}\n >\n {displayIcon !== \"\" && (\n <span\n class={{\n \"status-icon\": true,\n [`icon-${status}`]: true,\n }}\n innerHTML={displayIcon}\n />\n )}\n <ic-typography variant=\"caption\" class=\"statustext\">\n <span id={this.for && getInputValidationTextID(this.for)}>\n {message}\n </span>\n {/ Separate aria-live region to avoid flashing due to textContent delay */}\n <span\n ref={(el) => (this.messageEl = el as HTMLSpanElement)}\n class=\"sr-only\"\n aria-live={ariaLiveMode}\n ></span>\n </ic-typography>\n <slot name=\"validation-message-adornment\"></slot>\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -49,9 +49,9 @@ const LayoutGridItem = /*@__PURE__*/ proxyCustomElement(class LayoutGridItem ext
     }
     render() {
         const { hideInMobileMode } = this;
-        return (h(Host, { key: '07cb3d39a4c3440a06df2f6c56ecdf3017e48f59', class: {
+        return (h(Host, { key: 'a6e63c7a2e569fefef8bd1f801719ec0cfc999f2', class: {
                 "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
-            } }, h("slot", { key: '53c7d5616494ad9fc7468d023b9a9ec520938916' })));
+            } }, h("slot", { key: '976299cc75e2a275ce07dc9bb4ccde082c559175' })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -131,10 +131,10 @@ const LayoutGrid = /*@__PURE__*/ proxyCustomElement(class LayoutGrid extends HTM
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '95699906353df84f439ec7c7ed628f4ba9c80b4e', class: {
+        return (h(Host, { key: 'c7903c71e7a267ce14d624e371128b66b990319e', class: {
                 [`ic-layout-grid-aligned-${aligned}`]: true,
                 ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '5642340495e02e53b2e7248e0f254b32b95b3b3f' })));
+            } }, h("slot", { key: '7d501b244c1e6631ac1f712707b816be89014298' })));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,6 +1,7 @@
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import { O as OpenInNew } from './OpenInNew.js';
-import { I as IC_INHERITED_ARIA, b as inheritAttributes, g as getBrandFromContext, e as IcBrandForegroundEnum } from './helpers.js';
+import { b as inheritAttributes, g as getBrandFromContext, I as IcBrandForegroundEnum } from './helpers.js';
+import { I as IC_INHERITED_ARIA } from './constants.js';
 const icLinkCss = "/*! 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(.ic-link) .link,:host(.ic-link) ::slotted(a){color:var(--ic-link-text);text-decoration:underline;font-weight:var(--ic-font-weight-bold);transition:var(--ic-easing-transition-fast)}:host(.ic-link) .link:visited,:host(.ic-link) ::slotted(a:visited),:host(.ic-link) .link:visited:hover,:host(.ic-link) ::slotted(a:visited:hover),:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:visited:active),:host(.ic-link) .link:visited:focus,:host(.ic-link) ::slotted(a:visited:focus){color:var(--ic-link-text-visited)}:host(.ic-link) .link:hover{color:var(--ic-link-text-hover)}:host(.ic-link) .link:active{color:var(--ic-link-text-pressed)}:host(.ic-link) .link:focus{color:var(--ic-link-text-focused)}:host(.ic-link-monochrome) .link:hover{color:var(--ic-link-text-hover-monochrome)}:host(.ic-link-monochrome) .link:active{color:var(--ic-link-text-pressed-monochrome)}:host(.ic-link-monochrome) .link:focus{color:var(--ic-link-text-focused-monochrome)}:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){outline:none;border-bottom:0.25rem solid !important;margin-bottom:-0.25rem !important;text-decoration:none}@supports (text-underline-offset: 10%){:host(.ic-link) .link:hover,:host(.ic-link) .link:focus,:host(.ic-link) ::slotted(a:hover),:host(.ic-link) ::slotted(a:focus){text-decoration-line:underline;text-decoration-thickness:25%;text-underline-offset:10%;border-bottom:0 !important;margin-bottom:0 !important}}:host(.ic-link) .link:active,:host(.ic-link) .link:focus:active,:host(.ic-link) .link:visited:active,:host(.ic-link) ::slotted(a:active),:host(.ic-link) ::slotted(a:focus:active),:host(.ic-link) ::slotted(a:visited:active){text-decoration:none}.ic-link-open-in-new-icon{vertical-align:middle;margin-left:var(--ic-space-xxs)}.ic-link-open-in-new-icon>svg{width:var(--ic-space-md);height:var(--ic-space-md);fill:var(--ic-link-icon-launch)}.link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited)}:host(.ic-link-monochrome) .link,:host(.ic-link-monochrome) ::slotted(a){color:var(--ic-link-text-monochrome)}:host(.ic-link-monochrome) .link:visited,:host(.ic-link-monochrome) ::slotted(a:visited),:host(.ic-link-monochrome) .link:visited:hover,:host(.ic-link-monochrome) ::slotted(a:visited:hover),:host(.ic-link-monochrome) .link:visited:active,:host(.ic-link-monochrome) ::slotted(a:visited:active),:host(.ic-link-monochrome) .link:visited:focus,:host(.ic-link-monochrome) ::slotted(a:visited:focus){color:var(--ic-link-text-visited-monochrome)}:host(.ic-link-monochrome) .link>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-monochrome)}:host(.ic-link-monochrome) .link:visited>.ic-link-open-in-new-icon>svg{fill:var(--ic-link-icon-launch-visited-monochrome)}:host(.breadcrumb-link) .link{display:var(--breadcrumb-link-display);align-items:var(--breadcrumb-link-align-items);gap:var(--breadcrumb-link-gap)}:host(.breadcrumb-link) .link ::slotted(.back-icon){height:var(--ic-space-lg);width:var(--ic-space-lg)}:host(.breadcrumb-link.current-page) a,:host(.breadcrumb-link.current-page) ::slotted(a){font-weight:normal;color:inherit;text-decoration:none;display:flex;align-items:center}:host(.breadcrumb-link.current-page) .link,:host(.breadcrumb-link.current-page) ::slotted(a:focus){outline:var(--ic-hc-focus-outline);text-decoration:none}:host(.breadcrumb-link.current-page) .link:visited{color:var(--ic-color-text-primary)}:host(.footer-link) ::slotted(a){color:var(--ic-footer-link) !important}:host(.footer-link) .ic-link-open-in-new-icon>svg{fill:var(--ic-footer-icon) !important}@media (forced-colors: active){:host(.ic-link) .ic-link-open-in-new-icon>svg{fill:currentcolor !important}}";
 const IcLinkStyle0 = icLinkCss;
@@ -93,7 +94,7 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
     }
     render() {
         const { download, href, hreflang, referrerpolicy, rel, target, monochrome, theme, } = this;
-        return (h(Host, { key: '21143018ec29344c665ecc6ffdc7ca033eb6fd18', class: {
+        return (h(Host, { key: '17cbca6abdc9b48879a9d307c5bb73fada03aa2d', class: {
                 ["ic-link"]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-link-monochrome"]: !!monochrome,

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

	@@ -1 +1 @@
1	- {"file":"ic-link2.js","mappings":"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","names":[],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: var(--ic-link-icon-launch);\n}\n\n.link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n color: var(--ic-color-text-primary);\n}\n\n/* Footer link /\n\n:host(.footer-link) ::slotted(a) {\n color: var(--ic-footer-link) !important;\n}\n\n:host(.footer-link) .ic-link-open-in-new-icon > svg {\n fill: var(--ic-footer-icon) !important;\n}\n\n/* High Contrast /\n@media (forced-colors: active) {\n :host(.ic-link) .ic-link-open-in-new-icon > svg {\n fill: currentcolor !important;\n }\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/\n * @slot router-item - Handle routing by nesting your routes in this slot.\n /\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement \| null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the link will display as black in the light theme, and white in the dark theme.\n /\n @Prop({ mutable: true }) monochrome?: boolean = false;\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, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground \| null = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\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 && IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setDownloadAttribute = (\n value: string \| boolean \| undefined\n ): string \| undefined => {\n if (typeof value === \"boolean\") {\n return value ? \"\" : undefined;\n } else {\n return value === \"true\" ? \"\" : value === \"false\" ? undefined : value;\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: !!monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: !!href,\n }}\n download={this.setDownloadAttribute(download)}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-link2.js","mappings":"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","names":[],"sources":["src/components/ic-link/ic-link.css?tag=ic-link&encapsulation=shadow","src/components/ic-link/ic-link.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.ic-link) .link,\n:host(.ic-link) ::slotted(a) {\n color: var(--ic-link-text);\n text-decoration: underline;\n font-weight: var(--ic-font-weight-bold);\n transition: var(--ic-easing-transition-fast);\n}\n\n:host(.ic-link) .link:visited,\n:host(.ic-link) ::slotted(a:visited),\n:host(.ic-link) .link:visited:hover,\n:host(.ic-link) ::slotted(a:visited:hover),\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:visited:active),\n:host(.ic-link) .link:visited:focus,\n:host(.ic-link) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited);\n}\n\n:host(.ic-link) .link:hover {\n color: var(--ic-link-text-hover);\n}\n\n:host(.ic-link) .link:active {\n color: var(--ic-link-text-pressed);\n}\n\n:host(.ic-link) .link:focus {\n color: var(--ic-link-text-focused);\n}\n\n:host(.ic-link-monochrome) .link:hover {\n color: var(--ic-link-text-hover-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:active {\n color: var(--ic-link-text-pressed-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:focus {\n color: var(--ic-link-text-focused-monochrome);\n}\n\n:host(.ic-link) .link:hover,\n:host(.ic-link) .link:focus,\n:host(.ic-link) ::slotted(a:hover),\n:host(.ic-link) ::slotted(a:focus) {\n outline: none;\n border-bottom: 0.25rem solid !important;\n margin-bottom: -0.25rem !important;\n text-decoration: none;\n}\n\n@supports (text-underline-offset: 10%) {\n :host(.ic-link) .link:hover,\n :host(.ic-link) .link:focus,\n :host(.ic-link) ::slotted(a:hover),\n :host(.ic-link) ::slotted(a:focus) {\n text-decoration-line: underline;\n text-decoration-thickness: 25%;\n text-underline-offset: 10%;\n border-bottom: 0 !important;\n margin-bottom: 0 !important;\n }\n}\n\n:host(.ic-link) .link:active,\n:host(.ic-link) .link:focus:active,\n:host(.ic-link) .link:visited:active,\n:host(.ic-link) ::slotted(a:active),\n:host(.ic-link) ::slotted(a:focus:active),\n:host(.ic-link) ::slotted(a:visited:active) {\n text-decoration: none;\n}\n\n.ic-link-open-in-new-icon {\n vertical-align: middle;\n margin-left: var(--ic-space-xxs);\n}\n\n.ic-link-open-in-new-icon > svg {\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n fill: var(--ic-link-icon-launch);\n}\n\n.link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited);\n}\n\n:host(.ic-link-monochrome) .link,\n:host(.ic-link-monochrome) ::slotted(a) {\n color: var(--ic-link-text-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited,\n:host(.ic-link-monochrome) ::slotted(a:visited),\n:host(.ic-link-monochrome) .link:visited:hover,\n:host(.ic-link-monochrome) ::slotted(a:visited:hover),\n:host(.ic-link-monochrome) .link:visited:active,\n:host(.ic-link-monochrome) ::slotted(a:visited:active),\n:host(.ic-link-monochrome) .link:visited:focus,\n:host(.ic-link-monochrome) ::slotted(a:visited:focus) {\n color: var(--ic-link-text-visited-monochrome);\n}\n\n:host(.ic-link-monochrome) .link > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-monochrome);\n}\n\n:host(.ic-link-monochrome) .link:visited > .ic-link-open-in-new-icon > svg {\n fill: var(--ic-link-icon-launch-visited-monochrome);\n}\n\n:host(.breadcrumb-link) .link {\n display: var(--breadcrumb-link-display);\n align-items: var(--breadcrumb-link-align-items);\n gap: var(--breadcrumb-link-gap);\n}\n\n:host(.breadcrumb-link) .link ::slotted(.back-icon) {\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n}\n\n:host(.breadcrumb-link.current-page) a,\n:host(.breadcrumb-link.current-page) ::slotted(a) {\n font-weight: normal;\n color: inherit;\n text-decoration: none;\n display: flex;\n align-items: center;\n}\n\n:host(.breadcrumb-link.current-page) .link,\n:host(.breadcrumb-link.current-page) ::slotted(a:focus) {\n outline: var(--ic-hc-focus-outline);\n text-decoration: none;\n}\n\n:host(.breadcrumb-link.current-page) .link:visited {\n color: var(--ic-color-text-primary);\n}\n\n/* Footer link /\n\n:host(.footer-link) ::slotted(a) {\n color: var(--ic-footer-link) !important;\n}\n\n:host(.footer-link) .ic-link-open-in-new-icon > svg {\n fill: var(--ic-footer-icon) !important;\n}\n\n/* High Contrast /\n@media (forced-colors: active) {\n :host(.ic-link) .ic-link-open-in-new-icon > svg {\n fill: currentcolor !important;\n }\n}\n","import {\n Component,\n Element,\n Prop,\n h,\n Host,\n Listen,\n Method,\n forceUpdate,\n} from \"@stencil/core\";\n\nimport OpenInNew from \"../../assets/OpenInNew.svg\";\nimport { getBrandFromContext, inheritAttributes } from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n IcBrand,\n IcBrandForeground,\n IcBrandForegroundEnum,\n IcThemeMode,\n} from \"../../utils/types\";\n\n/\n * @slot router-item - Handle routing by nesting your routes in this slot.\n /\n\n@Component({\n tag: \"ic-link\",\n styleUrl: \"ic-link.css\",\n shadow: {\n delegatesFocus: true,\n },\n})\nexport class Link {\n private inheritedAttributes: { [k: string]: string } = {};\n private routerSlot: HTMLElement \| null;\n private hostMutationObserver: MutationObserver \| null = null;\n\n @Element() el: HTMLIcLinkElement;\n\n /\n If `true`, the user can save the linked URL instead of navigating to it. If the value is a string, it will be used as the filename for the download.\n /\n @Prop() download?: string \| boolean = false;\n\n /\n The URL that the link points to.\n /\n @Prop() href?: string;\n\n /\n The human language of the linked URL.\n /\n @Prop() hreflang?: string;\n\n /\n If `true`, the link will display as black in the light theme, and white in the dark theme.\n /\n @Prop({ mutable: true }) monochrome?: boolean = false;\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, IC_INHERITED_ARIA);\n this.updateTheme();\n this.el.setAttribute(\"exportparts\", \"link\");\n }\n\n componentDidLoad(): void {\n this.hostMutationObserver = new MutationObserver(this.hostMutationCallback);\n this.hostMutationObserver.observe(this.el, {\n attributes: true,\n });\n }\n\n disconnectedCallback(): void {\n this.hostMutationObserver?.disconnect();\n }\n\n @Listen(\"brandChange\", { target: \"document\" })\n brandChangeHandler({ detail }: CustomEvent<IcBrand>): void {\n this.updateTheme(detail.mode);\n }\n\n /\n Sets focus on the link.\n */\n @Method()\n async setFocus(): Promise<void> {\n this.el.shadowRoot?.querySelector(\"a\")?.focus();\n }\n\n private updateTheme(mode: IcBrandForeground \| null = null): void {\n const theme = getBrandFromContext(this.el, mode);\n\n if (theme !== IcBrandForegroundEnum.Default) {\n this.monochrome = true;\n this.theme =\n theme === IcBrandForegroundEnum.Light\n ? IcBrandForegroundEnum.Dark\n : IcBrandForegroundEnum.Light;\n }\n }\n\n private hasRouterSlot(): boolean {\n this.routerSlot = this.el.querySelector('[slot=\"router-item\"]');\n if (this.routerSlot) {\n this.routerSlot.ariaLabel = this.routerSlot.textContent;\n }\n return !!this.routerSlot;\n }\n\n // triggered when attributes of host element change\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 && IC_INHERITED_ARIA.includes(attributeName)) {\n this.inheritedAttributes[attributeName] = attribute;\n forceComponentUpdate = true;\n }\n }\n });\n if (forceComponentUpdate) {\n forceUpdate(this);\n }\n };\n\n private setDownloadAttribute = (\n value: string \| boolean \| undefined\n ): string \| undefined => {\n if (typeof value === \"boolean\") {\n return value ? \"\" : undefined;\n } else {\n return value === \"true\" ? \"\" : value === \"false\" ? undefined : value;\n }\n };\n\n render() {\n const {\n download,\n href,\n hreflang,\n referrerpolicy,\n rel,\n target,\n monochrome,\n theme,\n } = this;\n\n return (\n <Host\n class={{\n [\"ic-link\"]: true,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-link-monochrome\"]: !!monochrome,\n }}\n >\n {this.hasRouterSlot() ? (\n <slot name=\"router-item\"></slot>\n ) : (\n <a\n class={{\n [\"link\"]: !!href,\n }}\n download={this.setDownloadAttribute(download)}\n href={href}\n hrefLang={hreflang}\n referrerPolicy={referrerpolicy}\n rel={rel}\n target={target}\n tabindex={href ? \"0\" : \"-1\"}\n {...this.inheritedAttributes}\n part=\"link\"\n >\n <slot />\n {target === \"_blank\" && (\n <span class=\"ic-link-open-in-new-icon\" innerHTML={OpenInNew} />\n )}\n </a>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

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

@@ -187,23 +187,23 @@ const LoadingIndicator = /*@__PURE__*/ proxyCustomElement(class LoadingIndicator
     }
     render() {
         const { circularDiameter, circularDimensions: { x, y, r, dashArray, dashOffset }, description, fullWidth, indicatorLabel, innerLabel, label, max, min, monochrome, progress, size, theme, type, } = this;
-        return (h(Host, { key: '413c553dc741429027e834c352171bc538bad4e5', class: {
+        return (h(Host, { key: '8e5015de29e0c003ae813d95e215031276669fed', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-loading-indicator-full-width": fullWidth,
                 "ic-loading-indicator-label": !!label,
                 "ic-loading-indicator-monochrome": monochrome,
-            } }, h("div", { key: '988482262c2ce8269f8e10706f2455ee94fbed4c', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: '93e2878a03795a8e5fd65e85cc586f8de22ec764', ref: (el) => (this.outerElement = el), class: {
+            } }, h("div", { key: 'fdd7384e07827cfc6f32cd7f7fde71807a441e7d', class: "ic-loading-container", part: "ic-loading-container" }, h("div", { key: 'dd4b7dae54199c8313a6bd9c5a2133b11de29b57', ref: (el) => (this.outerElement = el), class: {
                 [`ic-loading-${type}-outer`]: true,
                 [progress === undefined ? "indeterminate" : "determinate"]: true,
-            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: '1d4f9ebc1ee51844d0357c5629a9dc69aac0f16c', ref: (el) => (this.innerElement = el), class: {
+            }, role: "progressbar", "aria-labelledby": label && size !== "icon" && "ic-loading-label", "aria-label": description, "aria-valuenow": progress, "aria-valuemin": min, "aria-valuemax": max }, h("div", { key: 'ba4e9f7ec6e1cdafdd844bb2e357822cf316128c', ref: (el) => (this.innerElement = el), class: {
                 [`ic-loading-${type}-inner`]: true,
                 "inner-label": !!innerLabel,
-            } }, innerLabel && size === "small" && (h("ic-typography", { key: '85269ef476f8ee423e4a14383445cfa4b0256556', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'd3f423cd9659b735184d6657127c8626cc9cf4a3', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '060c4d530c2e27309fbe6513eb2497ae91bcdb6a', cx: x, cy: y, r: r }), h("circle", { key: 'e4b17ca2492a92fe99561193250bb9fb4a8cf960', style: {
+            } }, innerLabel && size === "small" && (h("ic-typography", { key: '096a8f75dcbdaec7c0d2f71dcd447e08e279a41d', variant: "subtitle-small", class: "inner-text" }, innerLabel)), type === "circular" && (h("svg", { key: 'c048f6de73691df17ec79f75860d177e9c83bcc5', class: "ic-loading-circular-svg", viewBox: `0 0 ${circularDiameter} ${circularDiameter}` }, h("circle", { key: '5c52a4f617319167ab495785c736601f9d12bf08', cx: x, cy: y, r: r }), h("circle", { key: '7839b8b36e4306e224639f8a347ccde726aaa09c', style: {
                 "--circular-steps-max": progress ? `${max}` : undefined,
                 "--progress-value": progress !== undefined ? `${progress}` : undefined,
                 "--stroke-dasharray": dashArray,
                 "--stroke-dashoffset": dashOffset,
-            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '22f1b492ebc832a2ea60ffbefd9790c1f85b2c90', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: 'e513e1965e25987826a872c991faec17c17db505' }, indicatorLabel))))));
+            }, cx: x, cy: y, r: r }))))), label && size !== "icon" && (h("ic-typography", { key: '868967e2a21589616e31a9b761849a69b458a2c1', id: "ic-loading-label", class: "ic-loading-label", role: "alert", variant: this.getLabelVariant() }, h("p", { key: '439329efda39e3ae81e56f494c8cbe5000265aa9' }, indicatorLabel))))));
     }
     get el() { return this; }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { m as isPropDefined } from './helpers.js';
+import { l as isPropDefined } from './helpers.js';
 import { d as defineCustomElement$2 } from './ic-typography2.js';
 const icMenuGroupCss = "/*! 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:flex;flex-direction:column}ic-typography{--ic-typography-color:var(--ic-popover-parent-label);margin:var(--ic-space-xs) var(--ic-space-xs) 0}ul{list-style-type:none;margin:0;padding:0}hr{display:flex;align-self:stretch;border:calc(var(--ic-space-xxxs) / 2) solid var(--ic-popover-border);margin:var(--ic-space-xxs) 0 calc(var(--ic-space-sm) / 4)}";
@@ -13,7 +13,7 @@ const MenuGroup = /*@__PURE__*/ proxyCustomElement(class MenuGroup extends HTMLE
     }
     render() {
         const parentMenu = this.el.closest("ic-popover-menu");
-        return (h(Host, { key: 'e80513cbfafcba84a75297272b402bfb60acdf80', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '726deba27f96a3bdb84856d851e484aab1be1301', variant: "subtitle-small" }, this.label)), h("span", { key: 'a383d9a234af9acceb9a746a891c290225dc8e37', class: "menu-items-wrapper" }, h("slot", { key: '60219f7f2cf0ee516c908a5ed3f45c0d27686293' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '85128f561dcc20d70937c690b9bfc56d34b698b8' }))));
+        return (h(Host, { key: '0671b22234980b7b332889e7d643b8f5e42841c1', role: "group", "aria-label": this.label !== null ? this.label : "" }, isPropDefined(this.label) && (h("ic-typography", { key: '444d817f6505c858593b136e7c2040cf40502f56', variant: "subtitle-small" }, this.label)), h("span", { key: '4b79a7b6f40da4a1eab4121f9aff972776fb52f9', class: "menu-items-wrapper" }, h("slot", { key: '99160dcb17e825ac4a44ca8348dc0a1452b5f0e3' })), this.el !== (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.querySelector("ic-menu-group:last-child")) && (h("hr", { key: '3591bc3153bcefa6ba7917332e0a106144b3ea74' }))));
     }
     get el() { return this; }
     static get style() { return IcMenuGroupStyle0; }

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

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { m as isPropDefined, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
+import { l as isPropDefined, r as removeDisabledFalse, o as onComponentRequiredPropUndefined, i as isSlotUsed } from './helpers.js';
 import { c as checkIcon } from './check-icon.js';
 import { c as chevronIcon } from './chevron-icon.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';

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

@@ -1,12 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment, Host } from '@stencil/core/internal/client';
 import { c as checkIcon } from './check-icon.js';
-import { K as isMacDevice, o as onComponentRequiredPropUndefined, L as getOptionsWithoutGroupTitlesCount } from './helpers.js';
+import { E as isMacDevice, o as onComponentRequiredPropUndefined, F as getOptionsWithoutGroupTitlesCount } from './helpers.js';
 import { d as defineCustomElement$4 } from './ic-button2.js';
 import { d as defineCustomElement$3 } from './ic-loading-indicator2.js';
 import { c as createPopper, d as defineCustomElement$2 } from './ic-tooltip2.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
-const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-menu-list-option-text-color));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-menu-list-option-text-color)\n  );background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-menu-border-color));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-menu-list-option-hover-background-color)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-menu-list-option-pressed-background-color)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(\n    --menu-item-desc-text-color,\n    var(--ic-menu-list-option-description-text-color)\n  )}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{width:calc(var(--ic-space-lg) * 10 + var(--ic-space-xl))}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-menu-loading-list-option-text-color);--ic-typography-color:var(--ic-menu-loading-list-option-text-color)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-atoms-status-icon-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:var(--ic-space-xs);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-menu-option-group-label-text-color)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-menu-last-recommended-option-border)}.disabled-option.sc-ic-menu{color:var(--ic-atoms-list-option-text-disabled-light);--ic-typography-color:var(--ic-atoms-list-option-text-disabled-light);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-atoms-list-option-text-focused-light) !important;--ic-typography-color:var(\n    --ic-atoms-list-option-text-focused-light\n  ) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-menu-option-bar-background-color);visibility:hidden;border-bottom:var(--ic-border-width) solid\n    var(--ic-menu-option-bar-divider-color);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}.disabled-option.sc-ic-menu{color:GrayText;--ic-typography-color:GrayText}}";
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{max-height:0;width:var(--menu-width, var(--input-width, 20rem));color:var(--menu-item-text-color, var(--ic-menu-list-option-text-color));--ic-typography-color:var(\n    --menu-item-text-color,\n    var(--ic-menu-list-option-text-color)\n  );background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay);border-radius:var(--ic-border-radius)}.ic-menu-open.sc-ic-menu-h:not(.ic-menu-no-focus):focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline)}.ic-select-select-all-focused.sc-ic-menu-h{box-shadow:var(--ic-elevation-overlay) !important}#retry-button.sc-ic-menu::part(button){height:var(--ic-space-lg)}.small.sc-ic-menu #retry-button.sc-ic-menu::part(button){height:var(--ic-space-md)}.on-dialog.sc-ic-menu-h{inset:auto !important}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border-radius:1px;background-color:var(\n    --menu-bg-color,\n    var(--ic-menu-list-option-background-color)\n  );visibility:hidden;max-height:0;overflow-y:hidden}.menu.sc-ic-menu:has(+.option-bar).sc-ic-menu{border-radius:0 0 1px 1px}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.ic-menu-open.sc-ic-menu-h{max-height:none;display:flex;flex-direction:column-reverse;border:var(--ic-border-width) solid\n    var(--menu-border-color, var(--ic-menu-border-color));transition:box-shadow var(--ic-easing-transition-fast)}.ic-menu-open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:calc(var(--ic-space-xl) * 10 + var(--ic-space-xxxs))}.ic-menu-open.sc-ic-menu-h .option-bar.sc-ic-menu{visibility:visible}.ic-menu-open.sc-ic-menu-h .select-all-button.sc-ic-menu{display:block}.ic-menu-full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:var(--ic-space-xs) calc(var(--ic-space-xs) - var(--ic-space-1px));cursor:pointer;display:flex;align-items:center;gap:var(--ic-space-xs)}.loading-option.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.option.sc-ic-menu:not(.loading-option){justify-content:space-between}.ic-menu-small.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-xxs) calc(var(--ic-space-xs) - var(--ic-space-1px))}.ic-menu-large.sc-ic-menu-h .option.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))}.option.sc-ic-menu:last-child{border-radius:0 0 1px 1px}.sc-ic-menu:not(.menu:has(+.option-bar)).sc-ic-menu .option.sc-ic-menu:first-child{border-radius:1px 1px 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-menu-list-option-hover-background-color)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-menu-list-option-pressed-background-color)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{--ic-typography-color:var(\n    --menu-item-desc-text-color,\n    var(--ic-menu-list-option-description-text-color)\n  )}.option.sc-ic-menu .option-label.sc-ic-menu{display:flex;flex-direction:row;align-items:top}.option.sc-ic-menu .option-label.sc-ic-menu ic-typography.sc-ic-menu{max-width:100%;word-wrap:break-word}.option.sc-ic-menu .option-element.sc-ic-menu{margin-top:var(--ic-space-xxs)}.option.sc-ic-menu .option-icon.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);margin-top:var(--ic-space-xxs);margin-right:var(--ic-space-xxxs)}.option-text-container.sc-ic-menu{pointer-events:none;width:100%}.option-text-container.show-check-icon.sc-ic-menu{flex-grow:1}.option.loading-option.sc-ic-menu .option-text-container.sc-ic-menu{margin-left:calc(var(--ic-space-xs) + var(--ic-space-xxxs));color:var(--ic-menu-loading-list-option-text-color);--ic-typography-color:var(--ic-menu-loading-list-option-text-color)}.error-icon-svg.sc-ic-menu{height:var(--ic-space-md);width:var(--ic-space-md);fill:var(--ic-atoms-status-icon-error);align-self:center;display:flex;margin-right:calc(var(--ic-space-xxs) * 1.2)}.loading-error-info.sc-ic-menu{display:flex}.check-icon.sc-ic-menu{height:var(--ic-space-lg);min-width:var(--ic-space-lg);width:var(--ic-space-lg);pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:var(--ic-space-lg) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xs);--ic-typography-color:var(--ic-menu-option-group-label-text-color)}.ic-menu-small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:var(--ic-space-sm) calc(var(--ic-space-xs) - var(--ic-space-1px))\n    var(--ic-space-xxs)}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-menu-last-recommended-option-border)}.disabled-option.sc-ic-menu{color:var(--ic-atoms-list-option-text-disabled-light);--ic-typography-color:var(--ic-atoms-list-option-text-disabled-light);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-color-focus-inner) !important;color:var(--ic-atoms-list-option-text-focused-light) !important;--ic-typography-color:var(\n    --ic-atoms-list-option-text-focused-light\n  ) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}.option-bar.sc-ic-menu{padding:var(--ic-space-xxs) var(--ic-space-xs);display:flex;align-items:center;justify-content:space-between;background-color:var(--ic-menu-option-bar-background-color);visibility:hidden;border-bottom:var(--ic-border-width) solid\n    var(--ic-menu-option-bar-divider-color);border-radius:1px 1px 0 0}.option-bar.sc-ic-menu p.sc-ic-menu{margin-bottom:0 !important}.ic-menu-large.sc-ic-menu-h .option-bar.sc-ic-menu{padding:var(--ic-space-xs)}.select-all-button.sc-ic-menu{display:none}.select-all-button.sc-ic-menu:focus{z-index:calc(var(--ic-z-index-menu) + 1)}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}.disabled-option.sc-ic-menu{color:GrayText;--ic-typography-color:GrayText}}";
 const IcMenuStyle0 = icMenuCss;
 const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
@@ -762,7 +762,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                     ? "0"
                     : "-1", "aria-label": this.getOptionAriaLabel(option, parentOption), "aria-selected": selected ? "true" : "false", "aria-disabled": option.disabled ? "true" : "false", onClick: !option.timedOut && !option.loading
                     ? this.handleOptionClick
-                    : undefined, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", "aria-labelledby": "error-title", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", { id: "error-title" }, "Error"), h("g", { id: "close-octagon" }, h("path", { id: "Vector", d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option, selected))));
+                    : undefined, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, "data-value": option[this.valueField], "data-label": option[this.labelField] }, option.timedOut ? (h(Fragment, null, h("div", { class: "loading-error-info" }, h("svg", { class: "error-icon-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "#000000" }, h("title", null, "Error"), h("g", null, h("path", { d: "M8.77 3L3.5 8.27V15.73L8.77 21H16.23L21.5 15.73V8.27L16.23 3M8.91 7L12.5 10.59L16.09 7L17.5 8.41L13.91 12L17.5 15.59L16.09 17L12.5 13.41L8.91 17L7.5 15.59L11.09 12L7.5 8.41" }))), h("ic-typography", { variant: "label" }, option[this.labelField])), h("ic-button", { size: "small", variant: "tertiary", onClick: this.handleRetry, onKeyDown: this.handleRetryKeyDown, onBlur: this.handleTimeoutBlur, id: "retry-button" }, "Retry"))) : (this.optionContent(option, selected))));
         };
     }
     watchOpenHandler() {
@@ -929,7 +929,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
         const { inputLabel, options, menuId, value, fullWidth, hasTimedOut, isLoading, size, open, inputEl, keyboardNav, parentEl, SEARCH_BAR_TAG, multiSelect, } = this;
         const selectAllButtonText = `${(value === null || value === void 0 ? void 0 : value.length) === this.ungroupedOptions.length ? "Clear" : "Select"} all`;
         const hasNoResults = this.host.classList.contains("no-results");
-        return (h(Host, { key: '61aef706407716bbd85f087d6baeac4e393f5bb5', class: {
+        return (h(Host, { key: '7ebc58677f28ae3b2a1ee2ca04da5550fbd6dfb9', class: {
                 "ic-menu-full-width": !!fullWidth,
                 "ic-menu-no-focus": ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) === "INPUT" &&
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) !== SEARCH_BAR_TAG) ||
@@ -938,7 +938,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
                 [`ic-menu-${size}`]: true,
                 "ic-menu-open": open && options.length !== 0,
                 "ic-menu-multiple": multiSelect,
-            } }, options.length !== 0 && (h("ul", { key: '5800fadeb848cfad908cdbd2bb7bfd7ecba08811', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
+            } }, options.length !== 0 && (h("ul", { key: 'f2947cec3c604848ab04f4bec4eff2f8589ccd08', id: menuId, class: "menu", role: "listbox", "aria-label": `${inputLabel} pop-up`, "aria-multiselectable": multiSelect ? "true" : "false", tabindex: open &&
                 !keyboardNav &&
                 ((inputEl === null || inputEl === void 0 ? void 0 : inputEl.tagName) !== "INPUT" ||
                     (parentEl === null || parentEl === void 0 ? void 0 : parentEl.tagName) === SEARCH_BAR_TAG)
@@ -966,7 +966,7 @@ const Menu = /*@__PURE__*/ proxyCustomElement(class Menu extends HTMLElement {
             multiSelect &&
             !isLoading &&
             !hasTimedOut &&
-            !hasNoResults && (h("div", { key: '3036b8e8b5727e354d45e9ae4a64a5e61b0caf59', class: "option-bar" }, h("ic-typography", { key: 'a797367880dd2a45638c65dcb353e6b4892e5db0' }, h("p", { key: 'ba309efe02198f93aa62329cf99d05e2e538434d' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: '785eba9a6e82e745c7f4ccb054a1fbaf87df281e', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
+            !hasNoResults && (h("div", { key: '29313beeca636e3811d71a706317e25e6e11ab08', class: "option-bar" }, h("ic-typography", { key: 'baaf733c1f439239e3d2f369ece827e27fb2c9c3' }, h("p", { key: '924b275d1014d474f38b5e078c98c4f1edb338db' }, `${value ? value.length : 0}/${getOptionsWithoutGroupTitlesCount(this.options)} selected`)), h("ic-button", { key: 'aed55c5ce6152aaa785ec29007c5e77d0e215d9f', class: "select-all-button", "aria-label": `${selectAllButtonText} options for ${inputLabel}`, ref: (el) => (this.selectAllButton = el), variant: "tertiary", onClick: this.handleSelectAllClick, onMouseDown: this.handleSelectAllMouseDown, onBlur: this.handleSelectAllBlur, onFocus: this.handleSelectAllFocus, size: size === "small" ? "small" : "medium" }, selectAllButtonText)))));
     }
     get host() { return this; }
     static get watchers() { return {