@ukic/web-components 2.0.0 → 2.0.1

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

@@ -1 +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=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([small]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n.container input:focus-visible {\n  outline: none;\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  margin-left: 5px;\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n  margin: -1px;\n  margin-bottom: 1px;\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 2px solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop() value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      this.radioElement.focus();\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n  }\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-field-wrapper\":\n                    this.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.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=shadow","./src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: block;\n  margin-bottom: var(--ic-space-sm);\n  width: fit-content;\n}\n\n:host([small]) {\n  margin-bottom: 10px;\n}\n\n:host([additional-field-display=\"static\"]) ::slotted(ic-textfield) {\n  margin-top: var(--ic-space-xs);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n}\n\n/* Focus states */\n\n.container input:focus + span.checkmark,\n:host(:focus) .container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n  outline: none;\n}\n\n.container input:focus-visible {\n  outline: none;\n}\n\n/* The container */\n.container {\n  display: inline-flex;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  gap: var(--ic-space-xs);\n  margin-left: 5px;\n}\n\n.container.disabled,\n.container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n.container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n/* Create a custom radio button */\n.checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: 20px;\n  width: 20px;\n  background-color: transparent;\n  border: 1px solid #a7acb3;\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n}\n\n/* Show the indicator (dot/circle) when checked */\n.container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n.container:hover input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-hover);\n  border: 1px solid var(--ic-action-default);\n}\n\n/* When pressed, adds the active colours */\n.container:active input ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 1px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed, adds the active colours */\n.container:active input:checked ~ .checkmark {\n  background-color: var(--ic-action-default-bg-active);\n  border: 2px solid var(--ic-action-default-active);\n  box-shadow: 0 0 0 4px var(--ic-action-default-bg-active);\n}\n\n/* When pressed and selected, adds the active colours */\n.container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-action-default-active);\n}\n\n/* When the radio button is checked */\n.container input:checked ~ .checkmark {\n  border: 2px solid var(--ic-action-default);\n  margin: -1px;\n  margin-bottom: 1px;\n}\n\n/* When the radio button is checked and disabled */\n.container input:checked:disabled ~ .checkmark {\n  background-color: transparent;\n  border: 2px solid var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark {\n  border: 1px dashed var(--ic-architectural-200);\n}\n\n/* When the radio button is disabled */\n.container input:disabled ~ .checkmark::after {\n  background: var(--ic-architectural-200);\n}\n\n/* On mouse-over inactive */\n.container:hover input:disabled ~ .checkmark {\n  background-color: transparent;\n  box-shadow: none;\n  border: 2px solid none;\n}\n\n.container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-architectural-200);\n}\n\n/* Style the indicator (dot/circle) */\n.container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: 2px;\n  left: 2px;\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  background: var(--ic-action-default);\n}\n\n.radio-label {\n  font-size: 16px;\n  font-weight: 400;\n  margin-left: var(--ic-space-sm);\n}\n\n.addition-field-wrapper {\n  margin-left: 44px;\n}\n\n/* The line */\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 3px;\n  border-bottom: 2px solid var(--ic-action-default);\n  border-left: 2px solid var(--ic-action-default);\n  margin-left: -1px;\n}\n\n/* The dynamic container */\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin-left: var(--ic-space-md);\n  margin-top: 6px;\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-container.hidden {\n  display: none;\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\n  margin-top: 5px;\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  ::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  State,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  getSlotContent,\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcValueEventDetail } from \"../../interface\";\n@Component({\n  tag: \"ic-radio-option\",\n  styleUrl: \"ic-radio-option.css\",\n  shadow: true,\n})\nexport class RadioOption {\n  private radioElement: HTMLInputElement;\n  /**\n   * Determines whether the radio should be in selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  /**\n   * Determines whether the radio should be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label?: string;\n  /**\n   * Provide a value for the input.\n   */\n  @Prop({ mutable: true }) value!: string;\n  /**\n   * Provide a name for the input.\n   */\n  @Prop() name: string;\n  /**\n   * Provide a group label for the input.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * Provide a text prop for the dynamic text.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /** Determines type of additional text field in relation to radio option */\n\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  @State() initiallySelected = this.selected;\n\n  @Element() host: HTMLIcRadioOptionElement;\n\n  /**\n   * Emitted when radio is checked\n   */\n  @Event() icCheck!: EventEmitter<void>;\n\n  /**\n   * Emitted when a radio is selected.\n   */\n  @Event() radioOptionSelect: EventEmitter<IcValueEventDetail>;\n\n  @Watch(\"selected\")\n  selectedChangeHandler(selected: boolean): void {\n    if (selected) {\n      this.handleClick();\n    }\n  }\n\n  private defaultRadioValue: string = \"\";\n  private skipFocus = false;\n\n  private handleClick = () => {\n    if (!this.disabled) {\n      if (this.skipFocus === false) {\n        this.radioElement.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        const textfield = this.host.querySelector(\"ic-text-field\");\n        this.value =\n          textfield.value !== \"\" ? textfield.value : this.defaultRadioValue;\n      }\n\n      this.radioOptionSelect.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private swallowClick = (event: MouseEvent) => {\n    event.stopPropagation();\n  };\n\n  private hasAdditionalField: boolean = false;\n  componentWillLoad(): void {\n    const additonalFieldContent = getSlotContent(this.host, \"additional-field\");\n\n    if (additonalFieldContent !== null) {\n      this.hasAdditionalField = true;\n      const Element = additonalFieldContent[0] as HTMLElement;\n      if (Element.tagName === \"IC-TEXT-FIELD\") {\n        const textField = Element as HTMLIcTextFieldElement;\n        textField.hiddenInput = false;\n      }\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  @Listen(\"icChange\")\n  textfieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    const textFieldValue = event.detail.value;\n\n    if (this.selected) {\n      if (textFieldValue !== \"\") {\n        this.value = event.detail.value;\n        this.radioOptionSelect.emit({\n          value: this.value,\n        });\n      } else {\n        this.value = this.defaultRadioValue;\n        this.radioOptionSelect.emit({\n          value: this.defaultRadioValue,\n        });\n      }\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.selected) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const id = `ic-radio-option-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    return (\n      <Host onClick={this.handleClick}>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          <input\n            role=\"radio\"\n            tabindex={this.selected ? \"0\" : \"-1\"}\n            type=\"radio\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.selected}\n            ref={(el) => (this.radioElement = el)}\n          ></input>\n          <span class=\"checkmark\"></span>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{this.label}</label>\n          </ic-typography>\n        </div>\n\n        {this.hasAdditionalField && (\n          <div\n            onClick={this.swallowClick}\n            class={{\n              \"dynamic-container\": true,\n              hidden:\n                this.additionalFieldDisplay === \"dynamic\" && !this.selected,\n            }}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\">{this.dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"addition-field-wrapper\":\n                    this.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}

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

@@ -1,6 +1,6 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
-import { p as handleHiddenFormButtonClick, q as getFilteredMenuOptions, t as debounceEvent, u as getLabelFromValue, a as onComponentRequiredPropUndefined, d as getInputDescribedByText, r as renderHiddenInput } from './helpers-8b43d0d4.js';
+import { t as handleHiddenFormButtonClick, u as getFilteredMenuOptions, v as debounceEvent, w as getLabelFromValue, a as onComponentRequiredPropUndefined, f as getInputDescribedByText, d as renderHiddenInput } from './helpers-e090fe7e.js';
 
 const clearIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M15.8327 5.34199L14.6577 4.16699L9.99935 8.82533L5.34102 4.16699L4.16602 5.34199L8.82435 10.0003L4.16602 14.6587L5.34102 15.8337L9.99935 11.1753L14.6577 15.8337L15.8327 14.6587L11.1743 10.0003L15.8327 5.34199Z" fill="currentColor"/>

package/dist/esm/ic-select.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { u as getLabelFromValue, q as getFilteredMenuOptions, j as inheritAttributes, a as onComponentRequiredPropUndefined, r as renderHiddenInput, d as getInputDescribedByText, h as hasValidationStatus, v as isMobileOrTablet, k as IC_INHERITED_ARIA } from './helpers-8b43d0d4.js';
+import { w as getLabelFromValue, u as getFilteredMenuOptions, l as inheritAttributes, b as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, d as renderHiddenInput, f as getInputDescribedByText, h as hasValidationStatus, x as isMobileOrTablet, m as IC_INHERITED_ARIA } from './helpers-e090fe7e.js';
 import { I as IcThemeForegroundEnum, a as IcInformationStatus } from './types-dd515332.js';
 
 const Expand = `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -234,6 +234,12 @@ const Select = class {
       }
       this.icBlur.emit();
     };
+    this.handleFormReset = () => {
+      this.value = this.initialValue;
+      if (this.searchable) {
+        this.searchableSelectInputValue = null;
+      }
+    };
     this.label = undefined;
     this.options = [];
     this.required = false;
@@ -261,6 +267,7 @@ const Select = class {
     this.filteredOptions = this.options;
     this.ariaActiveDescendant = undefined;
     this.noOptions = null;
+    this.initialValue = this.value;
   }
   watchOptionsHandler() {
     this.setOptionsValuesFromLabels();
@@ -293,6 +300,7 @@ const Select = class {
       "title",
     ]);
     this.setOptionsValuesFromLabels();
+    addFormResetListener(this.host, this.handleFormReset);
   }
   componentDidRender() {
     if (this.nativeSelectElement && !this.disabled) {
@@ -302,6 +310,9 @@ const Select = class {
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Select");
   }
+  disconnectedCallback() {
+    removeFormResetListener(this.host, this.handleFormReset);
+  }
   render() {
     const { small, disabled, fullWidth, helperText, hideLabel, label, menuId, name, options, placeholder, readonly, required, searchable, showClearButton, validationStatus, validationText, value, } = this;
     renderHiddenInput(true, this.host, name, value, disabled);

package/dist/esm/ic-select.entry.js.map

@@ -1 +1 @@
-{"file":"ic-select.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","./src/components/ic-select/ic-select.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n/**\n   * @prop --input-width: Width of the input field\n*/\n\nic-input-component-container:hover {\n  --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n  --border-color: var(--ic-action-dark-active);\n\n  color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n  --border-color: var(--ic-architectural-400);\n\n  color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n  visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n  visibility: hidden;\n  transition: visibility 0s;\n}\n\nic-input-label {\n  margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  height: 100%;\n  padding-left: 6px;\n  appearance: none;\n  background-repeat: no-repeat;\n  background-position: right 6px center;\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n  color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n  color: var(--ic-architectural-200);\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n  border: 0;\n  outline: 0;\n}\n\nselect:not([disabled]) {\n  cursor: pointer;\n}\n\n.select-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.select-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 6px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n}\n\n.select-input:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) ic-input-component-container:hover .select-input {\n  background-color: var(--ic-architectural-white);\n}\n\n:host([disabled]) .select-input {\n  pointer-events: none;\n}\n\n:host([searchable]) .select-input {\n  cursor: auto;\n}\n\n.searchable-select-container {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}\n\n.expand-icon {\n  height: var(--ic-space-lg);\n  padding-left: var(--ic-space-xs);\n  color: var(--expand-icon-hover, var(--ic-architectural-400));\n}\n\n:host([disabled]) .expand-icon,\n:host([disabled]) .expand-icon > svg > path {\n  color: var(--ic-architectural-200);\n}\n\n:host([searchable]) .expand-icon {\n  padding-left: var(--ic-space-xxs);\n  height: 36px;\n}\n\n:host([searchable]) .expand-icon > svg {\n  height: 36px;\n  padding: 0 6px;\n}\n\n:host([searchable]:not([disabled])) .expand-icon > svg {\n  cursor: pointer;\n}\n\n.expand-icon-open {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host([searchable]) .expand-icon-open {\n  transform: rotateX(180deg);\n}\n\n:host([disabled]) .value-text,\n.placeholder {\n  color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n  display: flex;\n  align-items: center;\n}\n\n.clear-button-container {\n  display: flex;\n  gap: var(--ic-space-xxs);\n  padding-left: 38px;\n}\n\n:host([small]) .clear-button-container {\n  padding-left: 30px;\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-architectural-400);\n  margin: var(--ic-space-xxs) 0;\n  border-radius: 1px;\n  height: var(--ic-space-lg);\n}\n\n:host([small]) .divider {\n  height: var(--ic-space-md);\n}\n\n.clear-button {\n  position: absolute;\n  right: 44px;\n  border-radius: var(--ic-border-radius);\n  transition: box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus {\n  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\n  fill: white;\n}\n\n.searchable-select-results-status {\n  border: 0;\n  clip: rect(0, 0, 0, 0, 0);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  h,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  getInputDescribedByText,\n  getLabelFromValue,\n  hasValidationStatus,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  isMobileOrTablet,\n  getFilteredMenuOptions,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcThemeForegroundEnum,\n  IcMenuOption,\n  IcSearchMatchPositions,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-select\",\n  styleUrl: \"ic-select.css\",\n  shadow: true,\n})\nexport class Select {\n  private nativeSelectElement: HTMLSelectElement;\n  private customSelectElement: HTMLButtonElement;\n  private searchableSelectElement: HTMLInputElement;\n  private menu: HTMLIcMenuElement;\n  private anchorEl: HTMLElement;\n  private clearButton: HTMLIcButtonElement;\n\n  private inputId = `ic-select-input-${inputIds++}`;\n  private menuId = `${this.inputId}-menu`;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  private debounce: number;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide the possible selection options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Select an option\";\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If true, then fill width of container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Provide a validation status.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * Provide the text to display as the validation message.\n   */\n  @Prop() validationText?: string = \"\";\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop() value?: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * Display a button which clears the input when clicked. The button will always appear on the searchable select.\n   */\n  @Prop() showClearButton?: boolean = false;\n\n  /**\n   * If true, the select can be typed in to filter options.\n   */\n  @Prop() searchable?: boolean = false;\n\n  /**\n   * If true, descriptions of options are included when filtering options in a searchable select.\n   */\n  @Prop() includeDescriptionsInSearch?: boolean = false;\n\n  /**\n   * If true, group titles of grouped options are included when filtering options in a searchable select.\n   */\n  @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n  /**\n   * Whether the search string of the searchable select should match the start of or anywhere in the options.\n   */\n  @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n  /**\n   * Number of characters until suggestions appear for a searchable select.\n   */\n  @Prop() charactersUntilSuggestions?: number = 0;\n\n  /**\n   * Provide text for empty results list\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  @State() open: boolean = false;\n\n  @State() clearButtonFocused: boolean = false;\n\n  @State() searchableSelectInputValue: string = null;\n\n  @State() filteredOptions: IcMenuOption[] = this.options;\n\n  @State() ariaActiveDescendant: string;\n\n  @State() noOptions: IcMenuOption[] = null;\n\n  @Watch(\"options\")\n  watchOptionsHandler(): void {\n    this.setOptionsValuesFromLabels();\n    this.filteredOptions = this.options;\n  }\n\n  /**\n   * Emitted when a value is selected.\n   */\n  @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when select has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when select has blur.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @Element() host!: HTMLIcSelectElement;\n\n  /**\n   * Sets focus on the input box.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.nativeSelectElement) {\n      this.nativeSelectElement.focus();\n    } else if (this.customSelectElement) {\n      this.customSelectElement.focus();\n    } else if (this.searchableSelectElement) {\n      this.searchableSelectElement.focus();\n    }\n  }\n\n  private isMenuEnabled = () => {\n    return (\n      ((this.searchableSelectInputValue === null ||\n        this.searchableSelectInputValue === \"\") &&\n        this.charactersUntilSuggestions === 0) ||\n      (this.searchableSelectInputValue &&\n        this.searchableSelectInputValue.length >=\n          this.charactersUntilSuggestions)\n    );\n  };\n\n  private setOptionsValuesFromLabels = (): void => {\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (!option.value) {\n          option.value = option.label;\n        }\n      });\n    }\n  };\n\n  private setTextColor = (): void => {\n    if (this.nativeSelectElement.selectedIndex === 0) {\n      this.nativeSelectElement.className = \"placeholder\";\n    } else {\n      this.nativeSelectElement.className = \"select-option-selected\";\n    }\n  };\n\n  private setMenuChange = (open: boolean) => {\n    if (this.open !== open) {\n      this.open = open;\n    }\n  };\n\n  private getLabelFromValue = (value: string): string | undefined => {\n    return getLabelFromValue(value, this.options);\n  };\n\n  private getValueFromLabel = (label: string): string | undefined => {\n    const value = this.options.find((option) => option.label === label)?.value;\n    return value;\n  };\n\n  private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n    let children = option.children;\n\n    children = getFilteredMenuOptions(\n      option.children,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    const newOption = { ...option };\n    newOption.children = children;\n    return newOption;\n  };\n\n  private handleNativeSelectChange = (): void => {\n    this.icChange.emit({ value: this.nativeSelectElement.value });\n    this.setTextColor();\n  };\n\n  private handleCustomSelectChange = (event: CustomEvent): void => {\n    if (this.searchable && event.detail.label === this.emptyOptionListText) {\n      this.searchableSelectElement.focus();\n      return;\n    }\n\n    if (this.searchable) {\n      this.searchableSelectInputValue = this.getLabelFromValue(\n        event.detail.value\n      );\n    }\n\n    this.ariaActiveDescendant = event.detail.optionId;\n    this.icChange.emit({ value: event.detail.value });\n  };\n\n  private handleMenuChange = (event: CustomEvent): void => {\n    this.open = event.detail.open;\n\n    this.searchable && this.handleFocusIndicatorDisplay();\n  };\n\n  private handleFocusIndicatorDisplay = () => {\n    const focusIndicator =\n      this.host.shadowRoot.querySelector(\".focus-indicator\");\n\n    if (this.open) {\n      focusIndicator.classList.add(\"focus-indicator-enabled\");\n    } else {\n      focusIndicator.classList.remove(\"focus-indicator-enabled\");\n    }\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    if (!this.open) {\n      event.preventDefault();\n    }\n  };\n\n  private handleClick = (event: MouseEvent): void => {\n    this.noOptions = null;\n    this.menu.options = this.options;\n\n    if (event.detail !== 0 && this.isMenuEnabled()) {\n      this.menu.handleClickOpen();\n    }\n  };\n\n  private handleExpandIconMouseDown = (event: MouseEvent) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.searchableSelectElement.focus();\n      this.handleClick(event);\n    }\n  };\n\n  private handleClear = (event: Event): void => {\n    event.stopPropagation();\n    this.noOptions = null;\n    this.icChange.emit({ value: null });\n\n    if (this.searchable) {\n      this.searchableSelectElement.value = null;\n      this.searchableSelectInputValue = null;\n      this.menu.options = this.options;\n      this.searchableSelectElement.focus();\n\n      if (!this.isMenuEnabled()) {\n        this.setMenuChange(false);\n      }\n    } else {\n      this.customSelectElement.focus();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n\n    if (!this.open) {\n      this.noOptions = null;\n      this.menu.options = this.options;\n    }\n\n    if (this.open && event.key === \"Enter\") {\n      this.setMenuChange(false);\n    } else {\n      if (\n        !(\n          (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") &&\n          this.noOptions !== null\n        ) &&\n        this.isMenuEnabled()\n      ) {\n        this.menu.handleKeyboardOpen(event);\n      }\n    }\n  };\n\n  private handleClearButtonFocus = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleClearButtonBlur = (): void => {\n    this.clearButtonFocused = false;\n  };\n\n  private handleSearchableSelectInput = (event: Event): void => {\n    this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n\n    if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {\n      this.icChange.emit({ value: null });\n    }\n\n    if (this.isMenuEnabled()) {\n      this.setMenuChange(true);\n    } else {\n      this.setMenuChange(false);\n    }\n\n    const options = [...this.options];\n\n    let isGrouped = false;\n    let newFilteredOptions: IcMenuOption[] = [];\n\n    options.map((option) => {\n      if (option.children) isGrouped = true;\n    });\n\n    const menuOptionsFiltered = getFilteredMenuOptions(\n      options,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    if (!isGrouped) {\n      newFilteredOptions = menuOptionsFiltered;\n    } else {\n      options.map((option) => {\n        if (this.includeGroupTitlesInSearch) {\n          if (menuOptionsFiltered.indexOf(option) !== -1) {\n            newFilteredOptions.push(option);\n          } else {\n            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n          }\n        } else {\n          newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n        }\n      });\n    }\n\n    let noChildOptionsWhenFiltered = false;\n\n    if (isGrouped) {\n      noChildOptionsWhenFiltered = true;\n      newFilteredOptions.map((option) => {\n        if (option.children.length > 0) {\n          noChildOptionsWhenFiltered = false;\n        }\n      });\n    }\n\n    const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n    if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n      this.noOptions = null;\n      this.filteredOptions = newFilteredOptions;\n    } else {\n      this.noOptions = noOptions;\n      this.filteredOptions = this.noOptions;\n    }\n\n    this.debounceAriaLiveUpdate();\n  };\n\n  private updateSearchableSelectResultAriaLive = (): void => {\n    const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(\n      \".searchable-select-results-status\"\n    ) as HTMLDivElement;\n\n    if (this.noOptions !== null) {\n      searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n    } else {\n      searchableSelectResultsStatusEl.innerText = \"\";\n    }\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounce);\n\n    window.setTimeout(() => {\n      this.updateSearchableSelectResultAriaLive();\n    }, 800);\n  }\n\n  private onFocus = (): void => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = (event: FocusEvent): void => {\n    if (\n      this.searchable &&\n      event.relatedTarget !== this.menu &&\n      !(this.clearButton && event.relatedTarget === this.clearButton)\n    ) {\n      this.setMenuChange(false);\n      this.handleFocusIndicatorDisplay();\n    }\n\n    this.icBlur.emit();\n  };\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.host, [\n      ...IC_INHERITED_ARIA,\n      \"tabindex\",\n      \"title\",\n    ]);\n\n    this.setOptionsValuesFromLabels();\n  }\n\n  componentDidRender(): void {\n    if (this.nativeSelectElement && !this.disabled) {\n      this.setTextColor();\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Select\"\n    );\n  }\n\n  render() {\n    const {\n      small,\n      disabled,\n      fullWidth,\n      helperText,\n      hideLabel,\n      label,\n      menuId,\n      name,\n      options,\n      placeholder,\n      readonly,\n      required,\n      searchable,\n      showClearButton,\n      validationStatus,\n      validationText,\n      value,\n    } = this;\n\n    renderHiddenInput(true, this.host, name, value, disabled);\n\n    const invalid =\n      validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n    const describedBy = getInputDescribedByText(\n      this.inputId,\n      helperText !== \"\",\n      hasValidationStatus(this.validationStatus, this.disabled)\n    ).trim();\n\n    return (\n      <Host>\n        <ic-input-container readonly={readonly}>\n          {!hideLabel && (\n            <ic-input-label\n              for={this.inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n          <ic-input-component-container\n            ref={(el) => (this.anchorEl = el)}\n            class={{ \"menu-open\": this.open }}\n            small={small}\n            fullWidth={fullWidth}\n            disabled={disabled}\n            readonly={readonly}\n            validationStatus={validationStatus}\n          >\n            {readonly ? (\n              <ic-typography>\n                <p>{this.getLabelFromValue(value)}</p>\n              </ic-typography>\n            ) : isMobileOrTablet() ? (\n              <select\n                ref={(el) => (this.nativeSelectElement = el)}\n                disabled={disabled}\n                onChange={this.handleNativeSelectChange}\n                required={required}\n                id={this.inputId}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                {...this.inheritedAttributes}\n              >\n                <option value=\"\" selected disabled={!showClearButton}>\n                  {placeholder}\n                </option>\n                {options.map((option) => {\n                  if (option.children) {\n                    return (\n                      <optgroup label={option.label}>\n                        {option.children.map((option) => (\n                          <option\n                            value={option.value}\n                            disabled={option.disabled}\n                            selected={option.value === value}\n                          >\n                            {option.label}\n                          </option>\n                        ))}\n                      </optgroup>\n                    );\n                  } else {\n                    return (\n                      <option\n                        value={option.value}\n                        disabled={option.disabled}\n                        selected={option.value === value}\n                      >\n                        {option.label}\n                      </option>\n                    );\n                  }\n                })}\n              </select>\n            ) : searchable ? (\n              <div class=\"searchable-select-container\">\n                <input\n                  class=\"select-input\"\n                  role=\"combobox\"\n                  aria-label={label}\n                  aria-describedby={describedBy}\n                  aria-activedescendant={this.ariaActiveDescendant}\n                  aria-autocomplete=\"list\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-invalid={invalid}\n                  aria-required={required ? \"true\" : \"false\"}\n                  aria-controls={menuId}\n                  ref={(el) => (this.searchableSelectElement = el)}\n                  id={this.inputId}\n                  value={this.searchableSelectInputValue}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  onInput={this.handleSearchableSelectInput}\n                  onClick={this.handleClick}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.onFocus}\n                  onBlur={this.onBlur}\n                ></input>\n                {this.searchableSelectInputValue &&\n                  (showClearButton || searchable) && (\n                    <div class=\"clear-button-container\">\n                      <ic-button\n                        id=\"clear-button\"\n                        ref={(el) => (this.clearButton = el)}\n                        aria-label={\n                          this.searchableSelectInputValue && value === null\n                            ? \"Clear input\"\n                            : \"Clear selection\"\n                        }\n                        class=\"clear-button\"\n                        innerHTML={Clear}\n                        onClick={this.handleClear}\n                        onFocus={this.handleClearButtonFocus}\n                        onBlur={this.handleClearButtonBlur}\n                        size={small ? \"small\" : \"default\"}\n                        variant=\"icon\"\n                        appearance={\n                          this.clearButtonFocused\n                            ? IcThemeForegroundEnum.Light\n                            : IcThemeForegroundEnum.Dark\n                        }\n                      ></ic-button>\n                      <div class=\"divider\"></div>\n                    </div>\n                  )}\n                <span\n                  onMouseDown={this.handleExpandIconMouseDown}\n                  class={{\n                    \"expand-icon\": true,\n                    \"expand-icon-open\": this.open,\n                    \"expand-icon-filled\": !(value == null || value === \"\"),\n                    \"expand-icon-disabled\": !this.isMenuEnabled(),\n                  }}\n                  innerHTML={Expand}\n                  aria-hidden=\"true\"\n                />\n                <div\n                  aria-live=\"polite\"\n                  role=\"status\"\n                  class=\"searchable-select-results-status\"\n                ></div>\n              </div>\n            ) : (\n              <div class=\"select-container\">\n                <button\n                  class=\"select-input\"\n                  ref={(el) => (this.customSelectElement = el)}\n                  id={this.inputId}\n                  aria-label={`${label}, ${\n                    this.getLabelFromValue(value) || placeholder\n                  }${required ? \", required\" : \"\"}`}\n                  aria-describedby={describedBy}\n                  aria-invalid={invalid}\n                  aria-haspopup=\"listbox\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-owns={menuId}\n                  aria-controls={menuId}\n                  disabled={disabled}\n                  onBlur={this.onBlur}\n                  onFocus={this.onFocus}\n                  onClick={this.handleClick}\n                  onMouseDown={this.handleMouseDown}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <ic-typography\n                    variant=\"body\"\n                    class={{\n                      \"value-text\": true,\n                      placeholder: this.getLabelFromValue(value) === undefined,\n                    }}\n                  >\n                    <p>{this.getLabelFromValue(value) || placeholder}</p>\n                  </ic-typography>\n                  <div class=\"select-input-end\">\n                    {value && showClearButton && <div class=\"divider\"></div>}\n                    <span\n                      class={{\n                        \"expand-icon\": true,\n                        \"expand-icon-open\": this.open,\n                        \"expand-icon-filled\": !(value == null || value === \"\"),\n                      }}\n                      innerHTML={Expand}\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </button>\n                {value && showClearButton && (\n                  <ic-button\n                    id=\"clear-button\"\n                    aria-label=\"Clear selection\"\n                    class=\"clear-button\"\n                    innerHTML={Clear}\n                    onClick={this.handleClear}\n                    onFocus={this.handleClearButtonFocus}\n                    onBlur={this.handleClearButtonBlur}\n                    size={small ? \"small\" : \"default\"}\n                    variant=\"icon\"\n                    appearance={\n                      this.clearButtonFocused\n                        ? IcThemeForegroundEnum.Light\n                        : IcThemeForegroundEnum.Dark\n                    }\n                  ></ic-button>\n                )}\n              </div>\n            )}\n          </ic-input-component-container>\n          {!isMobileOrTablet() && (\n            <ic-menu\n              class={{\n                \"no-results\": this.noOptions !== null,\n              }}\n              ref={(el) => (this.menu = el)}\n              inputEl={\n                searchable\n                  ? this.searchableSelectElement\n                  : this.customSelectElement\n              }\n              inputLabel={label}\n              anchorEl={this.anchorEl}\n              small={small}\n              menuId={menuId}\n              open={this.open}\n              options={searchable ? this.filteredOptions : options}\n              value={value}\n              fullWidth={fullWidth}\n              onMenuChange={this.handleMenuChange}\n              onOptionSelect={this.handleCustomSelectChange}\n              parentEl={this.host}\n            ></ic-menu>\n          )}\n          <ic-input-validation\n            class={{ \"menu-open\": this.open }}\n            ariaLiveMode=\"polite\"\n            status={\n              hasValidationStatus(this.validationStatus, this.disabled) ===\n              false\n                ? \"\"\n                : validationStatus\n            }\n            message={\n              hasValidationStatus(this.validationStatus, this.disabled)\n                ? validationText\n                : \"\"\n            }\n            for={this.inputId}\n          ></ic-input-validation>\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-select.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-select/ic-select.css?tag=ic-select&encapsulation=shadow","./src/components/ic-select/ic-select.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n/**\n   * @prop --input-width: Width of the input field\n*/\n\nic-input-component-container:hover {\n  --border-color: var(--ic-action-dark-hover);\n}\n\nic-input-component-container:active {\n  --border-color: var(--ic-action-dark-active);\n\n  color: var(--ic-action-dark-active);\n}\n\nic-input-component-container.menu-open {\n  --border-color: var(--ic-architectural-400);\n\n  color: var(--ic-action-dark);\n}\n\nic-input-validation .status-icon,\nic-input-validation .statustext {\n  visibility: visible;\n}\n\nic-input-validation.menu-open .status-icon,\nic-input-validation.menu-open .statustext {\n  visibility: hidden;\n  transition: visibility 0s;\n}\n\nic-input-label {\n  margin-bottom: var(--ic-space-xs) !important;\n}\n\nselect {\n  border: 0;\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-architectural-white);\n  color: var(--ic-color-primary-text);\n  line-height: 1.5rem;\n  letter-spacing: 0.005rem;\n  width: 100%;\n  height: 100%;\n  padding-left: 6px;\n  appearance: none;\n  background-repeat: no-repeat;\n  background-position: right 6px center;\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect option,\n.select-option-selected {\n  color: var(--ic-color-primary-text);\n}\n\nselect:disabled {\n  color: var(--ic-architectural-200);\n  background-image: url(\"data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>\");\n}\n\nselect:focus {\n  border: 0;\n  outline: 0;\n}\n\nselect:not([disabled]) {\n  cursor: pointer;\n}\n\n.select-container {\n  width: 100%;\n  display: flex;\n  align-items: center;\n}\n\n.select-input {\n  width: 100%;\n  height: 100%;\n  padding: 0 6px;\n  display: flex;\n  cursor: pointer;\n  align-items: center;\n  justify-content: space-between;\n  background: none;\n  border: none;\n}\n\n.select-input:focus {\n  outline: none;\n}\n\n:host(:not([disabled])) ic-input-component-container:hover .select-input {\n  background-color: var(--ic-architectural-white);\n}\n\n:host([disabled]) .select-input {\n  pointer-events: none;\n}\n\n:host([searchable]) .select-input {\n  cursor: auto;\n}\n\n.searchable-select-container {\n  align-items: center;\n  display: flex;\n  width: 100%;\n}\n\n.expand-icon {\n  height: var(--ic-space-lg);\n  padding-left: var(--ic-space-xs);\n  color: var(--expand-icon-hover, var(--ic-architectural-400));\n}\n\n:host([disabled]) .expand-icon,\n:host([disabled]) .expand-icon > svg > path {\n  color: var(--ic-architectural-200);\n}\n\n:host([searchable]) .expand-icon {\n  padding-left: var(--ic-space-xxs);\n  height: 36px;\n}\n\n:host([searchable]) .expand-icon > svg {\n  height: 36px;\n  padding: 0 6px;\n}\n\n:host([searchable]:not([disabled])) .expand-icon > svg {\n  cursor: pointer;\n}\n\n.expand-icon-open {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-filled {\n  color: var(--ic-action-dark);\n}\n\n.expand-icon-open,\n:host([searchable]) .expand-icon-open {\n  transform: rotateX(180deg);\n}\n\n:host([disabled]) .value-text,\n.placeholder {\n  color: var(--ic-color-tertiary-text);\n}\n\n.select-input-end {\n  display: flex;\n  align-items: center;\n}\n\n.clear-button-container {\n  display: flex;\n  gap: var(--ic-space-xxs);\n  padding-left: 38px;\n}\n\n:host([small]) .clear-button-container {\n  padding-left: 30px;\n}\n\n.divider {\n  width: 1px;\n  background-color: var(--ic-architectural-400);\n  margin: var(--ic-space-xxs) 0;\n  border-radius: 1px;\n  height: var(--ic-space-lg);\n}\n\n:host([small]) .divider {\n  height: var(--ic-space-md);\n}\n\n.clear-button {\n  position: absolute;\n  right: 44px;\n  border-radius: var(--ic-border-radius);\n  transition: box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition);\n}\n\n.clear-button:focus {\n  background-color: var(--ic-focus-blue);\n  box-shadow: inset 0 0 0 2px var(--ic-focus-glow);\n  border-radius: 4px;\n}\n\n.clear-button:focus * {\n  fill: white;\n}\n\n.searchable-select-results-status {\n  border: 0;\n  clip: rect(0, 0, 0, 0, 0);\n  height: 1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  h,\n  State,\n  Watch,\n} from \"@stencil/core\";\n\nimport {\n  getInputDescribedByText,\n  getLabelFromValue,\n  hasValidationStatus,\n  inheritAttributes,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  isMobileOrTablet,\n  getFilteredMenuOptions,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IC_INHERITED_ARIA } from \"../../utils/constants\";\nimport {\n  IcInformationStatus,\n  IcInformationStatusOrEmpty,\n  IcThemeForegroundEnum,\n  IcMenuOption,\n  IcSearchMatchPositions,\n} from \"../../utils/types\";\nimport Expand from \"./assets/Expand.svg\";\nimport Clear from \"./assets/Clear.svg\";\nimport { IcValueEventDetail } from \"../../interface\";\n\nlet inputIds = 0;\n\n@Component({\n  tag: \"ic-select\",\n  styleUrl: \"ic-select.css\",\n  shadow: true,\n})\nexport class Select {\n  private nativeSelectElement: HTMLSelectElement;\n  private customSelectElement: HTMLButtonElement;\n  private searchableSelectElement: HTMLInputElement;\n  private menu: HTMLIcMenuElement;\n  private anchorEl: HTMLElement;\n  private clearButton: HTMLIcButtonElement;\n\n  private inputId = `ic-select-input-${inputIds++}`;\n  private menuId = `${this.inputId}-menu`;\n\n  private inheritedAttributes: { [k: string]: unknown } = {};\n\n  private debounce: number;\n\n  /**\n   * Provide a label for the input.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Provide the possible selection options.\n   */\n  @Prop() options?: IcMenuOption[] = [];\n\n  /**\n   * Specify if the input requires a value.\n   */\n  @Prop() required?: boolean = false;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * Specify whether the input is disabled.\n   */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /**\n   * Specify whether the input is read only.\n   */\n  @Prop() readonly?: boolean = false;\n\n  /**\n   * Provide a placeholder value to display.\n   */\n  @Prop() placeholder?: string = \"Select an option\";\n\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * Specify whether small styling is to be applied to the element.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * If true, then fill width of container.\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Provide a validation status.\n   */\n  @Prop() validationStatus?: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * Provide the text to display as the validation message.\n   */\n  @Prop() validationText?: string = \"\";\n\n  /**\n   * The value of the currently selected option.\n   */\n  @Prop({ mutable: true }) value?: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * Display a button which clears the input when clicked. The button will always appear on the searchable select.\n   */\n  @Prop() showClearButton?: boolean = false;\n\n  /**\n   * If true, the select can be typed in to filter options.\n   */\n  @Prop() searchable?: boolean = false;\n\n  /**\n   * If true, descriptions of options are included when filtering options in a searchable select.\n   */\n  @Prop() includeDescriptionsInSearch?: boolean = false;\n\n  /**\n   * If true, group titles of grouped options are included when filtering options in a searchable select.\n   */\n  @Prop() includeGroupTitlesInSearch?: boolean = false;\n\n  /**\n   * Whether the search string of the searchable select should match the start of or anywhere in the options.\n   */\n  @Prop() searchMatchPosition?: IcSearchMatchPositions = \"anywhere\";\n\n  /**\n   * Number of characters until suggestions appear for a searchable select.\n   */\n  @Prop() charactersUntilSuggestions?: number = 0;\n\n  /**\n   * Provide text for empty results list\n   */\n  @Prop() emptyOptionListText = \"No results found\";\n\n  @State() open: boolean = false;\n\n  @State() clearButtonFocused: boolean = false;\n\n  @State() searchableSelectInputValue: string = null;\n\n  @State() filteredOptions: IcMenuOption[] = this.options;\n\n  @State() ariaActiveDescendant: string;\n\n  @State() noOptions: IcMenuOption[] = null;\n\n  @State() initialValue = this.value;\n\n  @Watch(\"options\")\n  watchOptionsHandler(): void {\n    this.setOptionsValuesFromLabels();\n    this.filteredOptions = this.options;\n  }\n\n  /**\n   * Emitted when a value is selected.\n   */\n  @Event() icChange!: EventEmitter<IcValueEventDetail>;\n\n  /**\n   * Emitted when select has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when select has blur.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @Element() host!: HTMLIcSelectElement;\n\n  /**\n   * Sets focus on the input box.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.nativeSelectElement) {\n      this.nativeSelectElement.focus();\n    } else if (this.customSelectElement) {\n      this.customSelectElement.focus();\n    } else if (this.searchableSelectElement) {\n      this.searchableSelectElement.focus();\n    }\n  }\n\n  private isMenuEnabled = () => {\n    return (\n      ((this.searchableSelectInputValue === null ||\n        this.searchableSelectInputValue === \"\") &&\n        this.charactersUntilSuggestions === 0) ||\n      (this.searchableSelectInputValue &&\n        this.searchableSelectInputValue.length >=\n          this.charactersUntilSuggestions)\n    );\n  };\n\n  private setOptionsValuesFromLabels = (): void => {\n    if (this.options.length > 0) {\n      this.options.map((option) => {\n        if (!option.value) {\n          option.value = option.label;\n        }\n      });\n    }\n  };\n\n  private setTextColor = (): void => {\n    if (this.nativeSelectElement.selectedIndex === 0) {\n      this.nativeSelectElement.className = \"placeholder\";\n    } else {\n      this.nativeSelectElement.className = \"select-option-selected\";\n    }\n  };\n\n  private setMenuChange = (open: boolean) => {\n    if (this.open !== open) {\n      this.open = open;\n    }\n  };\n\n  private getLabelFromValue = (value: string): string | undefined => {\n    return getLabelFromValue(value, this.options);\n  };\n\n  private getValueFromLabel = (label: string): string | undefined => {\n    const value = this.options.find((option) => option.label === label)?.value;\n    return value;\n  };\n\n  private getFilteredChildMenuOptions = (option: IcMenuOption) => {\n    let children = option.children;\n\n    children = getFilteredMenuOptions(\n      option.children,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    const newOption = { ...option };\n    newOption.children = children;\n    return newOption;\n  };\n\n  private handleNativeSelectChange = (): void => {\n    this.icChange.emit({ value: this.nativeSelectElement.value });\n    this.setTextColor();\n  };\n\n  private handleCustomSelectChange = (event: CustomEvent): void => {\n    if (this.searchable && event.detail.label === this.emptyOptionListText) {\n      this.searchableSelectElement.focus();\n      return;\n    }\n\n    if (this.searchable) {\n      this.searchableSelectInputValue = this.getLabelFromValue(\n        event.detail.value\n      );\n    }\n\n    this.ariaActiveDescendant = event.detail.optionId;\n    this.icChange.emit({ value: event.detail.value });\n  };\n\n  private handleMenuChange = (event: CustomEvent): void => {\n    this.open = event.detail.open;\n\n    this.searchable && this.handleFocusIndicatorDisplay();\n  };\n\n  private handleFocusIndicatorDisplay = () => {\n    const focusIndicator =\n      this.host.shadowRoot.querySelector(\".focus-indicator\");\n\n    if (this.open) {\n      focusIndicator.classList.add(\"focus-indicator-enabled\");\n    } else {\n      focusIndicator.classList.remove(\"focus-indicator-enabled\");\n    }\n  };\n\n  private handleMouseDown = (event: Event): void => {\n    if (!this.open) {\n      event.preventDefault();\n    }\n  };\n\n  private handleClick = (event: MouseEvent): void => {\n    this.noOptions = null;\n    this.menu.options = this.options;\n\n    if (event.detail !== 0 && this.isMenuEnabled()) {\n      this.menu.handleClickOpen();\n    }\n  };\n\n  private handleExpandIconMouseDown = (event: MouseEvent) => {\n    if (!this.disabled) {\n      event.preventDefault();\n      this.searchableSelectElement.focus();\n      this.handleClick(event);\n    }\n  };\n\n  private handleClear = (event: Event): void => {\n    event.stopPropagation();\n    this.noOptions = null;\n    this.icChange.emit({ value: null });\n\n    if (this.searchable) {\n      this.searchableSelectElement.value = null;\n      this.searchableSelectInputValue = null;\n      this.menu.options = this.options;\n      this.searchableSelectElement.focus();\n\n      if (!this.isMenuEnabled()) {\n        this.setMenuChange(false);\n      }\n    } else {\n      this.customSelectElement.focus();\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent): void => {\n    event.cancelBubble = true;\n\n    if (!this.open) {\n      this.noOptions = null;\n      this.menu.options = this.options;\n    }\n\n    if (this.open && event.key === \"Enter\") {\n      this.setMenuChange(false);\n    } else {\n      if (\n        !(\n          (event.key === \"ArrowDown\" || event.key === \"ArrowUp\") &&\n          this.noOptions !== null\n        ) &&\n        this.isMenuEnabled()\n      ) {\n        this.menu.handleKeyboardOpen(event);\n      }\n    }\n  };\n\n  private handleClearButtonFocus = (): void => {\n    this.clearButtonFocused = true;\n  };\n\n  private handleClearButtonBlur = (): void => {\n    this.clearButtonFocused = false;\n  };\n\n  private handleSearchableSelectInput = (event: Event): void => {\n    this.searchableSelectInputValue = (event.target as HTMLInputElement).value;\n\n    if (this.getValueFromLabel(this.searchableSelectInputValue) === undefined) {\n      this.icChange.emit({ value: null });\n    }\n\n    if (this.isMenuEnabled()) {\n      this.setMenuChange(true);\n    } else {\n      this.setMenuChange(false);\n    }\n\n    const options = [...this.options];\n\n    let isGrouped = false;\n    let newFilteredOptions: IcMenuOption[] = [];\n\n    options.map((option) => {\n      if (option.children) isGrouped = true;\n    });\n\n    const menuOptionsFiltered = getFilteredMenuOptions(\n      options,\n      this.includeDescriptionsInSearch,\n      this.searchableSelectInputValue,\n      this.searchMatchPosition\n    );\n\n    if (!isGrouped) {\n      newFilteredOptions = menuOptionsFiltered;\n    } else {\n      options.map((option) => {\n        if (this.includeGroupTitlesInSearch) {\n          if (menuOptionsFiltered.indexOf(option) !== -1) {\n            newFilteredOptions.push(option);\n          } else {\n            newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n          }\n        } else {\n          newFilteredOptions.push(this.getFilteredChildMenuOptions(option));\n        }\n      });\n    }\n\n    let noChildOptionsWhenFiltered = false;\n\n    if (isGrouped) {\n      noChildOptionsWhenFiltered = true;\n      newFilteredOptions.map((option) => {\n        if (option.children.length > 0) {\n          noChildOptionsWhenFiltered = false;\n        }\n      });\n    }\n\n    const noOptions = [{ label: this.emptyOptionListText, value: \"\" }];\n\n    if (newFilteredOptions.length > 0 && !noChildOptionsWhenFiltered) {\n      this.noOptions = null;\n      this.filteredOptions = newFilteredOptions;\n    } else {\n      this.noOptions = noOptions;\n      this.filteredOptions = this.noOptions;\n    }\n\n    this.debounceAriaLiveUpdate();\n  };\n\n  private updateSearchableSelectResultAriaLive = (): void => {\n    const searchableSelectResultsStatusEl = this.host.shadowRoot.querySelector(\n      \".searchable-select-results-status\"\n    ) as HTMLDivElement;\n\n    if (this.noOptions !== null) {\n      searchableSelectResultsStatusEl.innerText = this.emptyOptionListText;\n    } else {\n      searchableSelectResultsStatusEl.innerText = \"\";\n    }\n  };\n\n  private debounceAriaLiveUpdate() {\n    clearTimeout(this.debounce);\n\n    window.setTimeout(() => {\n      this.updateSearchableSelectResultAriaLive();\n    }, 800);\n  }\n\n  private onFocus = (): void => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = (event: FocusEvent): void => {\n    if (\n      this.searchable &&\n      event.relatedTarget !== this.menu &&\n      !(this.clearButton && event.relatedTarget === this.clearButton)\n    ) {\n      this.setMenuChange(false);\n      this.handleFocusIndicatorDisplay();\n    }\n\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.value = this.initialValue;\n    if (this.searchable) {\n      this.searchableSelectInputValue = null;\n    }\n  };\n\n  componentWillLoad(): void {\n    this.inheritedAttributes = inheritAttributes(this.host, [\n      ...IC_INHERITED_ARIA,\n      \"tabindex\",\n      \"title\",\n    ]);\n\n    this.setOptionsValuesFromLabels();\n\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidRender(): void {\n    if (this.nativeSelectElement && !this.disabled) {\n      this.setTextColor();\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Select\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      small,\n      disabled,\n      fullWidth,\n      helperText,\n      hideLabel,\n      label,\n      menuId,\n      name,\n      options,\n      placeholder,\n      readonly,\n      required,\n      searchable,\n      showClearButton,\n      validationStatus,\n      validationText,\n      value,\n    } = this;\n\n    renderHiddenInput(true, this.host, name, value, disabled);\n\n    const invalid =\n      validationStatus === IcInformationStatus.Error ? \"true\" : \"false\";\n\n    const describedBy = getInputDescribedByText(\n      this.inputId,\n      helperText !== \"\",\n      hasValidationStatus(this.validationStatus, this.disabled)\n    ).trim();\n\n    return (\n      <Host>\n        <ic-input-container readonly={readonly}>\n          {!hideLabel && (\n            <ic-input-label\n              for={this.inputId}\n              label={label}\n              helperText={helperText}\n              required={required}\n              disabled={disabled}\n              readonly={readonly}\n            ></ic-input-label>\n          )}\n          <ic-input-component-container\n            ref={(el) => (this.anchorEl = el)}\n            class={{ \"menu-open\": this.open }}\n            small={small}\n            fullWidth={fullWidth}\n            disabled={disabled}\n            readonly={readonly}\n            validationStatus={validationStatus}\n          >\n            {readonly ? (\n              <ic-typography>\n                <p>{this.getLabelFromValue(value)}</p>\n              </ic-typography>\n            ) : isMobileOrTablet() ? (\n              <select\n                ref={(el) => (this.nativeSelectElement = el)}\n                disabled={disabled}\n                onChange={this.handleNativeSelectChange}\n                required={required}\n                id={this.inputId}\n                aria-label={label}\n                aria-describedby={describedBy}\n                aria-invalid={invalid}\n                onBlur={this.onBlur}\n                onFocus={this.onFocus}\n                {...this.inheritedAttributes}\n              >\n                <option value=\"\" selected disabled={!showClearButton}>\n                  {placeholder}\n                </option>\n                {options.map((option) => {\n                  if (option.children) {\n                    return (\n                      <optgroup label={option.label}>\n                        {option.children.map((option) => (\n                          <option\n                            value={option.value}\n                            disabled={option.disabled}\n                            selected={option.value === value}\n                          >\n                            {option.label}\n                          </option>\n                        ))}\n                      </optgroup>\n                    );\n                  } else {\n                    return (\n                      <option\n                        value={option.value}\n                        disabled={option.disabled}\n                        selected={option.value === value}\n                      >\n                        {option.label}\n                      </option>\n                    );\n                  }\n                })}\n              </select>\n            ) : searchable ? (\n              <div class=\"searchable-select-container\">\n                <input\n                  class=\"select-input\"\n                  role=\"combobox\"\n                  aria-label={label}\n                  aria-describedby={describedBy}\n                  aria-activedescendant={this.ariaActiveDescendant}\n                  aria-autocomplete=\"list\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-invalid={invalid}\n                  aria-required={required ? \"true\" : \"false\"}\n                  aria-controls={menuId}\n                  ref={(el) => (this.searchableSelectElement = el)}\n                  id={this.inputId}\n                  value={this.searchableSelectInputValue}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  onInput={this.handleSearchableSelectInput}\n                  onClick={this.handleClick}\n                  onKeyDown={this.handleKeyDown}\n                  onFocus={this.onFocus}\n                  onBlur={this.onBlur}\n                ></input>\n                {this.searchableSelectInputValue &&\n                  (showClearButton || searchable) && (\n                    <div class=\"clear-button-container\">\n                      <ic-button\n                        id=\"clear-button\"\n                        ref={(el) => (this.clearButton = el)}\n                        aria-label={\n                          this.searchableSelectInputValue && value === null\n                            ? \"Clear input\"\n                            : \"Clear selection\"\n                        }\n                        class=\"clear-button\"\n                        innerHTML={Clear}\n                        onClick={this.handleClear}\n                        onFocus={this.handleClearButtonFocus}\n                        onBlur={this.handleClearButtonBlur}\n                        size={small ? \"small\" : \"default\"}\n                        variant=\"icon\"\n                        appearance={\n                          this.clearButtonFocused\n                            ? IcThemeForegroundEnum.Light\n                            : IcThemeForegroundEnum.Dark\n                        }\n                      ></ic-button>\n                      <div class=\"divider\"></div>\n                    </div>\n                  )}\n                <span\n                  onMouseDown={this.handleExpandIconMouseDown}\n                  class={{\n                    \"expand-icon\": true,\n                    \"expand-icon-open\": this.open,\n                    \"expand-icon-filled\": !(value == null || value === \"\"),\n                    \"expand-icon-disabled\": !this.isMenuEnabled(),\n                  }}\n                  innerHTML={Expand}\n                  aria-hidden=\"true\"\n                />\n                <div\n                  aria-live=\"polite\"\n                  role=\"status\"\n                  class=\"searchable-select-results-status\"\n                ></div>\n              </div>\n            ) : (\n              <div class=\"select-container\">\n                <button\n                  class=\"select-input\"\n                  ref={(el) => (this.customSelectElement = el)}\n                  id={this.inputId}\n                  aria-label={`${label}, ${\n                    this.getLabelFromValue(value) || placeholder\n                  }${required ? \", required\" : \"\"}`}\n                  aria-describedby={describedBy}\n                  aria-invalid={invalid}\n                  aria-haspopup=\"listbox\"\n                  aria-expanded={this.open ? \"true\" : \"false\"}\n                  aria-owns={menuId}\n                  aria-controls={menuId}\n                  disabled={disabled}\n                  onBlur={this.onBlur}\n                  onFocus={this.onFocus}\n                  onClick={this.handleClick}\n                  onMouseDown={this.handleMouseDown}\n                  onKeyDown={this.handleKeyDown}\n                >\n                  <ic-typography\n                    variant=\"body\"\n                    class={{\n                      \"value-text\": true,\n                      placeholder: this.getLabelFromValue(value) === undefined,\n                    }}\n                  >\n                    <p>{this.getLabelFromValue(value) || placeholder}</p>\n                  </ic-typography>\n                  <div class=\"select-input-end\">\n                    {value && showClearButton && <div class=\"divider\"></div>}\n                    <span\n                      class={{\n                        \"expand-icon\": true,\n                        \"expand-icon-open\": this.open,\n                        \"expand-icon-filled\": !(value == null || value === \"\"),\n                      }}\n                      innerHTML={Expand}\n                      aria-hidden=\"true\"\n                    />\n                  </div>\n                </button>\n                {value && showClearButton && (\n                  <ic-button\n                    id=\"clear-button\"\n                    aria-label=\"Clear selection\"\n                    class=\"clear-button\"\n                    innerHTML={Clear}\n                    onClick={this.handleClear}\n                    onFocus={this.handleClearButtonFocus}\n                    onBlur={this.handleClearButtonBlur}\n                    size={small ? \"small\" : \"default\"}\n                    variant=\"icon\"\n                    appearance={\n                      this.clearButtonFocused\n                        ? IcThemeForegroundEnum.Light\n                        : IcThemeForegroundEnum.Dark\n                    }\n                  ></ic-button>\n                )}\n              </div>\n            )}\n          </ic-input-component-container>\n          {!isMobileOrTablet() && (\n            <ic-menu\n              class={{\n                \"no-results\": this.noOptions !== null,\n              }}\n              ref={(el) => (this.menu = el)}\n              inputEl={\n                searchable\n                  ? this.searchableSelectElement\n                  : this.customSelectElement\n              }\n              inputLabel={label}\n              anchorEl={this.anchorEl}\n              small={small}\n              menuId={menuId}\n              open={this.open}\n              options={searchable ? this.filteredOptions : options}\n              value={value}\n              fullWidth={fullWidth}\n              onMenuChange={this.handleMenuChange}\n              onOptionSelect={this.handleCustomSelectChange}\n              parentEl={this.host}\n            ></ic-menu>\n          )}\n          <ic-input-validation\n            class={{ \"menu-open\": this.open }}\n            ariaLiveMode=\"polite\"\n            status={\n              hasValidationStatus(this.validationStatus, this.disabled) ===\n              false\n                ? \"\"\n                : validationStatus\n            }\n            message={\n              hasValidationStatus(this.validationStatus, this.disabled)\n                ? validationText\n                : \"\"\n            }\n            for={this.inputId}\n          ></ic-input-validation>\n        </ic-input-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-1500de1f.js';
 import { c as closeIcon } from './close-icon-2f02b42a.js';
 import { c as chevronIcon } from './chevron-icon-5b38c60a.js';
-import { w as getCssProperty, i as isSlotUsed, D as DEVICE_SIZES, g as getCurrentDeviceSize, e as getThemeForegroundColor, c as checkResizeObserver, a as onComponentRequiredPropUndefined, f as hasClassificationBanner } from './helpers-8b43d0d4.js';
+import { y as getCssProperty, i as isSlotUsed, D as DEVICE_SIZES, g as getCurrentDeviceSize, j as getThemeForegroundColor, c as checkResizeObserver, a as onComponentRequiredPropUndefined, k as hasClassificationBanner } from './helpers-e090fe7e.js';
 import { I as IcThemeForegroundEnum } from './types-dd515332.js';
 
 const menuIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">

package/dist/esm/ic-status-tag.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host } from './index-1500de1f.js';
-import { a as onComponentRequiredPropUndefined } from './helpers-8b43d0d4.js';
+import { a as onComponentRequiredPropUndefined } from './helpers-e090fe7e.js';
 import './types-dd515332.js';
 
 const icStatusTagCss = "/*! 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}.tag{padding:var(--ic-space-xs) var(--ic-space-sm);font-size:14px;border-radius:80px;display:inline-block;min-width:40px;text-align:center}.small{padding:var(--ic-space-xxs) var(--ic-space-sm)}.filled-neutral{background-color:var(--ic-architectural-600);color:var(--ic-architectural-white)}.filled-success{background-color:var(--ic-status-success);color:var(--ic-architectural-white)}.filled-warning{background-color:var(--ic-status-warning);color:var(--ic-color-primary-text)}.filled-danger{background-color:var(--ic-status-error);color:var(--ic-architectural-white)}.outlined-neutral{background-color:var(--ic-architectural-200);color:var(--ic-color-secondary-text);border:1px solid var(--ic-architectural-400)}.outlined-success{background-color:var(--ic-status-success-background);color:var(--ic-status-success);border:1px solid var(--ic-status-success)}.outlined-warning{background-color:var(--ic-status-warning-background);color:var(--ic-status-warning-dark);border:1px solid var(--ic-status-warning-dark)}.outlined-danger{background-color:var(--ic-status-error-background);color:var(--ic-status-error);border:1px solid var(--ic-status-error)}";

package/dist/esm/ic-step.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-1500de1f.js';
 import { C as Check } from './check-icon-53f1d9e5.js';
-import { a as onComponentRequiredPropUndefined } from './helpers-8b43d0d4.js';
+import { a as onComponentRequiredPropUndefined } from './helpers-e090fe7e.js';
 import './types-dd515332.js';
 
 const icStepCss = ":host{display:flex;flex:auto}:host(.last-step){flex-grow:initial}.step{display:flex;flex-direction:column;flex:1 1 0}.step-top{display:flex;width:100%;align-items:center;align-self:flex-start;height:40px}.step-icon{display:flex;justify-content:center;align-items:center;border-radius:50%}.step-icon-inner{width:var(--ic-space-xl);height:var(--ic-space-xl);display:flex;justify-content:center;align-items:center;border-radius:50%}.current{color:var(--ic-theme-primary)}.step-title-area{margin:var(--ic-space-xs) 0;padding-right:var(--ic-space-xs)}.step-title,.step-subtitle{width:-moz-fit-content;width:fit-content}.step-subtitle{color:var(--ic-color-tertiary-text)}.current .step-subtitle{color:var(--ic-color-primary-text)}.completed{color:var(--ic-status-success)}.active .step-icon-inner{box-shadow:inset var(--ic-architectural-200) 0 0 0 2px}.current .step-icon-inner{background-color:var(--ic-theme-primary);color:white}.disabled{color:var(--ic-architectural-200)}.disabled .step-icon-inner{border:1px dashed var(--ic-architectural-200);width:calc(var(--ic-space-xl) - var(--ic-space-xxxs));height:calc(var(--ic-space-xl) - var(--ic-space-xxxs))}.disabled .step-title-area{color:var(--ic-color-tertiary-text)}.completed .step-icon-inner{background:var(--ic-status-success);box-shadow:inset var(--ic-status-success) 0 0 0 var(--ic-space-xxxs);border-radius:100%}.current .step-icon{border:var(--ic-space-xxxs) solid var(--ic-theme-primary);padding:var(--ic-space-xxxs);margin:0 calc(-1 * var(--ic-space-xxxs));}.step-connect{height:var(--ic-space-xxxs);background-color:var(--ic-architectural-200);margin:0 var(--ic-space-xs);border-radius:var(--ic-space-xxs);width:100%}.aligned-full-width.step-connect{min-width:100px;width:100%}.disabled .step-connect{height:0;background-color:rgb(0 0 0 / 0%);border-top:2px dashed var(--ic-architectural-200);border-radius:0}.completed .step-connect{background-color:var(--ic-status-success)}.step-connect-inner{width:70%;display:flex;flex:auto;height:var(--ic-space-xxxs);border-radius:var(--ic-space-xxs);background-color:var(--ic-theme-primary)}.check-icon{padding-top:var(--ic-space-xxs)}.check-icon svg{width:16px;height:16px}.check-icon>svg>path{fill:white}";

package/dist/esm/ic-stepper.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { c as checkResizeObserver } from './helpers-8b43d0d4.js';
+import { c as checkResizeObserver } from './helpers-e090fe7e.js';
 import './types-dd515332.js';
 
 const icStepperCss = ":host{display:flex;width:100%}.step-item-list{display:flex;margin:0;padding:0}:host(.aligned-full-width) .step-item-list{flex:auto}";

package/dist/esm/ic-switch.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-1500de1f.js';
-import { a as onComponentRequiredPropUndefined, r as renderHiddenInput, d as getInputDescribedByText } from './helpers-8b43d0d4.js';
+import { b as addFormResetListener, a as onComponentRequiredPropUndefined, r as removeFormResetListener, d as renderHiddenInput, f as getInputDescribedByText } from './helpers-e090fe7e.js';
 import './types-dd515332.js';
 
 const icSwitchCss = "/*! 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:inline-block}input{overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none}.ic-switch-container{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ic-space-xxs);cursor:pointer}.ic-switch-label{margin-left:var(--ic-space-xxs);margin-bottom:var(--ic-space-sm)}.ic-switch-label-small{margin-bottom:10px}.ic-switch-toggle{display:flex;align-items:center;justify-content:space-around;width:64px;height:var(--ic-space-xl);position:relative;border-radius:100vw;background-color:var(--ic-architectural-200);border:1px solid var(--ic-architectural-700);box-sizing:border-box;transition:var(--ic-transition-duration-fast)}.ic-switch-line-break{flex:1 0 100%}.ic-switch-checked-status{padding-left:var(--ic-space-xxs)}.ic-switch-toggle::before{content:\"\";width:21.33px;height:21.33px;border-radius:50%;position:absolute;z-index:2;top:50%;left:5.33px;transform:translate(0, -50%);background-color:var(--ic-architectural-700);transition:var(--ic-transition-duration-slow)}.ic-switch-icon{display:inline-block;vertical-align:middle;width:10px;height:10px}.ic-switch-icon-circle,.ic-switch-icon-line{stroke-width:1}.ic-switch-icon-circle{stroke:var(--ic-architectural-700)}.ic-switch-icon-line{stroke:var(--ic-architectural-white)}@media (prefers-reduced-motion: reduce){.ic-switch-toggle::before{transition-duration:0ms}}.ic-switch-input:checked+.ic-switch-toggle{background-color:var(--ic-action-default);border:none}.ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-xl), -50%);background-color:var(--ic-architectural-white)}.ic-switch-input:not([disabled])+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px var(--ic-action-dark-bg-hover)}.ic-switch-input:not([disabled])+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px var(--ic-action-dark-bg-active)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:hover::before{box-shadow:0 0 0 12px var(--ic-action-default-bg-hover)}.ic-switch-input:not([disabled]):checked+.ic-switch-toggle:active::before{box-shadow:0 0 0 12px var(--ic-action-default-bg-active)}.ic-switch-input:focus:not([disabled])+.ic-switch-toggle,.ic-switch-input:focus-visible:not([disabled])+.ic-switch-toggle{box-shadow:0 0 0 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px var(--ic-action-default-active-alpha)}.ic-switch-disabled{cursor:default}.ic-switch-disabled .ic-switch-icon-circle{stroke:var(--ic-architectural-300)}.ic-switch-disabled .ic-switch-icon-line{stroke:var(--ic-action-default-bg-active)}.ic-switch-input:disabled+.ic-switch-toggle{background-color:var(--ic-architectural-80);border:1px dashed var(--ic-architectural-300)}.ic-switch-input:disabled~.ic-switch-checked-status{color:var(--ic-architectural-300)}.ic-switch-input:disabled+.ic-switch-toggle::before{background-color:var(--ic-architectural-300)}.ic-switch-input:disabled:checked+.ic-switch-toggle{background-color:var(--ic-status-info-background);border:1px dashed #98c9f5}.ic-switch-input:disabled:checked+.ic-switch-toggle::before{background-color:var(--ic-architectural-white)}.ic-switch-small{gap:var(--ic-space-xxxs)}.ic-switch-small .ic-switch-checked-status{padding-left:6px}.ic-switch-small .ic-switch-toggle{width:var(--ic-space-xxl);height:var(--ic-space-lg)}.ic-switch-small .ic-switch-toggle::before{width:var(--ic-space-md);height:var(--ic-space-md);left:var(--ic-space-xxs)}.ic-switch-small .ic-switch-input:checked+.ic-switch-toggle::before{transform:translate(var(--ic-space-lg), -50%)}::slotted(*){margin-left:var(--ic-space-sm)}";
@@ -25,24 +25,34 @@ const Switch = class {
     this.onBlur = () => {
       this.icBlur.emit();
     };
+    this.handleFormReset = () => {
+      this.checkedState = this.initiallyChecked;
+    };
     this.label = undefined;
     this.hideLabel = false;
     this.helperText = "";
-    this.checked = null;
+    this.checked = false;
     this.small = false;
     this.disabled = false;
     this.name = this.inputId;
     this.showState = false;
     this.value = "on";
     this.checkedState = false;
+    this.initiallyChecked = this.checked;
+  }
+  componentWillLoad() {
+    this.checkedState = this.checked;
+    addFormResetListener(this.el, this.handleFormReset);
   }
   componentDidLoad() {
     onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Switch");
   }
+  disconnectedCallback() {
+    removeFormResetListener(this.el, this.handleFormReset);
+  }
   render() {
-    const { label, checked, checkedState, small, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
-    const internalChecked = checked == null ? checkedState : checked;
-    renderHiddenInput(true, this.el, name, internalChecked ? value : "", disabled);
+    const { label, checkedState, small, disabled, name, showState, value, hideLabel, helperText, inputId, } = this;
+    renderHiddenInput(true, this.el, name, checkedState ? value : "", disabled);
     const describedBy = getInputDescribedByText(inputId, helperText !== "", false);
     return (h(Host, null, h("label", { class: {
         ["ic-switch-container"]: true,
@@ -51,7 +61,7 @@ const Switch = class {
       }, htmlFor: inputId }, !hideLabel && (h("ic-input-label", { for: inputId, label: label, helperText: helperText, readonly: true, disabled: disabled, class: {
         ["ic-switch-label"]: true,
         ["ic-switch-label-small"]: small,
-      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: internalChecked, disabled: disabled, "aria-label": label, "aria-checked": internalChecked ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: small ? "2" : "1", x2: "9", y2: small ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: small ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, internalChecked ? "On" : "Off")))));
+      } })), !hideLabel && h("span", { class: "ic-switch-line-break" }), h("input", { checked: checkedState, disabled: disabled, "aria-label": label, "aria-checked": checkedState ? "true" : "false", "aria-describedby": describedBy, role: "switch", class: "ic-switch-input", type: "checkbox", name: "toggle", id: inputId, onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange }), h("span", { class: "ic-switch-toggle" }, h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("line", { class: "ic-switch-icon-line", x1: "9", y1: small ? "2" : "1", x2: "9", y2: small ? "8" : "9" })), h("svg", { class: "ic-switch-icon", "aria-hidden": "true", focusable: "false", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { class: "ic-switch-icon-circle", fill: "none", cx: "5", cy: "5", r: small ? "3.335" : "4.445" }))), h("slot", { name: "right-adornment" }), showState && (h("ic-typography", { "aria-hidden": "true", variant: "label", class: "ic-switch-checked-status" }, checkedState ? "On" : "Off")))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/ic-switch.entry.js.map

