@ukic/web-components 3.17.0 → 3.19.0

package/dist/esm/ic-checkbox-group.entry.js

@@ -46,8 +46,22 @@ const CheckboxGroup = class {
          * The text to display as the validation message.
          */
         this.validationText = "";
+        this.setCheckboxProps = () => {
+            this.checkboxes = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR));
+            this.checkboxes.forEach((checkbox) => {
+                if (!checkbox.disabled) {
+                    checkbox.disabled = this.disabled;
+                }
+                if (!checkbox.size) {
+                    checkbox.size = this.size;
+                }
+            });
+        };
     }
     watchDisabledHandler() {
+        this.checkboxes.forEach((checkbox) => {
+            checkbox.disabled = this.disabled;
+        });
         removeDisabledFalse(this.disabled, this.el);
     }
     labelNameHandler(newValue, oldValue, propName) {
@@ -60,6 +74,11 @@ const CheckboxGroup = class {
             }
         });
     }
+    watchSizeHandler() {
+        this.checkboxes.forEach((checkbox) => {
+            checkbox.size = this.size;
+        });
+    }
     watchThemeHandler(newValue) {
         Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach((checkbox) => {
             checkbox.theme = newValue;
@@ -73,6 +92,7 @@ const CheckboxGroup = class {
         }
     }
     componentWillLoad() {
+        this.setCheckboxProps();
         removeDisabledFalse(this.disabled, this.el);
         this.watchThemeHandler(this.theme);
     }
@@ -101,11 +121,11 @@ const CheckboxGroup = class {
         const describedBy = getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
         const renderSRText = validationStatus === "error" || required || hideLabel;
         const showValidation = hasValidationStatus(validationStatus, disabled);
-        return (h(Host, { key: 'ee4fc914d346b2f35dd8d44ff73a44b479caee95', class: {
+        return (h(Host, { key: '4bf0ebdc41ee60a21034e57ffa313abf87290794', class: {
                 "ic-checkbox-group-disabled": !!disabled,
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, renderSRText && (h("span", { key: '3718d5e6fce1597c836d01050ed17bcd01c97e6e', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: '318e6c61787f136916d39acdd2823fa644c8d865', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '6348eb25d5a2de666033441d694b407f72ae834b' }, h("ic-input-label", { key: '96ef66ab6b4e3a02a2385eb9b8f5936c1fc57ad0', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: 'f9f0532834d50a57dbc2f075a9f94788071cceb6', name: "helper-text", slot: "helper-text" })))), h("div", { key: '9b72caba2adb5951814689ef5c8b1fa5d7ea11ed', class: "checkboxes-container" }, h("slot", { key: '5cf045069c87416b7889e7b29b44e6f137ca0b4f' }))), h("ic-input-validation", { key: '4b9680fcb5468fbf6e9c2e1eb6d45f929b2b09dc', class: {
+            } }, renderSRText && (h("span", { key: '69b9b6d5d0698d168e6df0c01b47d333b5afddba', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { key: 'ad8d27f986ca3337c4507829c70b1bfb0aa37ed5', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", { key: '84c10349be7a6d6acb70a5c9e70d888b86dbe258' }, h("ic-input-label", { key: '00d928c2b7b8ce34262c4fe82d2d87a869bfaf9c', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, h("slot", { key: '42e5a3983f00c06616384cd7ba1a0793188aad7d', name: "helper-text", slot: "helper-text" })))), h("div", { key: '726918f0786e8418fcdd616841128a1cb7365bec', class: "checkboxes-container" }, h("slot", { key: 'c4323eeff5908bf1a6a9e8a9fcfe2b5678489d8e' }))), h("ic-input-validation", { key: '0178a6710479690c9ee615f9d7e25d04d1108fdd', class: {
                 "show-validation": showValidation,
             }, for: name, ariaLiveMode: validationAriaLive, status: showValidation ? validationStatus : "", message: showValidation ? validationText : "" })));
     }
@@ -114,6 +134,7 @@ const CheckboxGroup = class {
         "disabled": ["watchDisabledHandler"],
         "label": ["labelNameHandler"],
         "name": ["labelNameHandler"],
+        "size": ["watchSizeHandler"],
         "theme": ["watchThemeHandler"]
     }; }
 };

package/dist/esm/ic-checkbox-group.entry.js.map

@@ -1 +1 @@
-{"file":"ic-checkbox-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-checkbox-group-label);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n  --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n  --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n  --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n  --ic-input-label-helper-text-color: var(\n    --ic-checkbox-group-subtitle-disabled\n  );\n}\n\nic-input-label.error {\n  color: var(--ic-checkbox-group-label-error);\n\n  --ic-typography-color: var(--ic-checkbox-group-label-error);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label:not(.with-helper) .ic-typography-label,\nic-input-label .helpertext {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-small) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-large) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) * 1.5);\n}\n\nic-input-label .helpertext {\n  display: block;\n}\n\nic-input-validation.show-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation.show-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large) ic-input-validation.show-validation {\n  margin-top: calc(var(--ic-space-sm) * 1.5);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n  right: -9999px;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcAriaLive,\n  IcInformationStatusOrEmpty,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the checkbox group.\n */\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  @Watch(\"label\")\n  @Watch(\"name\")\n  labelNameHandler(\n    newValue: string,\n    oldValue: string,\n    propName: \"label\" | \"name\"\n  ): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        if (propName === \"label\") checkbox.groupLabel = newValue;\n        else if (checkbox.name === oldValue) {\n          // If the checkbox name has been set by the parent, then override it\n          checkbox.name = newValue;\n        }\n      }\n    );\n  }\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size: IcSizes = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        checkbox.theme = newValue;\n      }\n    );\n  }\n\n  /**\n   * The value of the `aria-live` attribute on the validation message.\n   */\n  @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The text to display as the validation message.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.watchThemeHandler(this.theme);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ target }: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(CHECKBOX_SELECTOR)\n    ).filter(({ checked, disabled }) => checked && !disabled);\n    this.icChange.emit({\n      value: checkedOptions.map(({ value }) => value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: target as HTMLIcCheckboxElement,\n    });\n  }\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      label,\n      name,\n      required,\n      size,\n      theme,\n      validationAriaLive,\n      validationStatus,\n      validationText,\n    } = this;\n\n    const describedBy = getInputDescribedByText(\n      this.el,\n      name,\n      helperText !== \"\",\n      validationStatus !== \"\"\n    );\n\n    const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n    const showValidation = hasValidationStatus(validationStatus, disabled);\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-group-disabled\": !!disabled,\n          [`ic-checkbox-group-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {renderSRText && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={name}\n          aria-labelledby={`${\n            renderSRText ? \"screenReaderOnlyText\" : \"\"\n          } ${describedBy}`.trim()}\n          disabled={disabled}\n        >\n          {!hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${validationStatus}`]: true }}\n                label={label}\n                helperText={helperText}\n                required={required}\n                disabled={disabled}\n                useLabelTag={false}\n              >\n                <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n              </ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        <ic-input-validation\n          class={{\n            \"show-validation\": showValidation,\n          }}\n          for={name}\n          ariaLiveMode={validationAriaLive}\n          status={showValidation ? validationStatus : \"\"}\n          message={showValidation ? validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-checkbox-group.entry.js","mappings":"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","names":[],"sources":["src/components/ic-checkbox-group/ic-checkbox-group.css?tag=ic-checkbox-group&encapsulation=shadow","src/components/ic-checkbox-group/ic-checkbox-group.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n:host {\n  display: block;\n\n  --ic-input-label-text-color: var(--ic-checkbox-group-label);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);\n  --ic-input-validation-error: var(--ic-checkbox-state-icon-error);\n  --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);\n}\n\n:host(.ic-checkbox-group-disabled) {\n  --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);\n  --ic-input-label-helper-text-color: var(\n    --ic-checkbox-group-subtitle-disabled\n  );\n}\n\nic-input-label.error {\n  color: var(--ic-checkbox-group-label-error);\n\n  --ic-typography-color: var(--ic-checkbox-group-label-error);\n  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);\n}\n\nic-input-label:not(.with-helper) .ic-typography-label,\nic-input-label .helpertext {\n  margin-bottom: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-small) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large)\n  ic-input-label:not(.with-helper)\n  .ic-typography-label,\n:host(.ic-checkbox-group-large) ic-input-label .helpertext {\n  margin-bottom: calc(var(--ic-space-sm) * 1.5);\n}\n\nic-input-label .helpertext {\n  display: block;\n}\n\nic-input-validation.show-validation {\n  margin-top: var(--ic-space-sm);\n}\n\n:host(.ic-checkbox-group-small) ic-input-validation.show-validation {\n  margin-top: calc(var(--ic-space-sm) / 2);\n}\n\n:host(.ic-checkbox-group-large) ic-input-validation.show-validation {\n  margin-top: calc(var(--ic-space-sm) * 1.5);\n}\n\n.checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxs));\n}\n\n:host(.ic-checkbox-group-small) .checkboxes-container {\n  margin-bottom: calc(-1 * var(--ic-space-xxxs));\n}\n\n.screen-reader-only-text {\n  position: absolute;\n  left: -9999px;\n  background-color: #fff;\n  color: #000;\n  text-transform: none;\n}\n\n.screen-reader-only-text:dir(rtl) {\n  right: -9999px;\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Listen,\n  Element,\n  Event,\n  EventEmitter,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  getInputDescribedByText,\n  hasValidationStatus,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport {\n  IcAriaLive,\n  IcInformationStatusOrEmpty,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport { IcChangeEventDetail } from \"./ic-checkbox-group.types\";\n\nconst CHECKBOX_SELECTOR = \"ic-checkbox\";\n\n/**\n * @slot helper-text - Content is set as the helper text for the checkbox group.\n */\n@Component({\n  tag: \"ic-checkbox-group\",\n  styleUrl: \"ic-checkbox-group.css\",\n  shadow: true,\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class CheckboxGroup {\n  private checkboxes: HTMLIcCheckboxElement[];\n\n  @Element() el: HTMLIcCheckboxGroupElement;\n\n  /**\n   * If `true`, the checkbox group will be set to the disabled state.\n   */\n  @Prop() disabled: boolean = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.disabled = this.disabled;\n    });\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * The helper text that will be displayed for additional field guidance.\n   */\n  @Prop() helperText: string = \"\";\n\n  /**\n   * If `true`, the label will be hidden and the required label value will be applied as an aria-label.\n   */\n  @Prop() hideLabel: boolean = false;\n\n  /**\n   * The label for the checkbox group to be displayed.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox group to differentiate from other groups.\n   */\n  @Prop() name!: string;\n\n  @Watch(\"label\")\n  @Watch(\"name\")\n  labelNameHandler(\n    newValue: string,\n    oldValue: string,\n    propName: \"label\" | \"name\"\n  ): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        if (propName === \"label\") checkbox.groupLabel = newValue;\n        else if (checkbox.name === oldValue) {\n          // If the checkbox name has been set by the parent, then override it\n          checkbox.name = newValue;\n        }\n      }\n    );\n  }\n\n  /**\n   * If `true`, the checkbox group will require a value.\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * The size of the checkboxes to be displayed. This does not affect the font size of the label.\n   */\n  @Prop() size: IcSizes = \"medium\";\n  @Watch(\"size\")\n  watchSizeHandler(): void {\n    this.checkboxes.forEach((checkbox) => {\n      checkbox.size = this.size;\n    });\n  }\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n  @Watch(\"theme\")\n  watchThemeHandler(newValue: IcThemeMode): void {\n    Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR)).forEach(\n      (checkbox) => {\n        checkbox.theme = newValue;\n      }\n    );\n  }\n\n  /**\n   * The value of the `aria-live` attribute on the validation message.\n   */\n  @Prop() validationAriaLive: IcAriaLive = \"polite\";\n\n  /**\n   * The validation status - e.g. 'error' | 'warning' | 'success'.\n   */\n  @Prop() validationStatus: IcInformationStatusOrEmpty = \"\";\n\n  /**\n   * The text to display as the validation message.\n   */\n  @Prop() validationText: string = \"\";\n\n  /**\n   * Emitted when a checkbox is checked.\n   */\n  @Event() icChange: EventEmitter<IcChangeEventDetail>;\n\n  @Listen(\"icChange\")\n  handleChange(ev: CustomEvent): void {\n    //don't pass on the event if it has come from slotted text field\n    //otherwise any icChange handler bound to the checkbox group will also run\n    if ((ev.target as HTMLElement).tagName === \"IC-TEXT-FIELD\") {\n      ev.stopImmediatePropagation();\n    }\n  }\n\n  componentWillLoad(): void {\n    this.setCheckboxProps();\n    removeDisabledFalse(this.disabled, this.el);\n    this.watchThemeHandler(this.theme);\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.name, propName: \"name\" },\n      ],\n      \"Checkbox Group\"\n    );\n  }\n\n  @Listen(\"icCheck\")\n  selectHandler({ target }: CustomEvent): void {\n    const checkedOptions = Array.from(\n      this.el.querySelectorAll(CHECKBOX_SELECTOR)\n    ).filter(({ checked, disabled }) => checked && !disabled);\n    this.icChange.emit({\n      value: checkedOptions.map(({ value }) => value),\n      checkedOptions: checkedOptions.map((opt) => ({\n        checkbox: opt,\n        textFieldValue: opt.querySelector(\"ic-text-field\")?.value,\n      })),\n      selectedOption: target as HTMLIcCheckboxElement,\n    });\n  }\n\n  private setCheckboxProps = () => {\n    this.checkboxes = Array.from(this.el.querySelectorAll(CHECKBOX_SELECTOR));\n\n    this.checkboxes.forEach((checkbox) => {\n      if (!checkbox.disabled) {\n        checkbox.disabled = this.disabled;\n      }\n      if (!checkbox.size) {\n        checkbox.size = this.size;\n      }\n    });\n  };\n\n  render() {\n    const {\n      disabled,\n      helperText,\n      hideLabel,\n      label,\n      name,\n      required,\n      size,\n      theme,\n      validationAriaLive,\n      validationStatus,\n      validationText,\n    } = this;\n\n    const describedBy = getInputDescribedByText(\n      this.el,\n      name,\n      helperText !== \"\",\n      validationStatus !== \"\"\n    );\n\n    const renderSRText = validationStatus === \"error\" || required || hideLabel;\n\n    const showValidation = hasValidationStatus(validationStatus, disabled);\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-group-disabled\": !!disabled,\n          [`ic-checkbox-group-${size}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        {renderSRText && (\n          <span\n            id=\"screenReaderOnlyText\"\n            class=\"screen-reader-only-text\"\n            aria-hidden=\"true\"\n          >\n            {label} {validationStatus === \"error\" ? \"invalid data \" : null}{\" \"}\n            {required ? \"required\" : null}\n          </span>\n        )}\n        <fieldset\n          id={name}\n          aria-labelledby={`${\n            renderSRText ? \"screenReaderOnlyText\" : \"\"\n          } ${describedBy}`.trim()}\n          disabled={disabled}\n        >\n          {!hideLabel && (\n            <legend>\n              <ic-input-label\n                class={{ [`${validationStatus}`]: true }}\n                label={label}\n                helperText={helperText}\n                required={required}\n                disabled={disabled}\n                useLabelTag={false}\n              >\n                <slot name=\"helper-text\" slot=\"helper-text\"></slot>\n              </ic-input-label>\n            </legend>\n          )}\n          <div class=\"checkboxes-container\">\n            <slot></slot>\n          </div>\n        </fieldset>\n        <ic-input-validation\n          class={{\n            \"show-validation\": showValidation,\n          }}\n          for={name}\n          ariaLiveMode={validationAriaLive}\n          status={showValidation ? validationStatus : \"\"}\n          message={showValidation ? validationText : \"\"}\n        ></ic-input-validation>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -7,7 +7,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;max-width:100%;vertical-align:middle}:host(.ic-chip-dismissed){display:none}.chip{--chip-bg-color:transparent;--chip-hover-bg:var(--ic-chip-action-hover);--chip-pressed-bg:var(--ic-chip-action-pressed);display:flex;padding:calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;position:relative;background-color:var(--chip-bg-color);border:var(--ic-border-width) solid transparent;justify-content:space-between}@media (prefers-reduced-motion: no-preference){.chip{transition:var(--ic-easing-transition-fast)}}.chip.small{padding:var(--ic-space-1px) var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}ic-tooltip:focus-within{z-index:1}.filled{--chip-bg-color:var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );--ic-typography-color:var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );color:var(--chip-custom-foreground-color, var(--ic-chip-label))}.filled.disabled{--chip-bg-color:var(--ic-chip-background-filled-inactive)}:host(.ic-chip-dark-text){--chip-custom-foreground-color:var(--ic-architectural-black)}:host(.ic-chip-light-text){--chip-custom-foreground-color:var(--ic-architectural-white)}:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-dark-bg-hover)}:host(.ic-chip-dark-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-dark-bg-pressed)}:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-light-bg-hover)}:host(.ic-chip-light-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-light-bg-pressed)}.outlined{color:var(--ic-chip-outline-label);border-color:var(--chip-custom-color, var(--ic-chip-outline));padding:calc(var(--ic-space-xxs));--ic-typography-color:var(--ic-chip-outline-label)}.outlined.disabled{border:var(--ic-border-disabled);border-color:var(--ic-chip-outline-inactive)}.chip.disabled ic-typography{--ic-typography-color:var(--ic-chip-label-inactive)}.dismiss-icon{border:none;border-radius:50%;padding:0;color:currentcolor;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-chip-icon-inactive)}.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-chip-icon-inactive)}.outlined.non-transparent{background-color:var(--ic-chip-outline-background)}:host .chip.hovered:not(:focus-within){background-image:linear-gradient(var(--chip-hover-bg) 0 0)}:host .chip:focus-within{background-image:linear-gradient(var(--chip-pressed-bg) 0 0)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@media (forced-colors: active){.chip{border:var(--ic-border-hc)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{--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;max-width:100%;vertical-align:middle}:host(.ic-chip-dismissed){display:none}.chip{--chip-bg-color:transparent;--chip-hover-bg:var(--ic-chip-action-hover);--chip-pressed-bg:var(--ic-chip-action-pressed);display:flex;padding:calc(var(--ic-space-xxs) - var(--ic-space-1px)) var(--ic-space-xxs);font-size:0.875rem;border-radius:var(--ic-space-md);text-align:left;text-decoration:none;position:relative;background-color:var(--chip-bg-color);border:var(--ic-border-width) solid transparent;justify-content:space-between;width:-moz-fit-content;width:fit-content;box-sizing:border-box;max-width:100%}.chip.full-width{width:100%}:host(.ic-chip-full-width){width:100%}@media (prefers-reduced-motion: no-preference){.chip{transition:var(--ic-easing-transition-fast)}}.chip.small{padding:var(--ic-space-1px) var(--ic-space-xxxs);border-radius:calc(var(--ic-space-md) - var(--ic-space-xxxs))}.chip.large{padding:calc(var(--ic-space-xs) - var(--ic-space-1px)) var(--ic-space-xs);border-radius:calc(var(--ic-space-md) + var(--ic-space-xxs))}.label{padding:0 var(--ic-space-xs)}.chip:focus-within{box-shadow:var(--ic-border-focus);outline:var(--ic-hc-focus-outline);z-index:1}ic-tooltip:focus-within{z-index:1}.filled{--chip-bg-color:var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );--ic-typography-color:var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );color:var(--chip-custom-foreground-color, var(--ic-chip-label))}.filled.disabled{--chip-bg-color:var(--ic-chip-background-filled-inactive)}:host(.ic-chip-dark-text){--chip-custom-foreground-color:var(--ic-architectural-black)}:host(.ic-chip-light-text){--chip-custom-foreground-color:var(--ic-architectural-white)}:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-dark-bg-hover)}:host(.ic-chip-dark-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-dark-bg-pressed)}:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within){--chip-hover-bg:var(--ic-action-light-bg-hover)}:host(.ic-chip-light-text) .chip.filled:focus-within{--chip-pressed-bg:var(--ic-action-light-bg-pressed)}.outlined{color:var(--ic-chip-outline-label);border-color:var(--chip-custom-color, var(--ic-chip-outline));padding:calc(var(--ic-space-xxs));--ic-typography-color:var(--ic-chip-outline-label)}.outlined.disabled{border:var(--ic-border-disabled);border-color:var(--ic-chip-outline-inactive)}.chip.disabled ic-typography{--ic-typography-color:var(--ic-chip-label-inactive)}.dismiss-icon{border:none;border-radius:50%;padding:0;color:currentcolor;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-chip-icon-inactive)}.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-chip-icon-inactive)}.outlined.non-transparent{background-color:var(--ic-chip-outline-background)}:host .chip.hovered:not(:focus-within){background-image:linear-gradient(var(--chip-hover-bg) 0 0)}:host .chip:focus-within{background-image:linear-gradient(var(--chip-pressed-bg) 0 0)}.sr-only{position:absolute;left:-9999px}.sr-only:dir(rtl){right:-9999px}@media (forced-colors: active){.chip{border:var(--ic-border-hc)}.chip.disabled{-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:GrayText}.chip.disabled ic-typography{--ic-typography-color:GrayText}.chip.disabled path,.chip.disabled ::slotted(svg){fill:GrayText}.chip:focus-within{outline:none;border-color:Highlight}}";
 const IcChipStyle0 = icChipCss;
 
 const Chip = class {
@@ -29,6 +29,11 @@ const Chip = class {
          * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.
          */
         this.dismissLabel = "Dismiss";
+        /**
+         * Specify whether the chip fills the full width of the container.
+         * If `true`, this overrides the --input-width CSS variable.
+         */
+        this.fullWidth = false;
         /**
          * The size of the chip.
          */
@@ -95,13 +100,14 @@ const Chip = class {
         (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, variant, size, dismissible, visible, disabled, hovered, theme, foregroundColor, dismissLabel, transparentBackground, } = this;
+        const { label, variant, size, dismissible, visible, disabled, hovered, theme, foregroundColor, dismissLabel, transparentBackground, fullWidth, } = this;
         const ariaLabel = `${label} chip`;
-        return (h(Host, { key: '91df6058439a8c6dbd74de3d46153e4d0c54d623', class: {
+        return (h(Host, { key: '5eddf76a82ea1c0589a664c6553dadbf4dbda7c1', class: {
                 "ic-chip-dismissed": !visible,
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-chip-${foregroundColor}-text`]: variant === "filled" && !!foregroundColor,
-            } }, visible && (h("div", { key: 'e7fe4dfe8ebedf808512a29aceef28a6700cd233', class: {
+                "ic-chip-full-width": fullWidth,
+            } }, visible && (h("div", { key: 'c58c911f4373c48d04fe4f4f4295210bf32f6260', class: {
                 chip: true,
                 [`${variant}`]: true,
                 [`${size}`]: true,
@@ -109,7 +115,8 @@ const Chip = class {
                 dismissible,
                 hovered,
                 "non-transparent": variant === "outlined" && !transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '81b38c990e638413596f6e5e8041f68eef20e064', class: "icon" }, h("slot", { key: '3a1fda2665ac0aea65df3bfaa94552f5e6fa2e1e', name: "icon" }))), h("ic-typography", { key: 'a496fa5e7be6ec073cb1b2225b7a1e1f79f94f3f', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: '942471f0fd86b350166c14433c40d6d912a52b17' }, label)), dismissible && (h("ic-tooltip", { key: 'c9ea0b5045a625a7b42ae71b22bc9737b05501ee', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '7fb04f03ac698a002fea17de94980623b33502dd', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '99b017ad25c78367d25411312b47aa1f73d8f682', name: "badge" }))), dismissible && (h("div", { key: 'b847f0255a3aaca7f1f24e2de1e939e0a6518c2f', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
+                "full-width": fullWidth,
+            } }, isSlotUsed(this.el, "icon") && (h("div", { key: '7eeadeb6eee49ac890dc1c52e39cd0cea4df7c01', class: "icon" }, h("slot", { key: 'ea4df10a163a8c878a7f700696b4ddcc423a213a', name: "icon" }))), h("ic-typography", { key: '2bbdbd7e1c5360a15616c52649dd7388fcaa417f', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": isElInAGGrid(this.el) } }, h("span", { key: '3085a661aaa96d6b955cc95240a3f5322e5fdf8a' }, label)), dismissible && (h("ic-tooltip", { key: 'e876238e430c974fa1c3513f7dea201d44a36c8e', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { key: '125f60aca78da345de3b1e03751af2b8b3e196d2', id: "dismiss-icon", class: "dismiss-icon", ref: (el) => (this.buttonEl = el), "aria-label": `${dismissLabel} ${ariaLabel}`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { key: '688e1ad7f6b8bfab9cfa4649d7f515c2d5ae37c1', name: "badge" }))), dismissible && (h("div", { key: '45cb6d6e91a9e0d0c0715044ad40fa6da5cf100b', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

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

@@ -1 +1 @@
-{"file":"ic-chip.entry.js","mappings":"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","names":[],"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  max-width: 100%;\n  vertical-align: middle;\n}\n\n:host(.ic-chip-dismissed) {\n  display: none;\n}\n\n.chip {\n  --chip-bg-color: transparent;\n  --chip-hover-bg: var(--ic-chip-action-hover);\n  --chip-pressed-bg: var(--ic-chip-action-pressed);\n\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) 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  position: relative;\n  background-color: var(--chip-bg-color);\n  border: var(--ic-border-width) solid transparent;\n  justify-content: space-between;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n.chip.small {\n  padding: var(--ic-space-1px) var(--ic-space-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) 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:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  --chip-bg-color: var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );\n  --ic-typography-color: var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );\n\n  color: var(--chip-custom-foreground-color, var(--ic-chip-label));\n}\n\n.filled.disabled {\n  --chip-bg-color: var(--ic-chip-background-filled-inactive);\n}\n\n:host(.ic-chip-dark-text) {\n  --chip-custom-foreground-color: var(--ic-architectural-black);\n}\n\n:host(.ic-chip-light-text) {\n  --chip-custom-foreground-color: var(--ic-architectural-white);\n}\n\n:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within) {\n  --chip-hover-bg: var(--ic-action-dark-bg-hover);\n}\n\n:host(.ic-chip-dark-text) .chip.filled:focus-within {\n  --chip-pressed-bg: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within) {\n  --chip-hover-bg: var(--ic-action-light-bg-hover);\n}\n\n:host(.ic-chip-light-text) .chip.filled:focus-within {\n  --chip-pressed-bg: var(--ic-action-light-bg-pressed);\n}\n\n.outlined {\n  color: var(--ic-chip-outline-label);\n  border-color: var(--chip-custom-color, var(--ic-chip-outline));\n  padding: calc(var(--ic-space-xxs));\n\n  --ic-typography-color: var(--ic-chip-outline-label);\n}\n\n.outlined.disabled {\n  border: var(--ic-border-disabled);\n  border-color: var(--ic-chip-outline-inactive);\n}\n\n.chip.disabled ic-typography {\n  --ic-typography-color: var(--ic-chip-label-inactive);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  color: currentcolor;\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-chip-icon-inactive);\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-chip-icon-inactive);\n}\n\n.outlined.non-transparent {\n  background-color: var(--ic-chip-outline-background);\n}\n\n:host .chip.hovered:not(:focus-within) {\n  background-image: linear-gradient(var(--chip-hover-bg) 0 0);\n}\n\n:host .chip:focus-within {\n  background-image: linear-gradient(var(--chip-pressed-bg) 0 0);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    --ic-typography-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  Watch,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n  getBrandForegroundAppearance,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcBrandForegroundNoDefault,\n  IcColor,\n  IcEmphasisType,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right 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  private buttonEl?: HTMLButtonElement;\n  private hostMutationObserver?: MutationObserver;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() foregroundColor: IcBrandForegroundNoDefault | null = null;\n  @State() hovered = false;\n  @State() visible = true;\n\n  /**\n   * The custom chip colour. This will override the theme colour.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor;\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n    if (!colorRGBA) {\n      this.foregroundColor = null;\n      return;\n    }\n\n    const { r, g, b, a } = colorRGBA;\n    this.foregroundColor = getBrandForegroundAppearance(\n      (r * 299 + g * 587 + b * 114) / 1000\n    );\n    this.el.setAttribute(\n      \"style\",\n      `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n    );\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n   */\n  @Prop() dismissLabel = \"Dismiss\";\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size: IcSizes = \"medium\";\n  /**\n   * Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   * Setting the \"customColor\" prop will override this.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n   */\n  @Prop() transparentBackground = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant: IcEmphasisType = \"filled\";\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.customColorHandler();\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private dismissAction = () => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = () => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = () => {\n    this.hovered = false;\n  };\n\n  render() {\n    const {\n      label,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\n      theme,\n      foregroundColor,\n      dismissLabel,\n      transparentBackground,\n    } = this;\n\n    const ariaLabel = `${label} chip`;\n\n    return (\n      <Host\n        class={{\n          \"ic-chip-dismissed\": !visible,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-chip-${foregroundColor}-text`]:\n            variant === \"filled\" && !!foregroundColor,\n        }}\n      >\n        {visible && (\n          <div\n            class={{\n              chip: true,\n              [`${variant}`]: true,\n              [`${size}`]: true,\n              disabled,\n              dismissible,\n              hovered,\n              \"non-transparent\":\n                variant === \"outlined\" && !transparentBackground,\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: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n            >\n              <span>{label}</span>\n            </ic-typography>\n            {dismissible && (\n              <ic-tooltip\n                label={dismissLabel}\n                target=\"dismiss-icon\"\n                class={{ \"tooltip-disabled\": disabled }}\n              >\n                <button\n                  id=\"dismiss-icon\"\n                  class=\"dismiss-icon\"\n                  ref={(el) => (this.buttonEl = el)}\n                  aria-label={`${dismissLabel} ${ariaLabel}`}\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            {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          </div>\n        )}\n        {dismissible && (\n          <div class=\"sr-only\" aria-live=\"polite\">\n            {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-chip.entry.js","mappings":"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","names":[],"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  max-width: 100%;\n  vertical-align: middle;\n}\n\n:host(.ic-chip-dismissed) {\n  display: none;\n}\n\n.chip {\n  --chip-bg-color: transparent;\n  --chip-hover-bg: var(--ic-chip-action-hover);\n  --chip-pressed-bg: var(--ic-chip-action-pressed);\n\n  display: flex;\n  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px)) 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  position: relative;\n  background-color: var(--chip-bg-color);\n  border: var(--ic-border-width) solid transparent;\n  justify-content: space-between;\n  width: fit-content;\n  box-sizing: border-box;\n  max-width: 100%;\n}\n\n.chip.full-width {\n  width: 100%;\n}\n\n:host(.ic-chip-full-width) {\n  width: 100%;\n}\n\n@media (prefers-reduced-motion: no-preference) {\n  .chip {\n    transition: var(--ic-easing-transition-fast);\n  }\n}\n\n.chip.small {\n  padding: var(--ic-space-1px) var(--ic-space-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: calc(var(--ic-space-xs) - var(--ic-space-1px)) 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:focus-within {\n  box-shadow: var(--ic-border-focus);\n  outline: var(--ic-hc-focus-outline);\n  z-index: 1;\n}\n\nic-tooltip:focus-within {\n  z-index: 1;\n}\n\n.filled {\n  --chip-bg-color: var(\n    --chip-custom-color,\n    var(--ic-chip-background-filled-default)\n  );\n  --ic-typography-color: var(\n    --chip-custom-foreground-color,\n    var(--ic-chip-label)\n  );\n\n  color: var(--chip-custom-foreground-color, var(--ic-chip-label));\n}\n\n.filled.disabled {\n  --chip-bg-color: var(--ic-chip-background-filled-inactive);\n}\n\n:host(.ic-chip-dark-text) {\n  --chip-custom-foreground-color: var(--ic-architectural-black);\n}\n\n:host(.ic-chip-light-text) {\n  --chip-custom-foreground-color: var(--ic-architectural-white);\n}\n\n:host(.ic-chip-dark-text) .chip.filled.hovered:not(:focus-within) {\n  --chip-hover-bg: var(--ic-action-dark-bg-hover);\n}\n\n:host(.ic-chip-dark-text) .chip.filled:focus-within {\n  --chip-pressed-bg: var(--ic-action-dark-bg-pressed);\n}\n\n:host(.ic-chip-light-text) .chip.filled.hovered:not(:focus-within) {\n  --chip-hover-bg: var(--ic-action-light-bg-hover);\n}\n\n:host(.ic-chip-light-text) .chip.filled:focus-within {\n  --chip-pressed-bg: var(--ic-action-light-bg-pressed);\n}\n\n.outlined {\n  color: var(--ic-chip-outline-label);\n  border-color: var(--chip-custom-color, var(--ic-chip-outline));\n  padding: calc(var(--ic-space-xxs));\n\n  --ic-typography-color: var(--ic-chip-outline-label);\n}\n\n.outlined.disabled {\n  border: var(--ic-border-disabled);\n  border-color: var(--ic-chip-outline-inactive);\n}\n\n.chip.disabled ic-typography {\n  --ic-typography-color: var(--ic-chip-label-inactive);\n}\n\n.dismiss-icon {\n  border: none;\n  border-radius: 50%;\n  padding: 0;\n  color: currentcolor;\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-chip-icon-inactive);\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-chip-icon-inactive);\n}\n\n.outlined.non-transparent {\n  background-color: var(--ic-chip-outline-background);\n}\n\n:host .chip.hovered:not(:focus-within) {\n  background-image: linear-gradient(var(--chip-hover-bg) 0 0);\n}\n\n:host .chip:focus-within {\n  background-image: linear-gradient(var(--chip-pressed-bg) 0 0);\n}\n\n.sr-only {\n  position: absolute;\n  left: -9999px;\n}\n\n.sr-only:dir(rtl) {\n  right: -9999px;\n}\n\n@media (forced-colors: active) {\n  .chip {\n    border: var(--ic-border-hc);\n  }\n\n  .chip.disabled {\n    appearance: none;\n    border-color: GrayText;\n  }\n\n  .chip.disabled ic-typography {\n    --ic-typography-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  Watch,\n  Host,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n  getBrandForegroundAppearance,\n  renderDynamicChildSlots,\n} from \"../../utils/helpers\";\nimport {\n  IcBrandForegroundNoDefault,\n  IcColor,\n  IcEmphasisType,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport dismissIcon from \"../../assets/dismiss-icon.svg\";\n\n/**\n * @slot icon - Content will be rendered at the start of the chip.\n * @slot badge - Badge component overlaying the top right 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  private buttonEl?: HTMLButtonElement;\n  private hostMutationObserver?: MutationObserver;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() foregroundColor: IcBrandForegroundNoDefault | null = null;\n  @State() hovered = false;\n  @State() visible = true;\n\n  /**\n   * The custom chip colour. This will override the theme colour.\n   * Can be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\".\n   */\n  @Prop() customColor?: IcColor;\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    const colorRGBA = this.customColor && convertToRGBA(this.customColor);\n    if (!colorRGBA) {\n      this.foregroundColor = null;\n      return;\n    }\n\n    const { r, g, b, a } = colorRGBA;\n    this.foregroundColor = getBrandForegroundAppearance(\n      (r * 299 + g * 587 + b * 114) / 1000\n    );\n    this.el.setAttribute(\n      \"style\",\n      `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n    );\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled = false;\n  @Watch(\"disabled\")\n  watchDisabledHandler(): void {\n    removeDisabledFalse(this.disabled, this.el);\n  }\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible = false;\n\n  /**\n   * The text in the dismiss button tooltip and aria label. Makes the user aware of the action resulting from clicking the 'Dismiss chip' button.\n   */\n  @Prop() dismissLabel = \"Dismiss\";\n\n  /**\n   * Specify whether the chip fills the full width of the container.\n   * If `true`, this overrides the --input-width CSS variable.\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * The text rendered within the chip.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The size of the chip.\n   */\n  @Prop() size: IcSizes = \"medium\";\n  /**\n   * Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\n   * Setting the \"customColor\" prop will override this.\n   */\n  @Prop() theme: IcThemeMode = \"inherit\";\n\n  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color.\n   */\n  @Prop() transparentBackground = true;\n\n  /**\n   * The emphasis of the chip.\n   */\n  @Prop() variant: IcEmphasisType = \"filled\";\n\n  /**\n   * Is emitted when the user dismisses the chip.\n   */\n  @Event() icDismiss: EventEmitter<void>;\n\n  disconnectedCallback(): void {\n    this.hostMutationObserver?.disconnect();\n  }\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n    this.customColorHandler();\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [{ prop: this.label, propName: \"label\" }],\n      \"Chip\"\n    );\n\n    this.hostMutationObserver = new MutationObserver((mutationList) =>\n      renderDynamicChildSlots(mutationList, [\"icon\", \"badge\"], this)\n    );\n    this.hostMutationObserver.observe(this.el, {\n      childList: true,\n    });\n  }\n\n  @Listen(\"icDismiss\", { capture: true })\n  handleClick(): void {\n    this.visible = !this.visible;\n  }\n\n  /**\n   * Sets focus on the chip.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.buttonEl?.focus();\n  }\n\n  private dismissAction = () => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = () => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = () => {\n    this.hovered = false;\n  };\n\n  render() {\n    const {\n      label,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\n      theme,\n      foregroundColor,\n      dismissLabel,\n      transparentBackground,\n      fullWidth,\n    } = this;\n\n    const ariaLabel = `${label} chip`;\n\n    return (\n      <Host\n        class={{\n          \"ic-chip-dismissed\": !visible,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`ic-chip-${foregroundColor}-text`]:\n            variant === \"filled\" && !!foregroundColor,\n          \"ic-chip-full-width\": fullWidth,\n        }}\n      >\n        {visible && (\n          <div\n            class={{\n              chip: true,\n              [`${variant}`]: true,\n              [`${size}`]: true,\n              disabled,\n              dismissible,\n              hovered,\n              \"non-transparent\":\n                variant === \"outlined\" && !transparentBackground,\n              \"full-width\": fullWidth,\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: true, \"in-ag-grid\": isElInAGGrid(this.el) }}\n            >\n              <span>{label}</span>\n            </ic-typography>\n            {dismissible && (\n              <ic-tooltip\n                label={dismissLabel}\n                target=\"dismiss-icon\"\n                class={{ \"tooltip-disabled\": disabled }}\n              >\n                <button\n                  id=\"dismiss-icon\"\n                  class=\"dismiss-icon\"\n                  ref={(el) => (this.buttonEl = el)}\n                  aria-label={`${dismissLabel} ${ariaLabel}`}\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            {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          </div>\n        )}\n        {dismissible && (\n          <div class=\"sr-only\" aria-live=\"polite\">\n            {!visible ? `Dismissed ${ariaLabel}` : \"\"}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/ic-data-list.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-a7a720e7.js';
 
-const icDataListCss = "/*! 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}.heading{--ic-typography-color:var(--ic-data-list-text-heading);color:var(--ic-data-list-text-heading)}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.ic-data-list-small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-heading)}:host(.ic-data-list-small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}";
+const icDataListCss = "/*! 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}.heading{--ic-typography-color:var(--ic-data-list-text-heading);color:var(--ic-data-list-text-heading)}.rows{display:flex;flex-direction:column;gap:var(--ic-space-md)}:host(.ic-data-list-small) .rows{gap:var(--ic-space-xs)}.divider{margin-top:var(--ic-space-lg);margin-bottom:var(--ic-space-md);height:var(--ic-border-width);background-color:var(--ic-data-list-keyline-heading)}.divider-no-heading{margin-top:0}:host(.ic-data-list-small) .divider{margin-top:var(--ic-space-sm);margin-bottom:var(--ic-space-xs)}@media (forced-colors: active){.divider{background-color:canvastext}}";
 const IcDataListStyle0 = icDataListCss;
 
 const DataList = class {
@@ -20,10 +20,11 @@ const DataList = class {
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (h(Host, { key: 'a050ac5764ea9496f33d53abdd27f1a193185cbb', class: {
+        const hasHeading = heading || el.querySelector('[slot="heading"]');
+        return (h(Host, { key: '17c612682af529e83aa9e68f352e0def68e3ed1f', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, h("div", { key: '41836f9dce80428fe7f266601c779255195f2a1a', class: "heading", id: "data-list-heading" }, h("slot", { key: '0bd2c17f6dc9767364dc021695ac5839acb3040f', name: "heading" }, h("ic-typography", { key: '65c4dd118e264af61e6494a81b60e573361ea9d3', variant: "h3" }, heading))), h("div", { key: '5be1cea50a4d8beef81c14da5e13a74a75347244', class: "divider" }), h("ul", { key: '9b71c57f882aec9aecb018e4a1fb98ff66c6aaf1', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: '729e8422e911d6dc7a64e568af78f9e7e1ba32c7' }))));
+            } }, h("div", { key: '35e939693c3be1a65b3773dc4cc777f934b0fbda', class: "heading", id: "data-list-heading" }, h("slot", { key: '6adee6dde0c29913a75228719df88583586dfb6e', name: "heading" }, h("ic-typography", { key: 'fc50ff9029cf0b6d4a327353dc930e6bd9d938da', variant: "h3" }, heading))), h("div", { key: 'f04cf846e38231a4008687d55cdadd825222bbf9', class: { divider: true, "divider-no-heading": !hasHeading } }), h("ul", { key: 'e23f726e29c9436d889e97494d1999208589f857', "aria-labelledby": "data-list-heading", class: "rows" }, h("slot", { key: 'a5c323131aba38658d7b7406d5ee2bf9e3c415d7' }))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-data-list.entry.js.map

@@ -1 +1 @@
-{"file":"ic-data-list.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,u7FAAu7F,CAAC;AAC98F,yBAAe,aAAa;;MCUf,QAAQ;IALrB;;;;;QAgBU,SAAI,GAAoB,QAAQ,CAAC;;;;QAKjC,UAAK,GAAiB,SAAS,CAAC;KA8BzC;IA5BC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KACpC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;SACH;QAED,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,KAAK,OAAO;gBACtC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB,IACzC,6DAAM,IAAI,EAAC,SAAS,IAClB,sEAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,4DAAK,KAAK,EAAC,SAAS,GAAG,EACvB,8EAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM,IAClD,8DAAa,CACV,CACA,EACP;KACH;;;;;;;","names":[],"sources":["src/components/ic-data-list/ic-data-list.css?tag=ic-data-list&encapsulation=shadow","src/components/ic-data-list/ic-data-list.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --data-row-label-width: Width of the label column in the data list.\n */\n\n:host {\n  display: block;\n}\n\n.heading {\n  --ic-typography-color: var(--ic-data-list-text-heading);\n\n  color: var(--ic-data-list-text-heading);\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.ic-data-list-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-border-width);\n  background-color: var(--ic-data-list-keyline-heading);\n}\n\n:host(.ic-data-list-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\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the data list component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  render() {\n    const { el, heading, size, theme } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    return (\n      <Host\n        class={{\n          \"ic-data-list-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"heading\" id=\"data-list-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-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-list.entry.js","mappings":";;AAAA,MAAM,aAAa,GAAG,w9FAAw9F,CAAC;AAC/+F,yBAAe,aAAa;;MCUf,QAAQ;IALrB;;;;;QAgBU,SAAI,GAAoB,QAAQ,CAAC;;;;QAKjC,UAAK,GAAiB,SAAS,CAAC;KAgCzC;IA9BC,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE1C,IAAI,IAAI,KAAK,OAAO,EAAE;YACpB,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,KACpC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,OAAO,CAAC,CACpC,CAAC;SACH;QAED,MAAM,UAAU,GAAG,OAAO,IAAI,EAAE,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QAEnE,QACE,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,oBAAoB,EAAE,IAAI,KAAK,OAAO;gBACtC,CAAC,YAAY,KAAK,EAAE,GAAG,KAAK,KAAK,SAAS;aAC3C,IAED,4DAAK,KAAK,EAAC,SAAS,EAAC,EAAE,EAAC,mBAAmB,IACzC,6DAAM,IAAI,EAAC,SAAS,IAClB,sEAAe,OAAO,EAAC,IAAI,IAAE,OAAO,CAAiB,CAChD,CACH,EACN,4DAAK,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAC,UAAU,EAAE,GAAI,EACpE,8EAAoB,mBAAmB,EAAC,KAAK,EAAC,MAAM,IAClD,8DAAa,CACV,CACA,EACP;KACH;;;;;;;","names":[],"sources":["src/components/ic-data-list/ic-data-list.css?tag=ic-data-list&encapsulation=shadow","src/components/ic-data-list/ic-data-list.tsx"],"sourcesContent":["@import \"../../global/normalize.css\";\n\n/**\n * @prop --data-row-label-width: Width of the label column in the data list.\n */\n\n:host {\n  display: block;\n}\n\n.heading {\n  --ic-typography-color: var(--ic-data-list-text-heading);\n\n  color: var(--ic-data-list-text-heading);\n}\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: var(--ic-space-md);\n}\n\n:host(.ic-data-list-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-border-width);\n  background-color: var(--ic-data-list-keyline-heading);\n}\n\n.divider-no-heading {\n  margin-top: 0;\n}\n\n:host(.ic-data-list-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\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\n\n/**\n * @slot heading - Content will be placed at the top of the data list.\n */\n@Component({\n  tag: \"ic-data-list\",\n  styleUrl: \"ic-data-list.css\",\n  shadow: true,\n})\nexport class DataList {\n  @Element() el: HTMLIcDataListElement;\n\n  /**\n   * The title for the data list.\n   */\n  @Prop() heading?: string;\n\n  /**\n   * The size of the data list component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  render() {\n    const { el, heading, size, theme } = this;\n\n    if (size === \"small\") {\n      Array.from(el.children).forEach((child) =>\n        child.setAttribute(\"size\", \"small\")\n      );\n    }\n\n    const hasHeading = heading || el.querySelector('[slot=\"heading\"]');\n\n    return (\n      <Host\n        class={{\n          \"ic-data-list-small\": size === \"small\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"heading\" id=\"data-list-heading\">\n          <slot name=\"heading\">\n            <ic-typography variant=\"h3\">{heading}</ic-typography>\n          </slot>\n        </div>\n        <div class={{ divider: true, \"divider-no-heading\": !hasHeading }} />\n        <ul aria-labelledby=\"data-list-heading\" class=\"rows\">\n          <slot></slot>\n        </ul>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, g as getElement } from './index-a7
 import { D as DEVICE_SIZES, i as isSlotUsed, f as getCurrentDeviceSize, t as slotHasContent, h as checkResizeObserver } from './helpers-dcedb279.js';
 import './constants-7960cba4.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;--ic-typography-color:var(--ic-data-list-text-cell);color:var(--ic-data-list-text-cell)}.label{width:var(--data-row-label-width, 12.5rem);min-width:12.5rem;margin-right:var(--ic-space-md);--ic-typography-color:var(--ic-data-list-text-label);color:var(--ic-data-list-text-label)}.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-border-width);background-color:var(--ic-data-list-keyline-cell)}:host(.ic-data-row-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:top}.text-cells{display:flex;flex-grow:1;min-width:0;--ic-typography-color:var(--ic-data-list-text-cell);color:var(--ic-data-list-text-cell)}.label{width:var(--data-row-label-width, 12.5rem);min-width:12.5rem;margin-right:var(--ic-space-md);--ic-typography-color:var(--ic-data-list-text-label);color:var(--ic-data-list-text-label)}.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-border-width);background-color:var(--ic-data-list-keyline-cell)}:host(.ic-data-row-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 IcDataRowStyle0 = icDataRowCss;
 
 const DataRow = class {
@@ -69,12 +69,12 @@ const DataRow = class {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (h(Host, { key: '8a70c9ceda7aebc616eb335f08e626952c87ddf3', class: {
+        return (h(Host, { key: '3cfe27bfa3e8e0a563450e3842c31e50a78fcb28', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, h("div", { key: 'b2f75779fb6392023c42d9c1f8bf58a98b431797', class: "data" }, h("div", { key: '059aa84f8a91c9a7cdaea4e118287ea460f1bcdd', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: '3bcb9b239d836434ceae03ecd35c1bdc42d73699', class: "end-component" }, h("slot", { key: '453e0c7e4d6b875ddfc319a12dc173913057b8bd', name: "end-component" })))), h("div", { key: 'f16fd733c8ffd0e8ed8e7461099a3b9b81809cb3', class: "divider" })));
+            }, role: "listitem" }, h("div", { key: '348b7ebe1cec0baab24213e9cc468a7e2274ae31', class: "data" }, h("div", { key: 'a2d9d409a312f20b259a40a85ce37b8928e8da06', class: "text-cells" }, (isSlotUsed(el, "label") || label) && renderCellContent("label"), (isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (h("div", { key: 'c7f9583403acf4041eebe4b26ff417b453fe07db', class: "end-component" }, h("slot", { key: '837641d249f27635ece7e1eb6505d3e4dbf5492b', name: "end-component" })))), h("div", { key: '9f39724a36e05428a979a589bbed4a09fa2043e0', class: "divider" })));
     }
     get el() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"ic-data-row.entry.js","mappings":"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","names":[],"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  --ic-typography-color: var(--ic-data-list-text-cell);\n\n  color: var(--ic-data-list-text-cell);\n}\n\n.label {\n  width: var(--data-row-label-width, 12.5rem);\n  min-width: 12.5rem;\n  margin-right: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-data-list-text-label);\n\n  color: var(--ic-data-list-text-label);\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-border-width);\n  background-color: var(--ic-data-list-keyline-cell);\n}\n\n:host(.ic-data-row-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  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\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  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value?: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\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) this.labelEndComponent();\n  }\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 row = this.el.shadowRoot?.querySelector(\".data\");\n    if (row) {\n      const rowSize = row?.clientWidth + 46;\n      if (rowSize) {\n        this.listSize =\n          rowSize < DEVICE_SIZES.S\n            ? \"xs\"\n            : rowSize < DEVICE_SIZES.M\n            ? \"m\"\n            : \"xl\";\n      }\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.listSize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      ?.querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      listSize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      theme,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-data-row-small\"]: size === \"small\",\n          [\"breakpoint-medium\"]: listSize === \"m\",\n          [\"breakpoint-xs\"]: listSize === \"xs\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ic-data-row.entry.js","mappings":"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","names":[],"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: top;\n}\n\n.text-cells {\n  display: flex;\n  flex-grow: 1;\n  min-width: 0;\n\n  --ic-typography-color: var(--ic-data-list-text-cell);\n\n  color: var(--ic-data-list-text-cell);\n}\n\n.label {\n  width: var(--data-row-label-width, 12.5rem);\n  min-width: 12.5rem;\n  margin-right: var(--ic-space-md);\n\n  --ic-typography-color: var(--ic-data-list-text-label);\n\n  color: var(--ic-data-list-text-label);\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-border-width);\n  background-color: var(--ic-data-list-keyline-cell);\n}\n\n:host(.ic-data-row-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  isSlotUsed,\n  slotHasContent,\n} from \"../../utils/helpers\";\nimport { IcSizesNoLarge, IcThemeMode } from \"../../utils/types\";\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  private hasEndComponent: boolean = false;\n  private resizeObserver: ResizeObserver | null = null;\n\n  @Element() el: HTMLIcDataRowElement;\n\n  @State() deviceSize: number = DEVICE_SIZES.XL;\n  @State() listSize: \"xl\" | \"m\" | \"xs\";\n\n  /**\n   * The label in the leftmost cell of the row.\n   */\n  @Prop() label?: string;\n\n  /**\n   * The size of the data row component.\n   */\n  @Prop() size?: IcSizesNoLarge = \"medium\";\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value of the middle (right if no end-component supplied) cell of the row.\n   */\n  @Prop() value?: string;\n\n  disconnectedCallback(): void {\n    this.resizeObserver?.disconnect();\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) this.labelEndComponent();\n  }\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 row = this.el.shadowRoot?.querySelector(\".data\");\n    if (row) {\n      const rowSize = row?.clientWidth + 46;\n      if (rowSize) {\n        this.listSize =\n          rowSize < DEVICE_SIZES.S\n            ? \"xs\"\n            : rowSize < DEVICE_SIZES.M\n            ? \"m\"\n            : \"xl\";\n      }\n    }\n  }\n\n  private renderCellContent = (cell: \"label\" | \"value\") => {\n    const isValue = cell === \"value\";\n    return (\n      <div class={cell}>\n        {isSlotUsed(this.el, cell) ? (\n          <slot name={cell}></slot>\n        ) : (\n          <ic-typography\n            variant={\n              isValue\n                ? \"body\"\n                : this.listSize === \"xs\"\n                ? \"label\"\n                : \"subtitle-large\"\n            }\n          >\n            {isValue ? this.value : this.label}\n          </ic-typography>\n        )}\n      </div>\n    );\n  };\n\n  private labelEndComponent(): void {\n    this.el.shadowRoot\n      ?.querySelectorAll(\"slot[name=end-component]\")\n      .forEach((child) =>\n        child.setAttribute(\"aria-label\", `for ${this.label} row`)\n      );\n  }\n\n  render() {\n    const {\n      el,\n      listSize,\n      hasEndComponent,\n      label,\n      renderCellContent,\n      size,\n      theme,\n      value,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [\"ic-data-row-small\"]: size === \"small\",\n          [\"breakpoint-medium\"]: listSize === \"m\",\n          [\"breakpoint-xs\"]: listSize === \"xs\",\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n        role=\"listitem\"\n      >\n        <div class=\"data\">\n          <div class=\"text-cells\">\n            {(isSlotUsed(el, \"label\") || label) && renderCellContent(\"label\")}\n            {(isSlotUsed(el, \"value\") || value) && renderCellContent(\"value\")}\n          </div>\n          {hasEndComponent && (\n            <div class=\"end-component\">\n              <slot name=\"end-component\"></slot>\n            </div>\n          )}\n        </div>\n        <div class=\"divider\" />\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -365,7 +365,7 @@ const Dialog = class {
     }
     render() {
         const { dialogRendered, disableHeightConstraint, fadeIn, theme, size } = this;
-        return (h(Host, { key: 'b7042e156db6ea72797e7e83ce6af29747c40d6a', class: {
+        return (h(Host, { key: 'fca8d5ed62295efef6630d45e8174331c4d99e48', class: {
                 "ic-dialog-hidden": !dialogRendered,
                 "ic-dialog-fade-in": fadeIn,
                 "disable-height-constraint": !!disableHeightConstraint,

package/dist/esm/ic-empty-state.entry.js

@@ -36,11 +36,11 @@ const EmptyState = class {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (h(Host, { key: '4bb35d1c3476b88cc58e952b1b8785e4425d5339', class: {
+        return (h(Host, { key: 'a0dcd0b2fe385b4c2f1f4ffc346ac54b3e19565c', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, isSlotUsed(this.el, "image") && h("slot", { key: '9e87ed9f746d37f57505a75c62b10279b31ef54e', name: "image" }), h("div", { key: '4f94dc11d843660d3fecd976fa71f9c57644c89b' }, h("slot", { key: 'be23c55a8dc832904fbae342890d2a3d2d74ae85', name: "heading" }, h("ic-typography", { key: '52bf3dca695fecff3e5d650bd81db23d09665258', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '7ed10d78475ac8b9c3f5a084a1294ad1be180f15', name: "subheading" }, h("ic-typography", { key: '5772d056578a64a951178c3c3026b36d4b316496', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: '14a8815b51a06521642921f09fa8346483522e84', name: "body" }, h("ic-typography", { key: 'bca780cc2275e81d4e25bae45f5065f6fab3bcd5', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: 'd6c0f61a358c1d0c86c4da922ed0504ffdc8228f', class: "action-area" }, h("slot", { key: 'ac150a34e883376bfee43a6edbeb8992c3bc3f96', name: "actions" })))));
+            } }, isSlotUsed(this.el, "image") && h("slot", { key: 'e652b784ccd7b2af7ed0f9755547a9ddbbb4c5e7', name: "image" }), h("div", { key: '1dfc5567a55de1301caec6d779ad60f851826a41' }, h("slot", { key: '70b5a550c9650fcab692acbc53d035e114eaf09e', name: "heading" }, h("ic-typography", { key: '043fc0ae7d4364442d75bb78bdbe3004fa1274f4', variant: "h4", class: "empty-state-heading" }, heading)), h("slot", { key: '84dbde519a4b6cb0cd7ab03e8dbcb85931796a24', name: "subheading" }, h("ic-typography", { key: 'a2d94ae6cba46c73212f2c688858ee56ceaa5a90', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), h("slot", { key: 'aa1fc8130e5d4fb6a472f908a30fd319463b443f', name: "body" }, h("ic-typography", { key: 'f73a7eb783dd049cb4de2510b977500d0fa47d52', maxLines: maxLines, class: "empty-state-body" }, body))), isSlotUsed(this.el, "actions") && (h("div", { key: '3cb1e55fb552cf4177498d87e874d16a3f16d429', class: "action-area" }, h("slot", { key: 'e25cb0c875f095825a512cea93c5ffe700072e71', name: "actions" })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/ic-footer-link.entry.js

@@ -45,12 +45,12 @@ const FooterLink = class {
         const { footerConfig, href, hreflang, referrerpolicy, rel, target, download, } = this;
         const { small, grouped } = footerConfig;
         const isLogoLink = !!this.el.closest("div[slot='logo']");
-        return (h(Host, { key: 'b8797484e397b1a952f2df6f644c985deec5be65', class: {
+        return (h(Host, { key: '445c93b158bc2ac7958a7b9712ab29462acdce9e', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
                 "footer-logo-link": isLogoLink,
-            }, role: "listitem" }, h("ic-link", { key: '1cd559f7c768a70d2bc0c92845ad6ae6761b584a', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: 'f2104f33d9651f96414a4963b30ea2e6c2414b18' }))));
+            }, role: "listitem" }, h("ic-link", { key: 'f6ae4e7d52fdebdd574efd3ff21c6d5e0dbc827b', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, h("slot", { key: '8d8cf6f52b51cd26b6faa02fb91889d674286b38' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }

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

@@ -77,7 +77,7 @@ const Hero = class {
                 "background-position": scrollFactor,
             };
         }
-        return (h(Host, { key: '34d3c839d5827d5dadfdc1a160c4b6b2ae965cdf', class: {
+        return (h(Host, { key: '0ae644324ec79f6f3b227626452353339c05272c', class: {
                 [`ic-hero-${IcBrandForegroundEnum.Dark}`]: foregroundColor === IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
@@ -85,12 +85,12 @@ const Hero = class {
                 ["secondary-heading"]: !!secondaryHeading,
                 [`ic-hero-content-aligned-${contentAligned}`]: contentAligned !== undefined,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, style: style }, h("ic-section-container", { key: '92c885c6bb0532ed6d5adbea3927ff56c88ccf00', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '808e287fe214793b21c2da1d4db8410a0fecdcb9', class: {
+            }, style: style }, h("ic-section-container", { key: '5643bc58c2c704cd503a0933bdb795e181af98d9', aligned: aligned, fullHeight: true, class: "section-container" }, h("div", { key: '1b81861076201ba5b3f643b6288b5bb10841fae4', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, h("div", { key: '09267f66de926f237092d55372f34ee75b3b1bb5', class: "heading" }, h("slot", { key: 'b30e4be509093aa6f7b2dbe906eb63c8ed1f70da', name: "heading" }, h("ic-typography", { key: 'a59edf905e413ecd324b09807acb4efc7730b1ef', variant: size === "small" ? "h2" : "h1", class: {
+            } }, h("div", { key: '5a53dc54324f6f15170797ab81616ba2f83eee9b', class: "heading" }, h("slot", { key: 'b535d7a5cf4e0551c7dcfe160fe5e8e735cbfec4', name: "heading" }, h("ic-typography", { key: 'c8abd3f44bc9c5957a4103dd84ac388ccc09fdc8', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, h("h2", { key: 'f3d705dcea394926d050c5e9a518aa6d23e61c74' }, heading)))), h("div", { key: 'e67892b909d8d59b9714c9c39b07f5fbaa47cd5f', class: "subheading" }, h("slot", { key: '94601527aad82e6da4a1723f435b26221f562d3c', name: "subheading" }, h("ic-typography", { key: 'd10d05ad2ecbc02f3cc9612c5e5cd8507c95e7ba', variant: "body" }, subheading))), h("div", { key: '12ea9178058e547b57fd1ca454a00a9bdf542f41', class: "interaction-container" }, h("slot", { key: '8b3e37943fb688843dfcc6f28f7aab2d42c66454', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '2783784a47d8a7667959b6bc0a102e0536050cab', class: "right-container" }, h("slot", { key: 'ad168f0963f7950cf70b8a77abd4390a0585ddff', name: "secondary" }, secondaryHeading && (h("div", { key: 'faa3a3a6f23962c99eab8d1e81e2fa5d96b8f6c2', class: "secondary-container" }, h("div", { key: '147945f65e18d6d3ade2342057e1cdaf68faca50', class: "secondary-heading" }, h("ic-typography", { key: '78a22d379cb17ec183b4f320f652696cf46155b4', variant: "h4" }, h("h3", { key: '87619d7363588a0887f4c704011d824d51f3caa2' }, secondaryHeading))), h("div", { key: '0cc920336ef6d241361f095317391c296ce81e81', class: "secondary-subheading" }, h("ic-typography", { key: '19db9e9c8c392b26e698427048de8ad1bf2b7a5a', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, h("h2", { key: '6e723202fd477bf488c5b6760bdbf6c4ec7e560d' }, heading)))), h("div", { key: '091d301ed753366740c5d703f40f132f2aee25cf', class: "subheading" }, h("slot", { key: 'ce39e48683e9ce91098b20f9f0e48b7f384cda68', name: "subheading" }, h("ic-typography", { key: 'daeef6b852b0301c4938c803bf1176d739bff0c1', variant: "body" }, subheading))), h("div", { key: '492dacd32aca9642eb52399d02e665fc86243486', class: "interaction-container" }, h("slot", { key: 'e3f6ce704c0bdfac397753ec3d786f2768be4cc9', name: "interaction" }))), (isPropDefined(secondaryHeading) || this.rightContent) && (h("div", { key: '446b6a7afe3ff99602127308142019e167943649', class: "right-container" }, h("slot", { key: '6309a6e8edb1be8c0aae243dd893a732e305d6ca', name: "secondary" }, secondaryHeading && (h("div", { key: 'd4ab8e694dd03bcedb5d3bd71f3c1f1bf63e5b8c', class: "secondary-container" }, h("div", { key: '388608d5a191bafc5c11945c1e24a0a790fa8be8', class: "secondary-heading" }, h("ic-typography", { key: 'bd607ed8f7581dfd58e1ac76c25ba7aca6b730ce', variant: "h4" }, h("h3", { key: '20d2ae02e785decd0cfb86b24b262e19e57c8623' }, secondaryHeading))), h("div", { key: 'cd22db2c0acb66dd4585f95b29ced4988e880276', class: "secondary-subheading" }, h("ic-typography", { key: '43348f58372ffc4fa71f08519f881153bc6d4411', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -165,22 +165,22 @@ const HorizontalScroll = class {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (h(Host, { key: '5c313665e71e0abc91a19f204ccf08d7b017f46b', class: {
+        return (h(Host, { key: '5f340f9d11d2ca42a17eacea2b9ce38b35614151', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, h("div", { key: '7a65d56af26a6bfe660c3e923beaf7b512f77de8', "aria-hidden": "true", class: {
+            } }, h("div", { key: '555d223168b83a595030b18c4d21874c1cf679bd', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, h("ic-button", { key: '0203d6acdde7444d03038b3ec86f3e318615030d', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("ic-button", { key: '9196738f3d7d2c48b9173af7b152828a00c56edd', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
-                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: 'dffb5fee1c17005205216d0901141317e2dc4aa6', class: "scroll-splitter-left" })), h("slot", { key: 'f637c15f3020e1572a61179c2132dece11d0699a' }), h("div", { key: 'c563d5ca6d07a66f2111bea5aebe7d36ae481770', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), h("span", { key: '89c1dc4017ec5a5ccd691c16c47957d35067d0b5', class: "scroll-splitter-left" })), h("slot", { key: 'bc45bafea5bad600701b74f097aae39c2e6b1e4d' }), h("div", { key: 'b961e7d153dccb0187f0aa8c02f73494f4233649', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, h("span", { key: 'd8afe9aaf2304d13909815aeb8e60ac4f8952f7f', class: "scroll-splitter-right" }), h("ic-button", { key: '4f3be747e736a50705793742b0a1e9fab44d56db', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, h("span", { key: 'd0960807543d4513129f192ce975c7a0139a91a0', class: "scroll-splitter-right" }), h("ic-button", { key: '4844fbcec6360b939a67c3878e36f4b812685c22', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
                 ? "dark"
                 : "light", monochrome: this.monochrome, innerHTML: RightArrow, disabled: lastItemVisible, tabindex: "-1", onClick: this.scrollRight, onMouseDown: this.rightArrowMouseDownHandler }))));
     }