@ukic/web-components 3.20.0 → 3.21.0

package/dist/cjs/ic-pagination-item.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-pagination-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,4tLAA4tL,CAAC;AACzvL,+BAAe,mBAAmB;;MCkBrB,cAAc;IAL3B;;;;;;QAaU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,UAAK,GAAY,MAAM,CAAC;;;;QAUxB,eAAU,GAAa,KAAK,CAAC;;;;QAU7B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,UAAK,GAAiB,SAAS,CAAC;QAiBhC,gBAAW,GAAG;YACpB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SAC5D,CAAC;KAmEH;IAtHC,oBAAoB;QAClBA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAQD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAGC,kBAAU,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;KACjD;IAgCD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzBD,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAMD,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,GAAG,IAAI,CAAC;QAET,QACEE,gEAAG,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC,UAAU,EAAE,IACvC,IAAI,KAAK,UAAU,IAClBA,iBACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,UAAU,GAAG,IAAI;gBAClB,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,IAEDA,2BAAe,OAAO,EAAC,OAAO,UAAoB,CAC9C,IACJ,IAAI,KAAK,MAAM,IACjBA,oBACE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,GAAG,EAC/B,IAAI,EAAC,QAAQ,kBACC,QAAQ,IAAI,MAAM,gBAE9B,QAAQ,GAAG,GAAG,KAAK,KAAK,IAAI,EAAE,GAAG,SAAS,KAAK,IAAI,IAAI,EAAE,EAE3D,KAAK,EAAE;gBACL,CAAC,UAAU,GAAG,CAAC,QAAQ,IAAI,QAAQ;gBACnC,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;gBACxB,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,MAAM,GAAG,IAAI,KAAK,MAAM;aAC1B,IAEDA,2BACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,QAAQ;gBAC3B,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,IAEA,IAAI,CACS,CACT,KAETA,wCACY,QAAQ,EAClB,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,EACD,OAAO,EAAC,OAAO,IAEd,gBAAgB,OAAG,IAAI,CACV,CACjB,CACC,EACJ;KACH;;;;;;;;;;;","names":["removeDisabledFalse","capitalize","h"],"sources":["src/components/ic-pagination-item/ic-pagination-item.css?tag=ic-pagination-item&encapsulation=shadow","src/components/ic-pagination-item/ic-pagination-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\na {\n  text-align: center;\n}\n\n.item-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: calc(var(--ic-space-xl) + var(--ic-space-sm));\n  height: var(--ic-space-xl);\n  margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  background: none;\n  border: none;\n  outline: inherit;\n  position: relative;\n}\n\n.ellipsis {\n  pointer-events: none;\n\n  --ic-typography-color: var(--ic-pagination-ellipsis);\n}\n\n.monochrome .ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome);\n}\n\n.item-container:focus {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.page {\n  --ic-typography-color: var(--ic-pagination-page-number);\n}\n\n.monochrome .page {\n  --ic-typography-color: var(--ic-pagination-page-number-monochrome);\n}\n\n.simple-current {\n  min-width: calc(var(--ic-space-xxl) + var(--ic-space-md));\n  height: var(--ic-space-lg);\n  cursor: default;\n}\n\n/** DEFAULT STATES **/\n.item-container.page:hover:not(.selected):not(:focus) {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-pagination-hover);\n}\n\n.item-container.page:active:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-pressed);\n}\n\n.monochrome .item-container.page:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-hover-monochrome);\n}\n\n.monochrome .item-container.page:active:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-pressed-monochrome);\n}\n\n.selected {\n  pointer-events: none;\n  outline: none;\n}\n\n.selected::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-pagination-selected-banner);\n}\n\n.monochrome .selected::after {\n  background-color: var(--ic-pagination-selected-banner-monochrome);\n}\n\n.page-selected {\n  --ic-typography-color: var(--ic-pagination-text);\n}\n\n/** LIGHT STATES **/\n.item-container.page.light:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-hover);\n}\n\n.item-container.page.light:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\nic-typography.light,\nic-typography.page-selected.light {\n  --ic-typography-color: var(--ic-architectural-white);\n}\n\n.selected.light::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-monochrome);\n}\n\n/** DARK STATES **/\n.item-container.page.dark:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.item-container.page.dark:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\nic-typography.dark {\n  --ic-typography-color: var(--ic-color-text-primary);\n}\n\n.selected.dark::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-monochrome-dark);\n}\n\n.disabled {\n  --ic-typography-color: var(--ic-pagination-text-disabled);\n\n  pointer-events: none;\n  cursor: none;\n  user-select: none;\n}\n\n.disabled.page ic-typography {\n  --ic-typography-color: var(--ic-pagination-page-number-disabled);\n}\n\n.disabled.ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-disabled);\n}\n\n.monochrome .disabled.page {\n  --ic-typography-color: var(--ic-pagination-page-number-monochrome-disabled);\n}\n\n.monochrome .disabled.ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome-disabled);\n}\n\n@media (forced-colors: active) {\n  .selected::after {\n    background-color: Highlight;\n  }\n\n  .selected.light::after {\n    background-color: Highlight;\n  }\n\n  .selected.dark::after {\n    background-color: Highlight;\n  }\n\n  .disabled {\n    --ic-typography-color: GrayText;\n  }\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  @State() capitalizedLabel: string;\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label?: string = \"Page\";\n\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    this.capitalizedLabel = capitalize(this.label!);\n  }\n\n  /**\n   * If `true`, the pagination item will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The current page number.\n   */\n  @Prop() page?: number;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number | null }>;\n\n  componentWillLoad(): void {\n    this.watchLabelHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page || null });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      label,\n      capitalizedLabel,\n      monochrome,\n    } = this;\n\n    return (\n      <a class={{ [\"monochrome\"]: !!monochrome }}>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n          >\n            <ic-typography variant=\"label\">...</ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"page\"}\n            aria-label={\n              selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n            }\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: !!disabled,\n              [\"item-container\"]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: !!disabled,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            class={{\n              [`simple-current`]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n            variant=\"label\"\n          >\n            {capitalizedLabel} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-pagination-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,mBAAmB,GAAG,2yLAA2yL,CAAC;AACx0L,+BAAe,mBAAmB;;MCkBrB,cAAc;IAL3B;;;;;;QAaU,aAAQ,GAAa,KAAK,CAAC;;;;QAS3B,UAAK,GAAY,MAAM,CAAC;;;;QAUxB,eAAU,GAAa,KAAK,CAAC;;;;QAU7B,aAAQ,GAAY,KAAK,CAAC;;;;QAK1B,UAAK,GAAiB,SAAS,CAAC;QAiBhC,gBAAW,GAAG;YACpB,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,IAAI,EAAE,CAAC,CAAC;SAC5D,CAAC;KAmEH;IAtHC,oBAAoB;QAClBA,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAQD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,GAAGC,kBAAU,CAAC,IAAI,CAAC,KAAM,CAAC,CAAC;KACjD;IAgCD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzBD,2BAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;KAC7C;IAMD,MAAM;QACJ,MAAM,EACJ,IAAI,EACJ,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,gBAAgB,EAChB,UAAU,GACX,GAAG,IAAI,CAAC;QAET,QACEE,gEAAG,KAAK,EAAE,EAAE,CAAC,YAAY,GAAG,CAAC,CAAC,UAAU,EAAE,IACvC,IAAI,KAAK,UAAU,IAClBA,iBACE,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,UAAU,GAAG,IAAI;gBAClB,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,IAEDA,2BAAe,OAAO,EAAC,OAAO,UAAoB,CAC9C,IACJ,IAAI,KAAK,MAAM,IACjBA,oBACE,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,GAAG,EAC/B,IAAI,EAAC,QAAQ,kBACC,QAAQ,IAAI,MAAM,gBAE9B,QAAQ,GAAG,GAAG,KAAK,KAAK,IAAI,EAAE,GAAG,SAAS,KAAK,IAAI,IAAI,EAAE,EAE3D,KAAK,EAAE;gBACL,CAAC,UAAU,GAAG,CAAC,QAAQ,IAAI,QAAQ;gBACnC,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;gBACxB,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,MAAM,GAAG,IAAI,KAAK,MAAM;aAC1B,IAEDA,2BACE,OAAO,EAAC,OAAO,EACf,KAAK,EAAE;gBACL,CAAC,eAAe,GAAG,QAAQ;gBAC3B,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,IAEA,IAAI,CACS,CACT,KAETA,wCACY,QAAQ,EAClB,KAAK,EAAE;gBACL,CAAC,gBAAgB,GAAG,IAAI;gBACxB,CAAC,UAAU,GAAG,CAAC,CAAC,QAAQ;aACzB,EACD,OAAO,EAAC,OAAO,IAEd,gBAAgB,OAAG,IAAI,CACV,CACjB,CACC,EACJ;KACH;;;;;;;;;;;","names":["removeDisabledFalse","capitalize","h"],"sources":["src/components/ic-pagination-item/ic-pagination-item.css?tag=ic-pagination-item&encapsulation=shadow","src/components/ic-pagination-item/ic-pagination-item.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\na {\n  text-align: center;\n}\n\n.item-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: calc(var(--ic-space-xl) + var(--ic-space-sm));\n  height: var(--ic-space-xl);\n  margin: var(--ic-space-xxs) var(--ic-space-xxxs);\n  cursor: pointer;\n  text-decoration: none;\n}\n\nbutton {\n  background: none;\n  border: none;\n  outline: inherit;\n  position: relative;\n}\n\n.ellipsis {\n  pointer-events: none;\n\n  --ic-typography-color: var(--ic-pagination-ellipsis);\n}\n\n.monochrome .ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome);\n}\n\n.item-container:focus {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  border-radius: var(--ic-border-radius);\n  transition: var(--ic-easing-transition-fast);\n}\n\n.page {\n  --ic-typography-color: var(--ic-pagination-page-number);\n}\n\n.monochrome .page {\n  --ic-typography-color: var(--ic-pagination-page-number-monochrome);\n}\n\n.simple-current {\n  min-width: calc(var(--ic-space-xxl) + var(--ic-space-md));\n  height: var(--ic-space-lg);\n  cursor: default;\n}\n\n/** DEFAULT STATES **/\n.item-container.page:hover:not(.selected):not(:focus) {\n  border-radius: var(--ic-border-radius);\n  background-color: var(--ic-pagination-hover);\n}\n\n.item-container.page:active:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-pressed);\n}\n\n.monochrome .item-container.page:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-hover-monochrome);\n}\n\n.monochrome .item-container.page:active:not(.selected):not(:focus) {\n  background-color: var(--ic-pagination-pressed-monochrome);\n}\n\n.selected {\n  pointer-events: none;\n  outline: none;\n}\n\n.selected::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-pagination-selected-banner);\n}\n\n.monochrome .selected::after {\n  background-color: var(--ic-pagination-selected-banner-monochrome);\n}\n\n.page-selected {\n  --ic-typography-color: var(--ic-pagination-text);\n}\n\n/** LIGHT STATES **/\n.item-container.page.light:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-hover);\n}\n\n.item-container.page.light:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-light-bg-pressed);\n}\n\nic-typography.light,\nic-typography.page-selected.light {\n  --ic-typography-color: var(--ic-architectural-white);\n}\n\n.selected.light::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-monochrome);\n}\n\n/** DARK STATES **/\n.item-container.page.dark:hover:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\n.item-container.page.dark:active:not(.selected):not(:focus) {\n  background-color: var(--ic-action-dark-bg-pressed);\n}\n\nic-typography.dark {\n  --ic-typography-color: var(--ic-color-text-primary);\n}\n\n.selected.dark::after {\n  content: \"\";\n  height: var(--ic-space-xxs);\n  width: 100%;\n  position: absolute;\n  bottom: 0;\n  background-color: var(--ic-action-monochrome-dark);\n}\n\n.disabled {\n  --ic-typography-color: var(--ic-pagination-text-disabled);\n\n  pointer-events: none;\n  cursor: none;\n  user-select: none;\n}\n\n.disabled.page ic-typography {\n  --ic-typography-color: var(--ic-pagination-page-number-disabled);\n}\n\n.disabled.ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-disabled);\n}\n\n.monochrome .disabled.page {\n  --ic-typography-color: var(--ic-pagination-page-number-monochrome-disabled);\n}\n\n.monochrome .disabled.ellipsis {\n  --ic-typography-color: var(--ic-pagination-ellipsis-monochrome-disabled);\n}\n\n@media (forced-colors: active) {\n  .selected::after {\n    background-color: Highlight;\n  }\n\n  .selected.light::after {\n    background-color: Highlight;\n  }\n\n  .selected.dark::after {\n    background-color: Highlight;\n  }\n\n  .disabled {\n    --ic-typography-color: GrayText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .item-container:focus {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Element,\n  h,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport { IcPaginationItemType } from \"./ic-pagination-item.types\";\nimport { IcThemeMode } from \"../../utils/types\";\nimport { removeDisabledFalse, capitalize } from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-pagination-item\",\n  styleUrl: \"ic-pagination-item.css\",\n  shadow: true,\n})\nexport class PaginationItem {\n  @Element() el: HTMLIcPaginationItemElement;\n\n  @State() capitalizedLabel: string;\n\n  /**\n   * If `true`, the pagination item will be disabled.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The label for the pagination item (applicable when simple pagination is being used).\n   */\n  @Prop() label?: string = \"Page\";\n\n  @Watch(\"label\")\n  watchLabelHandler(): void {\n    this.capitalizedLabel = capitalize(this.label!);\n  }\n\n  /**\n   * If `true`, the pagination item will display as black in the light theme, and white in dark theme.\n   */\n  @Prop() monochrome?: boolean = false;\n\n  /**\n   * The current page number.\n   */\n  @Prop() page?: number;\n\n  /**\n   * If `true`, the pagination item will be selected.\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The type of pagination item - 'page' or 'ellipsis'.\n   */\n  @Prop() type: IcPaginationItemType;\n\n  /**\n   * @internal - Emitted when a pagination item is clicked.\n   */\n  @Event() paginationItemClick: EventEmitter<{ page: number | null }>;\n\n  componentWillLoad(): void {\n    this.watchLabelHandler();\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  private handleClick = () => {\n    this.paginationItemClick.emit({ page: this.page || null });\n  };\n\n  render() {\n    const {\n      page,\n      selected,\n      type,\n      disabled,\n      label,\n      capitalizedLabel,\n      monochrome,\n    } = this;\n\n    return (\n      <a class={{ [\"monochrome\"]: !!monochrome }}>\n        {type === \"ellipsis\" ? (\n          <div\n            class={{\n              [\"item-container\"]: true,\n              [\"ellipsis\"]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n          >\n            <ic-typography variant=\"label\">...</ic-typography>\n          </div>\n        ) : type === \"page\" ? (\n          <button\n            disabled={disabled}\n            onClick={this.handleClick}\n            tabindex={selected ? \"-1\" : \"0\"}\n            role=\"button\"\n            aria-current={selected && \"page\"}\n            aria-label={\n              selected ? `${label}: ${page}` : `Go to ${label} ${page}`\n            }\n            class={{\n              [\"selected\"]: !disabled && selected,\n              [\"disabled\"]: !!disabled,\n              [\"item-container\"]: true,\n              [\"page\"]: type === \"page\",\n            }}\n          >\n            <ic-typography\n              variant=\"label\"\n              class={{\n                [\"page-selected\"]: selected,\n                [\"disabled\"]: !!disabled,\n              }}\n            >\n              {page}\n            </ic-typography>\n          </button>\n        ) : (\n          <ic-typography\n            aria-live=\"polite\"\n            class={{\n              [`simple-current`]: true,\n              [\"disabled\"]: !!disabled,\n            }}\n            variant=\"label\"\n          >\n            {capitalizedLabel} {page}\n          </ic-typography>\n        )}\n      </a>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-pagination.cjs.entry.js

@@ -286,14 +286,14 @@ const Pagination = class {
     }
     render() {
         const { type, currentPage, hideCurrentPage, disabled, hideFirstAndLastPageButton, label, theme, monochrome, } = this;
-        return (index.h(index.Host, { key: '06b3adf0d59e3e20e2192fa3836d13c4577003fe', class: {
+        return (index.h(index.Host, { key: 'cefb3137892be2304c041ca32ca118268f8ccb07', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-pagination-monochrome"]: !!monochrome,
-            } }, type === "simple" && (index.h("nav", { key: '75f6cfc6bd708870bb6dd4e6b1d44ab63f9f3bf5', class: {
+            } }, type === "simple" && (index.h("nav", { key: '9a1d8230be41cb26b31bb8af066a32e9b64e0d89', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), index.h("ic-pagination-item", { key: '24ddac40513c65ac26604271f6a1ab268f107dfe', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("nav", { key: '5c864426c60fced527cf6457aded27e8c29fd26f', class: {
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), index.h("ic-pagination-item", { key: '577b9b9894ce6ddc2cf02381729600e4284e8912', theme: this.theme, monochrome: this.monochrome, type: "simple-current", page: currentPage, label: label, class: { ["hide-current-page"]: !!hideCurrentPage }, disabled: disabled }), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("nav", { key: '317d507ca76549e3c980ced7d01332504738a102', class: {
                 ["disabled"]: !!disabled,
-            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("span", { key: '52bb61a07010197513bd02b450b79895cb80030c', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
+            }, role: "navigation", "aria-label": this.accessibleLabel }, hideFirstAndLastPageButton ? null : this.firstButton(), this.previousButton(), this.renderStartItems(), this.startEllipsis && this.renderStartEllipsis(), this.renderMiddleItems(), this.endEllipsis && this.renderEndEllipsis(), this.renderEndItems(), this.nextButton(), hideFirstAndLastPageButton ? null : this.lastButton())), type === "complex" && (index.h("span", { key: '6d3a5778f4704dd5ec1e74bf2cf236143c5f7e7c', class: "sr-only", "aria-live": "polite" }, "Page ", this.currentPage))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/ic-popover-menu.cjs.entry.js

@@ -284,17 +284,17 @@ const PopoverMenu = class {
         this.popperProps = props;
     }
     render() {
-        return (index.h(index.Host, { key: '4ef24b6cdb06b7310453f5b7815a90dad11dbe3d', class: {
+        return (index.h(index.Host, { key: '8ab9e16a2208bdd2ce36933b62354a4cf36a1655', class: {
                 ["ic-popover-menu-open"]: !!this.open,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, index.h("div", { key: '702b1c1f8c9f549c9816a41590ba86057a0f4ad4', id: this.parentPopover === undefined
+            } }, index.h("div", { key: '2d234fdb7f0632ac7fe8080d32fd076b174bc43b', id: this.parentPopover === undefined
                 ? `ic-popover-submenu-${this.submenuId}`
                 : "", class: {
                 menu: true,
-            } }, index.h("span", { key: '6777fd3c177c8a67887815ef597b22837dfdc917', class: {
+            } }, index.h("span", { key: '4d92490bac8e470c989ebc736c7cb88beab07283', class: {
                 "opening-from-parent": this.openingFromParent,
                 "opening-from-child": this.openingFromChild,
-            } }, helpers.isPropDefined(this.submenuId) && (index.h("span", { key: '0808a5e51b16b599eb4feec009bfeb39cf9c2f7f' }, index.h("span", { key: '76e569a67762a01542e0271270e27e2bf122388b', role: "menu" }, index.h("ic-menu-item", { key: '00a64914d6ec8f0726b08aec4862ae575988d6ec', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, index.h("svg", { key: '874b65f60655314ea03b1315b5ad5dd0d6bf496d', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, index.h("path", { key: '0d74dd3aa63952a3daf4986b1dccf05132b142f7', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), index.h("ic-typography", { key: '7d591c914310ab15a98463320d325ae6ea08ecec', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), index.h("div", { key: 'b689e0b8e8a94e7add88ececc9a2e12ccaca9cb0', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, index.h("slot", { key: 'b4cd62991ab1173788e96b4e95736560de0fb912' }))))));
+            } }, helpers.isPropDefined(this.submenuId) && (index.h("span", { key: 'a86c2b55ce825077cafc58514d2fd9a67c00df49' }, index.h("span", { key: 'd05b38782f21d1667252fcb5dbfad6f2cbf266cb', role: "menu" }, index.h("ic-menu-item", { key: '7b607af7cb58bcc560d1d4b35a0b471515293be6', class: "ic-popover-submenu-back-button", ref: (el) => (this.backButton = el), label: "Back", onClick: this.handleBackButtonClick, id: `ic-popover-submenu-back-button-${this.submenuLevel}` }, index.h("svg", { key: 'ee6dd9b9e61fde3599aaf04b1061558d5a147b33', slot: "icon", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: "submenu-back-icon" }, index.h("path", { key: '03149b62b07f36182f7d70711b7f752041a6ad2d', d: "M20 11H7.83L13.42 5.41L12 4L4 12L12 20L13.41 18.59L7.83 13H20V11Z", fill: "currentColor" })))), index.h("ic-typography", { key: 'd30272951d72997bcc4fc4092f5428ba74c22c9b', variant: "subtitle-small", class: "parent-label" }, this.parentLabel))), index.h("div", { key: '85b7b75bd2ae9b2c57f6e790e09e3f0c364d6c9e', class: "menu-body", "aria-label": this.getMenuAriaLabel(), role: "menu" }, index.h("slot", { key: 'cce0bf0426bc4dfe89754e240c81f3d5ee50f96e' }))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/ic-radio-group.cjs.entry.js

@@ -238,16 +238,16 @@ const RadioGroup = class {
     render() {
         const { currentOrientation, disabled, handleKeyDown, helperText, hideLabel, label, required, size, validationAriaLive, validationStatus, validationText, theme, } = this;
         const showValidation = helpers.hasValidationStatus(validationStatus, disabled);
-        return (index.h(index.Host, { key: '25d850a9a73e2265885ff67613cd37cc53977035', onKeyDown: handleKeyDown, class: {
+        return (index.h(index.Host, { key: '0a0b04bb7266c3400e22dd26cdbde025b1bf8a72', onKeyDown: handleKeyDown, class: {
                 "ic-radio-group-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("fieldset", { key: '960443c48d0cb2effadd20aa779be9bbef59fc48', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (index.h("legend", { key: '592a145f2f9fbbcc167a441934a1f766f2c333be' }, index.h("ic-input-label", { key: '1179db21f6db7f58b33bb96155ab275e26ecf5e9', class: {
+            } }, index.h("fieldset", { key: '8d6fb8bcce4573ce461d09cf9a07783b95e47ab9', role: "radiogroup", id: this.name, "aria-required": `${required}` }, !hideLabel && (index.h("legend", { key: 'b9a0ff7e81c30100b137e35bdd6c24c71b00b385' }, index.h("ic-input-label", { key: '078b3ecfe62746c6e91a9f61435c56825b746a5e', class: {
                 [`${validationStatus}`]: true,
                 ["disabled"]: !!disabled,
-            }, label: label, helperText: helperText, required: required, disabled: disabled }, index.h("slot", { key: '52e567ae7f3ab59c7411ce2c0a5dcbdfdc551c29', name: "helper-text", slot: "helper-text" })))), index.h("div", { key: 'bf72aff8d51ae2a0f223f020ec9c69877a95b1fe', class: {
+            }, label: label, helperText: helperText, required: required, disabled: disabled }, index.h("slot", { key: '2b071159427e09d3e69945a2460283c32bcf7e97', name: "helper-text", slot: "helper-text" })))), index.h("div", { key: '7dac840c03547d56606dbc82031cc2b237b0600d', class: {
                 "radio-buttons-container": true,
                 horizontal: currentOrientation === this.RADIO_HORIZONTAL,
-            }, ref: (el) => (this.radioContainer = el) }, index.h("slot", { key: 'd849d16ff6abc505a8d282ff860784751c04c7ff' }))), index.h("ic-input-validation", { key: '9708482107b5d8614c01177f9d5ed60a03791d9e', class: {
+            }, ref: (el) => (this.radioContainer = el) }, index.h("slot", { key: '324a042d9a015f25d4e831617575830f02f5df08' }))), index.h("ic-input-validation", { key: '6cab446cc36cb7af4dc48e7ee4e13e72568bb571', class: {
                 "show-validation": showValidation,
             }, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }

package/dist/cjs/ic-radio-option.cjs.entry.js

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

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

@@ -1 +1 @@
-{"file":"ic-radio-option.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","removeFormResetListener","isSlotUsed","addFormResetListener","onComponentRequiredPropUndefined","slotHasContent","isPropDefined","h","Host"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([slot=\"additional-field\"]) {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n:host .radio-option-container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n:host(.ic-radio-option-small) .radio-option-container {\n  margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n:host .radio-option-container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n:host(.ic-radio-option-small) .radio-option-container input {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Create a custom radio button */\n:host .checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-radio-button-background-default);\n  border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n:host(.ic-radio-option-small) .checkmark {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Show the indicator (dot/circle) when checked */\n:host .radio-option-container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n:host .radio-option-container:hover input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n:host .radio-option-container:hover input:checked ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n:host\n  .radio-option-container:hover:not(.disabled)\n  input:checked\n  ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-container:active input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-container:active input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n:host(.ic-radio-option-small)\n  .radio-option-container\n  input:checked\n  ~ .checkmark {\n  border-width: var(--ic-space-1px);\n}\n\n/* When pressed and selected, adds the active colours */\n:host .radio-option-container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-pressed);\n}\n\n/* When the radio button is checked */\n:host .radio-option-container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/* When the radio button is checked and disabled */\n:host .radio-option-container input:checked:disabled ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n:host .radio-option-container input:disabled ~ .checkmark {\n  border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n:host .radio-option-container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n:host .radio-option-container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n}\n\n:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n  top: 50%;\n  left: 50%;\n  width: 0.625rem;\n  height: 0.625rem;\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n  transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n  margin-left: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n  margin-left: var(--ic-space-xs);\n}\n\n:host .additional-field-wrapper-static {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n:host .branch-corner {\n  color: var(--ic-radio-button-required-bar);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n  border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n:host .dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n  margin-left: 12px;\n}\n\n:host .dynamic-container.hidden {\n  display: none;\n}\n\n:host .dynamic-text {\n  color: var(--ic-radio-button-required-text);\n\n  --ic-typography-color: var(--ic-radio-button-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n  :host .additional-field-wrapper-static::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  :host .radio-option-container input:checked ~ .checkmark,\n  :host .radio-option-container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  :host .radio-option-container input:checked ~ .checkmark::after,\n  :host .radio-option-container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark,\n  :host .radio-option-container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark::after,\n  :host .radio-option-container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n\n/* Right to left */\n:host input[type=\"radio\"]:dir(rtl) {\n  right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  scoped: true,\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement?: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel?: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n  @Listen(\"icCheck\")\n  handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n    if (\n      this.additionalFieldDisplay === \"static\" &&\n      Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n        ev.target as HTMLIcRadioOptionElement\n      )\n    )\n      this.icCheck.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      'ic-text-field[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)\"\n    );\n\n    if (\n      !this.disabled &&\n      (!clickedAdditionalField || event.target === this.radioElement)\n    ) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement?.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField()?.value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n      theme,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{\n          [\"ic-radio-option-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-radio-option-small\"]:\n            this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n            this.el.parentElement?.className.includes(\"ic-radio-group-small\"),\n        }}\n      >\n        <div class={{ \"radio-option-container\": true, disabled: !!disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\" role=\"alert\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  [`additional-field-wrapper-${additionalFieldDisplay}`]: true,\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-radio-option.entry.cjs.js","mappings":"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","names":["removeDisabledFalse","removeFormResetListener","isSlotUsed","addFormResetListener","onComponentRequiredPropUndefined","slotHasContent","isPropDefined","h","Host"],"sources":["src/components/ic-radio-option/ic-radio-option.css?tag=ic-radio-option&encapsulation=scoped","src/components/ic-radio-option/ic-radio-option.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: flex;\n  flex-direction: column;\n  width: fit-content;\n}\n\n:host .additional-field-wrapper-static::slotted([slot=\"additional-field\"]) {\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-left: var(--ic-space-xl);\n}\n\n/* The label turns grey when disabled  */\n:host(.ic-radio-option-disabled),\n:host(.ic-radio-option-disabled) .radio-label {\n  --ic-typography-color: var(--ic-radio-button-text-option-disabled);\n}\n\n/* Focus states */\n:host .radio-option-container input:focus + span.checkmark,\n:host .radio-option-container:hover input:focus + span.checkmark,\n:host .radio-option-container:active input:focus + span.checkmark,\n:host(:focus) .radio-option-container input:checked + span.checkmark {\n  box-shadow: var(--ic-border-focus);\n}\n\n/* The container */\n:host .radio-option-container {\n  display: grid;\n  grid-template-columns: min-content auto;\n  position: relative;\n  cursor: pointer;\n  align-items: center;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n}\n\n:host(.ic-radio-option-small) .radio-option-container {\n  margin: 0 0 0 var(--ic-space-xxs);\n}\n\n:host .radio-option-container.disabled,\n:host .radio-option-container.disabled input:disabled {\n  cursor: default;\n}\n\n/* Hide the browser's default radio button */\n:host .radio-option-container input {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\n  display: inline-block;\n  position: absolute;\n  cursor: pointer;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  border-radius: 50%;\n  border: none;\n}\n\n:host(.ic-radio-option-small) .radio-option-container input {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Create a custom radio button */\n:host .checkmark {\n  display: block;\n  position: relative;\n  top: 0;\n  left: 0;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-lg);\n  background-color: var(--ic-radio-button-background-default);\n  border: var(--ic-space-1px) solid var(--ic-radio-button-border-default);\n  border-radius: 50%;\n  transition: var(--ic-easing-transition-fast);\n  box-sizing: border-box;\n}\n\n:host(.ic-radio-option-small) .checkmark {\n  height: var(--ic-space-md);\n  width: var(--ic-space-md);\n}\n\n/* Show the indicator (dot/circle) when checked */\n:host .radio-option-container input:checked ~ .checkmark::after {\n  display: inline-block;\n}\n\n/* On mouse-over, add a light blue background color */\n:host .radio-option-container:hover input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-hover);\n}\n\n:host .radio-option-container:hover input:checked ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-hover);\n  border: 0.125rem solid var(--ic-radio-button-default-hover);\n}\n\n:host\n  .radio-option-container:hover:not(.disabled)\n  input:checked\n  ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-hover);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-container:active input ~ .checkmark {\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n  border: var(--ic-border-width) solid var(--ic-radio-button-default-pressed);\n}\n\n/* When pressed, adds the active colours */\n:host .radio-option-container:active input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-pressed);\n  box-shadow: 0 0 0 0.25rem var(--ic-radio-button-active-pressed);\n}\n\n:host(.ic-radio-option-small)\n  .radio-option-container\n  input:checked\n  ~ .checkmark {\n  border-width: var(--ic-space-1px);\n}\n\n/* When pressed and selected, adds the active colours */\n:host .radio-option-container:active input:checked ~ .checkmark::after {\n  background-color: var(--ic-radio-button-default-pressed);\n}\n\n/* When the radio button is checked */\n:host .radio-option-container input:checked ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-default-active);\n}\n\n/* When the radio button is checked and disabled */\n:host .radio-option-container input:checked:disabled ~ .checkmark {\n  border: 0.125rem solid var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n:host .radio-option-container input:disabled ~ .checkmark {\n  border: var(--ic-border-width) dashed var(--ic-radio-button-border-disabled);\n}\n\n/* When the radio button is disabled */\n:host .radio-option-container input:disabled ~ .checkmark::after {\n  background: var(--ic-radio-button-disabled);\n}\n\n/* On mouse-over inactive */\n:host .radio-option-container:hover input:disabled ~ .checkmark {\n  box-shadow: none;\n  border: 0.125rem solid none;\n}\n\n:host .radio-option-container:active input:disabled ~ .checkmark::after {\n  background-color: var(--ic-radio-button-disabled);\n}\n\n/* Style the indicator (dot/circle) */\n:host .radio-option-container .checkmark::after {\n  content: \"\";\n  position: absolute;\n  display: none;\n  top: calc(50% - var(--ic-space-xs));\n  left: calc(50% - var(--ic-space-xs));\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n}\n\n:host(.ic-radio-option-small) .radio-option-container .checkmark::after {\n  top: 50%;\n  left: 50%;\n  width: 0.625rem;\n  height: 0.625rem;\n  border-radius: 50%;\n  background: var(--ic-radio-button-default-active);\n  transform: translate(-50%, -50%);\n}\n\n:host .radio-label {\n  margin-left: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-radio-button-text-option);\n}\n\n:host(.ic-radio-option-small) .radio-label {\n  margin-left: var(--ic-space-xs);\n}\n\n:host .additional-field-wrapper-static {\n  margin-left: var(--ic-space-xs);\n}\n\n/* The line */\n:host .branch-corner {\n  color: var(--ic-radio-button-required-bar);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-radio-button-required-bar);\n  border-left: 0.125rem solid var(--ic-radio-button-required-bar);\n  margin-left: calc(-1 * var(--ic-space-1px));\n}\n\n/* The dynamic container */\n:host .dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n:host(.ic-radio-option-small) .dynamic-container {\n  margin-left: 12px;\n}\n\n:host .dynamic-container.hidden {\n  display: none;\n}\n\n:host .dynamic-text {\n  color: var(--ic-radio-button-required-text);\n\n  --ic-typography-color: var(--ic-radio-button-required-text);\n\n  margin-top: calc(var(--ic-space-sm) / 2);\n  margin-bottom: var(--ic-space-xs);\n  border-radius: 2%;\n}\n\n@media (max-width: 576px) {\n  :host .additional-field-wrapper-dynamic::slotted(ic-text-field),\n  :host .additional-field-wrapper-static::slotted(ic-text-field) {\n    --input-width: 100%;\n  }\n}\n\n@media (forced-colors: active) {\n  /* Styles here only apply to Forced Colors Mode */\n\n  :host .radio-option-container input:checked ~ .checkmark,\n  :host .radio-option-container:active input:checked ~ .checkmark {\n    border-color: Highlight;\n  }\n\n  :host .radio-option-container input:checked ~ .checkmark::after,\n  :host .radio-option-container:active input:checked ~ .checkmark::after {\n    background-color: Highlight;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark,\n  :host .radio-option-container input:checked:disabled ~ .checkmark {\n    border-color: GrayText;\n  }\n\n  :host .radio-option-container input:disabled ~ .checkmark::after,\n  :host .radio-option-container:active input:disabled ~ .checkmark::after {\n    background-color: GrayText;\n  }\n}\n\n/* Right to left */\n:host input[type=\"radio\"]:dir(rtl) {\n  right: 0;\n}\n\n:host .radio-label:dir(rtl) {\n  padding-right: var(--ic-space-sm);\n  padding-left: 0;\n}\n\n:host .branch-corner:dir(rtl) {\n  border-radius: 0 0 0.188rem;\n  border-right: 0.125rem solid var(--ic-action-default);\n  border-left: none;\n}\n\n:host .dynamic-container:dir(rtl) {\n  margin: var(--ic-space-xxxs) var(--ic-space-sm) var(--ic-space-xxs) 0;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :host .checkmark {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  Listen,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcThemeMode,\n  IcValueEventDetail,\n} from \"../../utils/types\";\nimport {\n  onComponentRequiredPropUndefined,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\nconst ADDITIONAL_FIELD = \"additional-field\";\n\n/**\n * @slot additional-field - Content to displayed alongside a radio option.\n */\n@Component({\n  tag: \"ic-radio-option\",\n  scoped: true,\n  styleUrl: \"ic-radio-option.css\",\n})\nexport class RadioOption {\n  private defaultRadioValue: string = \"\";\n  private hasAdditionalField: boolean = false;\n  private radioElement?: HTMLInputElement;\n  private skipFocus = false;\n\n  @Element() el: HTMLIcRadioOptionElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay?: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the disabled state will be set.\n   */\n  @Prop() disabled?: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText?: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the radio with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the radio option.\n   */\n  @Prop() groupLabel?: string;\n\n  /**\n   * The label for the radio option.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The name for the radio option.\n   */\n  @Prop() name?: string;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the radio option.\n   */\n  @Prop({ mutable: true }) value!: string;\n\n  /**\n   * If `true`, the radio option will be displayed in a selected state.\n   */\n  @Prop({ reflect: true, mutable: true }) selected?: boolean = false;\n  @State() initiallySelected = this.selected;\n\n  @Watch(\"selected\")\n  watchSelectedHandler(): void {\n    this.icSelectedChange.emit();\n  }\n\n  /**\n   * Emitted when the radio option is selected.\n   */\n  @Event() icCheck: EventEmitter<IcValueEventDetail>;\n  @Listen(\"icCheck\")\n  handleCheck(ev: CustomEvent<IcValueEventDetail>): void {\n    if (\n      this.additionalFieldDisplay === \"static\" &&\n      Array.from(this.el.querySelectorAll(\"ic-radio-option\")).includes(\n        ev.target as HTMLIcRadioOptionElement\n      )\n    )\n      this.icCheck.emit({ value: this.value });\n  }\n\n  /**\n   * Emitted when the radio option is selected or deselected.\n   */\n  @Event() icSelectedChange: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    if (isSlotUsed(this.el, ADDITIONAL_FIELD)) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    }\n\n    this.defaultRadioValue = this.value;\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.value, propName: \"value\" }],\n      \"Radio Option\"\n    );\n  }\n\n  componentWillRender(): void {\n    const hasSlot = slotHasContent(this.el, ADDITIONAL_FIELD);\n    if (hasSlot && !this.hasAdditionalField) {\n      this.hasAdditionalField = true;\n      this.getAdditionalField();\n    } else if (!hasSlot && this.hasAdditionalField) {\n      this.hasAdditionalField = false;\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const additionalField = this.getAdditionalField();\n      if (!this.selected || this.disabled) {\n        additionalField?.setAttribute(\"disabled\", \"\");\n      } else {\n        additionalField?.removeAttribute(\"disabled\");\n      }\n    }\n  }\n\n  @Listen(\"icChange\")\n  additionalFieldValueHandler(event: CustomEvent<{ value: string }>): void {\n    if (this.selected) {\n      this.value = event.detail.value || this.defaultRadioValue;\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n\n    event.stopImmediatePropagation();\n  }\n\n  /**\n   * Sets focus on the radio option.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.radioElement?.focus();\n  }\n\n  /**\n   * @internal Sets the tabIndex of the radio option.\n   */\n  @Method()\n  async setTabIndex(value: number): Promise<void> {\n    this.radioElement?.setAttribute(\"tabIndex\", value.toString());\n  }\n\n  private getAdditionalField(): HTMLIcTextFieldElement {\n    const additionalField = this.el.querySelector(\n      'ic-text-field[slot=\"additional-field\"]'\n    ) as HTMLIcTextFieldElement;\n    if (additionalField) additionalField.hiddenInput = false;\n    return additionalField;\n  }\n\n  private handleClick = (event: MouseEvent) => {\n    const clickedAdditionalField = (event.target as Element).matches(\n      \".dynamic-container:not(ic-radio-option, .checkmark), .dynamic-container *:not(ic-radio-option, .checkmark)\"\n    );\n\n    if (\n      !this.disabled &&\n      (!clickedAdditionalField || event.target === this.radioElement)\n    ) {\n      event.stopPropagation();\n      if (this.skipFocus === false) {\n        this.radioElement?.focus();\n      }\n      this.skipFocus = false;\n\n      if (this.hasAdditionalField) {\n        this.value = this.getAdditionalField()?.value || this.defaultRadioValue;\n      }\n\n      this.icCheck.emit({\n        value: this.value,\n      });\n    }\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    const preventPropagationElements = [\"IC-DATE-INPUT\", \"IC-DATE-PICKER\"];\n\n    if (\n      this.getAdditionalField() == document.activeElement &&\n      preventPropagationElements.includes(this.getAdditionalField().nodeName)\n    ) {\n      event.stopPropagation();\n    }\n  };\n\n  private handleFormReset = (): void => {\n    this.skipFocus = true;\n    this.selected = this.initiallySelected;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      disabled,\n      dynamicText,\n      form,\n      groupLabel,\n      handleClick,\n      handleKeyDown,\n      hasAdditionalField,\n      label,\n      name,\n      selected,\n      value,\n      theme,\n    } = this;\n\n    const id = `ic-radio-option-${isPropDefined(label) || value}-${groupLabel}`;\n\n    return (\n      <Host\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        class={{\n          [\"ic-radio-option-disabled\"]: !!disabled,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [\"ic-radio-option-small\"]:\n            this.el.parentElement?.tagName === \"IC-RADIO-GROUP\" &&\n            this.el.parentElement?.className.includes(\"ic-radio-group-small\"),\n        }}\n      >\n        <div class={{ \"radio-option-container\": true, disabled: !!disabled }}>\n          <div>\n            <input\n              tabindex={selected ? \"0\" : \"-1\"}\n              type=\"radio\"\n              name={name}\n              id={id}\n              value={value}\n              disabled={disabled}\n              checked={selected}\n              ref={(el) => (this.radioElement = el)}\n              form={form}\n            ></input>\n            <span class=\"checkmark\"></span>\n          </div>\n          <ic-typography class=\"radio-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\n        </div>\n        {hasAdditionalField && (\n          <div\n            class={{\n              \"dynamic-container\": true,\n              hidden: additionalFieldDisplay === \"dynamic\" && !selected,\n            }}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\" role=\"alert\">\n                  <p class=\"dynamic-text\">{dynamicText}</p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  [`additional-field-wrapper-${additionalFieldDisplay}`]: true,\n                }}\n              >\n                <slot name={ADDITIONAL_FIELD}></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -15,7 +15,7 @@ const searchIcon = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none"
     <path d="M13.1292 11.8792H12.4708L12.2375 11.6542C13.0542 10.7042 13.5458 9.47083 13.5458 8.12916C13.5458 5.13749 11.1208 2.71249 8.12916 2.71249C5.13749 2.71249 2.71249 5.13749 2.71249 8.12916C2.71249 11.1208 5.13749 13.5458 8.12916 13.5458C9.47083 13.5458 10.7042 13.0542 11.6542 12.2375L11.8792 12.4708V13.1292L16.0458 17.2875L17.2875 16.0458L13.1292 11.8792ZM8.12916 11.8792C6.05416 11.8792 4.37916 10.2042 4.37916 8.12916C4.37916 6.05416 6.05416 4.37916 8.12916 4.37916C10.2042 4.37916 11.8792 6.05416 11.8792 8.12916C11.8792 10.2042 10.2042 11.8792 8.12916 11.8792Z" fill="currentColor"/>
 </svg>`;
 
-const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){display:block;--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xs);--border-color:var(--ic-search-bar-outline);--input-bg-color:var(--ic-search-bar-background);--border-color-disabled:var(--ic-search-bar-outline-disabled);--menu-item-text-color:var(--ic-search-bar-dropdown-option-text);--menu-item-desc-text-color:var(--ic-search-bar-dropdown-option-description);--menu-bg-color:var(--ic-search-bar-dropdown-background);--menu-border-color:var(--ic-search-bar-dropdown-outline)}:host(.ic-search-bar-disabled){--ic-input-label-text-color:var(--ic-search-bar-label-disabled);--ic-input-label-helper-text-color:var(--ic-search-bar-subtitle-disabled)}:host(.ic-search-bar-search:hover){--border-color:var(--ic-search-bar-outline-hover)}:host(.ic-search-bar-search:active){--border-color:var(--ic-search-bar-outline-pressed)}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}::-moz-placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}::placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}input{border:0;border-radius:var(--ic-border-radius);color:var(--ic-search-bar-filled-text);background-color:var(--input-bg-color);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(--ic-search-bar-filled-text-cursor)}input:focus{border:0;outline:0}input:disabled::-moz-placeholder{color:var(--ic-search-bar-disabled-text)}input:disabled,input:disabled::placeholder{color:var(--ic-search-bar-disabled-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.no-left-pad{padding-left:0}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button-unfocused *{fill:var(--ic-search-bar-clear-button)}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-unfocused *{fill:var(--ic-search-bar-filled-icon)}.search-submit-button-disabled *{fill:var(--ic-search-bar-icon-disabled)}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-search-bar-dropdown-divider);height:var(--divider-height)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}@media (forced-colors: active){.search-submit-button-unfocused *{fill:canvastext}.search-submit-button-disabled *{fill:GrayText}}@media screen AND (max-width: 22rem){.menu-container{max-width:var(--menu-width, var(--input-width, 20rem));width:100%}}";
+const icSearchBarCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host(.ic-search-bar-search){display:block;--divider-height:1.5rem;--ic-input-label-helpertext-padding:var(--ic-space-xs);--border-color:var(--ic-search-bar-outline);--input-bg-color:var(--ic-search-bar-background);--border-color-disabled:var(--ic-search-bar-outline-disabled);--menu-item-text-color:var(--ic-search-bar-dropdown-option-text);--menu-item-desc-text-color:var(--ic-search-bar-dropdown-option-description);--menu-bg-color:var(--ic-search-bar-dropdown-background);--menu-border-color:var(--ic-search-bar-dropdown-outline)}:host(.ic-search-bar-disabled){--ic-input-label-text-color:var(--ic-search-bar-label-disabled);--ic-input-label-helper-text-color:var(--ic-search-bar-subtitle-disabled)}:host(.ic-search-bar-search:hover){--border-color:var(--ic-search-bar-outline-hover)}:host(.ic-search-bar-search:active){--border-color:var(--ic-search-bar-outline-pressed)}:host(.ic-search-bar-search.ic-search-bar-small){--divider-height:1rem}:host(.ic-search-bar-full-width){width:100%}::-moz-placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}::placeholder{color:var(--ic-search-bar-placeholder-text);opacity:1}input{border:0;border-radius:var(--ic-border-radius);color:var(--ic-search-bar-filled-text);background-color:var(--input-bg-color);line-height:1.5rem;letter-spacing:0.005rem;width:100%;padding-right:var(--ic-space-xs);padding-left:var(--ic-space-xs);caret-color:var(--ic-search-bar-filled-text-cursor)}input:focus{border:0;outline:0}input:disabled::-moz-placeholder{color:var(--ic-search-bar-disabled-text)}input:disabled,input:disabled::placeholder{color:var(--ic-search-bar-disabled-text)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.no-left-pad{padding-left:0}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration,input[type=\"search\"]::-webkit-search-results-button,input[type=\"search\"]::-webkit-search-results-decoration{display:none}input[type=\"search\"].truncate-value{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.clear-button-container{align-items:center;margin-right:var(--ic-space-1px);display:none;visibility:hidden}.clear-button{border-radius:var(--ic-border-radius);transition:box-shadow var(--ic-easing-transition),\n    border-radius var(--ic-easing-transition)}.clear-button:focus,.clear-button:active{background-color:var(--ic-color-focus-inner);box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer);border-radius:0.25rem}.clear-button-unfocused *{fill:var(--ic-search-bar-clear-button)}.clear-button:focus,.clear-button:active *{fill:var(--ic-atoms-input-clear-button-focus)}.clear-button-visible{visibility:visible;display:flex}.search-submit-button-container{display:flex;align-items:center}.search-submit-button-unfocused *{fill:var(--ic-search-bar-filled-icon)}.search-submit-button-disabled *{fill:var(--ic-search-bar-icon-disabled)}.search-submit-button-disabled .ic-tooltip-container{display:none !important}.search-submit-button:focus,.search-submit-button:active{background-color:var(--ic-color-focus-inner) !important;box-shadow:inset 0 0 0 0.125rem var(--ic-color-focus-outer) !important;border-radius:var(--ic-space-xxs)}.search-submit-button:focus,.search-submit-button:active *{fill:white}.divider{width:var(--ic-border-width);background-color:var(--ic-search-bar-dropdown-divider);height:var(--divider-height)}.menu-container{width:var(--input-width, 20rem);position:relative;top:var(--ic-space-xxxs)}.menu-container.fullwidth{width:100%}.no-results{cursor:not-allowed}.search-results-status{border:0;clip:rect(0, 0, 0, 0, 0);height:var(--ic-space-1px);margin-bottom:calc(-1 * var(--ic-space-1px));margin-right:calc(-1 * var(--ic-space-1px));overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:var(--ic-space-1px)}@media (forced-colors: active){.search-submit-button-unfocused *{fill:canvastext}.search-submit-button-disabled *{fill:GrayText}}@media screen AND (max-width: 22rem){.menu-container{max-width:var(--menu-width, var(--input-width, 20rem));width:100%}}@media (prefers-reduced-motion: reduce){.clear-button{transition:none}}";
 const IcSearchBarStyle0 = icSearchBarCss;
 
 let inputIds = 0;
@@ -553,39 +553,39 @@ const SearchBar = class {
         const menuRendered = menuOpen && value.length >= charactersUntilSuggestion;
         const labelValue = helpers.getLabelFromValue(value, options, valueField, labelField);
         helpers.renderHiddenInput(this.el, value, name, disabledMode);
-        return (index.h(index.Host, { key: '97932f66827d3d1aa3e41ca8aa15e8bdb1ad5518', class: {
+        return (index.h(index.Host, { key: 'a157a6642fdbf3b08a6e3715ed4b3caf2a4a2cc3', class: {
                 "ic-search-bar-search": true,
                 "ic-search-bar-full-width": fullWidth,
                 "ic-search-bar-disabled": disabled,
                 "ic-search-bar-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, index.h("ic-input-container", { key: '3fc6cebca3191c6e19e523e4273f4ad7cfd39ea4', readonly: readonly, disabled: disabledMode }, !hideLabel && (index.h("ic-input-label", { key: '453ef1b4a73227f5525e386100ba4d09fc75a1a0', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, index.h("slot", { key: 'd72a6705f4e98030a9af02c832478ecb3cd11570', name: "helper-text", slot: "helper-text" }))), index.h("ic-input-component-container", { key: 'e0ae23eaa33e7194eec066a1e72050b91be3cdd5', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, index.h("input", { key: 'ed239f98bcc086b05bbb14c43154aee3f7c2c76e', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
+            }, onFocus: this.handleHostFocus, onBlur: this.handleHostBlur }, index.h("ic-input-container", { key: '2505f6cacc6484e069a4550443c316c1c0969835', readonly: readonly, disabled: disabledMode }, !hideLabel && (index.h("ic-input-label", { key: 'aa4f12f89adfba413e723ef51d39d1c9d455d462', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledMode && !readonly, readonly: readonly }, index.h("slot", { key: '166a66746961e4dd48d17f7896f63322c0398391', name: "helper-text", slot: "helper-text" }))), index.h("ic-input-component-container", { key: '9c64fed1a8540b98441ede3bcb50e7004e576206', ref: (el) => (this.anchorEl = el), size: size, disabled: disabledMode, readonly: readonly, fullWidth: fullWidth }, index.h("input", { key: '9d2de773bf2bf546dbc521766886f72910054d15', id: inputId, name: name, ref: (el) => (this.inputEl = el), value: options && !!labelValue ? labelValue : value, class: {
                 "no-left-pad": readonly,
                 readonly,
                 "truncate-value": truncateValue,
-            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), index.h("div", { key: 'ed272c63c361866a3c096a4ed63e94582d4fcdf8', class: {
+            }, placeholder: placeholder, required: required, disabled: disabledMode, readonly: readonly, onInput: this.onInput, onBlur: this.onInputBlur, onFocus: this.onInputFocus, "aria-label": hideLabel ? label : undefined, "aria-activedescendant": ariaActiveDescendant, "aria-expanded": options.length > 0 && menuRendered ? `${menuOpen}` : undefined, "aria-owns": menuRendered ? menuId : undefined, "aria-describedby": describedById, "aria-controls": menuRendered ? menuId : undefined, "aria-haspopup": options.length > 0 ? "listbox" : undefined, "aria-autocomplete": hasSuggestedSearch ? "list" : undefined, role: options.length > 0 && menuRendered ? "combobox" : undefined, autocomplete: autocomplete, autocapitalize: autocapitalize, autoFocus: autofocus, spellcheck: spellcheck, inputmode: "search" }), index.h("div", { key: 'fce57d94b8c5d5f5cd10dbca9d77f83775ef2e14', class: {
                 "clear-button-container": true,
                 "clear-button-visible": !!value && !disabledMode && showClearButton,
-            } }, index.h("ic-button", { key: '5e9c4058a68f853a552bfa0f2113858a275a365a', id: "clear-button", class: {
+            } }, index.h("ic-button", { key: '9f4c9508a7809f8803683b98cba337949ed7b075', id: "clear-button", class: {
                 "clear-button": true,
                 "clear-button-unfocused": !clearButtonFocused,
-            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), index.h("div", { key: '262820b10ac5df18f2b73fcb4aa0f1b3602c2c0f', class: "divider" })), index.h("div", { key: 'e0ff6496a2b2a703a3d87980893926dd4fdf543d', class: {
+            }, "aria-label": "Clear", innerHTML: clearIcon, onClick: this.handleClear, onMouseDown: this.handleMouseDown, size: size, onFocus: this.handleFocusClearButton, onBlur: this.handleClearBlur, onKeyDown: this.handleClear, type: "button", variant: "icon-tertiary", theme: clearButtonFocused ? "light" : "dark" }), index.h("div", { key: 'c8d3f7329e2c85efb0b15c69d25ef33066a078d7', class: "divider" })), index.h("div", { key: '9c2e7064fc15b9f95b79f42ebbbcfe0a86efa33a', class: {
                 "search-submit-button-container": true,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            } }, index.h("ic-button", { key: '4eefcd8121169df7b713df93cade880d0fcf5d60', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
+            } }, index.h("ic-button", { key: '6581d4240e0c61a2d351469ce42f4e5b073d5359', id: "search-submit-button", "aria-label": "Search", ref: (el) => (this.searchSubmitButton = el), class: {
                 "search-submit-button": true,
                 "search-submit-button-small": size === "small",
                 "search-submit-button-unfocused": !searchSubmitFocused,
                 "search-submit-button-disabled": this.isSubmitDisabled(),
-            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), index.h("div", { key: '1194a402978db78f8abbaa5e1127e6e1ce8d77d3', class: {
+            }, disabled: this.isSubmitDisabled(), innerHTML: searchIcon, size: size, onClick: this.handleSubmitSearch, onMouseDown: this.handleMouseDown, onBlur: this.handleSubmitSearchBlur, onFocus: this.handleSubmitSearchFocus, onKeyDown: this.handleSubmitSearchKeyDown, type: searchButtonType, variant: "icon-tertiary", theme: searchSubmitFocused ? "light" : "dark" }))), index.h("div", { key: '6c5e68dfdd233ffba7640a960e59b68a6e59f3ad', class: {
                 "menu-container": true,
                 fullwidth: fullWidth,
-            } }, menuRendered && this.anchorEl && this.inputEl && (index.h("ic-menu", { key: '1bf2856fb888425fd0b7f690e9f3389f9bb1ec9f', class: {
+            } }, menuRendered && this.anchorEl && this.inputEl && (index.h("ic-menu", { key: '15acc1549f899dc228da307d4dd2a1550a8482d4', class: {
                 "no-results": this.hadNoOptions() ||
                     (filteredOptions.length === 1 &&
                         (filteredOptions[0][labelField] === loadingLabel ||
                             filteredOptions[0][labelField] === loadingErrorLabel)),
-            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), index.h("div", { key: 'f3333622e515486aeb77de5e8c7061b02f8f19b6', "aria-live": "polite", role: "status", class: "search-results-status" })));
+            }, activationType: "manual", anchorEl: this.anchorEl, autofocusOnSelected: false, searchMode: searchMode, inputEl: this.inputEl, inputLabel: label, ref: (el) => (this.menu = el), fullWidth: fullWidth, menuId: menuId, open: true, options: filteredOptions, onMenuOptionSelect: this.handleOptionSelect, onMenuStateChange: this.handleMenuChange, onMenuOptionId: this.handleMenuOptionHighlight, onRetryButtonClicked: this.handleRetry, parentEl: this.el, value: value, labelField: labelField, valueField: valueField, searchBar: true })))), index.h("div", { key: '15460d9ef215264449cecc99c1d4f01d1dbc8598', "aria-live": "polite", role: "status", class: "search-results-status" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }