@ukic/web-components 2.1.0-beta.11 → 2.1.0-beta.12

package/dist/cjs/ic-checkbox.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host([disabled]) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n}\n\n:host([small]) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\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: transparent;\n  border: 0.063rem solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: 0.063rem solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: 0.063rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: 0.063rem solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: 0.063rem dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  top: 0.688rem;\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\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  ::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  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host>\n        <div class={{ [\"container\"]: true, [\"disabled\"]: this.disabled }}>\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox.entry.cjs.js","mappings":"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","names":["addFormResetListener","onComponentRequiredPropUndefined","removeFormResetListener","renderHiddenInput","removeHiddenInput","h","Host","isSlotUsed"],"sources":["./src/components/ic-checkbox/ic-checkbox.css?tag=ic-checkbox&encapsulation=shadow","./src/components/ic-checkbox/ic-checkbox.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host(.disabled) {\n  color: var(--ic-architectural-200);\n  pointer-events: none;\n}\n\n.container {\n  display: flex;\n  width: fit-content;\n  padding: var(--ic-space-xxs) 0 var(--ic-space-xxs) var(--ic-space-xxs);\n  margin-bottom: var(--ic-space-xxs);\n}\n\n:host(.small) .container {\n  margin-bottom: var(--ic-space-xxxs);\n}\n\n.checkbox {\n  -webkit-appearance: none;\n  -moz-appearance: none;\n  appearance: none;\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: transparent;\n  border: var(--ic-space-1px) solid var(--ic-architectural-300);\n  border-radius: var(--ic-border-radius);\n  outline: none;\n  cursor: pointer;\n  transition: var(--ic-easing-transition-fast);\n}\n\n.checkbox:checked {\n  background-color: var(--ic-action-default);\n  border: var(--ic-space-1px) solid var(--ic-action-default);\n  transition: var(--ic-easing-transition-slow);\n}\n\n.checkbox:checked:disabled {\n  background-color: var(--ic-architectural-200);\n}\n\n.checkbox:indeterminate,\n.checkbox.indeterminate:checked {\n  background-color: transparent;\n  border: 0.125rem solid var(--ic-action-default);\n}\n\n.checkbox:checked:hover {\n  background-color: var(--ic-action-default-hover);\n}\n\n.checkbox:indeterminate:hover,\n.checkbox.indeterminate:checked:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  border: 0.125rem solid var(--ic-action-default-hover);\n}\n\n.checkbox:checked:active {\n  background-color: var(--ic-action-default-active);\n}\n\n.checkbox:indeterminate:active,\n.checkbox.indeterminate:checked:active {\n  background-color: var(--ic-action-default-bg-active);\n  border: 0.125rem solid var(--ic-action-default-active);\n}\n\n.checkbox:hover {\n  background-color: var(--ic-action-default-bg-hover);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);\n  border: var(--ic-space-1px) solid var(--ic-action-default-hover);\n}\n\n.checkbox:active {\n  background-color: var(--ic-action-default-bg-active);\n  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);\n  border: var(--ic-space-1px) solid var(--ic-action-default-active);\n}\n\n.checkbox:focus {\n  box-shadow: var(--ic-border-focus);\n}\n\n.checkbox:disabled {\n  border: var(--ic-space-1px) dashed var(--ic-architectural-200);\n}\n\n.checkbox-label {\n  padding-left: var(--ic-space-sm);\n}\n\n.checkbox-label:hover {\n  cursor: pointer;\n}\n\n.checkmark {\n  position: relative;\n  right: calc(-1 * var(--ic-space-lg));\n  margin-left: calc(-1 * var(--ic-space-lg));\n  fill: white;\n  z-index: 1;\n  background-color: transparent;\n  pointer-events: none;\n}\n\n.indeterminate-symbol {\n  position: relative;\n  width: 0.875rem;\n  height: var(--ic-space-xxxs);\n  top: 0.688rem;\n  right: -1.188rem;\n  margin-left: -0.875rem;\n  z-index: 1;\n  background-color: var(--ic-action-default);\n  pointer-events: none;\n}\n\n.container:hover .indeterminate-symbol {\n  background-color: var(--ic-action-default-hover);\n}\n\n.container:active .indeterminate-symbol {\n  background-color: var(--ic-action-default-active);\n}\n\n.additional-field-wrapper {\n  margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n.branch-corner {\n  color: var(--ic-action-default);\n  height: var(--ic-space-md);\n  width: var(--ic-space-xl);\n  border-radius: 0 0 0 0.188rem;\n  border-bottom: 0.125rem solid var(--ic-action-default);\n  border-left: 0.125rem solid var(--ic-action-default);\n}\n\n.dynamic-container {\n  display: flex;\n  position: relative;\n  margin: var(--ic-space-xxxs) 0 var(--ic-space-xxs) var(--ic-space-md);\n  gap: var(--ic-space-xs);\n}\n\n.dynamic-text {\n  color: var(--ic-action-default);\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  ::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  .checkbox {\n    appearance: revert;\n    transition: none;\n  }\n\n  .checkbox:checked {\n    transition: none;\n  }\n\n  .checkbox:focus-visible {\n    outline: 0.125rem solid highlight;\n  }\n\n  .checkbox:disabled:not(:checked) {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .checkmark {\n    fill: none;\n  }\n\n  .indeterminate-symbol {\n    display: none;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n} from \"../../utils/helpers\";\n\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Checkbox {\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop() name: string;\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n  /**\n   * The text to be displayed when dynamic.\n   */\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n\n  /**\n   * If true, the small styling will be applied to the checkbox.\n   */\n  @Prop() small?: boolean = false;\n\n  @State() initiallyChecked = this.checked;\n\n  @Element() host: HTMLIcCheckboxElement;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  private additionalFieldContainer: HTMLDivElement;\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.icCheck.emit();\n    this.checkboxChecked.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    const checkboxEl: HTMLElement =\n      this.host.shadowRoot.querySelector(\".checkbox\");\n    if (checkboxEl) {\n      checkboxEl.focus();\n    }\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.host.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield && textfield.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield && textfield.removeAttribute(\"disabled\");\n      }\n    } else {\n      if (!this.checked) {\n        this.additionalFieldContainer.style.display = \"none\";\n      } else {\n        this.additionalFieldContainer.style.display = \"flex\";\n      }\n    }\n  }\n\n  componentWillLoad(): void {\n    addFormResetListener(this.host, this.handleFormReset);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.host, this.handleFormReset);\n  }\n\n  render() {\n    let id = `ic-checkbox-${\n      this.label !== undefined ? this.label : this.value\n    }-${this.groupLabel}`;\n\n    id = id.replace(/ /g, \"-\");\n\n    this.checked\n      ? renderHiddenInput(\n          true,\n          this.host,\n          this.name,\n          this.checked && this.value,\n          this.disabled\n        )\n      : removeHiddenInput(this.host);\n\n    return (\n      <Host class={{ [\"disabled\"]: this.disabled, [\"small\"]: this.small }}>\n        <div class=\"container\">\n          {this.checked && !this.indeterminate && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          {this.checked && this.indeterminate && (\n            <div class=\"indeterminate-symbol\" />\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              [\"checkbox\"]: true,\n              [\"checked\"]: this.checked,\n              [\"indeterminate\"]: this.indeterminate,\n            }}\n            type=\"checkbox\"\n            name={this.name}\n            id={id}\n            value={this.value}\n            disabled={this.disabled ? true : null}\n            checked={this.checked}\n            indeterminate={this.indeterminate}\n            onClick={this.handleClick}\n          ></input>\n          <ic-typography variant=\"body\">\n            <label class=\"checkbox-label\" htmlFor={id}>\n              {this.label}\n            </label>\n          </ic-typography>\n        </div>\n        {isSlotUsed(this.host, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {this.additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {this.additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {this.dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    this.additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -11,7 +11,7 @@ const dismissIcon = `<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.o
 </svg>
 `;
 
-const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}.chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:5rem;text-align:center;align-items:center;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}.chip.small{padding:var(--ic-space-xxxs)}.chip.large{padding:var(--ic-space-xs)}.label{padding:0 var(--ic-space-xs)}.chip.hovered:not(:focus-within){background-color:var(--ic-architectural-300)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}.chip.outline.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}ic-tooltip:focus-within{z-index:1}.filled{background-color:var(--ic-architectural-200);color:black;border:none}.filled.disabled{background-color:var(--ic-architectural-100)}.outline{color:var(--ic-architectural-900);border:0.063rem solid var(--ic-architectural-900);padding:calc(var(--ic-space-xxs) - 0.063rem)}.outline.small{padding:calc(var(--ic-space-xxxs) - 0.063rem)}.outline.large{padding:calc(var(--ic-space-xs) - 0.063rem)}.outline.disabled{border:var(--ic-border-disabled);background:none}.chip.disabled ic-typography{color:var(--ic-architectural-200)}.dismiss-icon{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-architectural-200)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-architectural-200)}@media (forced-colors: active){.chip{border:var(--ic-hc-border)}.filled.small{padding:calc(var(--ic-space-xxxs) - 0.063rem)}.filled{padding:calc(var(--ic-space-xxxs) + 0.063rem)}.filled.large{padding:calc(var(--ic-space-xs) - 0.063rem)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
+const icChipCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:inline-block}.chip{display:flex;padding:var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;transition:var(--ic-easing-transition-fast);position:relative}.chip.small{padding:var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip.hovered:not(:focus-within){background-color:var(--ic-architectural-300)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}.chip.outline.hovered:not(:focus-within){background-color:var(--ic-action-dark-bg-hover)}ic-tooltip:focus-within{z-index:1}.filled{background-color:var(--ic-architectural-200);color:black;border:none}.filled.disabled{background-color:var(--ic-architectural-100)}.outline{color:var(--ic-architectural-900);border:var(--ic-space-1px) solid var(--ic-architectural-900);padding:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.outline.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.outline.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.outline.disabled{border:var(--ic-border-disabled);background:none}.chip.disabled ic-typography{color:var(--ic-architectural-200)}.dismiss-icon{border:none;border-radius:50%;padding:0;background:none;cursor:pointer;margin:var(--ic-space-xxxs);height:calc(var(--ic-space-lg) - var(--ic-space-xxs));width:calc(var(--ic-space-lg) - var(--ic-space-xxs))}.dismiss-icon:focus{outline:var(--ic-hc-focus-outline)}.dismiss-icon[disabled]{pointer-events:none;color:var(--ic-architectural-200)}.icon{padding:var(--ic-space-xxxs);box-sizing:border-box}.icon,ic-tooltip{width:var(--ic-space-lg);height:var(--ic-space-lg)}.chip.disabled path,.chip.disabled ::slotted(svg){fill:var(--ic-architectural-200)}@media (forced-colors: active){.chip{border:var(--ic-hc-border)}.filled.small{padding:calc(var(--ic-space-xxxs) - var(--ic-space-1px))}.filled{padding:calc(var(--ic-space-xxxs) + var(--ic-space-1px))}.filled.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px))}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
 
 const Chip = class {
   constructor(hostRef) {

package/dist/cjs/ic-chip.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-chip.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0jJAA0jJ;;MC4B/jJ,IAAI;;;;;IA2CP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;sBA5CsC,QAAQ;gBAInB,SAAS;uBAIN,KAAK;oBAIR,KAAK;mBAEN,IAAI;qBAEF,KAAK;;EAGnC,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EA6BD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1CA,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACLC,iBACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1BD,iBAAK,KAAK,EAAC,MAAM,IACfA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACDA,2BACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEbA,sBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACVA,wBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzCA,oBACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;","names":["onComponentRequiredPropUndefined","h","isSlotUsed"],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 0.875rem;\n  border-radius: 5rem;\n  text-align: center;\n  align-items: center;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: 0.063rem solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - 0.063rem);\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - 0.063rem);\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - 0.063rem);\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + 0.063rem);\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - 0.063rem);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-chip.entry.cjs.js","mappings":";;;;;;;;;;;;;AAAA,MAAM,SAAS,GAAG,2vJAA2vJ;;MC4BhwJ,IAAI;;;;;IA2CP,kBAAa,GAAG;MACtB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;MACpB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;KACvB,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;KACxB,CAAC;;sBA5CsC,QAAQ;gBAInB,SAAS;uBAIN,KAAK;oBAIR,KAAK;mBAEN,IAAI;qBAEF,KAAK;;EAGnC,WAAW;IACT,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;GAC9B;;;;EA6BD,MAAM,QAAQ;IACZ,IAAI,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,EAAE;MAC9C,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;KACpD;GACF;EAED,gBAAgB;;IACd,IAAI,CAAC,WAAW;OACd,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU;SACf,aAAa,CAAC,uBAAuB,CAAC,0CACrC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAA,CAAC;IAC1CA,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,EACzC,MAAM,CACP,CAAC;GACH;EAED,MAAM;IACJ,MAAM,EACJ,KAAK,EACL,UAAU,EACV,IAAI,EACJ,WAAW,EACX,OAAO,EACP,QAAQ,EACR,SAAS,GACV,GAAG,IAAI,CAAC;IAET,QACE,OAAO,KACLC,iBACE,KAAK,EAAE;QACL,CAAC,MAAM,GAAG,IAAI;QACd,CAAC,GAAG,UAAU,EAAE,GAAG,IAAI;QACvB,CAAC,GAAG,IAAI,EAAE,GAAG,IAAI;QACjB,CAAC,UAAU,GAAG,QAAQ;QACtB,CAAC,aAAa,GAAG,WAAW;QAC5B,CAAC,SAAS,GAAG,SAAS;OACvB,IAEAC,kBAAU,CAAC,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,KAC1BD,iBAAK,KAAK,EAAC,MAAM,IACfA,kBAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACP,EACDA,2BACE,OAAO,EAAC,OAAO,4BACS,KAAK,EAC7B,KAAK,EAAC,OAAO,IAEbA,sBAAO,KAAK,CAAQ,CACN,EACf,WAAW,KACVA,wBACE,KAAK,EAAC,SAAS,EACf,MAAM,EAAC,cAAc,EACrB,KAAK,EAAE,EAAE,CAAC,kBAAkB,GAAG,QAAQ,EAAE,IAEzCA,oBACE,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE;QACL,CAAC,cAAc,GAAG,IAAI;OACvB,gBACW,WAAW,KAAK,OAAO,EACnC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,EAC3B,OAAO,EAAE,IAAI,CAAC,aAAa,EAC3B,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,YAAY,EAAE,IAAI,CAAC,iBAAiB,EACpC,SAAS,EAAE,WAAW,GACd,CACC,CACd,CACG,CACP,EACD;GACH;;;;;;;;","names":["onComponentRequiredPropUndefined","h","isSlotUsed"],"sources":["./src/components/ic-chip/ic-chip.css?tag=ic-chip&encapsulation=shadow","./src/components/ic-chip/ic-chip.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: inline-block;\n}\n\n.chip {\n  display: flex;\n  padding: var(--ic-space-xxs);\n  font-size: 0.875rem;\n  border-radius: var(--ic-space-md);\n  text-align: left;\n  text-decoration: none;\n  transition: var(--ic-easing-transition-fast);\n  position: relative;\n}\n\n.chip.small {\n  padding: var(--ic-space-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip.hovered:not(:focus-within) {\n  background-color: var(--ic-architectural-300);\n}\n\n.chip:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\n.chip.outline.hovered:not(:focus-within) {\n  background-color: var(--ic-action-dark-bg-hover);\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  background-color: var(--ic-architectural-200);\n  color: black;\n  border: none;\n}\n\n.filled.disabled {\n  background-color: var(--ic-architectural-100);\n}\n\n.outline {\n  color: var(--ic-architectural-900);\n  border: var(--ic-space-1px) solid var(--ic-architectural-900);\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.outline.small {\n  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n}\n\n.outline.large {\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n}\n\n.outline.disabled {\n  border: var(--ic-border-disabled);\n  background: none;\n}\n\n.chip.disabled ic-typography {\n  color: var(--ic-architectural-200);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  background: none;\n  cursor: pointer;\n  margin: var(--ic-space-xxxs);\n  height: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n  width: calc(var(--ic-space-lg) - var(--ic-space-xxs));\n}\n\n.dismiss-icon:focus {\n  outline: var(--ic-hc-focus-outline);\n}\n\n.dismiss-icon[disabled] {\n  pointer-events: none;\n  color: var(--ic-architectural-200);\n}\n\n.icon {\n  padding: var(--ic-space-xxxs);\n  box-sizing: border-box;\n}\n\n.icon,\nic-tooltip {\n  width: var(--ic-space-lg);\n  height: var(--ic-space-lg);\n}\n\n.chip.disabled path,\n.chip.disabled ::slotted(svg) {\n  fill: var(--ic-architectural-200);\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-hc-border);\n  }\n\n  .filled.small {\n    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));\n  }\n\n  .filled {\n    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));\n  }\n\n  .filled.large {\n    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    color: GrayText;\n  }\n\n  .chip.disabled path,\n  .chip.disabled ::slotted(svg) {\n    fill: GrayText;\n  }\n\n  .chip:focus-within {\n    outline: none;\n    border-color: Highlight;\n  }\n}\n","import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n} from \"../../utils/helpers\";\nimport { IcChipAppearance, IcChipSizes } from \"./ic-chip.types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n */\n@Component({\n  tag: \"ic-chip\",\n  styleUrl: \"ic-chip.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class Chip {\n  @Element() el: HTMLIcChipElement;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() appearance?: IcChipAppearance = \"filled\";\n  /**\n   * The size of the chip.\n   */\n  @Prop() size?: IcChipSizes = \"default\";\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  @State() visible: boolean = true;\n\n  @State() isHovered: boolean = false;\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * @deprecated This event should not be used anymore. Use icDismiss instead.\n   */\n  @Event() dismiss: EventEmitter<void>;\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  private dismissAction = (): void => {\n    this.dismiss.emit();\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.isHovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.isHovered = false;\n  };\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    if (this.el.shadowRoot.querySelector(\"button\")) {\n      this.el.shadowRoot.querySelector(\"button\").focus();\n    }\n  }\n\n  componentDidLoad(): void {\n    this.dismissible &&\n      this.el.shadowRoot\n        .querySelector(\"span.ic-tooltip-label\")\n        ?.setAttribute(\"aria-hidden\", \"true\");\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n  }\n\n  render() {\n    const {\n      label,\n      appearance,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      isHovered,\n    } = this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            [\"chip\"]: true,\n            [`${appearance}`]: true,\n            [`${size}`]: true,\n            [\"disabled\"]: disabled,\n            [\"dismissible\"]: dismissible,\n            [\"hovered\"]: isHovered,\n          }}\n        >\n          {isSlotUsed(this.el, \"icon\") && (\n            <div class=\"icon\">\n              <slot name=\"icon\" />\n            </div>\n          )}\n          <ic-typography\n            variant=\"label\"\n            apply-vertical-margins={false}\n            class=\"label\"\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ [\"tooltip-disabled\"]: disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class={{\n                  [\"dismiss-icon\"]: true,\n                }}\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n        </div>\n      )\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-data-entity.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f79a4e53.js');
 
-const icDataEntityCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:0.063rem;background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}";
+const icDataEntityCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-space-1px);background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}";
 
 const DataEntity = class {
   constructor(hostRef) {

package/dist/cjs/ic-data-entity.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-data-entity.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,gyFAAgyF;;MCO3yF,UAAU;;;;iBAWI,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;MACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OAC3C;KACF;IAED,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,EAAE,IAC/BD,iBAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3CA,kBAAM,IAAI,EAAC,SAAS,IAClBA,2BAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACNA,iBAAK,KAAK,EAAC,SAAS,GAAG,EACvBA,mCAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpDA,qBAAa,CACV,CACA,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","./src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.small) .rows {\n  gap: var(--ic-space-xs);\n}\n\n.divider {\n  margin-top: var(--ic-space-lg);\n  margin-bottom: var(--ic-space-md);\n  height: 0.063rem;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * The title for the data entity.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If `true`, the small styling will be applied to the data heading and all child data rows.\n   */\n  @Prop() small: boolean = false;\n\n  render() {\n    const { heading, small } = this;\n\n    const children = this.el.children;\n\n    if (small) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"small\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-entity.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,eAAe,GAAG,2yFAA2yF;;MCOtzF,UAAU;;;;iBAWI,KAAK;;EAE9B,MAAM;IACJ,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;IAEhC,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC;IAElC,IAAI,KAAK,EAAE;MACT,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACxC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;OAC3C;KACF;IAED,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,EAAE,CAAC,OAAO,GAAG,KAAK,EAAE,IAC/BD,iBAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,qBAAqB,IAC3CA,kBAAM,IAAI,EAAC,SAAS,IAClBA,2BAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACNA,iBAAK,KAAK,EAAC,SAAS,GAAG,EACvBA,mCAAoB,qBAAqB,EAAC,KAAK,EAAC,MAAM,IACpDA,qBAAa,CACV,CACA,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/ic-data-entity/ic-data-entity.css?tag=ic-data-entity&encapsulation=shadow","./src/components/ic-data-entity/ic-data-entity.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.small) .rows {\n  gap: var(--ic-space-xs);\n}\n\n.divider {\n  margin-top: var(--ic-space-lg);\n  margin-bottom: var(--ic-space-md);\n  height: var(--ic-space-1px);\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-sm);\n  margin-bottom: var(--ic-space-xs);\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"ic-data-entity\",\n  styleUrl: \"ic-data-entity.css\",\n  shadow: true,\n})\nexport class DataEntity {\n  @Element() el: HTMLIcDataEntityElement;\n\n  /**\n   * The title for the data entity.\n   */\n  @Prop() heading: string;\n\n  /**\n   * If `true`, the small styling will be applied to the data heading and all child data rows.\n   */\n  @Prop() small: boolean = false;\n\n  render() {\n    const { heading, small } = this;\n\n    const children = this.el.children;\n\n    if (small) {\n      for (let i = 0; i < children.length; i++) {\n        children[i].setAttribute(\"small\", \"true\");\n      }\n    }\n\n    return (\n      <Host class={{ [\"small\"]: small }}>\n        <div class=\"heading\" id=\"data-entity-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class=\"divider\" />\n        <ul aria-labelledby=\"data-entity-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-data-row.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-f79a4e53.js');
 const helpers = require('./helpers-2021e212.js');
 require('./types-3eb02246.js');
 
-const icDataRowCss = "/*! 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{position:relative;display:block}.data{display:flex;align-items:center}.text-cells{display:flex;flex-grow:1;min-width:0}.label{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);color:var(--ic-color-tertiary-text)}.value{flex-grow:1}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]){margin-top:calc(var(--ic-space-xs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]){margin-top:calc(var(--ic-space-xxs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]){margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}.end-component{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}.divider{margin-top:var(--ic-space-md);height:0.063rem;background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:10rem;min-width:10rem}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:8rem;margin-bottom:var(--ic-space-xs)}:host(.breakpoint-xs) .value{max-width:95%}:host(.breakpoint-xs) .end-component{margin-left:0}@media (forced-colors: active){.divider{background-color:canvastext}}";
+const icDataRowCss = "/*! 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{position:relative;display:block}.data{display:flex;align-items:center}.text-cells{display:flex;flex-grow:1;min-width:0}.label{width:12.5rem;min-width:12.5rem;margin-right:var(--ic-space-md);color:var(--ic-color-tertiary-text)}.value{flex-grow:1}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]){margin-top:calc(var(--ic-space-xs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]){margin-top:calc(var(--ic-space-xxs) * -1)}slot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]){margin-top:calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs))}.end-component{width:-moz-fit-content;width:fit-content;margin-left:3.5rem}.divider{margin-top:var(--ic-space-md);height:var(--ic-space-1px);background-color:var(--ic-architectural-300)}:host(.small) .divider{margin-top:var(--ic-space-xs)}:host(.breakpoint-medium) .label{width:10rem;min-width:10rem}:host(.breakpoint-xs) .text-cells{flex-direction:column}:host(.breakpoint-xs) .label{width:8rem;margin-bottom:var(--ic-space-xs)}:host(.breakpoint-xs) .value{max-width:95%}:host(.breakpoint-xs) .end-component{margin-left:0}@media (forced-colors: active){.divider{background-color:canvastext}}";
 
 const DataRow = class {
   constructor(hostRef) {

package/dist/cjs/ic-data-row.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-data-row.entry.cjs.js","mappings":"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","names":["DEVICE_SIZES","getCurrentDeviceSize","slotHasContent","checkResizeObserver","h","Host"],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.data {\n  display: flex;\n  align-items: center;\n}\n\n.text-cells {\n  display: flex;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.label {\n  width: 12.5rem;\n  min-width: 12.5rem;\n  margin-right: var(--ic-space-md);\n  color: var(--ic-color-tertiary-text);\n}\n\n.value {\n  flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n  margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n  width: fit-content;\n  margin-left: 3.5rem;\n}\n\n.divider {\n  margin-top: var(--ic-space-md);\n  height: 0.063rem;\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n  width: 10rem;\n  min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n  flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n  width: 8rem;\n  margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n  max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n  margin-left: 0;\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-row.entry.cjs.js","mappings":"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","names":["DEVICE_SIZES","getCurrentDeviceSize","slotHasContent","checkResizeObserver","h","Host"],"sources":["./src/components/ic-data-row/ic-data-row.css?tag=ic-data-row&encapsulation=shadow","./src/components/ic-data-row/ic-data-row.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  position: relative;\n  display: block;\n}\n\n.data {\n  display: flex;\n  align-items: center;\n}\n\n.text-cells {\n  display: flex;\n  flex-grow: 1;\n  min-width: 0;\n}\n\n.label {\n  width: 12.5rem;\n  min-width: 12.5rem;\n  margin-right: var(--ic-space-md);\n  color: var(--ic-color-tertiary-text);\n}\n\n.value {\n  flex-grow: 1;\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[small][readonly][hide-label]) {\n  margin-top: calc(var(--ic-space-xxs) * -1);\n}\n\nslot[name=\"value\"]::slotted(ic-text-field[readonly][hide-label][rows]) {\n  margin-top: calc(var(--ic-space-xxs) * -1 - var(--ic-space-xxxs));\n}\n\n.end-component {\n  width: fit-content;\n  margin-left: 3.5rem;\n}\n\n.divider {\n  margin-top: var(--ic-space-md);\n  height: var(--ic-space-1px);\n  background-color: var(--ic-architectural-300);\n}\n\n:host(.small) .divider {\n  margin-top: var(--ic-space-xs);\n}\n\n:host(.breakpoint-medium) .label {\n  width: 10rem;\n  min-width: 10rem;\n}\n\n:host(.breakpoint-xs) .text-cells {\n  flex-direction: column;\n}\n\n:host(.breakpoint-xs) .label {\n  width: 8rem;\n  margin-bottom: var(--ic-space-xs);\n}\n\n:host(.breakpoint-xs) .value {\n  max-width: 95%;\n}\n\n:host(.breakpoint-xs) .end-component {\n  margin-left: 0;\n}\n\n@media (forced-colors: active) {\n  .divider {\n    background-color: canvastext;\n  }\n}\n","import { Component, Element, Host, Prop, h, State } from \"@stencil/core\";\nimport {\n  checkResizeObserver,\n  DEVICE_SIZES,\n  getCurrentDeviceSize,\n  slotHasContent,\n} from \"../../utils/helpers\";\n\n/**\n * @slot label - Content will be rendered in the leftmost cell.\n * @slot value - Content will be rendered to the right of the label.\n * @slot end-component - Content will be displayed in the rightmost cell.\n */\n@Component({\n  tag: \"ic-data-row\",\n  styleUrl: \"ic-data-row.css\",\n  shadow: true,\n})\nexport class DataRow {\n  @Element() el: HTMLIcDataRowElement;\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label: string;\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value: string;\n\n  /**\n   * If `true`, the small styling will be applied to the row. This is automatically applied if small is set on the parent data heading.\n   */\n  @Prop() small: boolean = false;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n\n  @State() entitySize: \"xl\" | \"m\" | \"xs\";\n\n  private resizeObserver: ResizeObserver = null;\n\n  private hasEndComponent: boolean = false;\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.checkLabelAbove();\n    });\n\n    this.resizeObserver.observe(this.el);\n  };\n\n  private checkLabelAbove() {\n    const rowSize = this.el.shadowRoot.querySelector(\".data\")?.clientWidth;\n    if (rowSize) {\n      if (rowSize + 46 < DEVICE_SIZES.S) {\n        this.entitySize = \"xs\";\n      } else if (rowSize + 46 < DEVICE_SIZES.M) {\n        this.entitySize = \"m\";\n      } else {\n        this.entitySize = \"xl\";\n      }\n    }\n  }\n\n  private labelEndComponent(): void {\n    const component = this.el.shadowRoot.querySelectorAll(\n      \"slot[name=end-component]\"\n    );\n\n    component.forEach((child: HTMLElement) =>\n      child.setAttribute(\"aria-label\", \"for \" + this.label + \" row\")\n    );\n  }\n\n  componentWillLoad(): void {\n    this.deviceSize = getCurrentDeviceSize();\n    this.hasEndComponent = slotHasContent(this.el, \"end-component\");\n    this.checkLabelAbove();\n  }\n\n  componentDidLoad(): void {\n    checkResizeObserver(this.runResizeObserver);\n    if (this.hasEndComponent) {\n      this.labelEndComponent();\n    }\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== null) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { label, value, small } = this;\n\n    return (\n      <Host\n        class={{\n          [\"small\"]: small,\n          [\"breakpoint-medium\"]: this.entitySize === \"m\",\n          [\"breakpoint-xs\"]: this.entitySize === \"xs\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            <div class=\"label\">\n              <slot name=\"label\">\n                <ic-typography\n                  variant={\n                    this.entitySize === \"xs\" ? \"label\" : \"subtitle-large\"\n                  }\n                >\n                  {label}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"value\">\n              <slot name=\"value\">\n                <ic-typography variant=\"body\">{value}</ic-typography>\n              </slot>\n            </div>\n          </div>\n          {this.hasEndComponent && (\n            <div class=\"end-component\">\n              <div role=\"cell\">\n                <slot name=\"end-component\"></slot>\n              </div>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ const index = require('./index-f79a4e53.js');
 const helpers = require('./helpers-2021e212.js');
 const types = require('./types-3eb02246.js');
 
-const icDividerCss = "hr.sc-ic-divider{padding:0;margin:0;border:none;height:0.063rem;background-color:var(--ic-keyline-darken-rgb)}hr.light.sc-ic-divider{background-color:var(--ic-keyline-lighten-rgb)}";
+const icDividerCss = "hr.sc-ic-divider{padding:0;margin:0;border:none;height:var(--ic-space-1px);background-color:var(--ic-keyline-darken-rgb)}hr.light.sc-ic-divider{background-color:var(--ic-keyline-lighten-rgb)}";
 
 const Divider = class {
   constructor(hostRef) {

package/dist/cjs/ic-divider.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-divider.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,sLAAsL;;MCc9L,OAAO;;;2BAC4BA,+BAAuB,EAAE;;EAGvE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;GACnC;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,mBAAa,MAAM,IACtBD,gBACE,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,KAAKE,2BAAqB,CAAC,KAAK;OAChE,GACD,CACG,EACP;GACH;;;;;;","names":["getThemeForegroundColor","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","./src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["hr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  height: 0.063rem;\n  background-color: var(--ic-keyline-darken-rgb);\n}\n\nhr.light {\n  background-color: var(--ic-keyline-lighten-rgb);\n}\n","import { h, Component, Host, Listen, State } from \"@stencil/core\";\n\nimport { getThemeForegroundColor } from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <hr\n          class={{\n            [\"light\"]: this.foregroundColor === IcThemeForegroundEnum.Light,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-divider.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,YAAY,GAAG,iMAAiM;;MCczM,OAAO;;;2BAC4BA,+BAAuB,EAAE;;EAGvE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;GACnC;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,mBAAa,MAAM,IACtBD,gBACE,KAAK,EAAE;QACL,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe,KAAKE,2BAAqB,CAAC,KAAK;OAChE,GACD,CACG,EACP;GACH;;;;;;","names":["getThemeForegroundColor","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-divider/ic-divider.css?tag=ic-divider&encapsulation=scoped","./src/components/ic-divider/ic-divider.tsx"],"sourcesContent":["hr {\n  padding: 0;\n  margin: 0;\n  border: none;\n  height: var(--ic-space-1px);\n  background-color: var(--ic-keyline-darken-rgb);\n}\n\nhr.light {\n  background-color: var(--ic-keyline-lighten-rgb);\n}\n","import { h, Component, Host, Listen, State } from \"@stencil/core\";\n\nimport { getThemeForegroundColor } from \"../../utils/helpers\";\nimport {\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\n\n@Component({\n  tag: \"ic-divider\",\n  styleUrl: \"ic-divider.css\",\n  scoped: true,\n})\nexport class Divider {\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  render() {\n    return (\n      <Host aria-hidden=\"true\">\n        <hr\n          class={{\n            [\"light\"]: this.foregroundColor === IcThemeForegroundEnum.Light,\n          }}\n        />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -6,7 +6,7 @@ const index = require('./index-f79a4e53.js');
 const types = require('./types-3eb02246.js');
 const helpers = require('./helpers-2021e212.js');
 
-const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg)}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host([small]),:host([small]) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host([small]),:host([small]) .section-container{min-height:15rem}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host([small]),:host([small]) .section-container{min-height:15rem}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host([small]),:host([small]) .section-container{min-height:10.813rem}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:17.5rem}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host([small]),:host([small]) .section-container{min-height:10.813rem}:host([secondary-heading]),:host([secondary-heading]) .section-container{min-height:16.5rem}:host([secondary-heading]) .section-container,:host([small]) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
+const icHeroCss = "/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%;}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=\"button\"],[type=\"reset\"],[type=\"submit\"]{-webkit-appearance:button}button::-moz-focus-inner,[type=\"button\"]::-moz-focus-inner,[type=\"reset\"]::-moz-focus-inner,[type=\"submit\"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=\"button\"]:-moz-focusring,[type=\"reset\"]:-moz-focusring,[type=\"submit\"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=\"checkbox\"],[type=\"radio\"]{box-sizing:border-box;padding:0;}[type=\"number\"]::-webkit-inner-spin-button,[type=\"number\"]::-webkit-outer-spin-button{height:auto}[type=\"search\"]{-webkit-appearance:textfield;outline-offset:-2px;}[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}:host{display:block;background-color:var(--ic-theme-tertiary);color:var(--ic-theme-text);--hero-heading-bottom-margin:var(--ic-space-md)}:host(.dark){background-color:var(--ic-theme-secondary)}:host(.has-background-image){background-repeat:no-repeat;background-position:right -6.25rem;background-size:auto calc(100% + 6.25rem);box-shadow:var(--ic-elevation-inset)}@media (prefers-reduced-motion){:host(.has-background-image){background-position:right -6.25rem !important}}ic-typography.heading-bottom-spacing{margin-bottom:var(--hero-heading-bottom-margin)}.section-container{display:flex;align-items:center;height:100%}.left-container{padding:var(--ic-space-xl) 0}.left-container:not(.left-container-full-width){flex-basis:50%}.left-container-full-width{width:100%}.right-container{flex-basis:50%}.interaction-container{display:flex;gap:var(--ic-space-md);margin-top:var(--ic-space-lg);flex-wrap:wrap}.secondary-container{display:flex;flex-direction:column;justify-content:center;border-left:var(--ic-space-xxxs) solid var(--ic-theme-text)}.secondary-subheading{margin-top:var(--ic-space-xxs)}:host([content-aligned=\"left\"]) .left-container,:host([content-aligned=\"left\"]) .interaction-container{justify-content:flex-start;text-align:left}:host([content-aligned=\"center\"]) .left-container,:host([content-aligned=\"center\"]) .interaction-container{justify-content:center;text-align:center}@media (min-width: 992px){.left-container-full-width{width:66.6%}}@media (min-width: 1044px){:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}.left-container:not(.left-container-full-width){flex-basis:66.6%}.left-container{min-height:9rem}.right-container{flex-basis:33.3%;margin-left:3.125rem}.secondary-container{min-height:9rem}.secondary-heading,.secondary-subheading{margin-left:3.938rem}}@media (min-width: 801px) and (max-width: 1043px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:5.922rem}.right-container{margin-left:3.125rem}}@media (min-width: 641px) and (max-width: 800px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:16rem}:host(.small),:host(.small) .section-container{min-height:15rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:14rem}.left-container{min-height:10rem}.secondary-container{min-height:10rem}.secondary-heading,.secondary-subheading{margin-left:2.125rem}.right-container{margin-left:3.125rem}}@media (min-width: 481px) and (max-width: 640px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:13rem}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:17.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}.right-container{margin-bottom:2.5rem}}@media (max-width: 480px){:host(.has-background-image){background-image:none !important}:host,.section-container{min-height:12rem}:host,.right-container{margin-bottom:var(--ic-space-md)}:host(.small),:host(.small) .section-container{min-height:10.813rem}:host(.secondary-heading),:host(.secondary-heading) .section-container{min-height:16.5rem}:host(.secondary-heading) .section-container,:host(.small) .section-container,.section-container{flex-direction:column;align-items:flex-start}.left-container{height:-moz-fit-content;height:fit-content}.secondary-container{height:-moz-fit-content;height:fit-content;border:none}}";
 
 const Hero = class {
   constructor(hostRef) {
@@ -59,6 +59,8 @@ const Hero = class {
     return (index.h(index.Host, { class: {
         [types.IcThemeForegroundEnum.Dark]: foregroundColor === types.IcThemeForegroundEnum.Dark,
         ["has-background-image"]: backgroundImage !== undefined,
+        ["small"]: small,
+        ["secondary-heading"]: !!secondaryHeading,
       }, style: style }, index.h("ic-section-container", { aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { class: {
         ["left-container"]: true,
         ["left-container-full-width"]: this.leftContentFullWidth,

package/dist/cjs/ic-hero.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-hero.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,+1MAA+1M;;MCkCp2M,IAAI;;;;;;;;qCA+B+B,KAAK;mBAKpB,MAAM;0BAKa,MAAM;iBAK/B,KAAK;wBAEG,KAAK;wBAEN,cAAc;gCAG5C,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,KAAK,SAAS;2BAEbA,+BAAuB,EAAE;;EAGvE,kBAAkB,CAAC,EAAe;IAChC,MAAM,KAAK,GAAY,EAAE,CAAC,MAAM,CAAC;IACjC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC;GACnC;EAGD,QAAQ;IACN,IAAI,IAAI,CAAC,yBAAyB,EAAE;MAClC,OAAO;KACR;IAED,MAAM,WAAW,GAAG,QAAQ,CAAC,gBAAgB,CAAC,SAAS,CAAC;IACxD,MAAM,MAAM,GAAG,GAAG,CAAC;IACnB,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,WAAW,GAAG,MAAM,CAAC;IACtC,IAAI,CAAC,YAAY,GAAG,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC;GACzC;EAED,iBAAiB;IACf,IAAI,CAAC,YAAY,GAAGC,sBAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;GAC1D;EAED,gBAAgB;IACdC,wCAAgC,CAC9B,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7C,MAAM,CACP,CAAC;GACH;EAED,mBAAmB;IACjB,IAAI,CAAC,YAAY,GAAGD,sBAAc,CAAC,IAAI,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC;GAC1D;EAED,MAAM;IACJ,MAAM,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,UAAU,EACV,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,EACf,eAAe,EACf,YAAY,GACb,GAAG,IAAI,CAAC;IAET,IAAI,KAAK,GAAG,EAAE,CAAC;IAEf,IAAI,eAAe,KAAK,SAAS,EAAE;MACjC,KAAK,GAAG;QACN,kBAAkB,EAAE,MAAM,GAAG,eAAe,GAAG,GAAG;QAClD,qBAAqB,EAAE,YAAY;OACpC,CAAC;KACH;IAED,QACEE,QAACC,UAAI,IACH,KAAK,EAAE;QACL,CAACC,2BAAqB,CAAC,IAAI,GACzB,eAAe,KAAKA,2BAAqB,CAAC,IAAI;QAChD,CAAC,sBAAsB,GAAG,eAAe,KAAK,SAAS;OACxD,EACD,KAAK,EAAE,KAAK,IAEZF,kCACE,OAAO,EAAE,OAAO,EAChB,UAAU,QACV,KAAK,EAAC,mBAAmB,IAEzBA,iBACE,KAAK,EAAE;QACL,CAAC,gBAAgB,GAAG,IAAI;QACxB,CAAC,2BAA2B,GAAG,IAAI,CAAC,oBAAoB;OACzD,IAEDA,iBAAK,KAAK,EAAC,SAAS,IAClBA,kBAAM,IAAI,EAAC,SAAS,IAClBA,2BACE,OAAO,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,EAC5B,KAAK,EAAE,EAAE,CAAC,wBAAwB,GAAG,CAAC,KAAK,EAAE,IAE5C,OAAO,CACM,CACX,CACH,EACNA,iBAAK,KAAK,EAAC,YAAY,IACrBA,kBAAM,IAAI,EAAC,YAAY,IACrBA,2BAAe,OAAO,EAAC,MAAM,IAAE,UAAU,CAAiB,CACrD,CACH,EACNA,iBAAK,KAAK,EAAC,uBAAuB,IAChCA,kBAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACF,EACL,CAAC,gBAAgB,KAAK,SAAS,IAAI,IAAI,CAAC,YAAY,MACnDA,iBAAK,KAAK,EAAC,iBAAiB,IAC1BA,kBAAM,IAAI,EAAC,WAAW,IACnB,gBAAgB,KACfA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,iBAAK,KAAK,EAAC,mBAAmB,IAC5BA,2BAAe,OAAO,EAAC,IAAI,IACxB,gBAAgB,CACH,CACZ,EACNA,iBAAK,KAAK,EAAC,sBAAsB,IAC/BA,2BAAe,OAAO,EAAC,gBAAgB,IACpC,mBAAmB,CACN,CACZ,CACF,CACP,CACI,CACH,CACP,CACoB,CAClB,EACP;GACH;;;;;;;","names":["getThemeForegroundColor","slotHasContent","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 15rem;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 15rem;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host([small]),\n  :host([small]) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host([secondary-heading]),\n  :host([secondary-heading]) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host([secondary-heading]) .section-container,\n  :host([small]) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-hero.entry.cjs.js","mappings":"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","names":["getThemeForegroundColor","slotHasContent","onComponentRequiredPropUndefined","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-hero/ic-hero.css?tag=ic-hero&encapsulation=shadow","./src/components/ic-hero/ic-hero.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n  background-color: var(--ic-theme-tertiary);\n  color: var(--ic-theme-text);\n\n  --hero-heading-bottom-margin: var(--ic-space-md);\n}\n\n:host(.dark) {\n  background-color: var(--ic-theme-secondary);\n}\n\n:host(.has-background-image) {\n  background-repeat: no-repeat;\n  background-position: right -6.25rem;\n  background-size: auto calc(100% + 6.25rem);\n  box-shadow: var(--ic-elevation-inset);\n}\n\n@media (prefers-reduced-motion) {\n  :host(.has-background-image) {\n    background-position: right -6.25rem !important;\n  }\n}\n\nic-typography.heading-bottom-spacing {\n  margin-bottom: var(--hero-heading-bottom-margin);\n}\n\n.section-container {\n  display: flex;\n  align-items: center;\n  height: 100%;\n}\n\n.left-container {\n  padding: var(--ic-space-xl) 0;\n}\n\n.left-container:not(.left-container-full-width) {\n  flex-basis: 50%;\n}\n\n.left-container-full-width {\n  width: 100%;\n}\n\n.right-container {\n  flex-basis: 50%;\n}\n\n.interaction-container {\n  display: flex;\n  gap: var(--ic-space-md);\n  margin-top: var(--ic-space-lg);\n  flex-wrap: wrap;\n}\n\n.secondary-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  border-left: var(--ic-space-xxxs) solid var(--ic-theme-text);\n}\n\n.secondary-subheading {\n  margin-top: var(--ic-space-xxs);\n}\n\n:host([content-aligned=\"left\"]) .left-container,\n:host([content-aligned=\"left\"]) .interaction-container {\n  justify-content: flex-start;\n  text-align: left;\n}\n\n:host([content-aligned=\"center\"]) .left-container,\n:host([content-aligned=\"center\"]) .interaction-container {\n  justify-content: center;\n  text-align: center;\n}\n\n@media (min-width: 992px) {\n  .left-container-full-width {\n    width: 66.6%;\n  }\n}\n\n@media (min-width: 1044px) {\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  .left-container:not(.left-container-full-width) {\n    flex-basis: 66.6%;\n  }\n\n  .left-container {\n    min-height: 9rem;\n  }\n\n  .right-container {\n    flex-basis: 33.3%;\n    margin-left: 3.125rem;\n  }\n\n  .secondary-container {\n    min-height: 9rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 3.938rem;\n  }\n}\n\n@media (min-width: 801px) and (max-width: 1043px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 5.922rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 641px) and (max-width: 800px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 16rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 15rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 14rem;\n  }\n\n  .left-container {\n    min-height: 10rem;\n  }\n\n  .secondary-container {\n    min-height: 10rem;\n  }\n\n  .secondary-heading,\n  .secondary-subheading {\n    margin-left: 2.125rem;\n  }\n\n  .right-container {\n    margin-left: 3.125rem;\n  }\n}\n\n@media (min-width: 481px) and (max-width: 640px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 13rem;\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 17.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n\n  .right-container {\n    margin-bottom: 2.5rem;\n  }\n}\n\n@media (max-width: 480px) {\n  :host(.has-background-image) {\n    background-image: none !important;\n  }\n\n  :host,\n  .section-container {\n    min-height: 12rem;\n  }\n\n  :host,\n  .right-container {\n    margin-bottom: var(--ic-space-md);\n  }\n\n  :host(.small),\n  :host(.small) .section-container {\n    min-height: 10.813rem;\n  }\n\n  :host(.secondary-heading),\n  :host(.secondary-heading) .section-container {\n    min-height: 16.5rem;\n  }\n\n  :host(.secondary-heading) .section-container,\n  :host(.small) .section-container,\n  .section-container {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .left-container {\n    height: fit-content;\n  }\n\n  .secondary-container {\n    height: fit-content;\n    border: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  h,\n  State,\n  Listen,\n} from \"@stencil/core\";\nimport {\n  IcAlignment,\n  IcTheme,\n  IcThemeForeground,\n  IcThemeForegroundEnum,\n} from \"../../utils/types\";\nimport {\n  slotHasContent,\n  getThemeForegroundColor,\n  onComponentRequiredPropUndefined,\n} from \"../../utils/helpers\";\nimport { IcHeroContentAlignments } from \"./ic-hero.types\";\n\n/**\n * @slot heading - Content will be rendered in the title area, in place of the heading.\n * @slot subheading - Content will be rendered in the title area, in place of the subheading.\n * @slot interaction - Content will be rendered in the interaction area, adjacent to the title area.\n * @slot secondary - Content will be rendered in the secondary content area.\n */\n\n@Component({\n  tag: \"ic-hero\",\n  styleUrl: \"ic-hero.css\",\n  shadow: true,\n})\nexport class Hero {\n  @Element() el: HTMLIcHeroElement;\n\n  /**\n   * The heading of the hero.\n   */\n  @Prop() heading!: string;\n\n  /**\n   * The description for the hero.\n   */\n  @Prop() subheading?: string;\n\n  /**\n   * The optional secondary heading, replaced by slotted right content.\n   */\n  @Prop() secondaryHeading?: string;\n\n  /**\n   * The optional secondary subheading, replaced by slotted right content.\n   */\n  @Prop() secondarySubheading?: string;\n\n  /**\n   * The optional background image.\n   */\n  @Prop() backgroundImage?: string;\n\n  /**\n   * If `true`, the background image (if set) will not scroll using a parallax effect.\n   */\n  @Prop() disableBackgroundParallax?: boolean = false;\n\n  /**\n   * The alignment of the hero.\n   */\n  @Prop() aligned: IcAlignment = \"left\";\n\n  /**\n   * The alignment of the hero content.\n   */\n  @Prop() contentAligned: IcHeroContentAlignments = \"left\";\n\n  /**\n   * If `true`, the small styling will be applied to the hero.\n   */\n  @Prop() small: boolean = false;\n\n  @State() rightContent: boolean = false;\n\n  @State() scrollFactor: string = \"right -100px\";\n\n  @State() leftContentFullWidth: boolean =\n    !this.rightContent && this.secondaryHeading === undefined;\n\n  @State() foregroundColor: IcThemeForeground = getThemeForegroundColor();\n\n  @Listen(\"themeChange\", { target: \"document\" })\n  themeChangeHandler(ev: CustomEvent): void {\n    const theme: IcTheme = ev.detail;\n    this.foregroundColor = theme.mode;\n  }\n\n  @Listen(\"scroll\", { target: \"document\" })\n  doScroll(): void {\n    if (this.disableBackgroundParallax) {\n      return;\n    }\n\n    const scrolltotop = document.scrollingElement.scrollTop;\n    const factor = 0.4;\n    const y = -100 + scrolltotop * factor;\n    this.scrollFactor = \"right \" + y + \"px\";\n  }\n\n  componentWillLoad(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.heading, propName: \"heading\" }],\n      \"Hero\"\n    );\n  }\n\n  componentWillRender(): void {\n    this.rightContent = slotHasContent(this.el, \"secondary\");\n  }\n\n  render() {\n    const {\n      aligned,\n      small,\n      heading,\n      subheading,\n      secondaryHeading,\n      secondarySubheading,\n      foregroundColor,\n      backgroundImage,\n      scrollFactor,\n    } = this;\n\n    let style = {};\n\n    if (backgroundImage !== undefined) {\n      style = {\n        \"background-image\": \"url(\" + backgroundImage + \")\",\n        \"background-position\": scrollFactor,\n      };\n    }\n\n    return (\n      <Host\n        class={{\n          [IcThemeForegroundEnum.Dark]:\n            foregroundColor === IcThemeForegroundEnum.Dark,\n          [\"has-background-image\"]: backgroundImage !== undefined,\n          [\"small\"]: small,\n          [\"secondary-heading\"]: !!secondaryHeading,\n        }}\n        style={style}\n      >\n        <ic-section-container\n          aligned={aligned}\n          fullHeight\n          class=\"section-container\"\n        >\n          <div\n            class={{\n              [\"left-container\"]: true,\n              [\"left-container-full-width\"]: this.leftContentFullWidth,\n            }}\n          >\n            <div class=\"heading\">\n              <slot name=\"heading\">\n                <ic-typography\n                  variant={small ? \"h2\" : \"h1\"}\n                  class={{ [\"heading-bottom-spacing\"]: !small }}\n                >\n                  {heading}\n                </ic-typography>\n              </slot>\n            </div>\n            <div class=\"subheading\">\n              <slot name=\"subheading\">\n                <ic-typography variant=\"body\">{subheading}</ic-typography>\n              </slot>\n            </div>\n            <div class=\"interaction-container\">\n              <slot name=\"interaction\"></slot>\n            </div>\n          </div>\n          {(secondaryHeading !== undefined || this.rightContent) && (\n            <div class=\"right-container\">\n              <slot name=\"secondary\">\n                {secondaryHeading && (\n                  <div class=\"secondary-container\">\n                    <div class=\"secondary-heading\">\n                      <ic-typography variant=\"h4\">\n                        {secondaryHeading}\n                      </ic-typography>\n                    </div>\n                    <div class=\"secondary-subheading\">\n                      <ic-typography variant=\"subtitle-small\">\n                        {secondarySubheading}\n                      </ic-typography>\n                    </div>\n                  </div>\n                )}\n              </slot>\n            </div>\n          )}\n        </ic-section-container>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-horizontal-scroll.cjs.entry.js

@@ -14,7 +14,7 @@ const RightArrow = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="2
   <path d="M8.08748 5L6.91248 6.175L10.7291 10L6.91248 13.825L8.08748 15L13.0875 10L8.08748 5Z"/>
 </svg>`;
 
-const icHorizontalScrollCss = "/*! 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{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);display:flex;max-width:100%}:host(.light){--splitter-color:var(--ic-keyline-lighten-rgb)}:host(.dark){--splitter-color:var(--ic-keyline-darken-rgb)}:host([inline]){margin-bottom:0}::slotted(*){overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:calc(var(--ic-space-xs) * -1) !important;padding:var(--ic-space-xs) !important}:host(.visible) ::slotted(*){margin:calc(var(--ic-space-xs) * -1) 0 !important;padding:var(--ic-space-xs) !important}.tabs-container::-webkit-scrollbar{display:none}.scroll-container-left,.scroll-container-right{display:flex}.scroll-container-left{margin-left:var(--ic-space-xxs)}.scroll-container-right{margin-right:var(--ic-space-xxs)}.hidden{display:none}.scroll-arrow{margin:var(--ic-space-xxs) 0 var(--ic-space-xs) 0}.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:0.063rem;margin-top:var(--ic-space-xs);border-radius:0.063rem;background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:calc(var(--ic-space-xxs) - 0.063rem)}.scroll-splitter-right{margin-right:calc(var(--ic-space-xxs) - 0.063rem)}.disabled .scroll-splitter-left,.disabled .scroll-splitter-right{background-color:transparent}.disabled ic-button>svg{color:var(--ic-keyline-darken-rgb)}:host(.dark) .disabled ic-button>svg,:host(.light) .disabled ic-button>svg{color:var(--splitter-color) !important}";
+const icHorizontalScrollCss = "/*! 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{--border-bottom-color:var(--ic-architectural-300);--splitter-color:var(--ic-architectural-100);display:flex;max-width:100%}:host(.light){--splitter-color:var(--ic-keyline-lighten-rgb)}:host(.dark){--splitter-color:var(--ic-keyline-darken-rgb)}::slotted(*){overflow-x:scroll;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:calc(var(--ic-space-xs) * -1) !important;padding:var(--ic-space-xs) !important}:host(.visible) ::slotted(*){margin:calc(var(--ic-space-xs) * -1) 0 !important;padding:var(--ic-space-xs) !important}.tabs-container::-webkit-scrollbar{display:none}.scroll-container-left,.scroll-container-right{display:flex}.scroll-container-left{margin-left:var(--ic-space-xxs)}.scroll-container-right{margin-right:var(--ic-space-xxs)}.hidden{display:none}.scroll-arrow{margin:var(--ic-space-xxs) 0 var(--ic-space-xs) 0}.disabled .ic-tooltip-container{display:none !important}.scroll-splitter-left,.scroll-splitter-right{display:flex;height:var(--ic-space-lg);width:var(--ic-space-1px);margin-top:var(--ic-space-xs);border-radius:var(--ic-space-1px);background-color:var(--splitter-color)}.scroll-splitter-left{margin-left:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.scroll-splitter-right{margin-right:calc(var(--ic-space-xxs) - var(--ic-space-1px))}.disabled .scroll-splitter-left,.disabled .scroll-splitter-right{background-color:transparent}.disabled ic-button>svg{color:var(--ic-keyline-darken-rgb)}:host(.dark) .disabled ic-button>svg,:host(.light) .disabled ic-button>svg{color:var(--splitter-color) !important}";
 
 const SCROLL_DELAY_MS = 200;
 const HorizontalScroll = class {

package/dist/cjs/ic-horizontal-scroll.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"ic-horizontal-scroll.entry.cjs.js","mappings":";;;;;;;;;;;;;;;;AAAA,MAAM,qBAAqB,GAAG,65HAA65H;;ACiB37H,MAAM,eAAe,GAAG,GAAG,CAAC;MAOf,gBAAgB;;;IAkBnB,mBAAc,GAAY,KAAK,CAAC;IAuBhC,2BAAsB,GAAG;MAC/B,IAAI,IAAI,CAAC,EAAE,CAAC,WAAW,IAAI,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE;QAC5D,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;OAC3B;WAAM;QACL,IAAI,CAAC,YAAY,GAAGA,yBAAiB,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;OAC9D;MAED,IAAI,IAAI,CAAC,YAAY,EAAE;QACrB,IAAI,CAAC,eAAe;UAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,UAAU;YACpE,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;OACrC;KACF,CAAC;IAEM,sBAAiB,GAAG;MAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC;QACvC,IAAI,CAAC,sBAAsB,EAAE,CAAC;OAC/B,CAAC,CAAC;MACH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;KACpD,CAAC;IAEM,eAAU,GAAG;MACnB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;KACxD,CAAC;IAEM,gBAAW,GAAG;MACpB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC;KACxD,CAAC;IAEM,oBAAe,GAAG;MACxB,IAAI,CAAC,WAAW,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;KAC7E,CAAC;IAEM,mBAAc,GAAG;MACvB,IAAI,CAAC,UAAU,EAAE,CAAC;MAClB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;KAC5E,CAAC;IAEM,8BAAyB,GAAG,CAAC,CAAa;MAChD,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;KAC5E,CAAC;IAEM,+BAA0B,GAAG,CAAC,CAAa;MACjD,CAAC,CAAC,cAAc,EAAE,CAAC;MACnB,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,eAAe,EAAE,eAAe,CAAC,CAAC;KAC7E,CAAC;IAEM,wBAAmB,GAAG;MAC5B,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACvC,CAAC;IAEM,uBAAkB,GAAG;MAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC,SAAS,CACtC,CAAC,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAC1D,CAAC;MACF,OAAO,KAAK,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;KAC9B,CAAC;IAEM,kBAAa,GAAG;MACtB,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;;MAEtC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;KAC9D,CAAC;IAEM,kBAAa,GAAG;;;MAGtB,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;MAChE,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,EAAE;QACjC,IAAI,CAAC,gBAAgB,GAAG,UAAU,KAAK,CAAC,CAAC;QACzC,IAAI,CAAC,eAAe;UAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,UAAU;YAC9C,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;OACrC;MACD,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;KAC7B,CAAC;sBAhHuC,SAAS;4BAEb,IAAI;2BACL,KAAK;wBACR,KAAK;;;;;EActC,MAAM,kBAAkB,CAAC,YAAoB;IAC3C,IAAI,CAAC,gBAAgB,GAAG,YAAY,IAAI,CAAC,CAAC;IAC1C,MAAM,YAAY,GAChB,YAAY,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC;IAC7D,IAAI,CAAC,eAAe;MAClB,IAAI,CAAC,gBAAgB,CAAC,WAAW,GAAG,YAAY;QAChD,IAAI,CAAC,gBAAgB,CAAC,WAAW,CAAC;IACpC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC3B,IAAI,CAAC,gBAAgB,CAAC,UAAU,GAAG,YAAY,CAAC;GACjD;EAED,gBAAgB,CAAC,YAAoB;IACnC,IAAI,IAAI,CAAC,YAAY,EAAE;MACrB,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;KACvC;GACF;EAiFD,iBAAiB;IACf,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAgB,CAAC;IAC3D,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAErE,IAAI,CAAC,KAAK,IAAIC,uBAAe,CAAC,IAAI,CAAC,gBAAgB,CAAC;MAClD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAkB,CAAC;IAC/D,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;MACtB,IAAI,IAAI,CAAC,gBAAgB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,MAC7B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAC5D,CAAC;OACH;KACF,CAAC,CAAC;GACJ;EAED,gBAAgB;IACd,IAAI,YAAY,GAAG,CAAC,CAAC;IACrB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI;MACrC,YAAY,IAAI,IAAI,CAAC,WAAW,CAAC;MACjC,OAAO,YAAY,CAAC;KACrB,CAAC,CAAC;IAEHC,2BAAmB,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;;;;IAK5C,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAC7B,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAC1B,CAAC;IACnB,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK;MACtC,YAAY,CAAC,OAAO,CAAC,CAAC,KAAK,KACzB,KAAK,CAAC,gBAAgB,CAAC,KAAK,EAAE,IAAI,CAAC,mBAAmB,CAAC,CACxD,CAAC;KACH,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,cAAc,KAAK,SAAS,EAAE;MACrC,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;KAClC;GACF;EAED,MAAM;IACJ,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,YAAY,EAAE,GACnE,IAAI,CAAC;IAEP,QACEC,QAACC,UAAI,IACH,KAAK,EAAE;QACL,CAAC,SAAS,GAAG,YAAY;QACzB,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,KAAKC,2BAAqB,CAAC,IAAI;QACxD,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,KAAKA,2BAAqB,CAAC,KAAK;OAC3D,IAEDF,gCACc,MAAM,EAClB,KAAK,EAAE;QACL,CAAC,uBAAuB,GAAG,IAAI;QAC/B,CAAC,QAAQ,GAAG,CAAC,YAAY;QACzB,CAAC,UAAU,GAAG,gBAAgB;OAC/B,IAEDA,uBACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,MAAM,gBACH,aAAa,EACxB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,gBAAgB,EAC1B,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,IAAI,CAAC,UAAU,EACxB,WAAW,EAAE,IAAI,CAAC,yBAAyB,GAChC,EACbA,kBAAM,KAAK,EAAC,sBAAsB,GAAQ,CACtC,EACNA,qBAAa,EACbA,gCACc,MAAM,EAClB,KAAK,EAAE;QACL,CAAC,wBAAwB,GAAG,IAAI;QAChC,CAAC,QAAQ,GAAG,CAAC,YAAY;QACzB,CAAC,UAAU,GAAG,eAAe;OAC9B,IAEDA,kBAAM,KAAK,EAAC,uBAAuB,GAAQ,EAC3CA,uBACE,KAAK,EAAC,cAAc,EACpB,OAAO,EAAC,MAAM,gBACH,cAAc,EACzB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,eAAe,EACzB,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,WAAW,EAAE,IAAI,CAAC,0BAA0B,GACjC,CACT,CACD,EACP;GACH;;;;;;;","names":["elementOverflowsX","getSlotElements","checkResizeObserver","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","./src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n\n  display: flex;\n  max-width: 100%;\n}\n\n:host(.light) {\n  --splitter-color: var(--ic-keyline-lighten-rgb);\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-keyline-darken-rgb);\n}\n\n:host([inline]) {\n  margin-bottom: 0;\n}\n\n/* Slotted items container element */\n::slotted(*) {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  margin: calc(var(--ic-space-xs) * -1) !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.visible) ::slotted(*) {\n  margin: calc(var(--ic-space-xs) * -1) 0 !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n  display: flex;\n}\n\n.scroll-container-left {\n  margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n  margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n  display: none;\n}\n\n.scroll-arrow {\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xs) 0;\n}\n\n.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: 0.063rem;\n  margin-top: var(--ic-space-xs);\n  border-radius: 0.063rem;\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - 0.063rem);\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n.disabled ic-button > svg {\n  color: var(--ic-keyline-darken-rgb);\n}\n\n:host(.dark) .disabled ic-button > svg,\n:host(.light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  @State() firstItemVisible: boolean = true;\n  @State() lastItemVisible: boolean = false;\n  @State() itemOverflow: boolean = false;\n\n  private itemOffsets: number[];\n  private itemsContainerEl: HTMLElement;\n  private items: HTMLElement[];\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(\"focus\", () =>\n          this.itemFocusHandler(Array.from(this.items).indexOf(item))\n        );\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-horizontal-scroll.entry.cjs.js","mappings":"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","names":["elementOverflowsX","getSlotElements","checkResizeObserver","h","Host","IcThemeForegroundEnum"],"sources":["./src/components/ic-horizontal-scroll/ic-horizontal-scroll.css?tag=ic-horizontal-scroll&encapsulation=shadow","./src/components/ic-horizontal-scroll/ic-horizontal-scroll.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  --border-bottom-color: var(--ic-architectural-300);\n  --splitter-color: var(--ic-architectural-100);\n\n  display: flex;\n  max-width: 100%;\n}\n\n:host(.light) {\n  --splitter-color: var(--ic-keyline-lighten-rgb);\n}\n\n:host(.dark) {\n  --splitter-color: var(--ic-keyline-darken-rgb);\n}\n\n/* Slotted items container element */\n::slotted(*) {\n  overflow-x: scroll;\n  overflow-y: hidden;\n  scroll-behavior: smooth;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  margin: calc(var(--ic-space-xs) * -1) !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n:host(.visible) ::slotted(*) {\n  margin: calc(var(--ic-space-xs) * -1) 0 !important;\n  padding: var(--ic-space-xs) !important;\n}\n\n.tabs-container::-webkit-scrollbar {\n  display: none;\n}\n\n.scroll-container-left,\n.scroll-container-right {\n  display: flex;\n}\n\n.scroll-container-left {\n  margin-left: var(--ic-space-xxs);\n}\n\n.scroll-container-right {\n  margin-right: var(--ic-space-xxs);\n}\n\n.hidden {\n  display: none;\n}\n\n.scroll-arrow {\n  margin: var(--ic-space-xxs) 0 var(--ic-space-xs) 0;\n}\n\n.disabled .ic-tooltip-container {\n  display: none !important;\n}\n\n.scroll-splitter-left,\n.scroll-splitter-right {\n  display: flex;\n  height: var(--ic-space-lg);\n  width: var(--ic-space-1px);\n  margin-top: var(--ic-space-xs);\n  border-radius: var(--ic-space-1px);\n  background-color: var(--splitter-color);\n}\n\n.scroll-splitter-left {\n  margin-left: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.scroll-splitter-right {\n  margin-right: calc(var(--ic-space-xxs) - var(--ic-space-1px));\n}\n\n.disabled .scroll-splitter-left,\n.disabled .scroll-splitter-right {\n  background-color: transparent;\n}\n\n.disabled ic-button > svg {\n  color: var(--ic-keyline-darken-rgb);\n}\n\n:host(.dark) .disabled ic-button > svg,\n:host(.light) .disabled ic-button > svg {\n  color: var(--splitter-color) !important;\n}\n","import {\n  Component,\n  Element,\n  h,\n  Host,\n  State,\n  Method,\n  Prop,\n} from \"@stencil/core\";\n\nimport LeftArrow from \"./assets/left-arrow.svg\";\nimport RightArrow from \"./assets/right-arrow.svg\";\nimport { getSlotElements } from \"../../utils/helpers\";\n\nimport { checkResizeObserver, elementOverflowsX } from \"../../utils/helpers\";\nimport { IcThemeForeground, IcThemeForegroundEnum } from \"../../utils/types\";\n\nconst SCROLL_DELAY_MS = 200;\n\n@Component({\n  tag: \"ic-horizontal-scroll\",\n  styleUrl: \"./ic-horizontal-scroll.css\",\n  shadow: true,\n})\nexport class HorizontalScroll {\n  @Element() el: HTMLIcHorizontalScrollElement;\n\n  /**\n   * The appearance of the horizontal scroll, e.g. dark, light or the default.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  @State() firstItemVisible: boolean = true;\n  @State() lastItemVisible: boolean = false;\n  @State() itemOverflow: boolean = false;\n\n  private itemOffsets: number[];\n  private itemsContainerEl: HTMLElement;\n  private items: HTMLElement[];\n  private resizeObserver: ResizeObserver;\n  private isScrolling: number;\n  private scrollDelay: number;\n  private buttonStateSet: boolean = false;\n\n  /**\n   * @internal if side scrolling enabled, scrolls the specified item into view.\n   */\n  @Method()\n  async scrollItemIntoView(itemPosition: number): Promise<void> {\n    this.firstItemVisible = itemPosition <= 0;\n    const newScrollPos =\n      itemPosition <= 0 ? 0 : this.itemOffsets[itemPosition - 1];\n    this.lastItemVisible =\n      this.itemsContainerEl.offsetWidth + newScrollPos >=\n      this.itemsContainerEl.scrollWidth;\n    this.buttonStateSet = true;\n    this.itemsContainerEl.scrollLeft = newScrollPos;\n  }\n\n  itemFocusHandler(itemPosition: number): void {\n    if (this.itemOverflow) {\n      this.scrollItemIntoView(itemPosition);\n    }\n  }\n\n  private resizeObserverCallback = () => {\n    if (this.el.clientWidth >= this.itemsContainerEl.scrollWidth) {\n      this.itemOverflow = false;\n    } else {\n      this.itemOverflow = elementOverflowsX(this.itemsContainerEl);\n    }\n\n    if (this.itemOverflow) {\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + this.itemsContainerEl.scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n  };\n\n  private runResizeObserver = () => {\n    this.resizeObserver = new ResizeObserver(() => {\n      this.resizeObserverCallback();\n    });\n    this.resizeObserver.observe(this.itemsContainerEl);\n  };\n\n  private scrollLeft = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() - 1);\n  };\n\n  private scrollRight = () => {\n    this.scrollItemIntoView(this.getCurrentLeftItem() + 1);\n  };\n\n  private longScrollRight = () => {\n    this.scrollRight();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private longScrollLeft = () => {\n    this.scrollLeft();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private leftArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollLeft, SCROLL_DELAY_MS);\n  };\n\n  private rightArrowMouseDownHandler = (e: MouseEvent) => {\n    e.preventDefault();\n    this.scrollDelay = window.setTimeout(this.longScrollRight, SCROLL_DELAY_MS);\n  };\n\n  private arrowMouseUpHandler = () => {\n    window.clearTimeout(this.scrollDelay);\n  };\n\n  private getCurrentLeftItem = (): number => {\n    const index = this.itemOffsets.findIndex(\n      (el) => el > Math.round(this.itemsContainerEl.scrollLeft)\n    );\n    return index < 0 ? 0 : index;\n  };\n\n  private scrollHandler = () => {\n    window.clearTimeout(this.isScrolling);\n    // Set a timeout to run after scrolling ends\n    this.isScrolling = window.setTimeout(this.scrollStopped, 50);\n  };\n\n  private scrollStopped = () => {\n    // If scrollItemIntoView has been called, the button states will already be set\n    // Can't just handle it here as it causes strange jumping behaviour in positioning\n    const scrollLeft = Math.round(this.itemsContainerEl.scrollLeft);\n    if (this.buttonStateSet === false) {\n      this.firstItemVisible = scrollLeft === 0;\n      this.lastItemVisible =\n        this.itemsContainerEl.offsetWidth + scrollLeft >=\n        this.itemsContainerEl.scrollWidth;\n    }\n    this.buttonStateSet = false;\n  };\n\n  componentWillLoad(): void {\n    this.itemsContainerEl = this.el.children[0] as HTMLElement;\n    this.itemsContainerEl.addEventListener(\"scroll\", this.scrollHandler);\n\n    this.items = (getSlotElements(this.itemsContainerEl) ||\n      Array.from(this.itemsContainerEl.children)) as HTMLElement[];\n    this.items.forEach((item) => {\n      if (item.addEventListener) {\n        item.addEventListener(\"focus\", () =>\n          this.itemFocusHandler(Array.from(this.items).indexOf(item))\n        );\n      }\n    });\n  }\n\n  componentDidLoad(): void {\n    let runningTotal = 0;\n    this.itemOffsets = this.items.map((item) => {\n      runningTotal += item.offsetWidth;\n      return runningTotal;\n    });\n\n    checkResizeObserver(this.runResizeObserver);\n\n    // Add event listener to scroll containers as mouse events are not fired on disabled elements (ic-button's <button>)\n    // 'mouseleave' needed in case the user moves their mouse while holding the arrow buttons\n    // - 'mouseup' otherwise not detected and scrolling not stopped\n    const scrollArrows = Array.from(\n      this.el.shadowRoot.querySelectorAll(\"div\")\n    ) as HTMLElement[];\n    [\"mouseup\", \"mouseleave\"].forEach((event) => {\n      scrollArrows.forEach((arrow) =>\n        arrow.addEventListener(event, this.arrowMouseUpHandler)\n      );\n    });\n  }\n\n  disconnectedCallback(): void {\n    if (this.resizeObserver !== undefined) {\n      this.resizeObserver.disconnect();\n    }\n  }\n\n  render() {\n    const { appearance, firstItemVisible, lastItemVisible, itemOverflow } =\n      this;\n\n    return (\n      <Host\n        class={{\n          [\"visible\"]: itemOverflow,\n          [\"dark\"]: this.appearance === IcThemeForegroundEnum.Dark,\n          [\"light\"]: this.appearance === IcThemeForegroundEnum.Light,\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-left\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: firstItemVisible,\n          }}\n        >\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll left\"\n            appearance={appearance}\n            innerHTML={LeftArrow}\n            disabled={firstItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollLeft}\n            onMouseDown={this.leftArrowMouseDownHandler}\n          ></ic-button>\n          <span class=\"scroll-splitter-left\"></span>\n        </div>\n        <slot></slot>\n        <div\n          aria-hidden=\"true\"\n          class={{\n            [\"scroll-container-right\"]: true,\n            [\"hidden\"]: !itemOverflow,\n            [\"disabled\"]: lastItemVisible,\n          }}\n        >\n          <span class=\"scroll-splitter-right\"></span>\n          <ic-button\n            class=\"scroll-arrow\"\n            variant=\"icon\"\n            aria-label=\"Scroll right\"\n            appearance={appearance}\n            innerHTML={RightArrow}\n            disabled={lastItemVisible}\n            tabindex=\"-1\"\n            onClick={this.scrollRight}\n            onMouseDown={this.rightArrowMouseDownHandler}\n          ></ic-button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ic-input-component-container_3.cjs.entry.js

@@ -8,7 +8,7 @@ const helpers = require('./helpers-2021e212.js');
 const checkIcon = require('./check-icon-b2f60716.js');
 const popper = require('./popper-11d5f714.js');
 
-const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:0.063rem solid var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:0.063rem;background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:0.063rem dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:0.063rem solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:0.063rem dashed GrayText}}";
+const icInputComponentContainerCss = "ic-input-component-container{display:flex;border:var(--ic-space-1px) solid\n    var(--border-color, var(--ic-architectural-400));border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-slow);height:2.5rem;width:var(--input-width, 20rem);padding:var(--ic-space-1px);background-color:var(--ic-architectural-white);box-sizing:border-box;fill:var(--ic-architectural-400);outline:none}ic-input-component-container.fullwidth{width:100%}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed var(--ic-architectural-200)}ic-input-component-container.readonly,ic-input-component-container.readonly:hover{border:none;padding:0}ic-input-component-container.error{border:var(--ic-space-xxxs) solid var(--ic-status-error);padding:0}ic-input-component-container.warning{border:var(--ic-space-xxxs) solid var(--ic-status-warning-mid);padding:0}ic-input-component-container.success{border:var(--ic-space-xxxs) solid var(--ic-status-success);padding:0}ic-input-component-container.small{height:var(--ic-space-xl)}ic-input-component-container.multiline{height:auto}ic-input-component-container .icon-container{margin-top:var(--ic-space-xxs);margin-left:0.438rem;display:flex;align-items:center}ic-input-component-container.multiline .icon-container,ic-input-component-container.multiline.small .icon-container{margin-top:0.375rem;display:block}ic-input-component-container.readonly .icon-container{margin-left:-0.313rem}ic-input-component-container.disabled ::-moz-placeholder{display:none}ic-input-component-container.disabled ::placeholder{display:none}ic-input-component-container .inline-success{margin:var(--ic-space-xs) 0.375rem;display:flex;align-items:center}ic-input-component-container.dark:hover{--border-color:var(--ic-architectural-400)}ic-input-component-container .inline-success>svg{fill:var(--ic-status-success);height:1.25rem;width:1.25rem}ic-input-component-container:hover{border-color:var(--ic-action-dark-hover);color:var(--ic-action-dark-hover)}.focus-indicator{display:flex;width:100%;margin:-0.125rem;padding:0.125rem;border-radius:var(--ic-border-radius);transition:var(--ic-easing-transition-fast)}.focus-indicator:focus-within,.focus-indicator-enabled{box-shadow:var(--ic-border-focus)}.focus-indicator.dark:focus-within{box-shadow:var(--ic-border-focus)}@media (forced-colors: active){ic-input-component-container,.focus-indicator{transition:none}ic-input-component-container:focus-within{border:var(--ic-space-1px) solid Highlight;outline:0.125rem solid Highlight}ic-input-component-container.disabled,ic-input-component-container.disabled:hover{border:var(--ic-space-1px) dashed GrayText}}";
 
 const InputComponentContainer = class {
   constructor(hostRef) {
@@ -67,7 +67,7 @@ const InputContainer = class {
 };
 InputContainer.style = icInputContainerCss;
 
-const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){[open].sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:0.063rem solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}[open].sc-ic-menu-h{max-height:none;display:block}[open].sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}[small].sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 0.063rem 0.063rem}.option.sc-ic-menu:first-child{border-radius:0.063rem 0.063rem 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}[small].sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:0.063rem solid var(--ic-architectural-400)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
+const icMenuCss = "html.sc-ic-menu{line-height:1.15;-webkit-text-size-adjust:100%}body.sc-ic-menu{margin:0}main.sc-ic-menu{display:block}h1.sc-ic-menu{font-size:2em;margin:0.67em 0}hr.sc-ic-menu{box-sizing:content-box;height:0;overflow:visible}pre.sc-ic-menu{font-family:monospace, monospace;font-size:1em}a.sc-ic-menu{background-color:transparent}abbr[title].sc-ic-menu{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b.sc-ic-menu,strong.sc-ic-menu{font-weight:bolder}code.sc-ic-menu,kbd.sc-ic-menu,samp.sc-ic-menu{font-family:monospace, monospace;font-size:1em}small.sc-ic-menu{font-size:80%}sub.sc-ic-menu,sup.sc-ic-menu{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub.sc-ic-menu{bottom:-0.25em}sup.sc-ic-menu{top:-0.5em}img.sc-ic-menu{border-style:none}button.sc-ic-menu,input.sc-ic-menu,optgroup.sc-ic-menu,select.sc-ic-menu,textarea.sc-ic-menu{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button.sc-ic-menu,input.sc-ic-menu{overflow:visible}button.sc-ic-menu,select.sc-ic-menu{text-transform:none}button.sc-ic-menu,[type=\"button\"].sc-ic-menu,[type=\"reset\"].sc-ic-menu,[type=\"submit\"].sc-ic-menu{-webkit-appearance:button}button.sc-ic-menu::-moz-focus-inner,[type=\"button\"].sc-ic-menu::-moz-focus-inner,[type=\"reset\"].sc-ic-menu::-moz-focus-inner,[type=\"submit\"].sc-ic-menu::-moz-focus-inner{border-style:none;padding:0}button.sc-ic-menu:-moz-focusring,[type=\"button\"].sc-ic-menu:-moz-focusring,[type=\"reset\"].sc-ic-menu:-moz-focusring,[type=\"submit\"].sc-ic-menu:-moz-focusring{outline:1px dotted ButtonText}fieldset.sc-ic-menu{padding:0.35em 0.75em 0.625em}legend.sc-ic-menu{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress.sc-ic-menu{vertical-align:baseline}textarea.sc-ic-menu{overflow:auto}[type=\"checkbox\"].sc-ic-menu,[type=\"radio\"].sc-ic-menu{box-sizing:border-box;padding:0}[type=\"number\"].sc-ic-menu::-webkit-inner-spin-button,[type=\"number\"].sc-ic-menu::-webkit-outer-spin-button{height:auto}[type=\"search\"].sc-ic-menu{-webkit-appearance:textfield;outline-offset:-2px}[type=\"search\"].sc-ic-menu::-webkit-search-decoration{-webkit-appearance:none}.sc-ic-menu::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details.sc-ic-menu{display:block}summary.sc-ic-menu{display:list-item}template.sc-ic-menu{display:none}[hidden].sc-ic-menu{display:none}html.sc-ic-menu,body.sc-ic-menu,div.sc-ic-menu,span.sc-ic-menu,applet.sc-ic-menu,object.sc-ic-menu,iframe.sc-ic-menu,h1.sc-ic-menu,h2.sc-ic-menu,h3.sc-ic-menu,h4.sc-ic-menu,h5.sc-ic-menu,h6.sc-ic-menu,p.sc-ic-menu,blockquote.sc-ic-menu,pre.sc-ic-menu,a.sc-ic-menu,abbr.sc-ic-menu,acronym.sc-ic-menu,address.sc-ic-menu,big.sc-ic-menu,cite.sc-ic-menu,code.sc-ic-menu,del.sc-ic-menu,dfn.sc-ic-menu,em.sc-ic-menu,img.sc-ic-menu,ins.sc-ic-menu,kbd.sc-ic-menu,q.sc-ic-menu,s.sc-ic-menu,samp.sc-ic-menu,small.sc-ic-menu,strike.sc-ic-menu,strong.sc-ic-menu,sub.sc-ic-menu,sup.sc-ic-menu,tt.sc-ic-menu,var.sc-ic-menu,b.sc-ic-menu,u.sc-ic-menu,i.sc-ic-menu,center.sc-ic-menu,dl.sc-ic-menu,dt.sc-ic-menu,dd.sc-ic-menu,ol.sc-ic-menu,ul.sc-ic-menu,li.sc-ic-menu,fieldset.sc-ic-menu,form.sc-ic-menu,label.sc-ic-menu,legend.sc-ic-menu,table.sc-ic-menu,caption.sc-ic-menu,tbody.sc-ic-menu,tfoot.sc-ic-menu,thead.sc-ic-menu,tr.sc-ic-menu,th.sc-ic-menu,td.sc-ic-menu,article.sc-ic-menu,aside.sc-ic-menu,canvas.sc-ic-menu,details.sc-ic-menu,embed.sc-ic-menu,figure.sc-ic-menu,figcaption.sc-ic-menu,footer.sc-ic-menu,header.sc-ic-menu,hgroup.sc-ic-menu,menu.sc-ic-menu,nav.sc-ic-menu,output.sc-ic-menu,ruby.sc-ic-menu,section.sc-ic-menu,summary.sc-ic-menu,time.sc-ic-menu,mark.sc-ic-menu,audio.sc-ic-menu,video.sc-ic-menu{margin:0;padding:0;border:0;font-size:100%;font-style:inherit;vertical-align:baseline}@media (prefers-reduced-motion: no-preference){.open.sc-ic-menu-h .menu.sc-ic-menu{transition:max-height var(--ic-transition-duration-slow)}}.sc-ic-menu-h{border-radius:var(--ic-border-radius);max-height:0;width:var(--input-width, 20rem);color:var(--ic-color-primary-text);background-color:var(--ic-architectural-white);position:relative;z-index:var(--ic-z-index-menu);box-sizing:border-box;box-shadow:var(--ic-elevation-overlay)}.sc-ic-menu-h:not(.no-focus):focus-within{box-shadow:var(--ic-border-focus)}.menu.sc-ic-menu{text-decoration:none;list-style-type:none;border:var(--ic-space-1px) solid var(--ic-architectural-400);border-radius:var(--ic-border-radius);background-color:var(--ic-architectural-white);visibility:hidden;max-height:0;overflow-y:hidden}.menu-scroll.sc-ic-menu{overflow-y:auto}.menu.sc-ic-menu:focus-visible{outline:none}.open.sc-ic-menu-h{max-height:none;display:block}.open.sc-ic-menu-h .menu.sc-ic-menu{visibility:visible;max-height:20.125rem}.full-width.sc-ic-menu-h{width:100%}.option.sc-ic-menu{padding:0.5rem 0.438rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.small.sc-ic-menu-h .option.sc-ic-menu{padding:0.25rem 0.438rem}.option.sc-ic-menu:last-child{border-radius:0 0 var(--ic-space-1px) var(--ic-space-1px)}.option.sc-ic-menu:first-child{border-radius:var(--ic-space-1px) var(--ic-space-1px) 0 0}.option.sc-ic-menu:not(.disabled-option):hover{background-color:var(--ic-action-dark-bg-hover)}.option.sc-ic-menu:not(.disabled-option):active{background-color:var(--ic-action-dark-bg-active)}.option.sc-ic-menu:focus-visible{outline:var(--ic-hc-focus-outline)}.option.sc-ic-menu:not(.disabled-option) .option-description.sc-ic-menu{color:var(--ic-color-secondary-text)}.option-text-container.sc-ic-menu{pointer-events:none}.check-icon.sc-ic-menu{height:var(--ic-space-lg);width:var(--ic-space-lg);margin-left:0.5rem;pointer-events:none}.focused-option.sc-ic-menu .check-icon.sc-ic-menu *.sc-ic-menu{fill:currentcolor}.option-group-title.sc-ic-menu{padding:1.5rem 0.438rem 0.5rem;color:var(--ic-color-tertiary-text)}.small.sc-ic-menu-h .option-group-title.sc-ic-menu{padding:0.75rem 0.438rem 0.25rem}.last-recommended-option.sc-ic-menu{border-bottom:var(--ic-space-1px) solid var(--ic-architectural-400)}.disabled-option.sc-ic-menu{color:var(--ic-architectural-200);cursor:default;pointer-events:none}.focused-option.sc-ic-menu,.focused-option.sc-ic-menu .option-description.sc-ic-menu{background-color:var(--ic-focus-blue) !important;color:var(--ic-color-white-text) !important}.no-results.sc-ic-menu-h li.sc-ic-menu{cursor:no-drop}.no-results.sc-ic-menu-h li.sc-ic-menu:hover{background-color:transparent}@media (forced-colors: active){.focused-option.sc-ic-menu:focus{outline:none;border:0.125rem solid transparent}}";
 
 const Menu = class {
   constructor(hostRef) {
@@ -542,6 +542,8 @@ const Menu = class {
     return (index.h(index.Host, { class: {
         "full-width": fullWidth,
         "no-focus": ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.tagName) === "INPUT",
+        small: this.small,
+        open: this.open,
       } }, options.length !== 0 && (index.h("ul", { id: menuId, class: "menu", role: "listbox", "aria-label": inputLabel, "aria-activedescendant": value != null && value !== "" ? this.getOptionId(value) : "", tabindex: open && !this.keyboardNav && ((_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.tagName) !== "INPUT"
         ? "0"
         : "-1", ref: (el) => (this.menu = el), onKeyDown: this.handleMenuKeyDown, onKeyUp: this.handleMenuKeyUp, onBlur: this.handleBlur }, this.getSortedOptions(options).map((option, index$1) => {