npm - @ukic/web-components - Versions diffs - 3.23.0 → 3.25.0 - Mend

@ukic/web-components 3.23.0 → 3.25.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 (441) hide show

package/dist/esm/ic-popover-menu.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { F as getSlotElements, e as isPropDefined } from './helpers-66681c73.js';
+import { E as getSlotElements, e as isPropDefined } from './helpers-33039856.js';
 import { c as createPopper } from './popper-0fbeff6d.js';
 import './constants-ab12fdcf.js';
@@ -280,17 +280,17 @@ const PopoverMenu = class {
         this.popperProps = props;
     }
     render() {
-        return (h(Host, { key: '2df7f8dce86b2a069e36c528cde49fab2a59e14d', class: {
+        return (h(Host, { key: '331cedc179eb4d558f29f7704df951210f43fa77', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '274adfbbf14f57d3538bd5076d4f3eaba4246b9f', id: this.parentPopover === undefined
+            } }, h("div", { key: '4efbe811a462e960af2d7a5ab63d3df5f69209cb', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, h("span", { key: 'dbb75e11d95ab6dd331e8fdde4c698627ebce128', class: {
+            } }, h("span", { key: '25207afa860d6d4b897a8d7b7406d5a450652949', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, isPropDefined(this.submenuId) && (h("span", { key: 'd4f921888dbb9225abcb2470dd28df727f3beee0' }, h("span", { key: '35d3b4ef74cb4d777f50299aa374a9e3cee34889', role: "menu" }, h("ic-menu-item", { key: '1f389ff42de3e6a71f8d119a0d77c303bdd680a8', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: '68719e50bc2f6735c0f7dcf6f44c9ff63c5acdea', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: '2ba5c53d18fb50b729ae2246817f7c9cf30257b0', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '6932f008b6d3444e0c9310c60c3fcbafae48f3ff', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '75f0187e8474d97fce7f8436cba7e6168cfd2b63', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: 'a547d619787fda1c2f529a0b4ec7fe3745f416ab' }))))));
+            } }, isPropDefined(this.submenuId) && (h("span", { key: '21bebc9796ecd62d6c0a51247f450eb0f61de6fb' }, h("span", { key: 'bf64a9672b93e4831bce7309514121108e79f26c', role: "menu" }, h("ic-menu-item", { key: 'a6bbb41562f8047a34e81f7afb72f6fdf7489b53', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, h("svg", { key: 'a5267871273dfffa86198105d325adf3b62f2728', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, h("path", { key: 'cfba5502e9594fe2dc299d7e8922a39e64e6e282', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), h("ic-typography", { key: '4c718558761258605c42ad71966c54cc09fc7bac', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), h("div", { key: '8c127ed3e934a257795e0b3472c6d901e8e3fb62', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, h("slot", { key: '8f06fc83099461573082afc75d008e37ee84cf65' }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ic-radio-group.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { t as slotHasContent, r as removeDisabledFalse, h as checkResizeObserver, o as onComponentRequiredPropUndefined, s as hasValidationStatus } from './helpers-66681c73.js';
+import { t as slotHasContent, r as removeDisabledFalse, h as checkResizeObserver, o as onComponentRequiredPropUndefined, s as hasValidationStatus } from './helpers-33039856.js';
 import './constants-ab12fdcf.js';
-const icRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-text-color:var(--ic-radio-button-input-field-label);--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-radio-button-state-text);--ic-input-validation-error:var(--ic-radio-button-state-icon-error)}:host ic-input-label.error{--ic-input-label-text-color:var(--ic-radio-button-input-field-label-error)}:host ic-input-label.disabled{--ic-input-label-text-color:var(\n    --ic-radio-button-input-field-label-disabled\n  );--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle-disabled\n  )}:host ic-input-validation.show-validation{margin-top:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-validation.show-validation{margin-top:calc(var(--ic-space-sm) / 2)}:host ic-input-label:not(.with-helper) .ic-typography-label,:host ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-radio-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}:host ic-input-label .helpertext{display:block}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.ic-radio-group-small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-radio-group-small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
+const icRadioGroupCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;--ic-input-label-text-color:var(--ic-radio-button-input-field-label);--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle\n  );--ic-input-validation-status-text-color:var(--ic-radio-button-state-text);--ic-input-validation-error:var(--ic-radio-button-state-icon-error)}:host ic-input-label.error{--ic-input-label-text-color:var(--ic-radio-button-input-field-label-error)}:host ic-input-label.disabled{--ic-input-label-text-color:var(\n    --ic-radio-button-input-field-label-disabled\n  );--ic-input-label-helper-text-color:var(\n    --ic-radio-button-input-field-subtitle-disabled\n  )}:host ic-input-validation.show-validation{margin-top:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-validation.show-validation{margin-top:calc(var(--ic-space-sm) / 2)}:host(.ic-radio-group-large) ic-input-validation.show-validation{margin-top:var(--ic-space-md)}:host ic-input-label:not(.with-helper) .ic-typography-label,:host ic-input-label .helpertext{margin-bottom:var(--ic-space-sm)}:host(.ic-radio-group-small) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-radio-group-small) ic-input-label .helpertext{margin-bottom:calc(var(--ic-space-sm) / 2)}:host(.ic-radio-group-large) ic-input-label:not(.with-helper) .ic-typography-label,:host(.ic-radio-group-large) ic-input-label .helpertext{margin-bottom:var(--ic-space-md)}:host ic-input-label .helpertext{display:block}:host .radio-buttons-container{display:flex;flex-direction:column;gap:var(--ic-space-xxs)}:host(.ic-radio-group-small) .radio-buttons-container{gap:var(--ic-space-xxxs)}:host(.ic-radio-group-large) .radio-buttons-container{gap:var(--ic-space-xs)}:host .radio-buttons-container.horizontal{display:flex;flex-direction:row;gap:calc(var(--ic-space-xl) + var(--ic-space-xs))}:host(.ic-radio-group-small) .radio-buttons-container.horizontal{gap:var(--ic-space-xl)}";
 const IcRadioGroupStyle0 = icRadioGroupCss;
 const RadioGroup = class {
@@ -234,16 +234,16 @@ const RadioGroup = class {
     render() {
         const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationAriaLive, validationStatus, validationText, theme, } = this;
         const showValidation = hasValidationStatus(validationStatus, disabled);
-        return (h(Host, { key: '0a0b04bb7266c3400e22dd26cdbde025b1bf8a72', onKeyDown: handleKeyDown, class: {
-                "ic-radio-group-small": size === "small",
+        return (h(Host, { key: 'df3176ecead3472c9cbc46f20b4398beb1cf0710', onKeyDown: handleKeyDown, class: {
+                [`ic-radio-group-${size}`]: size !== "medium",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("fieldset", { key: '8d6fb8bcce4573ce461d09cf9a07783b95e47ab9', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (h("legend", { key: 'b9a0ff7e81c30100b137e35bdd6c24c71b00b385' }, h("ic-input-label", { key: '078b3ecfe62746c6e91a9f61435c56825b746a5e', class: {
+            } }, h("fieldset", { key: '30b8cb57ab1b69d85fbe4a7e1ec9205561409fd2', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (h("legend", { key: '5b2ecba8b0c1b4af585b8f2ba568d6251541d00f' }, h("ic-input-label", { key: 'ae98da9c60057fa3da425fc7a2d63657f02c2f91', class: {
                 [`${validationStatus}`]: true,
                 ["disabled"]: !!disabled,
-            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '2b071159427e09d3e69945a2460283c32bcf7e97', name: "helper-text", slot: "helper-text" })))), h("div", { key: '7dac840c03547d56606dbc82031cc2b237b0600d', class: {
+            }, label: label, helperText: helperText, required: required, disabled: disabled }, h("slot", { key: '2078e0b37824b1e75ac973ac923fd22d16a04e99', name: "helper-text", slot: "helper-text" })))), h("div", { key: '7824dbbccae54f17a9533e4f20489fcb21881209', class: {
                 "radio-buttons-container": true,
                 horizontal: currentOrientation === this.RADIO_HORIZONTAL,
-            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: '324a042d9a015f25d4e831617575830f02f5df08' }))), h("ic-input-validation", { key: '6cab446cc36cb7af4dc48e7ee4e13e72568bb571', class: {
+            }, ref: (el) => (this.radioContainer = el) }, h("slot", { key: 'c9a80207676d3ae60c1dfe43016adae0d2b57605' }))), h("ic-input-validation", { key: '34bbce2c663bcb56a1bbfbed44ab12998c197cce', class: {
                 "show-validation": showValidation,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }

package/dist/esm/ic-radio-group.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle\n );\n --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\n:host ic-input-label.error {\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\n:host ic-input-label.disabled {\n --ic-input-label-text-color: var(\n --ic-radio-button-input-field-label-disabled\n );\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle-disabled\n );\n}\n\n:host ic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label:not(.with-helper) .ic-typography-label,\n:host ic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-radio-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host ic-input-label .helpertext {\n display: block;\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizesNoLarge,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/*\n @slot helper-text - Content is set as the helper text for the radio group.\n /\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver \| null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required?: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizesNoLarge = \"medium\";\n\n /\n The value of the `aria-live` attribute on the validation message.\n /\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n \"ic-radio-group-small\": size === \"small\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-radio-group/ic-radio-group.css?tag=ic-radio-group&encapsulation=shadow","src/components/ic-radio-group/ic-radio-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: block;\n\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label);\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle\n );\n --ic-input-validation-status-text-color: var(--ic-radio-button-state-text);\n --ic-input-validation-error: var(--ic-radio-button-state-icon-error);\n}\n\n:host ic-input-label.error {\n --ic-input-label-text-color: var(--ic-radio-button-input-field-label-error);\n}\n\n:host ic-input-label.disabled {\n --ic-input-label-text-color: var(\n --ic-radio-button-input-field-label-disabled\n );\n --ic-input-label-helper-text-color: var(\n --ic-radio-button-input-field-subtitle-disabled\n );\n}\n\n:host ic-input-validation.show-validation {\n margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small) ic-input-validation.show-validation {\n margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-radio-group-large) ic-input-validation.show-validation {\n margin-top: var(--ic-space-md);\n}\n\n:host ic-input-label:not(.with-helper) .ic-typography-label,\n:host ic-input-label .helpertext {\n margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-radio-group-small)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-radio-group-small) ic-input-label .helpertext {\n margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-radio-group-large)\n ic-input-label:not(.with-helper)\n .ic-typography-label,\n:host(.ic-radio-group-large) ic-input-label .helpertext {\n margin-bottom: var(--ic-space-md);\n}\n\n:host ic-input-label .helpertext {\n display: block;\n}\n\n:host .radio-buttons-container {\n display: flex;\n flex-direction: column;\n gap: var(--ic-space-xxs);\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container {\n gap: var(--ic-space-xxxs);\n}\n\n:host(.ic-radio-group-large) .radio-buttons-container {\n gap: var(--ic-space-xs);\n}\n\n:host .radio-buttons-container.horizontal {\n display: flex;\n flex-direction: row;\n gap: calc(var(--ic-space-xl) + var(--ic-space-xs));\n}\n\n:host(.ic-radio-group-small) .radio-buttons-container.horizontal {\n gap: var(--ic-space-xl);\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Listen,\n Element,\n Event,\n EventEmitter,\n Watch,\n} from \"@stencil/core\";\nimport {\n hasValidationStatus,\n slotHasContent,\n onComponentRequiredPropUndefined,\n removeDisabledFalse,\n checkResizeObserver,\n} from \"../../utils/helpers\";\nimport {\n IcAriaLive,\n IcInformationStatusOrEmpty,\n IcOrientation,\n IcSizes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-radio-group.types\";\n\n/*\n @slot helper-text - Content is set as the helper text for the radio group.\n /\n@Component({\n tag: \"ic-radio-group\",\n styleUrl: \"ic-radio-group.css\",\n shadow: true,\n})\nexport class RadioGroup {\n private radioContainer?: HTMLDivElement;\n private radioOptions: HTMLIcRadioOptionElement[];\n private resizeObserver: ResizeObserver \| null = null;\n private ADDITIONAL_FIELD = \"additional-field\";\n private RADIO_HORIZONTAL: IcOrientation = \"horizontal\";\n private RADIO_VERTICAL: IcOrientation = \"vertical\";\n\n @Element() el: HTMLIcRadioGroupElement;\n\n @State() checkedValue: string = \"\";\n @State() currentOrientation: IcOrientation;\n @State() initialOrientation: IcOrientation;\n @State() selectedChild: number = -1;\n\n /\n If `true`, the disabled state will be set.\n /\n @Prop() disabled?: boolean = false;\n\n @Watch(\"disabled\")\n watchDisabledHandler(newValue: boolean): void {\n this.radioOptions.forEach(\n (radioOption) => (radioOption.disabled = newValue)\n );\n removeDisabledFalse(this.disabled, this.el);\n }\n\n /\n The helper text that will be displayed for additional field guidance.\n /\n @Prop() helperText?: string;\n\n /\n If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n /\n @Prop() hideLabel?: boolean = false;\n\n /\n The label for the radio group to be displayed.\n /\n @Prop() label!: string;\n\n /\n The name for the radio group to differentiate from other groups.\n /\n @Prop() name!: string;\n\n /\n The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the `additional-field` slot, then the orientation will always be vertical.\n /\n @Prop() orientation?: IcOrientation = \"vertical\";\n\n /\n If `true`, the radio group will require a value.\n /\n @Prop() required?: boolean = false;\n\n /\n The size of the radio group component.\n /\n @Prop() size?: IcSizes = \"medium\";\n\n /\n The value of the `aria-live` attribute on the validation message.\n /\n @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n /\n The validation status - e.g. 'error' \| 'warning' \| 'success'.\n /\n @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n /\n The text to display as the validation message.\n /\n @Prop() validationText: string = \"\";\n\n @Watch(\"orientation\")\n orientationChangeHandler(): void {\n this.initialOrientation = this.orientation!;\n this.checkOrientation();\n }\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n @Watch(\"theme\")\n watchThemeHandler(newValue: IcThemeMode): void {\n this.radioOptions.forEach((radioOption) => (radioOption.theme = newValue));\n }\n\n /\n Emitted when a user selects a radio.\n */\n @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n disconnectedCallback(): void {\n this.resizeObserver?.disconnect();\n this.radioContainer?.removeEventListener(\n \"slotchange\",\n this.setRadioOptions\n );\n }\n\n componentWillLoad(): void {\n removeDisabledFalse(this.disabled, this.el);\n\n this.orientationChangeHandler();\n this.currentOrientation = this.initialOrientation;\n }\n\n componentDidLoad(): void {\n this.setRadioOptions();\n checkResizeObserver(this.runResizeObserver);\n this.addSlotChangeListener();\n\n onComponentRequiredPropUndefined(\n [\n { prop: this.label, propName: \"label\" },\n { prop: this.name, propName: \"name\" },\n ],\n \"Radio Group\"\n );\n\n this.watchThemeHandler(this.theme!);\n }\n\n @Listen(\"icCheck\")\n selectHandler({ detail, target }: CustomEvent<IcValueEventDetail>): void {\n const selectedOption = target as HTMLIcRadioOptionElement;\n if (selectedOption.parentElement === this.el) {\n this.checkedValue = detail.value as string;\n this.icChange.emit({\n value: this.checkedValue,\n selectedOption: {\n radio: selectedOption,\n textFieldValue: selectedOption?.querySelector(\"ic-text-field\")?.value,\n },\n });\n\n if (this.radioOptions !== undefined) {\n this.radioOptions.forEach((radioOption, index) => {\n radioOption.selected = selectedOption === radioOption;\n if (radioOption.selected) {\n this.selectedChild = index;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n }\n }\n }\n\n @Listen(\"icSelectedChange\")\n changeHandler(): void {\n const selectedOption = this.radioOptions?.findIndex(\n (radioOption) => radioOption.selected\n );\n if (selectedOption < 0) {\n this.setFirstRadioOptionTabIndex(0);\n this.selectedChild = selectedOption;\n }\n }\n\n private runResizeObserver = () => {\n this.resizeObserver = new ResizeObserver(() => {\n this.checkOrientation();\n });\n\n this.resizeObserver.observe(this.el);\n };\n\n private checkOrientation() {\n if (this.initialOrientation === this.RADIO_HORIZONTAL) {\n let totalWidth = 0;\n if (Array.isArray(this.radioOptions) && this.radioOptions.length > 0) {\n this.radioOptions.forEach(({ clientWidth }, i, arr) => {\n totalWidth += clientWidth;\n if (i < arr.length - 1) totalWidth += 40;\n });\n } else {\n totalWidth = 0;\n }\n\n if (this.initialOrientation == this.RADIO_HORIZONTAL) {\n if (\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else {\n if (this.radioContainer) {\n if (totalWidth >= this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_VERTICAL;\n } else if (totalWidth < this.radioContainer.clientWidth) {\n this.currentOrientation = this.RADIO_HORIZONTAL;\n }\n }\n }\n }\n }\n }\n\n private handleKeyDown = (event: KeyboardEvent): void => {\n const additionalFields = Array.from(\n this.el.querySelectorAll<HTMLElement>(\n 'ic-text-field[slot=\"additional-field\"]'\n )\n );\n const activeEl = document.activeElement;\n if (\n additionalFields.length > 0 &&\n this.radioOptions.map((el) =>\n slotHasContent(el, this.ADDITIONAL_FIELD)\n ) &&\n additionalFields.map((el) => el == activeEl)\n ) {\n return;\n }\n\n event.stopPropagation();\n switch (event.key) {\n case \"ArrowDown\":\n case \"ArrowRight\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, true)\n ].click();\n event.preventDefault();\n break;\n case \"ArrowUp\":\n case \"ArrowLeft\":\n this.radioOptions[\n this.getNextItemToSelect(this.selectedChild, false)\n ].click();\n event.preventDefault();\n }\n };\n\n private getNextItemToSelect = (\n currentItem: number,\n movingDown: boolean\n ): number => {\n const numRadios = this.radioOptions.length - 1;\n\n if (currentItem < 1) {\n currentItem = 0;\n }\n\n let nextItem = movingDown ? currentItem + 1 : currentItem - 1;\n\n //check if wrap around necessary\n if (nextItem < 0) {\n nextItem = numRadios;\n } else if (nextItem > numRadios) {\n nextItem = 0;\n }\n\n //if next item is disabled then find next\n if (this.radioOptions[nextItem].disabled) {\n nextItem = this.getNextItemToSelect(nextItem, movingDown);\n }\n\n return nextItem;\n };\n\n private addSlotChangeListener = () => {\n this.radioContainer?.addEventListener(\"slotchange\", this.setRadioOptions);\n };\n\n private setFirstRadioOptionTabIndex = (value: number) => {\n this.radioOptions[0].setTabIndex(value);\n };\n\n private setRadioOptions = () => {\n this.selectedChild = -1;\n this.checkedValue = \"\";\n this.radioOptions = Array.from(this.el.children).filter(\n (el) => el.tagName === \"IC-RADIO-OPTION\"\n ) as HTMLIcRadioOptionElement[];\n if (this.radioOptions.length > 0) {\n this.radioOptions.forEach((radioOption, index) => {\n if (!radioOption.selected) {\n radioOption.selected = this.checkedValue === radioOption.value;\n }\n radioOption.name = this.name;\n radioOption.groupLabel = this.label;\n if (radioOption.selected) {\n this.selectedChild = index;\n this.checkedValue = radioOption.value;\n }\n if (this.disabled) {\n radioOption.disabled = true;\n }\n });\n this.setFirstRadioOptionTabIndex(this.selectedChild > 0 ? -1 : 0);\n\n if (\n this.initialOrientation === this.RADIO_HORIZONTAL &&\n this.radioOptions !== undefined &&\n (this.radioOptions.length > 2 \|\|\n (this.radioOptions.length === 2 &&\n (slotHasContent(this.radioOptions[0], this.ADDITIONAL_FIELD) \|\|\n slotHasContent(this.radioOptions[1], this.ADDITIONAL_FIELD))))\n ) {\n this.currentOrientation = this.RADIO_VERTICAL;\n }\n }\n };\n\n render() {\n const {\n currentOrientation,\n disabled,\n handleKeyDown,\n helperText,\n hideLabel,\n label,\n required,\n size,\n validationAriaLive,\n validationStatus,\n validationText,\n theme,\n } = this;\n\n const showValidation = hasValidationStatus(validationStatus, disabled);\n\n return (\n <Host\n onKeyDown={handleKeyDown}\n class={{\n [`ic-radio-group-${size}`]: size !== \"medium\",\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n }}\n >\n <fieldset\n role=\"radiogroup\"\n id={this.name}\n aria-required={`${required}`}\n >\n {!hideLabel && (\n <legend>\n <ic-input-label\n class={{\n [`${validationStatus}`]: true,\n [\"disabled\"]: !!disabled,\n }}\n label={label}\n helperText={helperText}\n required={required}\n disabled={disabled}\n >\n <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n </ic-input-label>\n </legend>\n )}\n <div\n class={{\n \"radio-buttons-container\": true,\n horizontal: currentOrientation === this.RADIO_HORIZONTAL,\n }}\n ref={(el) => (this.radioContainer = el)}\n >\n <slot></slot>\n </div>\n </fieldset>\n <ic-input-validation\n class={{\n \"show-validation\": showValidation,\n }}\n ariaLiveMode={validationAriaLive}\n status={showValidation ? validationStatus : \"\"}\n message={showValidation ? validationText : \"\"}\n ></ic-input-validation>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-radio-option.entry.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { r as removeDisabledFalse, l as removeFormResetListener, i as isSlotUsed, k as addFormResetListener, o as onComponentRequiredPropUndefined, t as slotHasContent, e as isPropDefined } from './helpers-66681c73.js';
+import { r as removeDisabledFalse, l as removeFormResetListener, i as isSlotUsed, k as addFormResetListener, o as onComponentRequiredPropUndefined, t as slotHasContent, e as isPropDefined } from './helpers-33039856.js';
 import './constants-ab12fdcf.js';
-const icRadioOptionCss = "html.sc-ic-radio-option{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-radio-option{margin:0}main.sc-ic-radio-option{display:block}h1.sc-ic-radio-option{font-size:2em;margin:0.67em 0}hr.sc-ic-radio-option{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-radio-option{font-family:monospace, monospace;font-size:1em}a.sc-ic-radio-option{background-color:transparent}abbr[title].sc-ic-radio-option{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-radio-option,strong.sc-ic-radio-option{font-weight:bolder}code.sc-ic-radio-option,kbd.sc-ic-radio-option,samp.sc-ic-radio-option{font-family:monospace, monospace;font-size:1em}small.sc-ic-radio-option{font-size:80%}sub.sc-ic-radio-option,sup.sc-ic-radio-option{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-radio-option{bottom:-0.25em}sup.sc-ic-radio-option{top:-0.5em}img.sc-ic-radio-option{border-style:none}button.sc-ic-radio-option,input.sc-ic-radio-option,optgroup.sc-ic-radio-option,select.sc-ic-radio-option,textarea.sc-ic-radio-option{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-radio-option,input.sc-ic-radio-option{overflow:visible}button.sc-ic-radio-option,select.sc-ic-radio-option{text-transform:none}button.sc-ic-radio-option,[type=\"button\"].sc-ic-radio-option,[type=\"reset\"].sc-ic-radio-option,[type=\"submit\"].sc-ic-radio-option{-webkit-appearance:button}button.sc-ic-radio-option::-moz-focus-inner,[type=\"button\"].sc-ic-radio-option::-moz-focus-inner,[type=\"reset\"].sc-ic-radio-option::-moz-focus-inner,[type=\"submit\"].sc-ic-radio-option::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-radio-option:-moz-focusring,[type=\"button\"].sc-ic-radio-option:-moz-focusring,[type=\"reset\"].sc-ic-radio-option:-moz-focusring,[type=\"submit\"].sc-ic-radio-option:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-radio-option{padding:0.35em 0.75em 0.625em}legend.sc-ic-radio-option{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-radio-option{vertical-align:baseline}textarea.sc-ic-radio-option{overflow:auto}[type=\"checkbox\"].sc-ic-radio-option,[type=\"radio\"].sc-ic-radio-option{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-radio-option::-webkit-inner-spin-button,[type=\"number\"].sc-ic-radio-option::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-radio-option{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-radio-option::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-radio-option::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-radio-option{display:block}summary.sc-ic-radio-option{display:list-item}template.sc-ic-radio-option{display:none}[hidden].sc-ic-radio-option{display:none}html.sc-ic-radio-option,body.sc-ic-radio-option,div.sc-ic-radio-option,span.sc-ic-radio-option,applet.sc-ic-radio-option,object.sc-ic-radio-option,iframe.sc-ic-radio-option,h1.sc-ic-radio-option,h2.sc-ic-radio-option,h3.sc-ic-radio-option,h4.sc-ic-radio-option,h5.sc-ic-radio-option,h6.sc-ic-radio-option,p.sc-ic-radio-option,blockquote.sc-ic-radio-option,pre.sc-ic-radio-option,a.sc-ic-radio-option,abbr.sc-ic-radio-option,acronym.sc-ic-radio-option,address.sc-ic-radio-option,big.sc-ic-radio-option,cite.sc-ic-radio-option,code.sc-ic-radio-option,del.sc-ic-radio-option,dfn.sc-ic-radio-option,em.sc-ic-radio-option,img.sc-ic-radio-option,ins.sc-ic-radio-option,kbd.sc-ic-radio-option,q.sc-ic-radio-option,s.sc-ic-radio-option,samp.sc-ic-radio-option,small.sc-ic-radio-option,strike.sc-ic-radio-option,strong.sc-ic-radio-option,sub.sc-ic-radio-option,sup.sc-ic-radio-option,tt.sc-ic-radio-option,var.sc-ic-radio-option,b.sc-ic-radio-option,u.sc-ic-radio-option,i.sc-ic-radio-option,center.sc-ic-radio-option,dl.sc-ic-radio-option,dt.sc-ic-radio-option,dd.sc-ic-radio-option,ol.sc-ic-radio-option,ul.sc-ic-radio-option,li.sc-ic-radio-option,fieldset.sc-ic-radio-option,form.sc-ic-radio-option,label.sc-ic-radio-option,legend.sc-ic-radio-option,table.sc-ic-radio-option,caption.sc-ic-radio-option,tbody.sc-ic-radio-option,tfoot.sc-ic-radio-option,thead.sc-ic-radio-option,tr.sc-ic-radio-option,th.sc-ic-radio-option,td.sc-ic-radio-option,article.sc-ic-radio-option,aside.sc-ic-radio-option,canvas.sc-ic-radio-option,details.sc-ic-radio-option,embed.sc-ic-radio-option,figure.sc-ic-radio-option,figcaption.sc-ic-radio-option,footer.sc-ic-radio-option,header.sc-ic-radio-option,hgroup.sc-ic-radio-option,menu.sc-ic-radio-option,nav.sc-ic-radio-option,output.sc-ic-radio-option,ruby.sc-ic-radio-option,section.sc-ic-radio-option,summary.sc-ic-radio-option,time.sc-ic-radio-option,mark.sc-ic-radio-option,audio.sc-ic-radio-option,video.sc-ic-radio-option{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}.sc-ic-radio-option-h{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option-s>[slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}.ic-radio-option-disabled.sc-ic-radio-option-h,.ic-radio-option-disabled.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h:focus .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked+span.checkmark.sc-ic-radio-option{box-shadow:var(--ic-border-focus)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option{margin:0 0 0 var(--ic-space-xxs)}.sc-ic-radio-option-h .radio-option-container.disabled.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.disabled.sc-ic-radio-option input.sc-ic-radio-option:disabled{cursor:default}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option{height:var(--ic-space-md);width:var(--ic-space-md)}.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.ic-radio-option-small.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{height:var(--ic-space-md);width:var(--ic-space-md)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{display:inline-block}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover:not(.disabled) input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border-width:var(--ic-space-1px)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-default-pressed)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-default-active)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked:disabled~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-border-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background:var(--ic-radio-button-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option{box-shadow:none;border:0.125rem solid none}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option .checkmark.sc-ic-radio-option::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option .checkmark.sc-ic-radio-option::after{top:50%;left:50%;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--ic-radio-button-default-active);transform:translate(-50%, -50%)}.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.ic-radio-option-small.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{margin-left:var(--ic-space-xs)}.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option{margin-left:var(--ic-space-xs)}.sc-ic-radio-option-h .branch-corner.sc-ic-radio-option{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option{display:flex;position:relative;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.ic-radio-option-small.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option{margin-left:12px}.sc-ic-radio-option-h .dynamic-container.hidden.sc-ic-radio-option{display:none}.sc-ic-radio-option-h .dynamic-text.sc-ic-radio-option{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){.sc-ic-radio-option-h .additional-field-wrapper-dynamic.sc-ic-radio-option-s>ic-text-field,.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option-s>ic-text-field{--input-width:100%}}@media (forced-colors: active){.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border-color:Highlight}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:Highlight}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked:disabled~.checkmark.sc-ic-radio-option{border-color:GrayText}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background-color:GrayText}}.sc-ic-radio-option-h input[type=\"radio\"].sc-ic-radio-option:dir(rtl){right:0}.sc-ic-radio-option-h .radio-label.sc-ic-radio-option:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.sc-ic-radio-option-h .branch-corner.sc-ic-radio-option:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}@media (prefers-reduced-motion: reduce){.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{transition:none}}";
+const icRadioOptionCss = ".sc-ic-radio-option-h{display:flex;flex-direction:column;width:-moz-fit-content;width:fit-content}.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option-s>[slot=\"additional-field\"]{margin-top:calc(var(--ic-space-sm) / 2);margin-left:var(--ic-space-xl)}.ic-radio-option-disabled.sc-ic-radio-option-h,.ic-radio-option-disabled.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{--ic-typography-color:var(--ic-radio-button-text-option-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:focus+span.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h:focus .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked+span.checkmark.sc-ic-radio-option{box-shadow:var(--ic-border-focus)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option{display:grid;grid-template-columns:min-content auto;position:relative;cursor:pointer;align-items:center;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option{margin:0 0 0 var(--ic-space-xxs)}.sc-ic-radio-option-h .radio-option-container.disabled.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.disabled.sc-ic-radio-option input.sc-ic-radio-option:disabled{cursor:default}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:inline-block;position:absolute;cursor:pointer;height:var(--ic-space-lg);width:var(--ic-space-lg);border-radius:50%;border:none}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option{height:var(--ic-space-md);width:var(--ic-space-md)}.ic-radio-option-large.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option{height:var(--ic-space-xl);width:var(--ic-space-xl)}.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{display:block;position:relative;top:0;left:0;height:var(--ic-space-lg);width:var(--ic-space-lg);background-color:var(--ic-radio-button-background-default);border:var(--ic-space-1px) solid var(--ic-radio-button-border-default);border-radius:50%;transition:var(--ic-easing-transition-fast);box-sizing:border-box}.ic-radio-option-small.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{height:var(--ic-space-md);width:var(--ic-space-md)}.ic-radio-option-large.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{height:var(--ic-space-xl);width:var(--ic-space-xl)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{display:inline-block}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:var(--ic-border-width) solid var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-hover);border:0.125rem solid var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover:not(.disabled) input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-default-hover)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option~.checkmark.sc-ic-radio-option{box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed);border:var(--ic-border-width) solid var(--ic-radio-button-default-pressed)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-default-pressed);box-shadow:0 0 0 0.25rem var(--ic-radio-button-active-pressed)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border-width:var(--ic-space-1px)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-default-pressed)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-default-active)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked:disabled~.checkmark.sc-ic-radio-option{border:0.125rem solid var(--ic-radio-button-border-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option{border:var(--ic-border-width) dashed var(--ic-radio-button-border-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background:var(--ic-radio-button-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:hover input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option{box-shadow:none;border:0.125rem solid none}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background-color:var(--ic-radio-button-disabled)}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option .checkmark.sc-ic-radio-option::after{content:\"\";position:absolute;display:none;top:calc(50% - var(--ic-space-xs));left:calc(50% - var(--ic-space-xs));width:var(--ic-space-md);height:var(--ic-space-md);border-radius:50%;background:var(--ic-radio-button-default-active)}.ic-radio-option-small.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option .checkmark.sc-ic-radio-option::after{top:50%;left:50%;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--ic-radio-button-default-active);transform:translate(-50%, -50%)}.ic-radio-option-large.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option .checkmark.sc-ic-radio-option::after{top:50%;left:50%;width:calc(var(--ic-space-md) + var(--ic-space-xxs));height:calc(var(--ic-space-md) + var(--ic-space-xxs));border-radius:50%;background:var(--ic-radio-button-default-active);transform:translate(-50%, -50%)}.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{margin-left:var(--ic-space-md);--ic-typography-color:var(--ic-radio-button-text-option)}.ic-radio-option-small.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{margin-left:var(--ic-space-xs)}.ic-radio-option-large.sc-ic-radio-option-h .radio-label.sc-ic-radio-option{margin-left:var(--ic-space-md)}.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option{margin-left:var(--ic-space-xs)}.sc-ic-radio-option-h .branch-corner.sc-ic-radio-option{color:var(--ic-radio-button-required-bar);height:var(--ic-space-md);width:var(--ic-space-xl);border-radius:0 0 0 0.188rem;border-bottom:0.125rem solid var(--ic-radio-button-required-bar);border-left:0.125rem solid var(--ic-radio-button-required-bar);margin-left:calc(-1 * var(--ic-space-1px))}.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option{display:flex;position:relative;margin:var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);gap:var(--ic-space-xs)}.ic-radio-option-small.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option{margin-left:var(--ic-space-sm)}.ic-radio-option-large.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option{margin-left:calc(var(--ic-space-md) + var(--ic-space-xxs))}.sc-ic-radio-option-h .dynamic-container.hidden.sc-ic-radio-option{display:none}.sc-ic-radio-option-h .dynamic-text.sc-ic-radio-option{color:var(--ic-radio-button-required-text);--ic-typography-color:var(--ic-radio-button-required-text);margin-top:calc(var(--ic-space-sm) / 2);margin-bottom:var(--ic-space-xs);border-radius:2%}@media (max-width: 576px){.sc-ic-radio-option-h .additional-field-wrapper-dynamic.sc-ic-radio-option-s>ic-text-field,.sc-ic-radio-option-h .additional-field-wrapper-static.sc-ic-radio-option-s>ic-text-field{--input-width:100%}}@media (forced-colors: active){.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option{border-color:Highlight}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:checked~.checkmark.sc-ic-radio-option::after{background-color:Highlight}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:checked:disabled~.checkmark.sc-ic-radio-option{border-color:GrayText}.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after,.sc-ic-radio-option-h .radio-option-container.sc-ic-radio-option:active input.sc-ic-radio-option:disabled~.checkmark.sc-ic-radio-option::after{background-color:GrayText}}.sc-ic-radio-option-h input[type=\"radio\"].sc-ic-radio-option:dir(rtl){right:0}.sc-ic-radio-option-h .radio-label.sc-ic-radio-option:dir(rtl){padding-right:var(--ic-space-sm);padding-left:0}.sc-ic-radio-option-h .branch-corner.sc-ic-radio-option:dir(rtl){border-radius:0 0 0.188rem;border-right:0.125rem solid var(--ic-action-default);border-left:none}.sc-ic-radio-option-h .dynamic-container.sc-ic-radio-option:dir(rtl){margin:var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0}@media (prefers-reduced-motion: reduce){.sc-ic-radio-option-h .checkmark.sc-ic-radio-option{transition:none}}";
 const IcRadioOptionStyle0 = icRadioOptionCss;
 const ADDITIONAL_FIELD = "additional-field";
@@ -142,20 +142,22 @@ const RadioOption = class {
         return additionalField;
     }
     render() {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const { additionalFieldDisplay, disabled, dynamicText, form, groupLabel, handleClick, handleKeyDown, hasAdditionalField, label, name, selected, value, theme, } = this;
         const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;
-        return (h(Host, { key: 'f331d1a40695e8a416793d16068423212af00e66', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+        return (h(Host, { key: '01e55fbbed424dd593a7d311364434411ccd048b', onClick: handleClick, onKeyDown: handleKeyDown, class: {
                 ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-radio-option-small"]: ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === "IC-RADIO-GROUP" &&
                     ((_b = this.el.parentElement) === null || _b === void 0 ? void 0 : _b.className.includes("ic-radio-group-small")),
-            } }, h("div", { key: '86592506d3b6c19db7de4d91c690b61d7302844b', class: { "radio-option-container": true, disabled: !!disabled } }, h("div", { key: 'c624f2eff5ba26c324d1c2a279acf15d7bebccec' }, h("input", { key: 'cb1e2b8c500e88e53bc50b8cdedeef118d982520', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: 'e14cd39536e4ed6ef67ac81b01cd71550dc385ff', class: "checkmark" })), h("ic-typography", { key: '7960eb86755a9a1b6b8994ff8f44c21d1a91b749', class: "radio-label", variant: "body" }, h("label", { key: 'f0e2000797a2b126934946142e4aaf6af56043dd', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '7ddd66ccc66f3c71810f117a29c5ef58440448a6', class: {
+                ["ic-radio-option-large"]: ((_c = this.el.parentElement) === null || _c === void 0 ? void 0 : _c.tagName) === "IC-RADIO-GROUP" &&
+                    ((_d = this.el.parentElement) === null || _d === void 0 ? void 0 : _d.className.includes("ic-radio-group-large")),
+            } }, h("div", { key: 'fc0d81615b47d81bc9b95d6863200b07fb52b04b', class: { "radio-option-container": true, disabled: !!disabled } }, h("div", { key: '76e9aaf1c8286eba5d747d3f526005a4e384c5ad' }, h("input", { key: 'c2bdee7b4344ea9009a5523fec827cc71c60a666', tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { key: 'd4e56853e3b89ec1b02834ac92979a0c7732c8ea', class: "checkmark" })), h("ic-typography", { key: 'b59ad2a116ccc3c4ab4ce7c3f1555862834c219b', class: "radio-label", variant: "body" }, h("label", { key: '98450e5c6ac1857d1aeafbd0ee01204e1bf7b67b', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: '7a003d032a8df33ae8d7e536b310f50627004a7d', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'fa5dfc1518bc4329026b05b1444a5d1582918427', class: "branch-corner" })), h("div", { key: 'e973cbf83b2cbf53291f7bed19e5f3894400ef09' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'cd7d4a7f00846e2d455b4c7be41e412a3598ba5a', variant: "caption", role: "alert" }, h("p", { key: 'ffa848e0f258a97a2bf642b21fbfc1d4b963ea38', class: "dynamic-text" }, dynamicText))), h("div", { key: 'c277092836c255bf5b7b47c2f06b2be4a2420ff3', class: {
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'e71bef2b3f45dc145bd244b12daa1f934aabd8c9', class: "branch-corner" })), h("div", { key: 'c430c0f8af54686f02cdb4ff648923d1479a1b36' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: '70f2577189910a4b040ac4a24aecd8ae3255b417', variant: "caption", role: "alert" }, h("p", { key: '413223245ee9362fb10f6481e337a087f77f3c58', class: "dynamic-text" }, dynamicText))), h("div", { key: 'cf9ace3d0edcde40f6542af9d2f8644e2d9626e4', class: {
                 [`additional-field-wrapper-${additionalFieldDisplay}`]: true,
-            } }, h("slot", { key: '00ccd0a8653c1000766c112372d88861eea26686', name: ADDITIONAL_FIELD })))))));
+            } }, h("slot", { key: '2c5b92af633dd04592891d9ba10a90c0b9d80e85', name: ADDITIONAL_FIELD })))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-radio-option.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"ic-radio-option.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,0gcAA0gc,CAAC;AACpic,4BAAe,gBAAgB;;AC2B/B,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;MAU/B,WAAW;IALxB;;;;QAMU,sBAAiB,GAAW,EAAE,CAAC;QAC/B,uBAAkB,GAAY,KAAK,CAAC;QAEpC,cAAS,GAAG,KAAK,CAAC;;;;QAOD,2BAAsB,GAC7C,QAAQ,CAAC;;;;QAKH,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,gBAAW,GAAY,4CAA4C,CAAC;;;;QAyBpE,UAAK,GAAiB,SAAS,CAAC;;;;QAUA,aAAQ,GAAa,KAAK,CAAC;QAC1D,sBAAiB,GAAG,IAAI,CAAC,QAAQ,CAAC;QA4GnC,gBAAW,GAAG,CAAC,KAAiB;;YACtC,MAAM,sBAAsB,GAAI,KAAK,CAAC,MAAkB,CAAC,OAAO,CAC9D,4GAA4G,CAC7G,CAAC;YAEF,IACE,CAAC,IAAI,CAAC,QAAQ;iBACb,CAAC,sBAAsB,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,YAAY,CAAC,EAC/D;gBACA,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE;oBAC5B,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;iBAC5B;gBACD,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBAEvB,IAAI,IAAI,CAAC,kBAAkB,EAAE;oBAC3B,IAAI,CAAC,KAAK,GAAG,CAAA,MAAA,IAAI,CAAC,kBAAkB,EAAE,0CAAE,KAAK,KAAI,IAAI,CAAC,iBAAiB,CAAC;iBACzE;gBAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;oBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;iBAClB,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAoB;YAC3C,MAAM,0BAA0B,GAAG,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;YAEvE,IACE,IAAI,CAAC,kBAAkB,EAAE,IAAI,QAAQ,CAAC,aAAa;gBACnD,0BAA0B,CAAC,QAAQ,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC,EACvE;gBACA,KAAK,CAAC,eAAe,EAAE,CAAC;aACzB;SACF,CAAC;QAEM,oBAAe,GAAG;YACxB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,iBAAiB,CAAC;SACxC,CAAC;KAiFH;IA/QC,oBAAoB;QAClB,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IA4CD,oBAAoB;QAClB,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,CAAC;KAC9B;IAOD,WAAW,CAAC,EAAmC;QAC7C,IACE,IAAI,CAAC,sBAAsB,KAAK,QAAQ;YACxC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAC9D,EAAE,CAAC,MAAkC,CACtC;YAED,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;KAC5C;IAOD,oBAAoB;QAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;KACxD;IAED,iBAAiB;QACf,IAAI,UAAU,CAAC,IAAI,CAAC,EAAE,EAAE,gBAAgB,CAAC,EAAE;YACzC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;QAED,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC;QAEpC,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEpD,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAED,gBAAgB;QACd,gCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,cAAc,CACf,CAAC;KACH;IAED,mBAAmB;QACjB,MAAM,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC;QAC1D,IAAI,OAAO,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YACvC,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;YAC/B,IAAI,CAAC,kBAAkB,EAAE,CAAC;SAC3B;aAAM,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,kBAAkB,EAAE;YAC9C,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC;SACjC;KACF;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE;YAC5C,MAAM,eAAe,GAAG,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAClD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACnC,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;aAC/C;iBAAM;gBACL,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAE,eAAe,CAAC,UAAU,CAAC,CAAC;aAC9C;SACF;KACF;IAGD,2BAA2B,CAAC,KAAqC;QAC/D,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,CAAC,iBAAiB,CAAC;YAC1D,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;SACJ;QAED,KAAK,CAAC,wBAAwB,EAAE,CAAC;KAClC;;;;IAMD,MAAM,QAAQ;;QACZ,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;KAC5B;;;;IAMD,MAAM,WAAW,CAAC,KAAa;;QAC7B,MAAA,IAAI,CAAC,YAAY,0CAAE,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;KAC/D;IAEO,kBAAkB;QACxB,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAC3C,wCAAwC,CACf,CAAC;QAC5B,IAAI,eAAe;YAAE,eAAe,CAAC,WAAW,GAAG,KAAK,CAAC;QACzD,OAAO,eAAe,CAAC;KACxB;IA2CD,MAAM;;QACJ,MAAM,EACJ,sBAAsB,EACtB,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,UAAU,EACV,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,GAAG,mBAAmB,aAAa,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;QAE5E,QACE,EAAC,IAAI,qDACH,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,KAAK,EAAE;gBACL,CAAC,0BAA0B,GAAG,CAAC,CAAC,QAAQ;gBACxC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;gBAC1C,CAAC,uBAAuB,GACtB,CAAA,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,OAAO,MAAK,gBAAgB;qBACnD,MAAA,IAAI,CAAC,EAAE,CAAC,aAAa,0CAAE,SAAS,CAAC,QAAQ,CAAC,sBAAsB,CAAC,CAAA;aACpE,IAED,4DAAK,KAAK,EAAE,EAAE,wBAAwB,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,QAAQ,EAAE,IAClE,8DACE,8DACE,QAAQ,EAAE,QAAQ,GAAG,GAAG,GAAG,IAAI,EAC/B,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAE,IAAI,GACH,EACT,6DAAM,KAAK,EAAC,WAAW,GAAQ,CAC3B,EACN,sEAAe,KAAK,EAAC,aAAa,EAAC,OAAO,EAAC,MAAM,IAC/C,8DAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACrB,CACZ,EACL,kBAAkB,KACjB,4DACE,KAAK,EAAE;gBACL,mBAAmB,EAAE,IAAI;gBACzB,MAAM,EAAE,sBAAsB,KAAK,SAAS,IAAI,CAAC,QAAQ;aAC1D,IAEA,sBAAsB,KAAK,SAAS,KACnC,4DAAK,KAAK,EAAC,eAAe,GAAO,CAClC,EACD,8DACG,sBAAsB,KAAK,SAAS,KACnC,sEAAe,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,OAAO,IAC3C,0DAAG,KAAK,EAAC,cAAc,IAAE,WAAW,CAAK,CAC3B,CACjB,EACD,4DACE,KAAK,EAAE;gBACL,CAAC,4BAA4B,sBAAsB,EAAE,GAAG,IAAI;aAC7D,IAED,6DAAM,IAAI,EAAE,gBAAgB,GAAS,CACjC,CACF,CACF,CACP,CACI,EACP;KACH;;;;;;;;;;;","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([slot=\"additional-field\"]) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/ Focus states /\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n:host .radio-option-container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n:host(.ic-radio-option-small) .radio-option-container {\n margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n:host .radio-option-container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n:host(.ic-radio-option-small) .radio-option-container input {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n/ Create a custom radio button /\n:host .checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-radio-button-background-default);\n border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n:host(.ic-radio-option-small) .checkmark {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n/ Show the indicator (dot/circle) when checked /\n:host .radio-option-container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n:host .radio-option-container:hover input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n:host .radio-option-container:hover input:checked ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n:host\n .radio-option-container:hover:not(.disabled)\n input:checked\n ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-hover);\n}\n\n/ When pressed, adds the active colours /\n:host .radio-option-container:active input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/ When pressed, adds the active colours /\n:host .radio-option-container:active input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-pressed);\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n:host(.ic-radio-option-small)\n .radio-option-container\n input:checked\n ~ .checkmark {\n border-width: var(--ic-space-1px);\n}\n\n/ When pressed and selected, adds the active colours /\n:host .radio-option-container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-pressed);\n}\n\n/ When the radio button is checked /\n:host .radio-option-container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/ When the radio button is checked and disabled /\n:host .radio-option-container input:checked:disabled ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n:host .radio-option-container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n:host .radio-option-container input:disabled ~ .checkmark::after {\n background: var(--ic-radio-button-disabled);\n}\n\n/ On mouse-over inactive /\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-radio-button-disabled);\n}\n\n/ Style the indicator (dot/circle) /\n:host .radio-option-container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n}\n\n:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n top: 50%;\n left: 50%;\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n margin-left: var(--ic-space-md);\n\n --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n margin-left: var(--ic-space-xs);\n}\n\n:host .additional-field-wrapper-static {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n:host .branch-corner {\n color: var(--ic-radio-button-required-bar);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n margin-left: calc(-1 var(--ic-space-1px));\n}\n\n/* The dynamic container /\n:host .dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n margin-left: 12px;\n}\n\n:host .dynamic-container.hidden {\n display: none;\n}\n\n:host .dynamic-text {\n color: var(--ic-radio-button-required-text);\n\n --ic-typography-color: var(--ic-radio-button-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n :host .additional-field-wrapper-static::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n :host .radio-option-container input:checked ~ .checkmark,\n :host .radio-option-container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n :host .radio-option-container input:checked ~ .checkmark::after,\n :host .radio-option-container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n :host .radio-option-container input:disabled ~ .checkmark,\n :host .radio-option-container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n :host .radio-option-container input:disabled ~ .checkmark::after,\n :host .radio-option-container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n\n/ Right to left /\n:host input[type=\"radio\"]:dir(rtl) {\n right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host .checkmark {\n transition: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/\n @slot additional-field - Content to displayed alongside a radio option.\n /\n@Component({\n tag: \"ic-radio-option\",\n scoped: true,\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement?: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\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 The text to be displayed when dynamic.\n /\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the radio with.\n /\n @Prop() form?: string;\n\n /\n The group label for the radio option.\n /\n @Prop() groupLabel?: string;\n\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n\n /\n The name for the radio option.\n /\n @Prop() name?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /\n Emitted when the radio option is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n @Listen(\"icCheck\")\n handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n if (\n this.additionalFieldDisplay === \"static\" &&\n Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n ev.target as HTMLIcRadioOptionElement\n )\n )\n this.icCheck.emit({ value: this.value });\n }\n\n /\n Emitted when the radio option is selected or deselected.\n /\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const additionalField = this.getAdditionalField();\n if (!this.selected \|\| this.disabled) {\n additionalField?.setAttribute(\"disabled\", \"\");\n } else {\n additionalField?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value \|\| this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /\n Sets focus on the radio option.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /\n @internal Sets the tabIndex of the radio option.\n /\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n }\n\n private getAdditionalField(): HTMLIcTextFieldElement {\n const additionalField = this.el.querySelector(\n 'ic-text-field[slot=\"additional-field\"]'\n ) as HTMLIcTextFieldElement;\n if (additionalField) additionalField.hiddenInput = false;\n return additionalField;\n }\n\n private handleClick = (event: MouseEvent) => {\n const clickedAdditionalField = (event.target as Element).matches(\n \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container :not(ic-radio-option, .checkmark)\"\n );\n\n if (\n !this.disabled &&\n (!clickedAdditionalField \|\| event.target === this.radioElement)\n ) {\n event.stopPropagation();\n if (this.skipFocus === false) {\n this.radioElement?.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value = this.getAdditionalField()?.value \|\| this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n if (\n this.getAdditionalField() == document.activeElement &&\n preventPropagationElements.includes(this.getAdditionalField().nodeName)\n ) {\n event.stopPropagation();\n }\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n handleKeyDown,\n hasAdditionalField,\n label,\n name,\n selected,\n value,\n theme,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) \|\| value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n class={{\n [\"ic-radio-option-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-radio-option-small\"]:\n this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n this.el.parentElement?.className.includes(\"ic-radio-group-small\"),\n }}\n >\n <div class={{ \"radio-option-container\": true, disabled: !!disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n {hasAdditionalField && (\n <div\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\" role=\"alert\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n [`additional-field-wrapper-${additionalFieldDisplay}`]: true,\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"ic-radio-option.entry.js","mappings":"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","names":[],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":[":host {\n display: flex;\n flex-direction: column;\n width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([slot=\"additional-field\"]) {\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled /\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/ Focus states /\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n box-shadow: var(--ic-border-focus);\n}\n\n/ The container /\n:host .radio-option-container {\n display: grid;\n grid-template-columns: min-content auto;\n position: relative;\n cursor: pointer;\n align-items: center;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n:host(.ic-radio-option-small) .radio-option-container {\n margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n cursor: default;\n}\n\n/ Hide the browser's default radio button /\n:host .radio-option-container input {\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n display: inline-block;\n position: absolute;\n cursor: pointer;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n border-radius: 50%;\n border: none;\n}\n\n:host(.ic-radio-option-small) .radio-option-container input {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.ic-radio-option-large) .radio-option-container input {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n/ Create a custom radio button /\n:host .checkmark {\n display: block;\n position: relative;\n top: 0;\n left: 0;\n height: var(--ic-space-lg);\n width: var(--ic-space-lg);\n background-color: var(--ic-radio-button-background-default);\n border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n border-radius: 50%;\n transition: var(--ic-easing-transition-fast);\n box-sizing: border-box;\n}\n\n:host(.ic-radio-option-small) .checkmark {\n height: var(--ic-space-md);\n width: var(--ic-space-md);\n}\n\n:host(.ic-radio-option-large) .checkmark {\n height: var(--ic-space-xl);\n width: var(--ic-space-xl);\n}\n\n/ Show the indicator (dot/circle) when checked /\n:host .radio-option-container input:checked ~ .checkmark::after {\n display: inline-block;\n}\n\n/ On mouse-over, add a light blue background color /\n:host .radio-option-container:hover input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n:host .radio-option-container:hover input:checked ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n:host\n .radio-option-container:hover:not(.disabled)\n input:checked\n ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-hover);\n}\n\n/ When pressed, adds the active colours /\n:host .radio-option-container:active input ~ .checkmark {\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/ When pressed, adds the active colours /\n:host .radio-option-container:active input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-pressed);\n box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n:host(.ic-radio-option-small)\n .radio-option-container\n input:checked\n ~ .checkmark {\n border-width: var(--ic-space-1px);\n}\n\n/ When pressed and selected, adds the active colours /\n:host .radio-option-container:active input:checked ~ .checkmark::after {\n background-color: var(--ic-radio-button-default-pressed);\n}\n\n/ When the radio button is checked /\n:host .radio-option-container input:checked ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/ When the radio button is checked and disabled /\n:host .radio-option-container input:checked:disabled ~ .checkmark {\n border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n:host .radio-option-container input:disabled ~ .checkmark {\n border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/ When the radio button is disabled /\n:host .radio-option-container input:disabled ~ .checkmark::after {\n background: var(--ic-radio-button-disabled);\n}\n\n/ On mouse-over inactive /\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n box-shadow: none;\n border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n background-color: var(--ic-radio-button-disabled);\n}\n\n/ Style the indicator (dot/circle) /\n:host .radio-option-container .checkmark::after {\n content: \"\";\n position: absolute;\n display: none;\n top: calc(50% - var(--ic-space-xs));\n left: calc(50% - var(--ic-space-xs));\n width: var(--ic-space-md);\n height: var(--ic-space-md);\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n}\n\n:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n top: 50%;\n left: 50%;\n width: 0.625rem;\n height: 0.625rem;\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n transform: translate(-50%, -50%);\n}\n\n:host(.ic-radio-option-large) .radio-option-container .checkmark::after {\n top: 50%;\n left: 50%;\n width: calc(var(--ic-space-md) + var(--ic-space-xxs));\n height: calc(var(--ic-space-md) + var(--ic-space-xxs));\n border-radius: 50%;\n background: var(--ic-radio-button-default-active);\n transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n margin-left: var(--ic-space-md);\n\n --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n margin-left: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-large) .radio-label {\n margin-left: var(--ic-space-md);\n}\n\n:host .additional-field-wrapper-static {\n margin-left: var(--ic-space-xs);\n}\n\n/ The line /\n:host .branch-corner {\n color: var(--ic-radio-button-required-bar);\n height: var(--ic-space-md);\n width: var(--ic-space-xl);\n border-radius: 0 0 0 0.188rem;\n border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n margin-left: calc(-1 var(--ic-space-1px));\n}\n\n/* The dynamic container /\n:host .dynamic-container {\n display: flex;\n position: relative;\n margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n margin-left: var(--ic-space-sm);\n}\n\n:host(.ic-radio-option-large) .dynamic-container {\n margin-left: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n:host .dynamic-container.hidden {\n display: none;\n}\n\n:host .dynamic-text {\n color: var(--ic-radio-button-required-text);\n\n --ic-typography-color: var(--ic-radio-button-required-text);\n\n margin-top: calc(var(--ic-space-sm) / 2);\n margin-bottom: var(--ic-space-xs);\n border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n :host .additional-field-wrapper-static::slotted(ic-text-field) {\n --input-width: 100%;\n }\n}\n\n@media (forced-colors: active) {\n / Styles here only apply to Forced Colors Mode /\n\n :host .radio-option-container input:checked ~ .checkmark,\n :host .radio-option-container:active input:checked ~ .checkmark {\n border-color: Highlight;\n }\n\n :host .radio-option-container input:checked ~ .checkmark::after,\n :host .radio-option-container:active input:checked ~ .checkmark::after {\n background-color: Highlight;\n }\n\n :host .radio-option-container input:disabled ~ .checkmark,\n :host .radio-option-container input:checked:disabled ~ .checkmark {\n border-color: GrayText;\n }\n\n :host .radio-option-container input:disabled ~ .checkmark::after,\n :host .radio-option-container:active input:disabled ~ .checkmark::after {\n background-color: GrayText;\n }\n}\n\n/ Right to left /\n:host input[type=\"radio\"]:dir(rtl) {\n right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n padding-right: var(--ic-space-sm);\n padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n border-radius: 0 0 0.188rem;\n border-right: 0.125rem solid var(--ic-action-default);\n border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n :host .checkmark {\n transition: none;\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Element,\n Event,\n EventEmitter,\n Listen,\n State,\n Method,\n Watch,\n} from \"@stencil/core\";\nimport {\n IcAdditionalFieldTypes,\n IcThemeMode,\n IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n onComponentRequiredPropUndefined,\n addFormResetListener,\n removeFormResetListener,\n removeDisabledFalse,\n isPropDefined,\n isSlotUsed,\n slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/\n @slot additional-field - Content to displayed alongside a radio option.\n /\n@Component({\n tag: \"ic-radio-option\",\n scoped: true,\n styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n private defaultRadioValue: string = \"\";\n private hasAdditionalField: boolean = false;\n private radioElement?: HTMLInputElement;\n private skipFocus = false;\n\n @Element() el: HTMLIcRadioOptionElement;\n\n /\n The style of additionalField that will be displayed if used.\n /\n @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n \"static\";\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 The text to be displayed when dynamic.\n /\n @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n /\n The <form> element to associate the radio with.\n /\n @Prop() form?: string;\n\n /\n The group label for the radio option.\n /\n @Prop() groupLabel?: string;\n\n /\n The label for the radio option.\n /\n @Prop() label?: string;\n\n /\n The name for the radio option.\n /\n @Prop() name?: string;\n\n /\n Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n /\n @Prop() theme?: IcThemeMode = \"inherit\";\n\n /\n The value for the radio option.\n /\n @Prop({ mutable: true }) value!: string;\n\n /\n If `true`, the radio option will be displayed in a selected state.\n /\n @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n @State() initiallySelected = this.selected;\n\n @Watch(\"selected\")\n watchSelectedHandler(): void {\n this.icSelectedChange.emit();\n }\n\n /\n Emitted when the radio option is selected.\n /\n @Event() icCheck: EventEmitter<IcValueEventDetail>;\n @Listen(\"icCheck\")\n handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n if (\n this.additionalFieldDisplay === \"static\" &&\n Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n ev.target as HTMLIcRadioOptionElement\n )\n )\n this.icCheck.emit({ value: this.value });\n }\n\n /\n Emitted when the radio option is selected or deselected.\n /\n @Event() icSelectedChange: EventEmitter<void>;\n\n disconnectedCallback(): void {\n removeFormResetListener(this.el, this.handleFormReset);\n }\n\n componentWillLoad(): void {\n if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n }\n\n this.defaultRadioValue = this.value;\n\n addFormResetListener(this.el, this.handleFormReset);\n\n removeDisabledFalse(this.disabled, this.el);\n }\n\n componentDidLoad(): void {\n onComponentRequiredPropUndefined(\n [{ prop: this.value, propName: \"value\" }],\n \"Radio Option\"\n );\n }\n\n componentWillRender(): void {\n const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n if (hasSlot && !this.hasAdditionalField) {\n this.hasAdditionalField = true;\n this.getAdditionalField();\n } else if (!hasSlot && this.hasAdditionalField) {\n this.hasAdditionalField = false;\n }\n }\n\n componentDidRender(): void {\n if (this.additionalFieldDisplay === \"static\") {\n const additionalField = this.getAdditionalField();\n if (!this.selected \|\| this.disabled) {\n additionalField?.setAttribute(\"disabled\", \"\");\n } else {\n additionalField?.removeAttribute(\"disabled\");\n }\n }\n }\n\n @Listen(\"icChange\")\n additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n if (this.selected) {\n this.value = event.detail.value \|\| this.defaultRadioValue;\n this.icCheck.emit({\n value: this.value,\n });\n }\n\n event.stopImmediatePropagation();\n }\n\n /\n Sets focus on the radio option.\n /\n @Method()\n async setFocus(): Promise<void> {\n this.radioElement?.focus();\n }\n\n /\n @internal Sets the tabIndex of the radio option.\n /\n @Method()\n async setTabIndex(value: number): Promise<void> {\n this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n }\n\n private getAdditionalField(): HTMLIcTextFieldElement {\n const additionalField = this.el.querySelector(\n 'ic-text-field[slot=\"additional-field\"]'\n ) as HTMLIcTextFieldElement;\n if (additionalField) additionalField.hiddenInput = false;\n return additionalField;\n }\n\n private handleClick = (event: MouseEvent) => {\n const clickedAdditionalField = (event.target as Element).matches(\n \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container :not(ic-radio-option, .checkmark)\"\n );\n\n if (\n !this.disabled &&\n (!clickedAdditionalField \|\| event.target === this.radioElement)\n ) {\n event.stopPropagation();\n if (this.skipFocus === false) {\n this.radioElement?.focus();\n }\n this.skipFocus = false;\n\n if (this.hasAdditionalField) {\n this.value = this.getAdditionalField()?.value \|\| this.defaultRadioValue;\n }\n\n this.icCheck.emit({\n value: this.value,\n });\n }\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n if (\n this.getAdditionalField() == document.activeElement &&\n preventPropagationElements.includes(this.getAdditionalField().nodeName)\n ) {\n event.stopPropagation();\n }\n };\n\n private handleFormReset = (): void => {\n this.skipFocus = true;\n this.selected = this.initiallySelected;\n };\n\n render() {\n const {\n additionalFieldDisplay,\n disabled,\n dynamicText,\n form,\n groupLabel,\n handleClick,\n handleKeyDown,\n hasAdditionalField,\n label,\n name,\n selected,\n value,\n theme,\n } = this;\n\n const id = `ic-radio-option-${isPropDefined(label) \|\| value}-${groupLabel}`;\n\n return (\n <Host\n onClick={handleClick}\n onKeyDown={handleKeyDown}\n class={{\n [\"ic-radio-option-disabled\"]: !!disabled,\n [`ic-theme-${theme}`]: theme !== \"inherit\",\n [\"ic-radio-option-small\"]:\n this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n this.el.parentElement?.className.includes(\"ic-radio-group-small\"),\n [\"ic-radio-option-large\"]:\n this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n this.el.parentElement?.className.includes(\"ic-radio-group-large\"),\n }}\n >\n <div class={{ \"radio-option-container\": true, disabled: !!disabled }}>\n <div>\n <input\n tabindex={selected ? \"0\" : \"-1\"}\n type=\"radio\"\n name={name}\n id={id}\n value={value}\n disabled={disabled}\n checked={selected}\n ref={(el) => (this.radioElement = el)}\n form={form}\n ></input>\n <span class=\"checkmark\"></span>\n </div>\n <ic-typography class=\"radio-label\" variant=\"body\">\n <label htmlFor={id}>{label}</label>\n </ic-typography>\n </div>\n {hasAdditionalField && (\n <div\n class={{\n \"dynamic-container\": true,\n hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n }}\n >\n {additionalFieldDisplay === \"dynamic\" && (\n <div class=\"branch-corner\"></div>\n )}\n <div>\n {additionalFieldDisplay === \"dynamic\" && (\n <ic-typography variant=\"caption\" role=\"alert\">\n <p class=\"dynamic-text\">{dynamicText}</p>\n </ic-typography>\n )}\n <div\n class={{\n [`additional-field-wrapper-${additionalFieldDisplay}`]: true,\n }}\n >\n <slot name={ADDITIONAL_FIELD}></slot>\n </div>\n </div>\n </div>\n )}\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/esm/ic-search-bar.entry.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
-import { G as getFilteredMenuOptions, H as getLabelFromValue, J as handleHiddenFormButtonClick, r as removeDisabledFalse, K as debounceEvent, o as onComponentRequiredPropUndefined, q as getInputDescribedByText, m as renderHiddenInput } from './helpers-66681c73.js';
+import { F as getFilteredMenuOptions, G as getLabelFromValue, H as handleHiddenFormButtonClick, r as removeDisabledFalse, J as debounceEvent, o as onComponentRequiredPropUndefined, q as getInputDescribedByText, m as renderHiddenInput } from './helpers-33039856.js';
 import './constants-ab12fdcf.js';
 const clearIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -549,39 +549,39 @@ const SearchBar = class {
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = getLabelFromValue(value, options, valueField, labelField);
         renderHiddenInput(this.el, value, name, disabledMode);
-        return (h(Host, { key: '04e5c15ac492b502e560a905f83f3a250412ca06', class: {
+        return (h(Host, { key: 'f9ec3f2c47607e817cf0352546d0f72653b433ae', class: {
                 "ic-search-bar-search": true,
                 "ic-search-bar-full-width": fullWidth,
                 "ic-search-bar-disabled": disabled,
                 "ic-search-bar-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: '8fef7c014864aef9293542ab21524aa45d9241ac', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '43f1de8b93e14b829f581e0d394a75cb03c9d946', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: 'f5f1c33908f9083f84e162e6967e8b40d903f264', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '9fa5ed5c57101c905259eacdf81a1d7f8189f086', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '853c5c33a1760d96d447332df4c3bff6e79f91f8', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, h("ic-input-container", { key: 'fde0dc358fd80f81d23927eb18b6bd73e9694bcc', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '3c2a138a07c5a637842bf0330a857cd8a4c05be5', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, h("slot", { key: '4e5d465c5f4486826f3a634a4dd5ed2ecf01b249', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '62ad9581a1280af102d990de7fcac4055f800bec', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, h("input", { key: '196cad9c551d68276d99af9a60bd07a141130bd9', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
                 "no-left-pad": readonly,
                 readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '0d72210be324fa78ae66ce350c163e9633917978', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), h("div", { key: '94889d1ffab13321ea522704aacd7ebf0e0c3d00', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, h("ic-button", { key: 'be2a08dde69a638dc26f0c479c691e65d80ece9e', id: "clear-button", class: {
+            } }, h("ic-button", { key: 'd0a3c5b6288c249ba8be2a4bcbbd2a33f1a30025', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '5043e6629e6c2c925bc8464a65339bad98e915dc', class: "divider" })), h("div", { key: 'a36f9243178a2dc0da8e45e7dfe649816cf2b978', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), h("div", { key: '3965e828aba0dd8f88051ec717c7fafcb237a271', class: "divider" })), h("div", { key: 'c143dbc227dce558f5f87e1e2f7e3a014b9d250c', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, h("ic-button", { key: '9bdca735d409bd35d38d586b69172a72673fd275', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, h("ic-button", { key: '98e79886a69703ab39c8d6f5f97c147fb406870d', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 "search-submit-button": true,
                 "search-submit-button-small": size === "small",
                 "search-submit-button-unfocused": !searchSubmitFocused,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '642e60a52c92b6fda82276a827236c4651d0cbf7', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), h("div", { key: '4b0377230ac437eda9f5674876e87a7a72a0779c', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '025843659ad91751380c71f373c8e8f9fa118eb1', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (h("ic-menu", { key: '8be3e2accba616f85a408e8c82304433e98f7715', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][labelField] === loadingLabel ||
                             filteredOptions[0][labelField] === loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '17f2a14197fa3051a70345fd10e30a5cb98a13de', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), h("div", { key: '09953fbff84f3e27a6522da365ef49e96b21fa62', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

package/dist/esm/ic-section-container.entry.js CHANGED Viewed

@@ -17,12 +17,12 @@ const SectionContainer = class {
     }
     render() {
         const { aligned, fullHeight } = this;
-        return (h(Host, { key: '141dc39bbd1e9fda7617f8bff574f1e25ada9fe8', class: {
+        return (h(Host, { key: 'b72248434ac227221b9854880dd5103733052170', class: {
                 ["aligned-left"]: aligned === "left" || aligned === null,
                 ["aligned-center"]: aligned === "center",
                 ["aligned-full-width"]: aligned === "full-width",
                 ["no-vertical-padding"]: !!fullHeight,
-            } }, h("slot", { key: '8f1f0cdc5a22c0de9e0e3346ba1b7dcc8c3bf295' })));
+            } }, h("slot", { key: '749c9299c6116291ec9555bbd2a9586585e7480d' })));
     }
 };
 SectionContainer.style = IcSectionContainerStyle0;

package/dist/esm/ic-side-navigation.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a7a720e7.js';
 import { c as closeIcon } from './close-icon-539ec8d1.js';
 import { C as Chevron } from './chevron-icon-589e3b46.js';
-import { C as getCssProperty, f as getCurrentDeviceSize, D as DEVICE_SIZES, g as getBrandForegroundAppearance, i as isSlotUsed, L as isEmptyString, h as checkResizeObserver, o as onComponentRequiredPropUndefined, a as renderDynamicChildSlots, y as hasClassificationBanner, I as IcBrandForegroundEnum, e as isPropDefined } from './helpers-66681c73.js';
+import { B as getCssProperty, f as getCurrentDeviceSize, D as DEVICE_SIZES, g as getBrandForegroundAppearance, i as isSlotUsed, K as isEmptyString, h as checkResizeObserver, o as onComponentRequiredPropUndefined, a as renderDynamicChildSlots, x as hasClassificationBanner, I as IcBrandForegroundEnum, e as isPropDefined } from './helpers-33039856.js';
 import './constants-ab12fdcf.js';
 const menuIcon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
@@ -472,7 +472,7 @@ const SideNavigation = class {
             isAppNameSubtitleVariant,
             appTitle: appTitle || "",
         };
-        return (h(Host, { key: '886d59eacfc6a79fa8b4caae8a2cdb775dff6067', class: {
+        return (h(Host, { key: '467270372cb15a90984978cb333a6756c7ffcb8d', class: {
                 "xs-menu-open": menuOpen && isSDevice,
                 "xs-menu-close": !menuOpen && isSDevice,
                 "sm-collapsed": !isSDevice && !menuExpanded,
@@ -481,12 +481,12 @@ const SideNavigation = class {
                 [`ic-side-navigation-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["collapsed-labels"]: !isSDevice && !menuExpanded && !!collapsedIconLabels,
                 ["ic-side-navigation-inline"]: !!inline,
-            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '92d8098c0824f92ff4f639385d9ef1aae6fda26e', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '5a35143cf052d624a03308c8a727b8714e1896a6', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '4239354cce9eede321351b68744550e0de08c3ae', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'f8a95a420530e9114eb4560a8e77b5be51282906', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: 'b660e71252c4c16dda5f3850c2769312b26397ff', class: "navigation-list" }, h("slot", { key: 'b3c7b371935ef0f4b5d604c5ebe1dda873419d75', name: "primary-navigation" }))))), h("div", { key: '2fcca3fc56a443b064541f3c595214693fe76b37', class: {
+            } }, isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: '51b75422befcc62a8b9a866ab9ab7c58b799db2c', class: "side-navigation", id: "side-navigation" }, !isSDevice && this.renderTopBar(Object.assign({}, topBarProps)), h("div", { key: 'fbcb14963d2ce5567297bdf794d1dd5f7a6209bb', class: "side-navigation-inner" }, isSlotUsed(this.el, "primary-navigation") && (h("nav", { key: '24da45c7237f1152c1e93db9b928120bcca1ba14', class: "primary-navigation", "aria-labelledby": "primary-navigation-landmark" }, h("span", { key: 'e57f1521e37ecc9b770b35339059564ff23fe945', "aria-hidden": "true", class: "navigation-landmark-title", id: "primary-navigation-landmark" }, "Primary"), h("ul", { key: '88ffcdc33e0ebb348a3f8851dfb85020625293d7', class: "navigation-list" }, h("slot", { key: '91243f0760b0a67226f4c83a0393f669443ee356', name: "primary-navigation" }))))), h("div", { key: '77eaa1bf6bd8951c5a77902c75b0664aa36f0b44', class: {
                 ["bottom-wrapper"]: true,
                 ["classification-spacing"]: hasClassificationBanner(),
-            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: '3b0b5d0d656206768109c4e4065c14d831962cb2', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '637fe5abe5383946e97277b089c7dd1d46e703a3', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: '78640f1d84d55e53414094fff6abad155b44f35d', class: "navigation-list" }, h("slot", { key: '35d6d19470f2b2694084b55c08905cfc8e3a0a97', name: "secondary-navigation" })))), h("div", { key: '78cd12a09800d0e83634ad7ca75daa2bd1adcd35', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: 'b600544aa406b829069b6f7cdefeee16e9b4c40f' }), displayExpandBtn && (h("button", { key: 'a48355b059c6e41f141a41ca1aed6bf363be51cc', class: "menu-expand-button", innerHTML: Chevron, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: '6f51db95e92d73c8c59ca5e337e0e6083e0d95b5', class: "app-status-wrapper" }, status && (h("div", { key: 'aea4cbab412fd1a89d65517d355a41538505527c', class: {
+            } }, isSlotUsed(this.el, "secondary-navigation") && (h("nav", { key: 'ad66580f2b2f753f4ce2d1be8128fdcb5fb69c9f', class: "secondary-navigation", "aria-labelledby": "secondary-navigation-landmark" }, h("span", { key: '3f503502795535166e14d6d52ee1b8f72dfe9551', "aria-hidden": "true", class: "navigation-landmark-title", id: "secondary-navigation-landmark" }, "Secondary"), h("ul", { key: 'cfd5af2f79b1ca9e309fc160c5b4b00385f017d2', class: "navigation-list" }, h("slot", { key: 'a975b85e39c977ea241a976df63699337f6507d7', name: "secondary-navigation" })))), h("div", { key: 'b0f3f81a20589100389495ded413bf1bfe09e096', class: "bottom-side-nav" }, this.hasSecondaryNavigation && h("ic-divider", { key: '3ee7716a6a6ed2e8f776b9ba376a54274c84f873' }), displayExpandBtn && (h("button", { key: 'c7f04012bfcb7f727431a9d7e6e53d714cc49e5e', class: "menu-expand-button", innerHTML: Chevron, onClick: () => this.toggleMenuExpanded(!this.menuExpanded), "aria-label": `${menuExpanded ? "Collapse" : "Expand"} side navigation` })), h("div", { key: 'a3d90469e6d05790dd84a00ea1e4c4c35ecb8955', class: "app-status-wrapper" }, status && (h("div", { key: '6dddec89dbd4e81f2d5b0132c648e53e72092d14', class: {
                 ["app-status"]: true,
-            } }, h("ic-typography", { key: '1a23249530701743408ac1003ce89a0c91f5165c', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '430aa919fdf4eaca59e0fa6523f014a1885de38a', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
+            } }, h("ic-typography", { key: '21635fd5640f74861ede6840073a112753d13a29', "aria-label": "app tag", variant: "label-uppercase", class: "app-status-text" }, status))), version && (h("ic-typography", { key: '7a95df03f61c13f2a6ed23e43be42959ae98fd88', variant: "label", class: "app-version", "aria-label": "app version" }, version))))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ic-skeleton.entry.js CHANGED Viewed

@@ -43,11 +43,11 @@ const Skeleton = class {
                 width: el.style.width || width || DEFAULT_WIDTHS[variant],
             }
             : undefined;
-        return (h(Host, { key: 'a68ad9122c6ad09b2283f2d6168e6286c8c8157f', class: {
+        return (h(Host, { key: '67c1971600feaaaf5849048b4bc5ad3d4903ffb4', class: {
                 skeleton: true,
                 "ic-skeleton-circle": variant === "circle",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'a44bc7abbfb1f33581eec83e06556936ee410636' })));
+            }, style: style, "aria-disabled": "true" }, h("slot", { key: 'caf8562f7997131daa69e85d6766b3edf2531259' })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-skip-link.entry.js CHANGED Viewed

@@ -40,9 +40,9 @@ const SkipLink = class {
     }
     render() {
         const { fullWidth, inline, label, monochrome, target, theme, transparentBackground, } = this;
-        return (h(Host, { key: '90a25f2594d0169a8ee6f1d03b30a30fccb17168', class: {
+        return (h(Host, { key: '2f344a07df5cb31b39b5cd4ca8bc257229646b31', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-link", { key: '79c0f5121c3ac8bae5992756f3c628f381ebe576', class: {
+            } }, h("ic-link", { key: '9b844b5a2f207d08eaa8cbb621d54ed56f5cc28d', class: {
                 "display-top": !inline,
                 "full-width": !!fullWidth,
                 "show-background": !transparentBackground,