@ukic/web-components 3.0.0-alpha.9 → 3.1.0

package/dist/collection/components/ic-radio-option/ic-radio-option.js

@@ -9,18 +9,39 @@ export class RadioOption {
         this.defaultRadioValue = "";
         this.hasAdditionalField = false;
         this.skipFocus = false;
+        /**
+         * The style of additionalField that will be displayed if used.
+         */
+        this.additionalFieldDisplay = "static";
+        /**
+         * If `true`, the disabled state will be set.
+         */
+        this.disabled = false;
+        /**
+         * The text to be displayed when dynamic.
+         */
+        this.dynamicText = "This selection requires additional answers";
+        /**
+         * 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.
+         */
+        this.theme = "inherit";
+        /**
+         * If `true`, the radio option will be displayed in a selected state.
+         */
+        this.selected = false;
+        this.initiallySelected = this.selected;
         this.handleClick = (event) => {
-            var _a;
+            var _a, _b;
             const clickedAdditionalField = event.target.matches(".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)");
             if (!this.disabled &&
                 (!clickedAdditionalField || event.target === this.radioElement)) {
                 event.stopPropagation();
                 if (this.skipFocus === false) {
-                    this.radioElement.focus();
+                    (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.focus();
                 }
                 this.skipFocus = false;
                 if (this.hasAdditionalField) {
-                    this.value = ((_a = this.getAdditionalField()) === null || _a === void 0 ? void 0 : _a.value) || this.defaultRadioValue;
+                    this.value = ((_b = this.getAdditionalField()) === null || _b === void 0 ? void 0 : _b.value) || this.defaultRadioValue;
                 }
                 this.icCheck.emit({
                     value: this.value,
@@ -38,17 +59,6 @@ export class RadioOption {
             this.skipFocus = true;
             this.selected = this.initiallySelected;
         };
-        this.additionalFieldDisplay = "static";
-        this.disabled = false;
-        this.dynamicText = "This selection requires additional answers";
-        this.form = undefined;
-        this.groupLabel = undefined;
-        this.label = undefined;
-        this.name = undefined;
-        this.theme = "inherit";
-        this.value = undefined;
-        this.selected = false;
-        this.initiallySelected = this.selected;
     }
     watchDisabledHandler() {
         removeDisabledFalse(this.disabled, this.el);
@@ -117,7 +127,8 @@ export class RadioOption {
      * @internal Sets the tabIndex of the radio option.
      */
     async setTabIndex(value) {
-        this.radioElement.tabIndex = value;
+        var _a;
+        (_a = this.radioElement) === null || _a === void 0 ? void 0 : _a.setAttribute("tabIndex", value.toString());
     }
     getAdditionalField() {
         const additionalField = this.el.querySelector('ic-text-field[slot="additional-field"]');
@@ -128,15 +139,15 @@ export class RadioOption {
     render() {
         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, { onClick: handleClick, onKeyDown: handleKeyDown, class: {
-                ["ic-radio-option-disabled"]: disabled,
+        return (h(Host, { key: 'e51c6f675adeb824cebdd004e5c28a9f726cb5eb', onClick: handleClick, onKeyDown: handleKeyDown, class: {
+                ["ic-radio-option-disabled"]: !!disabled,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { class: { container: true, disabled } }, h("div", null, h("input", { tabindex: selected ? "0" : "-1", type: "radio", name: name, id: id, value: value, disabled: disabled ? true : null, checked: selected, ref: (el) => (this.radioElement = el), form: form }), h("span", { class: "checkmark" })), h("ic-typography", { class: "radio-label", variant: "body" }, h("label", { htmlFor: id }, label))), hasAdditionalField && (h("div", { class: {
+            } }, h("div", { key: '5cfdadaeb79d3a7338231e1653e42751bd1d89bd', class: { container: true, disabled: !!disabled } }, h("div", { key: '917cfdee6607ecd950fd4c09e54ed02a3f6945c4' }, h("input", { key: '9ca5649b90f8f6c087710595842f38cadecd901c', 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: '8670450d9fa0cb5db352f60b6e0feff048604dbd', class: "checkmark" })), h("ic-typography", { key: '44c544df2f59735c82e01ad3d1e7892f47e53523', class: "radio-label", variant: "body" }, h("label", { key: '55e93f4241c0fdc6831fb6da6a670c2a44311412', htmlFor: id }, label))), hasAdditionalField && (h("div", { key: 'bfa342e1dda96334553cc65752e6c41a64c19f5a', class: {
                 "dynamic-container": true,
                 hidden: additionalFieldDisplay === "dynamic" && !selected,
-            } }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text" }, dynamicText))), h("div", { class: {
+            } }, additionalFieldDisplay === "dynamic" && (h("div", { key: 'd9ab0bbac6d2f66dd363877b169ee2823802730b', class: "branch-corner" })), h("div", { key: 'a02719781e2362eef43f0b97b28f4e653a21eaa8' }, additionalFieldDisplay === "dynamic" && (h("ic-typography", { key: 'a1bfbd7ef7425ae4df7edca3ca07592263198cd9', variant: "caption" }, h("p", { key: 'd363e1bb13954c43b2a24f052594c661fb914935', class: "dynamic-text" }, dynamicText))), h("div", { key: '7229c529054fefe4b7d697c09eda18ce0e614ce7', class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
-            } }, h("slot", { name: ADDITIONAL_FIELD })))))));
+            } }, h("slot", { key: '2e57b46d37a3430b8849e62db427bb7be66091fd', name: ADDITIONAL_FIELD })))))));
     }
     static get is() { return "ic-radio-option"; }
     static get originalStyleUrls() {
@@ -156,7 +167,7 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "IcAdditionalFieldTypes",
-                    "resolved": "\"dynamic\" | \"static\"",
+                    "resolved": "\"dynamic\" | \"static\" | undefined",
                     "references": {
                         "IcAdditionalFieldTypes": {
                             "location": "import",
@@ -166,11 +177,13 @@ export class RadioOption {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The style of additionalField that will be displayed if used."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "additional-field-display",
                 "reflect": true,
                 "defaultValue": "\"static\""
@@ -180,7 +193,7 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -189,6 +202,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "If `true`, the disabled state will be set."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -198,15 +213,17 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The text to be displayed when dynamic."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "dynamic-text",
                 "reflect": false,
                 "defaultValue": "\"This selection requires additional answers\""
@@ -216,7 +233,7 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -225,6 +242,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "The <form> element to associate the radio with."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "form",
                 "reflect": false
             },
@@ -233,15 +252,17 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The group label for the radio option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "group-label",
                 "reflect": false
             },
@@ -250,7 +271,7 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -259,6 +280,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "The label for the radio option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false
             },
@@ -267,15 +290,17 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The name for the radio option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -284,7 +309,7 @@ export class RadioOption {
                 "mutable": false,
                 "complexType": {
                     "original": "IcThemeMode",
-                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\" | undefined",
                     "references": {
                         "IcThemeMode": {
                             "location": "import",
@@ -299,6 +324,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "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."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"inherit\""
@@ -317,6 +344,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "The value for the radio option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -325,7 +354,7 @@ export class RadioOption {
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -334,6 +363,8 @@ export class RadioOption {
                     "tags": [],
                     "text": "If `true`, the radio option will be displayed in a selected state."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "selected",
                 "reflect": true,
                 "defaultValue": "false"

package/dist/collection/components/ic-radio-option/ic-radio-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["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  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.tabIndex = value;\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        }}\n      >\n        <div class={{ container: true, 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 ? true : null}\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\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\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-radio-option.js","sourceRoot":"","sources":["../../../src/components/ic-radio-option/ic-radio-option.tsx"],"names":[],"mappings":"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","sourcesContent":["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  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        }}\n      >\n        <div class={{ 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\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\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-search-bar/ic-search-bar.css

@@ -480,18 +480,6 @@ video {
   width: 100%;
 }
 
-:host(.ic-search-bar-search) .ic-button-disabled:hover {
-  border-color: var(--ic-architectural-200);
-}
-
-:host(.ic-search-bar-search.ic-search-bar-disabled) .ic-button-disabled svg {
-  color: var(--ic-architectural-200);
-}
-
-:host(.ic-search-bar-search) .ic-button-disabled svg {
-  color: var(--ic-architectural-400);
-}
-
 /* Custom Input */
 
 ::-moz-placeholder {
@@ -522,7 +510,12 @@ input:focus {
   outline: 0;
 }
 
-input:disabled {
+input:disabled::-moz-placeholder {
+  color: var(--ic-search-bar-disabled-text);
+}
+
+input:disabled,
+input:disabled::placeholder {
   color: var(--ic-search-bar-disabled-text);
 }