@ukic/web-components 3.24.0 → 3.26.0

package/dist/components/ic-switch.js.map

@@ -1 +1 @@
-{"file":"ic-switch.js","mappings":"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","names":[],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n\n  --ic-input-label-text-color: var(--ic-switch-label);\n  --ic-input-label-helper-text-color: var(--ic-switch-help-text);\n  --ic-input-label-helpertext-padding: var(--ic-space-xs);\n}\n\ninput {\n  overflow: hidden;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-label-small {\n  margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: 4rem;\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-switch-unchecked-bg);\n  border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n  margin-left: var(--ic-space-xxs);\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: 1.333rem;\n  height: 1.333rem;\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: 0.333rem;\n  transform: translate(0, -50%);\n  background-color: var(--ic-switch-unchecked);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: 0.625rem;\n  height: 0.625rem;\n}\n\n.ic-switch-icon-circle,\n.ic-switch-icon-line {\n  stroke-width: 1;\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off);\n}\n\n.ic-switch-icon-line {\n  stroke: var(--ic-switch-indicator-on);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle::before {\n    transition-duration: 0ms;\n  }\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-xl), -50%);\n  background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 0.75rem var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  stroke: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-switch-unchecked-bg-disabled);\n  border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg-disabled);\n  border: var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n  left: var(--ic-space-xxs);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(var(--ic-space-lg), -50%);\n}\n\n::slotted([slot=\"right-adornment\"]) {\n  margin-left: var(--ic-space-sm);\n  fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-switch-input:focus + .ic-switch-toggle {\n    border-color: highlight;\n    outline: var(--ic-space-xxxs) solid highlight;\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - 0.125rem), -50%);\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle,\n  .ic-switch-disabled .ic-switch-icon-line {\n    stroke: GrayText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle,\n  .ic-switch-toggle::before {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the switch.\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = !!this.checked;\n  }\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 helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\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 of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked!;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value!,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked!;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    const isSmall = size === \"small\";\n\n    renderHiddenInput(this.el, checkedState ? value : \"\", name, disabled);\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            \"ic-switch-container\": true,\n            \"ic-switch-disabled\": !!disabled,\n            \"ic-switch-small\": isSmall,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={false}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n                \"ic-switch-label-small\": isSmall,\n              }}\n            >\n              <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n            </ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={getInputDescribedByText(\n              this.el,\n              inputId,\n              helperText !== \"\",\n              false\n            )}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <line\n                class=\"ic-switch-icon-line\"\n                x1=\"9\"\n                y1={isSmall ? \"2\" : \"1\"}\n                x2=\"9\"\n                y2={isSmall ? \"8\" : \"9\"}\n              />\n            </svg>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 10 10\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"5\"\n                cy=\"5\"\n                r={isSmall ? \"3.335\" : \"4.445\"}\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-switch.js","mappings":"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","names":[],"sources":["src/components/ic-switch/ic-switch.css?tag=ic-switch&encapsulation=shadow","src/components/ic-switch/ic-switch.tsx"],"sourcesContent":["/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n     ========================================================================== */\n\n/**\n   * Remove the margin in all browsers.\n   */\n\nbody {\n  margin: 0;\n}\n\n/**\n   * Render the `main` element consistently in IE.\n   */\n\nmain {\n  display: block;\n}\n\n/**\n   * Correct the font size and margin on `h1` elements within `section` and\n   * `article` contexts in Chrome, Firefox, and Safari.\n   */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n     ========================================================================== */\n\n/**\n   * 1. Add the correct box sizing in Firefox.\n   * 2. Show the overflow in Edge and IE.\n   */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n     ========================================================================== */\n\n/**\n   * Remove the gray background on active links in IE 10.\n   */\n\na {\n  background-color: transparent;\n}\n\n/**\n   * 1. Remove the bottom border in Chrome 57-\n   * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n   */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted; /* 2 */\n}\n\n/**\n   * Add the correct font weight in Chrome, Edge, and Safari.\n   */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n   * 1. Correct the inheritance and scaling of font size in all browsers.\n   * 2. Correct the odd `em` font sizing in all browsers.\n   */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n   * Add the correct font size in all browsers.\n   */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n   * Prevent `sub` and `sup` elements from affecting the line height in\n   * all browsers.\n   */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n     ========================================================================== */\n\n/**\n   * Remove the border on images inside links in IE 10.\n   */\n\nimg {\n  border-style: none;\n}\n\n/* Forms\n     ========================================================================== */\n\n/**\n   * 1. Change the font styles in all browsers.\n   * 2. Remove the margin in Firefox and Safari.\n   */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n   * Show the overflow in IE.\n   * 1. Show the overflow in Edge.\n   */\n\nbutton,\ninput {\n  /* 1 */\n  overflow: visible;\n}\n\n/**\n   * Remove the inheritance of text transform in Edge, Firefox, and IE.\n   * 1. Remove the inheritance of text transform in Firefox.\n   */\n\nbutton,\nselect {\n  /* 1 */\n  text-transform: none;\n}\n\n/**\n   * Correct the inability to style clickable types in iOS and Safari.\n   */\n\nbutton,\n[type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button;\n}\n\n/**\n   * Remove the inner border and padding in Firefox.\n   */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n   * Restore the focus styles unset by the previous rule.\n   */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n   * Correct the padding in Firefox.\n   */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n   * 1. Correct the text wrapping in Edge and IE.\n   * 2. Correct the color inheritance from `fieldset` elements in IE.\n   * 3. Remove the padding so developers are not caught out when they zero out\n   *    `fieldset` elements in all browsers.\n   */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n   * Add the correct vertical alignment in Chrome, Firefox, and Opera.\n   */\n\nprogress {\n  vertical-align: baseline;\n}\n\n/**\n   * Remove the default vertical scrollbar in IE 10+.\n   */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n   * 1. Add the correct box sizing in IE 10.\n   * 2. Remove the padding in IE 10.\n   */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n   * Correct the cursor style of increment and decrement buttons in Chrome.\n   */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n   * 1. Correct the odd appearance in Chrome and Safari.\n   * 2. Correct the outline style in Safari.\n   */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n   * Remove the inner padding in Chrome and Safari on macOS.\n   */\n\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n   * 1. Correct the inability to style clickable types in iOS and Safari.\n   * 2. Change font properties to `inherit` in Safari.\n   */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n     ========================================================================== */\n\n/*\n   * Add the correct display in Edge, IE 10+, and Firefox.\n   */\n\ndetails {\n  display: block;\n}\n\n/*\n   * Add the correct display in all browsers.\n   */\n\nsummary {\n  display: list-item;\n}\n\n/* Misc\n     ========================================================================== */\n\n/**\n   * Add the correct display in IE 10+.\n   */\n\ntemplate {\n  display: none;\n}\n\n/**\n   * Add the correct display in IE 10.\n   */\n\n[hidden] {\n  display: none;\n}\n\nhtml,\nbody,\ndiv,\nspan,\napplet,\nobject,\niframe,\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\nblockquote,\npre,\na,\nabbr,\nacronym,\naddress,\nbig,\ncite,\ncode,\ndel,\ndfn,\nem,\nimg,\nins,\nkbd,\nq,\ns,\nsamp,\nsmall,\nstrike,\nstrong,\nsub,\nsup,\ntt,\nvar,\nb,\nu,\ni,\ncenter,\ndl,\ndt,\ndd,\nol,\nul,\nli,\nfieldset,\nform,\nlabel,\nlegend,\ntable,\ncaption,\ntbody,\ntfoot,\nthead,\ntr,\nth,\ntd,\narticle,\naside,\ncanvas,\ndetails,\nembed,\nfigure,\nfigcaption,\nfooter,\nheader,\nhgroup,\nmenu,\nnav,\noutput,\nruby,\nsection,\nsummary,\ntime,\nmark,\naudio,\nvideo {\n  margin: 0;\n  padding: 0;\n  border: 0;\n  font-size: 100%;\n  font-style: inherit;\n  vertical-align: baseline;\n}\n\n\n:host {\n  display: inline-block;\n\n  --ic-input-label-text-color: var(--ic-switch-label);\n  --ic-input-label-helper-text-color: var(--ic-switch-help-text);\n  --ic-input-label-helpertext-padding: var(--ic-space-xs);\n}\n\ninput {\n  overflow: hidden;\n  -webkit-appearance: none;\n     -moz-appearance: none;\n          appearance: none;\n}\n\n.ic-switch-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  cursor: pointer;\n}\n\n.ic-switch-label {\n  margin-left: var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xs);\n}\n\n.ic-switch-toggle {\n  display: flex;\n  align-items: center;\n  width: calc(var(--ic-space-xl) * 2);\n  height: var(--ic-space-xl);\n  position: relative;\n  border-radius: 100vw;\n  background-color: var(--ic-switch-unchecked-bg);\n  border: var(--ic-border-width) solid var(--ic-switch-unchecked);\n  box-sizing: border-box;\n  transition: var(--ic-transition-duration-fast);\n  margin-left: var(--ic-space-xxs);\n  gap: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.ic-switch-small .ic-switch-toggle {\n  width: var(--ic-space-xxl);\n  height: var(--ic-space-lg);\n  gap: calc(var(--ic-space-sm) + var(--ic-space-xxxs));\n}\n\n.ic-switch-large .ic-switch-toggle {\n  width: calc(var(--ic-space-xl) + var(--ic-space-xxl));\n  height: calc(var(--ic-space-xl) + var(--ic-space-xs));\n  gap: calc(var(--ic-space-lg) + var(--ic-space-xxs));\n}\n\n.ic-switch-line-break {\n  flex: 1 0 100%;\n}\n\n.ic-switch-toggle::before {\n  content: \"\";\n  width: calc(var(--ic-space-sm) * 2);\n  height: calc(var(--ic-space-sm) * 2);\n  border-radius: 50%;\n  position: absolute;\n  z-index: 2;\n  top: 50%;\n  left: var(--ic-space-xxs);\n  transform: translate(0, -50%);\n  background-color: var(--ic-switch-unchecked);\n  transition: var(--ic-transition-duration-slow);\n}\n\n.ic-switch-small .ic-switch-toggle::before {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.ic-switch-large .ic-switch-toggle::before {\n  width: var(--ic-space-xl);\n  height: var(--ic-space-xl);\n}\n\n.ic-switch-icon {\n  display: inline-block;\n  vertical-align: middle;\n  width: var(--ic-space-sm);\n  height: var(--ic-space-sm);\n}\n\n.ic-switch-small .ic-switch-icon {\n  width: var(--ic-space-xs);\n  height: var(--ic-space-xs);\n}\n\n.ic-switch-large .ic-switch-icon {\n  width: var(--ic-space-md);\n  height: var(--ic-space-md);\n}\n\n.ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off);\n  stroke-width: var(--ic-space-1px);\n}\n\n.ic-switch-icon-line {\n  height: var(--ic-space-sm);\n  width: var(--ic-space-1px);\n  background-color: var(--ic-switch-indicator-on);\n  border-radius: 99px;\n  margin-left: calc(\n    var(--ic-space-md) + var(--ic-space-xxs) - var(--ic-space-1px)\n  );\n}\n\n.ic-switch-small .ic-switch-icon-line {\n  margin-left: calc(var(--ic-space-md) - var(--ic-space-1px));\n  height: var(--ic-space-xs);\n}\n\n.ic-switch-large .ic-switch-icon-line {\n  margin-left: calc(\n    var(--ic-space-xs) + var(--ic-space-md) - var(--ic-space-1px)\n  );\n  height: var(--ic-space-md);\n}\n\n.ic-switch-input:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg);\n  border: none;\n}\n\n.ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(calc(var(--ic-space-xl) - var(--ic-space-1px)), -50%);\n  background-color: var(--ic-switch-checked);\n}\n\n.ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(calc(var(--ic-space-lg) - var(--ic-space-1px)), -50%);\n}\n\n.ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {\n  transform: translate(\n    calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-1px)),\n    -50%\n  );\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]) + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-unchecked-bg-pressed);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:hover::before {\n  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-hover);\n}\n\n.ic-switch-input:not([disabled]):checked + .ic-switch-toggle:active::before {\n  box-shadow: 0 0 0 var(--ic-space-sm) var(--ic-switch-checked-bg-pressed);\n}\n\n.ic-switch-input:focus:not([disabled]) + .ic-switch-toggle,\n.ic-switch-input:focus-visible:not([disabled]) + .ic-switch-toggle {\n  box-shadow: var(--ic-border-focus);\n}\n\n.ic-switch-disabled {\n  cursor: default;\n}\n\n.ic-switch-disabled .ic-switch-icon-circle {\n  stroke: var(--ic-switch-indicator-off-disabled);\n}\n\n.ic-switch-disabled .ic-switch-icon-line {\n  background-color: var(--ic-switch-indicator-on-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle {\n  background-color: var(--ic-switch-unchecked-bg-disabled);\n  border: var(--ic-space-1px) dashed var(--ic-switch-unchecked-outline-disabled);\n}\n\n.ic-switch-input:disabled + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-unchecked-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle {\n  background-color: var(--ic-switch-checked-bg-disabled);\n  border: var(--ic-border-width) dashed\n    var(--ic-switch-checked-outline-disabled);\n}\n\n.ic-switch-input:disabled:checked + .ic-switch-toggle::before {\n  background-color: var(--ic-switch-checked);\n}\n\n::slotted([slot=\"right-adornment\"]) {\n  margin-left: var(--ic-space-sm);\n  fill: var(--ic-switch-icon);\n}\n\n@media (forced-colors: active) {\n  .ic-switch-toggle::before {\n    width: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));\n    height: calc(var(--ic-space-sm) * 2 - var(--ic-space-xxxs));\n  }\n\n  .ic-switch-small .ic-switch-toggle::before {\n    width: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n    height: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n  }\n\n  .ic-switch-large .ic-switch-toggle::before {\n    width: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n    height: calc(var(--ic-space-xl) - var(--ic-space-xxxs));\n  }\n\n  .ic-switch-toggle::before,\n  .ic-switch-input:checked + .ic-switch-toggle {\n    border: var(--ic-border-hc);\n  }\n\n  .ic-switch-input:focus + .ic-switch-toggle {\n    border-color: highlight;\n    outline: var(--ic-space-xxxs) solid highlight;\n  }\n\n  .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-xl) - var(--ic-space-xxxs)), -50%);\n  }\n\n  .ic-switch-small .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(calc(var(--ic-space-lg) - var(--ic-space-xxxs)), -50%);\n  }\n\n  .ic-switch-large .ic-switch-input:checked + .ic-switch-toggle::before {\n    transform: translate(\n      calc(var(--ic-space-xxl) - var(--ic-space-xs) - var(--ic-space-xxxs)),\n      -50%\n    );\n  }\n\n  .ic-switch-input:disabled + .ic-switch-toggle,\n  .ic-switch-input:disabled:checked + .ic-switch-toggle,\n  .ic-switch-input:disabled + .ic-switch-toggle::before {\n    border-color: GrayText;\n  }\n\n  .ic-switch-icon-line {\n    background-color: buttonborder;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-circle {\n    stroke: GrayText;\n  }\n\n  .ic-switch-disabled .ic-switch-icon-line {\n    background-color: GrayText;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .ic-switch-toggle,\n  .ic-switch-toggle::before {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSwitchChangeEventDetail } from \"./ic-switch.types\";\nimport { IcSizes, IcThemeMode } from \"../../utils/types\";\n\nlet inputIds = 0;\n\n/**\n * @slot helper-text - Content is set as the helper text for the switch.\n * @slot right-adornment - Content is placed to the right of switch.\n */\n@Component({\n  tag: \"ic-switch\",\n  styleUrl: \"ic-switch.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Switch {\n  private inputId = `ic-switch-input-${inputIds++}`;\n\n  @Element() el: HTMLIcSwitchElement;\n\n  @State() checkedState: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the switch will display as checked.\n   */\n  @Prop() checked?: boolean = false;\n\n  @Watch(\"checked\")\n  checkedChangeHandler(): void {\n    this.checkedState = !!this.checked;\n  }\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 helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText?: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel?: boolean = false;\n\n  /**\n   * The aria-label applied to the switch when no visual 'name' is provided.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name of the control, which is submitted with the form data.\n   */\n  @Prop() name?: string = this.inputId;\n\n  /**\n   * The size of the switch component.\n   */\n  @Prop() size?: IcSizes = \"medium\";\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 of the toggle does not mean if it's checked or not, use the `checked`\n   * property for that.\n   *\n   * The value of a toggle is analogous to the value of a `<input type=\"checkbox\">`,\n   * it's only used when the toggle participates in a native `<form>`.\n   */\n  @Prop() value?: string | null = \"on\";\n\n  /**\n   * Emitted when the toggle loses focus.\n   */\n  @Event() icBlur!: EventEmitter<void>;\n\n  /**\n   * Emitted when the value property has changed.\n   */\n  @Event() icChange!: EventEmitter<IcSwitchChangeEventDetail>;\n\n  /**\n   * Emitted when the toggle has focus.\n   */\n  @Event() icFocus!: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  componentWillLoad(): void {\n    this.checkedState = this.checked!;\n    addFormResetListener(this.el, this.handleFormReset);\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Switch\"\n    );\n  }\n\n  /**\n   * Sets focus on the switch.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot?.querySelector(\"input\")?.focus();\n  }\n\n  private handleChange = () => {\n    this.checkedState = !this.checkedState;\n    this.icChange.emit({\n      checked: this.checkedState,\n      value: this.value!,\n    });\n  };\n\n  private onFocus = () => {\n    this.icFocus.emit();\n  };\n\n  private onBlur = () => {\n    this.icBlur.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checkedState = this.initiallyChecked!;\n  };\n\n  render() {\n    const {\n      label,\n      checkedState,\n      size,\n      disabled,\n      name,\n      value,\n      hideLabel,\n      helperText,\n      inputId,\n      theme,\n    } = this;\n\n    renderHiddenInput(this.el, checkedState ? value : \"\", name, disabled);\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <label\n          class={{\n            \"ic-switch-container\": true,\n            \"ic-switch-disabled\": !!disabled,\n            [`ic-switch-${size}`]: true,\n          }}\n          htmlFor={inputId}\n        >\n          {!hideLabel && (\n            <ic-input-label\n              for={inputId}\n              label={label}\n              helperText={helperText}\n              readonly={false}\n              disabled={disabled}\n              class={{\n                \"ic-switch-label\": true,\n              }}\n            >\n              <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n            </ic-input-label>\n          )}\n          {!hideLabel && <span class=\"ic-switch-line-break\"></span>}\n          <input\n            checked={checkedState}\n            disabled={disabled}\n            aria-label={label}\n            aria-checked={checkedState ? \"true\" : \"false\"}\n            aria-describedby={getInputDescribedByText(\n              this.el,\n              inputId,\n              helperText !== \"\",\n              false\n            )}\n            role=\"switch\"\n            class=\"ic-switch-input\"\n            type=\"checkbox\"\n            name=\"toggle\"\n            id={inputId}\n            onFocus={this.onFocus}\n            onBlur={this.onBlur}\n            onChange={this.handleChange}\n          />\n          <span class=\"ic-switch-toggle\">\n            <span class=\"ic-switch-icon-line\" aria-hidden=\"true\"></span>\n            <svg\n              class=\"ic-switch-icon\"\n              aria-hidden=\"true\"\n              focusable=\"false\"\n              viewBox=\"0 0 8 8\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill=\"none\"\n            >\n              <circle\n                class=\"ic-switch-icon-circle\"\n                fill=\"none\"\n                cx=\"4\"\n                cy=\"4\"\n                r=\"3.5\"\n                vector-effect=\"non-scaling-stroke\"\n              />\n            </svg>\n          </span>\n          <slot name=\"right-adornment\"></slot>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/ic-tab-context.js

@@ -231,7 +231,7 @@ const TabContext = /*@__PURE__*/ proxyCustomElement(class TabContext extends HTM
         }
     }
     render() {
-        return h("slot", { key: '6a473d128002201d91b16855f088cb013b3e6b09' });
+        return h("slot", { key: '717530e623d11f274e79fe3be4bcbd0ff9e71033' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-tab-group.js

@@ -28,11 +28,11 @@ const TabGroup = /*@__PURE__*/ proxyCustomElement(class TabGroup extends HTMLEle
     }
     render() {
         const { inline, theme, label, monochrome } = this;
-        return (h(Host, { key: '1e0f683aa804fe2dde78bce4c8d9b60c5d6a4396', role: "tablist", "aria-label": label, class: {
+        return (h(Host, { key: '1681c117c989b999a55a9646350f26efe3dac55c', role: "tablist", "aria-label": label, class: {
                 ["ic-tab-group-inline"]: !!inline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-tab-group-monochrome"]: !!monochrome,
-            } }, h("ic-horizontal-scroll", { key: 'fdca176d28c2e6619d787f3d141a78c3cf06176a', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: 'f3255d04eebecdd81e5badd671fee33b885df3c5', class: "tabs-container" }, h("slot", { key: '9499e87ed5fd26e3936fcc7c9af353d7acd2fb36' })))));
+            } }, h("ic-horizontal-scroll", { key: '86003202cd06e1bbd9f99124c10ceebe9414049d', theme: theme, "focus-trigger": "tabFocus", monochrome: monochrome }, h("div", { key: '4e1b79906c19817adf8a4d01332f8066e8d5e1c4', class: "tabs-container" }, h("slot", { key: '697f2ce044588082937aff666d1f04976b310785' })))));
     }
     static get delegatesFocus() { return true; }
     static get style() { return IcTabGroupStyle0; }

package/dist/components/ic-tab-panel.js

@@ -26,10 +26,10 @@ const TabPanel = /*@__PURE__*/ proxyCustomElement(class TabPanel extends HTMLEle
     }
     render() {
         const { active, theme } = this;
-        return (h(Host, { key: '7daba74123d072e8ebdac9f217451b67a734dbc4', class: {
+        return (h(Host, { key: 'c00d3917329516768eb37409203d897251b75d76', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 "ic-tab-panel-hidden": !active,
-            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: '552b91bfa6a9570da568982b693d13f5ce8911e7' }, h("slot", { key: '3f2f5d3de12ab65d949bccfdc9aa5ea09a6dfa8d' }))));
+            }, role: "tabpanel", "aria-hidden": `${!active}` }, h("div", { key: 'f5cc419286a31c1b6da62a34926dcf8060c12dfd' }, h("slot", { key: '05c9bfb071d304e758c0bb8dd780bf000b3d8bf1' }))));
     }
     get el() { return this; }
     static get style() { return IcTabPanelStyle0; }

package/dist/components/ic-text-field2.js

@@ -400,14 +400,14 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
         hiddenInput
             ? renderHiddenInput(this.el, value, name, disabledMode)
             : removeHiddenInput(this.el);
-        return (h(Host, { key: '6300558c65d21c3cf9fcb2af66774cbdf274cf89', class: {
+        return (h(Host, { key: '4eb073ddbce5dc93c167bbaa66b94daf51c4a828', class: {
                 "ic-text-field-full-width": fullWidth,
                 "ic-text-field-disabled": disabledMode,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("ic-input-container", { key: '6f0d1a6cf4ed01bd98c3b69d37f6ffb473e1201e', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: '71cc64b0733fbe16b21f389000c8a6813ad9f07f', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '985b82195b09acc991bbed6c0be5210cba70f59e', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '95df2f453e06c5dec6788e98db94e5e4ce129d04', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: '62a052203a6b9e35858e7103f505bdf38eda7349', class: {
+            } }, h("ic-input-container", { key: '07a171c8cbd55588387145b3d8469e6930ab4a7c', readonly: readonly, disabled: disabledMode }, !hideLabel && (h("ic-input-label", { key: 'b5f6b3b831c08cd4958458188c8d6be3219f1479', for: inputId, label: label, helperText: helperText, required: required, disabled: disabledText, readonly: readonly }, h("slot", { key: '1c33ec889c6a730f4b7e1075978e13f05a21f53a', name: "helper-text", slot: "helper-text" }))), h("ic-input-component-container", { key: '786f1d5b65b4b66838aba7320cd5b479cd8305e4', size: size, validationStatus: currentStatus, multiLine: multiline, disabled: disabledMode, readonly: readonly, validationInline: validationInline, fullWidth: fullWidth }, showLeftIcon && (h("span", { key: 'ed91ef841c132afd05cdee83e735413ad1d9e5a3', class: {
                 readonly,
                 "has-value": this.getNumberOfCharacters(value) > 0,
-            }, slot: "left-icon" }, h("slot", { key: '12ee0976840d954f7f855740db4098983ccf73a5', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
+            }, slot: "left-icon" }, h("slot", { key: 'ee52a8fc57ce814d713d1a0807d8dc040ced4d41', name: "icon" }))), !multiline ? (h("input", Object.assign({ id: inputId, name: name, ref: (el) => (this.inputEl = el), type: type, min: min, max: max, value: value, class: {
                 "no-left-pad": !showLeftIcon && readonly,
                 readonly,
                 "truncate-value": truncateValue,
@@ -415,12 +415,12 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends HTMLE
                 "no-resize": resize === false || !!readonly,
                 "no-left-pad": !showLeftIcon && !!readonly,
                 readonly: !!readonly,
-            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '4bd5b1b44a9fded9be98c35d3e49f357b99adf26', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: 'fccd3ae4e454d661540f45b748440aa8c9c28baf', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'aca9fabb2b029547a713e75be81c179e3c1e3b52', name: "menu" }), h("ic-input-validation", { key: '1d2443ab140751bd21f247f5136254498ffc8004', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
+            }, name: name, ref: (el) => (this.inputEl = el), value: value, rows: rows, required: required, disabled: disabledMode, placeholder: placeholder, readonly: readonly, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onScroll: this.onTextAreaScroll, "aria-label": label, "aria-describedby": describedBy, "aria-invalid": invalid, autocomplete: autocomplete, autocapitalize: autocapitalize, spellcheck: spellcheck, inputmode: inputmode, maxlength: maxCharactersReached ? maxCharacters : undefined, minlength: minCharactersUnattained ? minCharacters : undefined }, inheritedAttributes))), isSlotUsed(el, "clear-button") && (h("slot", { key: '06f74409f7256055715e982be8e68780df1126b5', name: "clear-button" })), isSlotUsed(el, "search-submit-button") && (h("slot", { key: '7ed8058fb83dfa713539348de0c37929a0225129', name: "search-submit-button" }))), isSlotUsed(el, "menu") && h("slot", { key: 'e56ca28bcb4154d65bb46f1b3625e29c0038e9b7', name: "menu" }), h("ic-input-validation", { key: '3c64d8598155035ebde2419e407e89c35053c64a', class: { "show-validation": this.showValidationMargin() }, status: this.hasStatus(currentStatus) === false ||
                 (currentStatus === IcInformationStatus.Success &&
                     validationInline) ||
                 validationInlineInternal
                 ? ""
-                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'e8f5abdc72b047998c5164ec7bef70eab2d7af81', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: '9458320139c6c17b4db3f40ef91ed8f35667e612', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: '26663bbc0dbc1e5183cfb4af5b2f9a244fa303c5', variant: "caption", class: "char-count-text" }, h("span", { key: '84a9de3338f2fee09b3712fcc56dd509bbc672e2', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: 'cb1d19f9755ea5b393e03ab19da262c67ce6e19e', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '87cfdac09956c5e749ff4c06bb58228d2d40feb5', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
+                : currentStatus, message: showStatusText ? currentValidationText : "", ariaLiveMode: messageAriaLive, for: inputId, fullWidth: fullWidth }, isSlotUsed(el, "validation-text") && (h("slot", { key: 'd40417b8b52597518c4b1e804ede9ae59364c0c9', name: "validation-text", slot: "validation-message" })), !readonly && maxNumChars > 0 && (h("div", { key: 'e4dc991f18d280cf05f3ead492e17eb37b15cbb1', slot: "validation-message-adornment" }, !hideCharCount && (h("ic-typography", { key: 'e668b2a73a860bd7a53300440a019239363f2350', variant: "caption", class: "char-count-text" }, h("span", { key: '835dea67f0e27e0c86e0236f48ecd7a5265719a3', class: "char-count" }, numChars, "/", maxNumChars))), h("span", { key: '0a4d3628c4ecfe1102b015c3bf4a345eb2a18674', class: "remaining-char-count-desc", "aria-live": "polite", hidden: !isFocussed, id: remainingCharCountDescId }, remainingCharCountDesc), h("span", { key: '365c77cbed1ca017f3f19f13be9b76561ec5cf57', hidden: true, id: hiddenCharCountDescId }, "Field can contain a maximum of ", maxNumChars, " characters.")))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-theme.js

@@ -69,7 +69,7 @@ const Theme = /*@__PURE__*/ proxyCustomElement(class Theme extends HTMLElement {
     }
     render() {
         const { themeClass } = this;
-        return (h(Host, { key: '29325dda558601bd748d1712aa146bfd5c2d1240', class: themeClass }, h("slot", { key: 'c352dc6c92ee972a7542c01f8fefa62c38575034' })));
+        return (h(Host, { key: '63d492e3dd31089565a15df543420f375dbad1b6', class: themeClass }, h("slot", { key: '479a3cbc49286aa2e3853956721f26a5ee37e9ef' })));
     }
     static get watchers() { return {
         "brandColor": ["watchBrandColorPropHandler"],

package/dist/components/ic-toast-region.js

@@ -43,7 +43,7 @@ const ToastRegion = /*@__PURE__*/ proxyCustomElement(class ToastRegion extends H
         }
     }
     render() {
-        return h("slot", { key: 'a8f7702ec7c396139a9fa455dd6900e4d3232f73' });
+        return h("slot", { key: '28f5e26c6dbfb2de076cff231b72722f1ff403c7' });
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toast.js

@@ -215,20 +215,20 @@ const Toast = /*@__PURE__*/ proxyCustomElement(class Toast extends HTMLElement {
     }
     render() {
         const { variant, heading, message, visible, isManual, dismissButtonAriaLabel, theme, } = this;
-        return (h(Host, { key: 'ff2cb4fa83ec20e9226dac7e6d65692877f6ba18', class: {
+        return (h(Host, { key: '57c068f4c9a9e3017733432a596f78e2bcbffae6', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 ["ic-toast-hidden"]: !visible,
                 [`ic-toast-variant-${variant}`]: variant !== undefined,
-            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: '96a06262e46b6fd4eefe8e3eb84c3b67c5a85335', class: {
+            }, tabindex: "0", onFocus: this.onFocus, onBlur: this.onBlur, role: isManual ? "dialog" : "alert", "aria-live": isManual ? null : "polite" }, h("div", { key: 'e24bd72e435cc443c375eee309ae98fc9e030c0b', class: {
                 ["container"]: true,
                 [`container-${variant}`]: variant !== undefined,
-            } }, variant && visible && (h("div", { key: '30eec9ac65d800405983859cada0514bce740b6a', class: "toast-icon-container" }, h("div", { key: '741228b2fa872bc5f6c4a2e57d76b2ce1ae313da', class: {
+            } }, variant && visible && (h("div", { key: 'bdabfabb04efcd93ab88ecb691b3baa73fc9da0a', class: "toast-icon-container" }, h("div", { key: 'bede66dcf6189ac321e9bee90dc144e9d38a09dc', class: {
                 ["divider"]: true,
                 [`divider-${variant}`]: true,
-            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '5068418007424fb1e8074a51c3d48b44d3d4960d', class: {
+            } }), variant === "neutral" ? (h("slot", { name: "neutral-icon" })) : (h("span", { class: "toast-icon", innerHTML: VARIANT_ICONS[variant].icon })))), h("div", { key: '57480804dc55695e555a16dd818c5febcaffbe00', class: {
                 ["toast-content"]: true,
                 ["no-icon"]: variant === "neutral" && !isSlotUsed(this.el, "neutral-icon"),
-            } }, h("div", { key: '99bb37a24570386689e6712e1b5e55cfce64fba9', class: "toast-text" }, h("ic-typography", { key: '017c9e715e6f60aeb95ee28d67130541b6df4888', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '30d276906aec46c8ac41ef3275dc3b7b5c96177b', variant: "body", class: "toast-message" }, visible && h("p", { key: 'f1648dc19f63770974cc92ef9da333e000677bb9' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: 'a8e396c4263d937de7c76c15aa68cf499ad5df78', class: "toast-action-container" }, h("slot", { key: '22d5e4ef0f50a3b65067c27d305ade75eab441a0', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
+            } }, h("div", { key: '8540288f9f34f0b72c86fa3039d579c93be1277f', class: "toast-text" }, h("ic-typography", { key: 'c5e8f2d0a2fe026b430dddf7a81e825845f5ce72', variant: "subtitle-large", class: "toast-heading" }, visible && (isManual ? h("h5", null, heading) : h("p", null, heading))), message && (h("ic-typography", { key: '89fe3df8f98581ef66c1ea74930d9042a579a359', variant: "body", class: "toast-message" }, visible && h("p", { key: 'd805d260febad5f8d58aeffe2dfef9f84d6d0911' }, message)))), isSlotUsed(this.el, "action") && (h("div", { key: 'c9cfd3cd4bf5f77cea072bb15f8629ab4a368ad0', class: "toast-action-container" }, h("slot", { key: '26b2fb447b937f327719edfe531e5b1260fa7c6c', name: "action" })))), !isManual ? (h("ic-loading-indicator", { class: "toast-dismiss-timer", theme: "dark", monochrome: true, size: "icon", progress: this.timerProgress, description: "Dismiss timer" })) : (h("ic-button", { id: "dismiss-button", innerHTML: closeIcon, onClick: this.dismissAction, variant: "icon-tertiary", "aria-label": dismissButtonAriaLabel })))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button-group.js

@@ -251,14 +251,14 @@ const ToggleButtonGroup = /*@__PURE__*/ proxyCustomElement(class ToggleButtonGro
     }
     render() {
         const { accessibleLabel, disabled, fullWidth, loading, monochrome, outline, theme, } = this;
-        return (h(Host, { key: '1238ec0b93b309a3945791eff6f847fb10b0abf5', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
+        return (h(Host, { key: 'b312b6cae074758bad82c66446709925e19cf5ce', role: "group", "aria-label": accessibleLabel, tabindex: disabled ? -1 : 0, class: {
                 "ic-toggle-button-group-disabled": disabled,
                 "ic-toggle-button-group-full-width": fullWidth,
                 "ic-toggle-button-group-loading": loading,
                 "ic-toggle-button-group-monochrome": monochrome,
                 "ic-toggle-button-group-hide-outline": !outline,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleHostFocus }, h("slot", { key: '6dfd004b9e0c386362d8172334dfca2f1e6274fc' })));
+            }, onFocus: this.handleHostFocus }, h("slot", { key: '8b09d946e7a8983b66f8bef384901899f88a54af' })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/ic-toggle-button.js

@@ -158,7 +158,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
     render() {
         const { accessibleLabel, checked, disabled, fullWidth, iconPlacement, monochrome, label, loading, outline, size, theme, tooltipPlacement, variant, } = this;
         const iconVariant = variant === "icon";
-        return (h(Host, { key: '40cd81ec38848d6b7b68707348ae0a2b7ee5a976', class: {
+        return (h(Host, { key: 'a90e2a846a52531dc542d039724dc8516a00ae14', class: {
                 "ic-toggle-button-checked": checked,
                 "ic-toggle-button-disabled": disabled,
                 "ic-toggle-button-icon": iconVariant,
@@ -168,7 +168,7 @@ const ToggleButton = /*@__PURE__*/ proxyCustomElement(class ToggleButton extends
                 "ic-toggle-button-hide-outline": !outline,
                 [`ic-toggle-button-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, onFocus: this.handleFocus }, h("ic-button", { key: 'ba600a5f546ef45e668800e9f26226f6f7e4985a', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '881f7a3d2789ee1d5ba98851380c7dd8527a5ae2' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '2ef62044db8f5c13f280b74cfcadcf6dcec7859e', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '6fcb625790392bc0602cd58a2ce669aa55073e57', name: "badge", slot: "badge" })))));
+            }, onFocus: this.handleFocus }, h("ic-button", { key: '6f15f0c63675bd099d370ce02e2b02eeac4e913a', "aria-pressed": `${checked}`, variant: iconVariant ? "icon-tertiary" : "secondary", onClick: this.handleClick, title: accessibleLabel, "aria-label": `${accessibleLabel ? accessibleLabel : label}, ${checked ? "ticked" : "unticked"}`, disabled: disabled, size: size, fullWidth: fullWidth, loading: loading, tooltipPlacement: tooltipPlacement }, !iconVariant && label, h("slot", { key: '2503823bad70fa984db6c71d16cc863daaede0e3' }), isSlotUsed(this.el, "icon") && (h("slot", { key: '53969441b6446ec012b538c2f3d468ea0e793547', name: "icon", slot: `${iconPlacement}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { key: '2619be7d1528115db996708b102aadd611fd1b4b', name: "badge", slot: "badge" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return this; }

package/dist/components/ic-tooltip2.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, h, Host } from '@stencil/core/internal/client';
-import { o as onComponentRequiredPropUndefined, e as isSafari } from './helpers.js';
+import { e as renderDynamicChildSlots, o as onComponentRequiredPropUndefined, i as isSlotUsed, f as isSafari } from './helpers.js';
 import { d as defineCustomElement$1 } from './ic-typography2.js';
 
 var top = 'top';
@@ -1793,7 +1793,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
   defaultModifiers: defaultModifiers
 }); // eslint-disable-next-line import/no-unused-modules
 
-const icTooltipCss = "/*! 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-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip-in-container){display:inline-block}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-border-hc)}}";
+const icTooltipCss = "/*! 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-tooltip){width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;--ic-tooltip-background:var(--ic-color-background-primary-dark);--ic-tooltip-text:var(--ic-color-text-primary-dark);--ic-tooltip-border:var(--ic-color-border-neutral-grey-light)}:host(.ic-tooltip) .ic-tooltip-container{background-color:var(--ic-tooltip-background);text-align:center;padding:var(--ic-space-xxxs) var(--ic-space-xs);border-radius:var(--ic-border-radius);border:var(--ic-border-width) solid var(--ic-tooltip-border);position:absolute;max-width:20rem;display:none;z-index:var(--ic-z-index-tooltip);box-shadow:var(--ic-elevation-overlay);width:-moz-max-content;width:max-content}:host(.ic-tooltip) ic-typography{--ic-typography-color:var(--ic-tooltip-text)}:host(.tooltip-navigation-item:not(.tooltip-navigation-item-side-nav-collapsed)) .ic-tooltip-container,:host(.tooltip-disabled) .ic-tooltip-container{display:none !important}:host(.tooltip-long-label-navigation-item-side-nav-expanded) .ic-tooltip-container[data-show]{display:block !important}:host(.ic-tooltip) .ic-tooltip-arrow,:host(.ic-tooltip) .ic-tooltip-arrow::before{position:absolute;background:inherit}:host(.ic-tooltip) .ic-tooltip-arrow{visibility:hidden;width:var(--ic-space-md);height:var(--ic-space-md)}:host(.ic-tooltip) .ic-tooltip-arrow::before{visibility:visible;content:\"\";border:var(--ic-border-width) solid var(--ic-tooltip-border);width:100%;height:100%}:host(.ic-tooltip) .ic-tooltip-container[data-show]{display:block}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow{height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"top\"]>.ic-tooltip-arrow::before{border-radius:0 0 var(--ic-border-radius) var(--ic-border-radius);left:0;top:var(--ic-space-xxxs);border-top:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow{top:calc(-1 * var(--ic-space-xxs));height:var(--ic-space-xxxs)}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"bottom\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) var(--ic-border-radius) 0 0;left:0;top:var(--ic-space-1px);border-bottom:0;transform:translateX(var(--tooltip-arrow-translate))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);right:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"left\"]>.ic-tooltip-arrow::before{border-radius:0 var(--ic-border-radius) var(--ic-border-radius) 0;border-left:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow{width:var(--ic-space-xxxs);left:calc(-1 * var(--ic-space-xxs))}:host(.ic-tooltip) .ic-tooltip-container[data-popper-placement^=\"right\"]>.ic-tooltip-arrow::before{border-radius:var(--ic-border-radius) 0 0 var(--ic-border-radius);border-right:0;top:calc(-1 * var(--ic-space-1px))}:host(.ic-tooltip-in-container){display:inline-block}:host(.ic-tooltip.ic-tooltip-with-icon) .ic-tooltip-content{display:flex;align-items:flex-start;justify-content:flex-start;gap:var(--ic-space-xxs);text-align:left}:host(.ic-tooltip.ic-tooltip-with-icon) .ic-icon-container{width:var(--ic-space-md);height:var(--ic-space-md);color:var(--ic-tooltip-text)}:host(.ic-tooltip.ic-tooltip-with-icon) ::slotted([slot=\"icon\"]){width:var(--ic-space-md);height:var(--ic-space-md);display:inline-block;margin-top:var(--ic-space-1px)}@media screen and (max-width: 576px){:host(.ic-tooltip) .ic-tooltip-container{max-width:18.875rem}}@media (forced-colors: active){:host(.ic-tooltip) .ic-tooltip-container,:host(.ic-tooltip) .ic-tooltip-arrow::before{border:var(--ic-border-hc)}}";
 const IcTooltipStyle0 = icTooltipCss;
 
 const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLElement$1 {
@@ -1988,6 +1988,10 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         }
         this.containerContentArea =
             (_b = (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".content-area")) !== null && _b !== void 0 ? _b : null;
+        this.hostMutationObserver = new MutationObserver((mutationList) => renderDynamicChildSlots(mutationList, "icon", this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
         onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Tooltip");
     }
     componentDidRender() {
@@ -1996,6 +2000,9 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         this.maxLines &&
             this.maxLines > 0 &&
             (typographyEl === null || typographyEl === void 0 ? void 0 : typographyEl.setAttribute("style", `--truncation-max-lines: ${this.maxLines}`));
+        if (this.iconAltText && !isSlotUsed(this.el, "icon")) {
+            console.warn(`Prop 'iconAltText' is provided without an icon slotted in the 'icon' slot. Please provide an icon or remove the 'iconAltText' prop.`);
+        }
     }
     /**
      * Method to programmatically show/hide the tooltip without needing to interact with an anchor element
@@ -2014,10 +2021,11 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
     }
     render() {
         const { label, maxLines, silent, theme } = this;
-        return (h(Host, { key: '61c01b4710b1fb71a42044c7e4b7675497952575', class: {
+        return (h(Host, { key: 'f9990c54172e8fda3d24a9f613ff5328018b9c6c', class: {
                 "ic-tooltip": true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, "aria-label": isSafari && label }, h("div", { key: '5b7e00e8164b7a95ca17523d11b4bd02bc4eefbb', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("ic-typography", { key: 'a118c99c30c776f39ed25c630a4231cb637fdcd2', maxLines: maxLines, variant: "caption" }, label), h("div", { key: '2ee6065bc691893170591e43aba77973e6387141', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: 'd76275c08c93ee6d4b39b0ab6be9093a8d5e6de1' })));
+                "ic-tooltip-with-icon": isSlotUsed(this.el, "icon"),
+            }, "aria-label": isSafari && label }, h("div", { key: '1b09f90e4da36ec2470bef240be537dc3642c922', ref: (el) => (this.toolTip = el), role: "tooltip", class: "ic-tooltip-container", "aria-hidden": `${silent}` }, h("div", { key: '1cbfb4ce2ba7fce474330e70aab9f6820845b80d', class: "ic-tooltip-content" }, isSlotUsed(this.el, "icon") && (h("div", { key: '3b82f426322ae769893569dc7c649f0ada256ad2', class: "ic-icon-container", "aria-hidden": `${!this.iconAltText}`, "aria-label": this.iconAltText, role: "img" }, h("slot", { key: '7dd357c6339e36a9d830d74e042f2772b6d1fb4e', name: "icon", "aria-hidden": "true" }))), h("ic-typography", { key: '959297e6c8134160c67aaea1f09b06b30bdc6bbb', maxLines: maxLines, variant: "caption" }, label)), h("div", { key: '8be3a57f5e5c7dcb1b16544ab18aa2fbf9f76ad6', ref: (el) => (this.arrow = el), class: "ic-tooltip-arrow" })), h("slot", { key: 'cb9ede12f1da7cf478cff4ae6914693e0ec3f560' })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -2030,6 +2038,7 @@ const Tooltip = /*@__PURE__*/ proxyCustomElement(class Tooltip extends HTMLEleme
         "disableClick": [4, "disable-click"],
         "disableHover": [4, "disable-hover"],
         "fixedPositioning": [4, "fixed-positioning"],
+        "iconAltText": [1, "icon-alt-text"],
         "maxLines": [2, "max-lines"],
         "placement": [1],
         "silent": [4],