@@ -1 +1 @@
-{"file":"ic-switch.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","./src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 10px;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 64px;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: 1px solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 21.33px;\n  height: 21.33px;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 5.33px;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 10px;\n  height: 10px;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: 1px dashed var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-background);\n  border: 1px dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 6px;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: true,\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  /**\n   * Applies an aria-label to the component, for when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If true, the component is checked, if null the components state will be uncontrolled.\n   */\n  @Prop() checked?: boolean | null = null;\n  /**\n   * If true, the component reduces in size to the small state.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If true, the component is not interactive.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n  /**\n   * If true, the component will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @State() checkedState: boolean = false;\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      checked,\n      checkedState,\n      small,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    const internalChecked = checked == null ? checkedState : checked;\n\n    renderHiddenInput(\n      true,\n      this.el,\n      name,\n      internalChecked ? value : \"\",\n      disabled\n    );\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: small,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: small,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={internalChecked}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={internalChecked ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={small ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={small ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {internalChecked ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-switch.entry.js","mappings":"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","names":[],"sources":["./src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","./src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["@import \"../../global/normalise.css\";\n\n:host {\n  display: inline-block;\n}\n\ninput {\n  overflow: hidden;\n  appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--ic-space-xxs);\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-sm);\n}\n\n.ic-switch-label-small {\n  margin-bottom: 10px;\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 64px;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-architectural-200);\n  border: 1px solid var(--ic-architectural-700);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-checked-status {\n  padding-left: var(--ic-space-xxs);\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 21.33px;\n  height: 21.33px;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 5.33px;\n  transform: translate(0, -50%);\n  background-color: var(--ic-architectural-700);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 10px;\n  height: 10px;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-architectural-700);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-architectural-white);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-action-default);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-dark-bg-active);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 12px var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: 0 0 0 1px var(--ic-architectural-white),\n    0 0 0 3px var(--ic-action-default),\n    0 0 0 8px var(--ic-action-default-active-alpha);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-architectural-300);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-action-default-bg-active);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-architectural-80);\n  border: 1px dashed var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled ~ .ic-switch-checked-status {\n  color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-300);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-status-info-background);\n  border: 1px dashed #98c9f5;\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-architectural-white);\n}\n\n.ic-switch-small {\n  gap: var(--ic-space-xxxs);\n}\n\n.ic-switch-small .ic-switch-checked-status {\n  padding-left: 6px;\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted(*) {\n  margin-left: var(--ic-space-sm);\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\n\nlet inputIds = 0;\n\n/**\n * @slot right-adornment - Content is placed to the right of switch before state label.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: true,\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  /**\n   * Applies an aria-label to the component, for when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * Hides the label and applies the required label value as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n  /**\n   * Provide helper text to display additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n  /**\n   * If true, the component is checked.\n   */\n  @Prop() checked?: boolean = false;\n  /**\n   * If true, the component reduces in size to the small state.\n   */\n  @Prop() small?: boolean = false;\n  /**\n   * If true, the component is not interactive.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n  /**\n   * If true, the component will render the On/Off state text.\n   */\n  @Prop() showState?: boolean = false;\n\n  /**\n   * The value of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked;\n  };\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked;\n    addFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  render() {\n    const {\n      label,\n      checkedState,\n      small,\n      disabled,\n      name,\n      showState,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n    } = this;\n\n    renderHiddenInput(true, this.el, name, checkedState ? value : \"\", disabled);\n\n    const describedBy = getInputDescribedByText(\n      inputId,\n      helperText !== \"\",\n      false\n    );\n\n    return (\n      <Host>\n        <label\n          class={{\n            [\"ic-switch-container\"]: true,\n            [\"ic-switch-disabled\"]: disabled,\n            [\"ic-switch-small\"]: small,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={true}\n              disabled={disabled}\n              class={{\n                [\"ic-switch-label\"]: true,\n                [\"ic-switch-label-small\"]: small,\n              }}\n            ></ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={describedBy}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={small ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={small ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={small ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n          {showState && (\n            <ic-typography\n              aria-hidden=\"true\"\n              variant=\"label\"\n              class=\"ic-switch-checked-status\"\n            >\n              {checkedState ? \"On\" : \"Off\"}\n            </ic-typography>\n          )}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-tab-context.entry.js

@@ -20,11 +20,12 @@ const TabContext = class {
         this.tabPanels[index].panelId = shared;
         this.tabPanels[index].tabPosition = index;
         this.tabPanels[index].setAttribute("aria-labelledby", tabId);
-        if (this.appearance === IcThemeForegroundEnum.Dark) {
+        if (this.appearance === IcThemeForegroundEnum.Light) {
           tab.appearance = this.appearance;
+          this.tabPanels[index].appearance = this.appearance;
         }
       });
-      if (this.appearance === IcThemeForegroundEnum.Dark) {
+      if (this.appearance === IcThemeForegroundEnum.Light) {
         this.tabGroup.appearance = this.appearance;
       }
     };
@@ -175,7 +176,7 @@ const TabContext = class {
     this.contextId = "default";
     this.activationType = "automatic";
     this.selectedTabIndex = undefined;
-    this.appearance = "light";
+    this.appearance = "dark";
     this.selectedTab = undefined;
   }
   updateSelectedTab(newValue) {