@ukic/web-components 3.6.0 → 3.8.0

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

@@ -99,11 +99,11 @@ const CheckboxGroup = class {
         const { disabled, helperText, hideLabel, label, name, required, size, theme, validationStatus, validationText, } = this;
         const describedBy = helpers.getInputDescribedByText(this.el, name, helperText !== "", validationStatus !== "");
         const renderSRText = validationStatus === "error" || required || hideLabel;
-        return (index.h(index.Host, { key: '3eab3a8d0cc27b77ac7daf1f6d3068533ab675bb', class: {
+        return (index.h(index.Host, { key: '977492f0ca432ab5dc9d7435c66cf6aafa8c44f1', class: {
                 "ic-checkbox-group-disabled": !!disabled,
                 [`ic-checkbox-group-${size}`]: true,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, renderSRText && (index.h("span", { key: '3cbf05ef6c6df9737d8f40ecbe6db5944f8a2406', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), index.h("fieldset", { key: 'ce2d74b5e4f88c2cdfc6b730db2b3763c48df206', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (index.h("legend", { key: '70a1b515ccd08e731837ee10f248163f342536b2' }, index.h("ic-input-label", { key: '67be3445bb1dee8a2e1ccee88f16ae58fc81c77e', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, index.h("slot", { key: 'be393bdcf6138057e1e0c65082817f590dbcadf7', name: "helper-text", slot: "helper-text" })))), index.h("div", { key: 'd43399d04efc5501f5a8b118aedbba213410593b', class: "checkboxes-container" }, index.h("slot", { key: '96c715128256965fb3acbe3ff5eca7bb5be9897b' }))), helpers.hasValidationStatus(validationStatus, disabled) && (index.h("ic-input-validation", { key: '6b4b02fd8819946472c6a0c60c050ef885168312', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+            } }, renderSRText && (index.h("span", { key: '5a9d1c9fcf5f1b837e4f6ff3ae516db0b105e1ac', id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), index.h("fieldset", { key: 'c3afb98a671db4dba8229d461c33d4b5a69d5e31', id: name, "aria-labelledby": `${renderSRText ? "screenReaderOnlyText" : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (index.h("legend", { key: 'bc4e450767c3fb6f7deb01370d9d1599d4515417' }, index.h("ic-input-label", { key: '7c0c76b80d4b89673495b56a79cf8a05f0a224f3', class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }, index.h("slot", { key: '348730e9c8ffbd0701a00e9380a11e403957604b', name: "helper-text", slot: "helper-text" })))), index.h("div", { key: 'c4065c98766a8447ed51c0a84f953cc70c529d2c', class: "checkboxes-container" }, index.h("slot", { key: 'cadbff332d84cf70bbbb42f1c40f4cb0bc705e38' }))), helpers.hasValidationStatus(validationStatus, disabled) && (index.h("ic-input-validation", { key: '0259abfb51282b2dfc8ed9aed0a2b97ccb769ac2', for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -112,17 +112,17 @@ const Checkbox = class {
         checked
             ? helpers.renderHiddenInput(el, value, name, disabled)
             : helpers.removeHiddenInput(el);
-        return (index.h(index.Host, { key: 'eda047a45e6d0dc558095d7d23b16422633fe633', class: {
+        return (index.h(index.Host, { key: '153b0b333ca1d0755d4e52dd9119d48cd1c246cc', class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size}`]: !!size,
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '20623bca4b576eb2da3050ce19c99ad5288a6957', class: "container" }, displayIndeterminate ? (index.h("div", { class: "indeterminate-symbol" })) : (checked && (index.h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), index.h("input", { key: '37fcfb382fc5aac6c9d07e9ce9e7929e21528c15', role: "checkbox", class: {
+            } }, index.h("div", { key: 'c0f56ee4fbbdd38fea208d133cdd1fa91a41d6c7', class: "container" }, displayIndeterminate ? (index.h("div", { class: "indeterminate-symbol" })) : (checked && (index.h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, index.h("title", null, "checkmark icon"), index.h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" })))), index.h("input", { key: 'f8335e54b2f765591b3781d76a01632c34065855', role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
-            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (index.h("ic-typography", { key: '0d8d605e8aa6dcb86362bb561a024a8c03a66854', class: "checkbox-label", variant: "body" }, index.h("label", { key: '3f2c395f32f47684475a7b6a1cefdb7d67c8beac', htmlFor: id }, label)))), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: 'a6701087045999eb177a3a743770dad9aa47c79f', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: '18719e04d6854a600f87fe777fd475b424204875', class: "branch-corner" }), index.h("div", { key: 'a73508e06dea3c65f731db0050ca365bd31998c9', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: 'd4f422ba5eb1815418871081efc8c5cd55821775', variant: "caption" }, index.h("p", { key: 'd43c97bdcd3b22acc1ef3664544ca9783606ea15', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), index.h("div", { key: '66fb65fdd27f2db8550ef58c5601391c7b88357d', class: {
+            }, ref: (el) => (this.checkboxEl = el), type: "checkbox", name: name, id: id, value: value, disabled: disabled, checked: checked, indeterminate: displayIndeterminate, onClick: handleClick, form: form, "aria-label": hideLabel ? label : undefined }), !hideLabel && (index.h("ic-typography", { key: '2ba4862a349e6b3f34c050c434ce247687f0dfd8', class: "checkbox-label", variant: "body" }, index.h("label", { key: 'a3f3c733b5dc0a0acdf89d3b7db603e965102618', htmlFor: id }, label)))), helpers.isSlotUsed(el, "additional-field") && (index.h("div", { key: 'ad38f0547dda8ce82cd107fec3f3ff9d555cc1e8', class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, isDynamicAdditionalField && index.h("div", { key: 'd2c8566cada65dbd60546873ccbfedb33ec0e093', class: "branch-corner" }), index.h("div", { key: '05489504f66d7f6e79bbbf18302dd63348f2f4a7', class: "dynamic-field-container" }, isDynamicAdditionalField && (index.h("ic-typography", { key: 'eb397dc91080f791a4fd13e3c1815fad70c7cb87', variant: "caption" }, index.h("p", { key: '49633d6c0806655957055fbef51688bfdeb11411', class: "dynamic-text", "aria-live": "polite" }, dynamicText))), index.h("div", { key: '916e20f79f80cd7ff0fb5c4b030caf07f146ffcc', class: {
                 "additional-field-wrapper": !isDynamicAdditionalField,
-            } }, index.h("slot", { key: '02493cc3d3c3aae17cfb61bf1e7e12e9f41fabba', name: "additional-field" })))))));
+            } }, index.h("slot", { key: '5783108ca7c6edb7c55dad2cc9469549e31d7cd3', name: "additional-field" })))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -72,12 +72,20 @@ const Chip = class {
     watchDisabledHandler() {
         helpers.removeDisabledFalse(this.disabled, this.el);
     }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.hostMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
     componentWillLoad() {
         helpers.removeDisabledFalse(this.disabled, this.el);
         this.customColorHandler();
     }
     componentDidLoad() {
         helpers.onComponentRequiredPropUndefined([{ prop: this.label, propName: "label" }], "Chip");
+        this.hostMutationObserver = new MutationObserver((mutationList) => helpers.renderDynamicChildSlots(mutationList, ["icon", "badge"], this));
+        this.hostMutationObserver.observe(this.el, {
+            childList: true,
+        });
     }
     handleClick() {
         this.visible = !this.visible;
@@ -92,10 +100,10 @@ const Chip = class {
     render() {
         const { label, variant, size, dismissible, visible, disabled, hovered, theme, foregroundColor, dismissLabel, transparentBackground, } = this;
         const ariaLabel = `${label} chip`;
-        return (index.h(index.Host, { key: '9a61d8ecacb78fcdf17dbbaf32e1cf79de705d78', class: {
+        return (index.h(index.Host, { key: 'ced030b6d7a5aeb6b7030ea7858200187d16ae90', class: {
                 [`ic-theme-${theme}`]: theme !== "inherit",
                 [`ic-chip-${foregroundColor}-text`]: variant === "filled" && !!foregroundColor,
-            } }, visible && (index.h("div", { key: '5cfa78f3d8647cf3f6a98649bfe583af89f3458f', class: {
+            } }, visible && (index.h("div", { key: 'dca2da18144d1ee47d9507cbb616bc6493060f94', class: {
                 chip: true,
                 [`${variant}`]: true,
                 [`${size}`]: true,
@@ -103,7 +111,7 @@ const Chip = class {
                 dismissible,
                 hovered,
                 "non-transparent": variant === "outlined" && !transparentBackground,
-            } }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { key: 'd7f72306a186b66c4a215a3928655989870e34b3', class: "icon" }, index.h("slot", { key: '71b8d9a59d43e0580e7f56c1977f2992ee582d95', name: "icon" }))), index.h("ic-typography", { key: '46ba6cddc7c12f2c246cc2d23e6d403517ad54b3', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": helpers.isElInAGGrid(this.el) } }, index.h("span", { key: '7e62d43da1b1d21a3b660839154aaaaedf96f935' }, label)), dismissible && (index.h("ic-tooltip", { key: 'c82c6387a16c2cf5006710b1623a332a1f5f3122', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, index.h("button", { key: '0411f0e6d7ce468a6f7a489e652240724dee0213', 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 }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: '31e71e22e0d9b8755a8bc483934aabcc4ccb9033', name: "badge" }))), dismissible && (index.h("div", { key: 'c899f3ba330e9231e461b7869363ce85ff005b31', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
+            } }, helpers.isSlotUsed(this.el, "icon") && (index.h("div", { key: '3e1537327125e7cfd54a20aeeb3f6279560da02f', class: "icon" }, index.h("slot", { key: '33a229dad89f94f165c0a3f77e83720e1cc0603f', name: "icon" }))), index.h("ic-typography", { key: '7445c7ae2254c909af206b43e5044f643177f1af', variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": helpers.isElInAGGrid(this.el) } }, index.h("span", { key: 'af34cb3ca942ea778c3ba4716f983755571626db' }, label)), dismissible && (index.h("ic-tooltip", { key: '7664945e7ddc8cb66a302265a5b7affcea514241', label: dismissLabel, target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, index.h("button", { key: '692fd13b54eef71e29ef4d3639182617770684df', 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 }))), helpers.isSlotUsed(this.el, "badge") && index.h("slot", { key: '6db0a5f0dd29df3315caa52aba01d339449e3bdd', name: "badge" }))), dismissible && (index.h("div", { key: '2d989a411ff7eedad1e9238714c704c3e2d0d536', class: "sr-only", "aria-live": "polite" }, !visible ? `Dismissed ${ariaLabel}` : ""))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -1 +1 @@
-{"file":"ic-chip.entry.cjs.js","mappings":"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","names":["convertToRGBA","getBrandForegroundAppearance","removeDisabledFalse","onComponentRequiredPropUndefined","h","Host","isSlotUsed","isElInAGGrid"],"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.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: 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-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip: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} 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\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  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\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-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.cjs.js","mappings":"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","names":["convertToRGBA","getBrandForegroundAppearance","removeDisabledFalse","onComponentRequiredPropUndefined","renderDynamicChildSlots","h","Host","isSlotUsed","isElInAGGrid"],"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.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: 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-xxxs);\n  border-radius: calc(var(--ic-space-md) - var(--ic-space-xxxs));\n}\n\n.chip.large {\n  padding: var(--ic-space-xs);\n  border-radius: calc(var(--ic-space-md) + var(--ic-space-xxs));\n}\n\n.label {\n  padding: 0 var(--ic-space-xs);\n}\n\n.chip: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-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}

package/dist/cjs/ic-classification-banner.cjs.entry.js

@@ -49,10 +49,10 @@ const ClassificationBanner = class {
         if (!classification ||
             (classification && !classificationText[classification]))
             classification = "default";
-        return (index.h(index.Host, { key: 'f30aac02756628e8538572d0b2cab67b0ffc4b75', class: { ["ic-classification-banner-inline"]: !!inline } }, index.h("banner", { key: '5eda99cbdf376e20ad9ed03fc5c7fc515805c6da', "aria-label": "Protective marking", class: {
+        return (index.h(index.Host, { key: '8ccd98249fea7e78da349f2c97243366305c5dcc', class: { ["ic-classification-banner-inline"]: !!inline } }, index.h("banner", { key: 'a108ace2bf5f64c5867f993d9d130595b61ccac9', "aria-label": "Protective marking", class: {
                 ["classification-banner"]: true,
                 [`${classification}`]: classification,
-            } }, classification !== "default" ? (index.h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, index.h("ic-typography", { key: '3f094aa6b0ed00ec4f70858a81a030b2599829f9', variant: "caption-uppercase" }, classification === "default"
+            } }, classification !== "default" ? (index.h("span", { class: "offscreen" }, "The protective marking of this page is:", " ")) : null, index.h("ic-typography", { key: '09edc559ec7b205d092210ef73ef95faa43c1a8a', variant: "caption-uppercase" }, classification === "default"
             ? classificationText[classification]
             : `${upTo ? "up to" : ""} 
                ${country} 

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

@@ -24,10 +24,10 @@ const DataList = class {
         if (size === "small") {
             Array.from(el.children).forEach((child) => child.setAttribute("size", "small"));
         }
-        return (index.h(index.Host, { key: 'a10decea9f6872dd3a86cb4e8d989f1628ddd8dd', class: {
+        return (index.h(index.Host, { key: '5e7af483f24335b47442b4aa768c7b04bc14bb64', class: {
                 "ic-data-list-small": size === "small",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, index.h("div", { key: '5e818e459c2dd23b6e021d82012150757b7520e9', class: "heading", id: "data-list-heading" }, index.h("slot", { key: '2d68d50a52c8fc3882aa9138ce427c23ccdbc394', name: "heading" }, index.h("ic-typography", { key: '275d859a1075fd96294913acf1a3b2b9bb1777c2', variant: "h3" }, heading))), index.h("div", { key: '06e942c78939bf9526ef3bcebba1c76db3c3f608', class: "divider" }), index.h("ul", { key: '9e7218ee17444774d184680d27e3e11424953bfc', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: 'a75aec759140988dc2d673385d7eef1fc0e7dba5' }))));
+            } }, index.h("div", { key: 'a74f7d4a87b21b053a500cab89ca978ada43263e', class: "heading", id: "data-list-heading" }, index.h("slot", { key: 'c4896992d8558dfbe2a1d8dd689cabae2581ce89', name: "heading" }, index.h("ic-typography", { key: 'b05016df276422f769464a73d6ae71533d3c028f', variant: "h3" }, heading))), index.h("div", { key: 'a984729dc0849a27d09cd6403efd230cfc927007', class: "divider" }), index.h("ul", { key: '916c5b5c74f16f3fab74e2a157c2216b570420f5', "aria-labelledby": "data-list-heading", class: "rows" }, index.h("slot", { key: 'e5e05b0957b4cf986139795f31771556fd5f6150' }))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -72,12 +72,12 @@ const DataRow = class {
     }
     render() {
         const { el, listSize, hasEndComponent, label, renderCellContent, size, theme, value, } = this;
-        return (index.h(index.Host, { key: '2faf353c648f521406dc1318be100192dece1aab', class: {
+        return (index.h(index.Host, { key: '9a94132a8884960a5ec1c2f2772e89f46dbcc995', class: {
                 ["ic-data-row-small"]: size === "small",
                 ["breakpoint-medium"]: listSize === "m",
                 ["breakpoint-xs"]: listSize === "xs",
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            }, role: "listitem" }, index.h("div", { key: '3d8e82d44292400dc5cf92230967eb3c9cc57cd0', class: "data" }, index.h("div", { key: '1e1edf0e3cefbe7cf2bb7e6ab973e55eeab1c0e3', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: '0b60b67c17cce484293060ec5ba89619f527e5c9', class: "end-component" }, index.h("slot", { key: '403f6290fd00ef44fa02baaeed36932caf6f9902', name: "end-component" })))), index.h("div", { key: '653123df7e4243474aa5254d948b1666c9b50722', class: "divider" })));
+            }, role: "listitem" }, index.h("div", { key: '8a354952861f100d66f454998c5b6a40eff226bd', class: "data" }, index.h("div", { key: '55359f425068a3a2b16cf194bc562ea8a2f865be', class: "text-cells" }, (helpers.isSlotUsed(el, "label") || label) && renderCellContent("label"), (helpers.isSlotUsed(el, "value") || value) && renderCellContent("value")), hasEndComponent && (index.h("div", { key: '1bb95d477f8d30759480a304c5214c9530a118d2', class: "end-component" }, index.h("slot", { key: '11284607c2c69d5b231d41ae307ca3044b49b8d1', name: "end-component" })))), index.h("div", { key: 'c4289c8446de02edbf8491e6d1d3cdb66561483e', class: "divider" })));
     }
     get el() { return index.getElement(this); }
 };

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

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

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

@@ -39,11 +39,11 @@ const EmptyState = class {
     }
     render() {
         const { aligned, body, maxLines, heading, imageSize, subheading, theme } = this;
-        return (index.h(index.Host, { key: '1742fa428f2c887fd9b0a200fa5f4040c3ceedf3', class: {
+        return (index.h(index.Host, { key: '4bb35d1c3476b88cc58e952b1b8785e4425d5339', class: {
                 [`ic-empty-state-${aligned}`]: true,
                 [`image-${imageSize}`]: helpers.isSlotUsed(this.el, "image"),
                 [`ic-theme-${theme}`]: theme !== "inherit",
-            } }, helpers.isSlotUsed(this.el, "image") && index.h("slot", { key: '781c3afcd34547dba24bdc777fed7b704d2d27ad', name: "image" }), index.h("div", { key: 'a8eb38fb47f8e03d3654cc3f26d12ff1369a52ff' }, index.h("slot", { key: '4375bf33214131da721591bfbea44d03514b9836', name: "heading" }, index.h("ic-typography", { key: 'd83b8868e417e55a574716e380be3e99ea2f3aa3', variant: "h4", class: "empty-state-heading" }, heading)), index.h("slot", { key: '79d4fe82562ba2d44ffa5a693a3e9d5743984bbd', name: "subheading" }, index.h("ic-typography", { key: 'ffd4e8d460b03c3b90b477c0d2f420492a337165', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), index.h("slot", { key: '166e1b63631dc5f6a5ada15867fae52442c18e14', name: "body" }, index.h("ic-typography", { key: 'f63a9ec68fe53dadddd3cb26ffe6478164caf3af', maxLines: maxLines, class: "empty-state-body" }, body))), helpers.isSlotUsed(this.el, "actions") && (index.h("div", { key: 'ccf0fe966f7a2c6f5225005d5bd4266523bf5267', class: "action-area" }, index.h("slot", { key: 'f9f8f74c450aed47b1e8f0467e290714237251b0', name: "actions" })))));
+            } }, helpers.isSlotUsed(this.el, "image") && index.h("slot", { key: '9e87ed9f746d37f57505a75c62b10279b31ef54e', name: "image" }), index.h("div", { key: '4f94dc11d843660d3fecd976fa71f9c57644c89b' }, index.h("slot", { key: 'be23c55a8dc832904fbae342890d2a3d2d74ae85', name: "heading" }, index.h("ic-typography", { key: '52bf3dca695fecff3e5d650bd81db23d09665258', variant: "h4", class: "empty-state-heading" }, heading)), index.h("slot", { key: '7ed10d78475ac8b9c3f5a084a1294ad1be180f15', name: "subheading" }, index.h("ic-typography", { key: '5772d056578a64a951178c3c3026b36d4b316496', variant: "subtitle-small", class: "empty-state-subheading" }, subheading)), index.h("slot", { key: '14a8815b51a06521642921f09fa8346483522e84', name: "body" }, index.h("ic-typography", { key: 'bca780cc2275e81d4e25bae45f5065f6fab3bcd5', maxLines: maxLines, class: "empty-state-body" }, body))), helpers.isSlotUsed(this.el, "actions") && (index.h("div", { key: 'd6c0f61a358c1d0c86c4da922ed0504ffdc8228f', class: "action-area" }, index.h("slot", { key: 'ac150a34e883376bfee43a6edbeb8992c3bc3f96', name: "actions" })))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -48,12 +48,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 (index.h(index.Host, { key: 'da292a4ecbb670fb85eddac93d4e8743a7f7a5a3', class: {
+        return (index.h(index.Host, { key: 'b8797484e397b1a952f2df6f644c985deec5be65', class: {
                 "footer-link": true,
                 [`footer-link-${grouped ? "grouped" : "ungrouped"}-${small ? "small" : "sparse"}`]: true,
                 [`footer-link-${this.foregroundColor}`]: true,
                 "footer-logo-link": isLogoLink,
-            }, role: "listitem" }, index.h("ic-link", { key: 'ba008bce21d6a1a062d69515578c158908c4f413', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, index.h("slot", { key: '45d18d8d1009b438338c2153a2b59c88d6f3c320' }))));
+            }, role: "listitem" }, index.h("ic-link", { key: '1cd559f7c768a70d2bc0c92845ad6ae6761b584a', class: "footer-link", href: href, hreflang: hreflang, referrerpolicy: referrerpolicy, rel: rel, download: download !== false ? download : undefined, target: target }, index.h("slot", { key: 'f2104f33d9651f96414a4963b30ea2e6c2414b18' }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

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

@@ -91,7 +91,7 @@ const Footer = class {
             helpers.isSlotUsed(el, "caption") ||
             caption ||
             copyright;
-        return (index.h(index.Host, { key: 'b25023d5362ca9baca9c01a319c038eb4540e97a', class: {
+        return (index.h(index.Host, { key: '5e9f3b92157b9ffa5fc6e2dbe8f8a5c6a63a6237', class: {
                 ["ic-footer"]: true,
                 [`ic-footer-${small ? "small" : "sparse"}`]: true,
                 [`ic-footer-${groupLinks ? "grouped" : "ungrouped"}`]: true,
@@ -99,10 +99,10 @@ const Footer = class {
                 // Slots will be able to infer their own color
                 [`ic-footer-${helpers.IcBrandForegroundEnum.Dark}`]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
                 [`ic-footer-${helpers.IcBrandForegroundEnum.Light}`]: foregroundColor === helpers.IcBrandForegroundEnum.Light,
-            } }, index.h("footer", { key: '053aafbd7016c4a74230cb3f4bd15ff1bd331761', ref: (el) => (this.footerEl = el) }, (helpers.isSlotUsed(el, "description") || description) && (index.h("div", { key: 'c963c42c0f4d0a19d8fe9c133ca3cf9261398d70', class: "footer-description" }, index.h("ic-section-container", { key: '0dd1fd94781722a494368e146f2a0b8417e1849d', aligned: aligned, fullHeight: true }, index.h("div", { key: '61a25339f136d624ef39c3f72ff920735eac3656', class: "footer-description-inner" }, index.h("ic-typography", { key: '4655d70fa69d5cc7ed44e352d37646a93b95067a', variant: "body" }, index.h("slot", { key: '3a04c622d16c8fbad42bde6e5a62b94a7cc0dbfc', name: "description" }, description)))))), helpers.isSlotUsed(el, "link") && (index.h("div", { key: '9a98191b7712a906aafa5295786586cdca8fdd63', class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" })))))), showComplianceSection && (index.h("div", { key: '26f71e1feac14df4ffd9a5f945823e7d8a334f87', class: "footer-compliance" }, index.h("ic-section-container", { key: 'd4b53cd4e8b1170b629f6493188f48438c1edd00', aligned: aligned, fullHeight: true }, index.h("div", { key: '50b07020da89a9ebe53d6fd035b7139ac8ca2282', class: "footer-compliance-inner" }, helpers.isSlotUsed(el, "logo") && (index.h("div", { key: '2ea27171f29498639b56426d4d21fbf4afc98798', class: "footer-logo" }, index.h("slot", { key: 'b09b28173314c1b0a63ce1ecdf60822d7497ed80', name: "logo" }))), (helpers.isSlotUsed(el, "caption") || caption) && (index.h("div", { key: 'b4ce260f52b3216ec3c73430311b7659e651a544', class: "footer-caption" }, index.h("ic-typography", { key: 'f83868bac58237dcd8586d4d161db7677f0b2b16', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M ? "caption" : "body" }, index.h("slot", { key: '3da3e317b1f62be124bbabc9283e08258dc57141', name: "caption" }, caption)))), copyright && (index.h("div", { key: '63b18007efa190d038048a1d57223dc0547a64ad', class: {
+            } }, index.h("footer", { key: 'cfae5dcdd5a431bba915b83e5ef2ae2347d5bb6d', ref: (el) => (this.footerEl = el) }, (helpers.isSlotUsed(el, "description") || description) && (index.h("div", { key: '9f960b8fcae0e3281b177bcfe1adf365657406dc', class: "footer-description" }, index.h("ic-section-container", { key: '49455d77e8d5e9e8a1199dc0dcc00226291e9adc', aligned: aligned, fullHeight: true }, index.h("div", { key: 'dab1fa34ca43acd9ff4c354f324c7c426d53c77b', class: "footer-description-inner" }, index.h("ic-typography", { key: '484158672386c4fed447390ab0d92bfd759a9272', variant: "body" }, index.h("slot", { key: '4a500553fd0f76a8d4f7ef8410dbd927896561b1', name: "description" }, description)))))), helpers.isSlotUsed(el, "link") && (index.h("div", { key: 'ed8613714e2bf4d79cd062f55f2b716d3e0cd304', class: "footer-links" }, groupLinks && small ? (index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" }))) : (index.h("ic-section-container", { fullHeight: true, aligned: aligned }, index.h("div", { class: "footer-links-inner", role: "list" }, index.h("slot", { name: "link" })))))), showComplianceSection && (index.h("div", { key: 'c3876f5fa89d39f28e64db1bc0fca90978102a01', class: "footer-compliance" }, index.h("ic-section-container", { key: '3e169ea49bcd2698b84c58f8105b0915777d8bf3', aligned: aligned, fullHeight: true }, index.h("div", { key: '9cfaa13eb736d3aa44b15db43221bf28bf4deb57', class: "footer-compliance-inner" }, helpers.isSlotUsed(el, "logo") && (index.h("div", { key: '853fdedd70405ebb2e96cec2adc6407e5ed11538', class: "footer-logo" }, index.h("slot", { key: '4eaaad7a4f17cd51cbdab414cdbadf3096891d38', name: "logo" }))), (helpers.isSlotUsed(el, "caption") || caption) && (index.h("div", { key: '44a611218c4ea0f494df1551ecb26a8687d57a95', class: "footer-caption" }, index.h("ic-typography", { key: 'b970144c7d85b7e05e319233be68cc91ef2d0476', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M ? "caption" : "body" }, index.h("slot", { key: '512d173a680ddd65b3583bada7530aa67d3f1f98', name: "caption" }, caption)))), copyright && (index.h("div", { key: '604ac3c72ae99883f27fdb609202782f6069bfde', class: {
                 ["footer-copyright"]: true,
                 ["classification-spacing"]: helpers.hasClassificationBanner(),
-            } }, index.h("ic-typography", { key: '0dc6200bfb89a7b34743c442f9c61829cd4b9374', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M
+            } }, index.h("ic-typography", { key: '144bbc0144a865f8a55a1df5606cea9dfa87b5e8', variant: deviceSize <= helpers.IC_DEVICE_SIZES.M
                 ? "caption-uppercase"
                 : "label-uppercase" }, "\u00A9 Crown Copyright"))))))))));
     }

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

@@ -76,18 +76,18 @@ const Hero = class {
                 "background-position": scrollFactor,
             };
         }
-        return (index.h(index.Host, { key: '4c88b4471d3485baff1f6c55f859639feb3166d8', class: {
+        return (index.h(index.Host, { key: '482bc3a82ab3561d6f88c999ca302006a1d1aa0f', class: {
                 [`ic-hero-${helpers.IcBrandForegroundEnum.Dark}`]: foregroundColor === helpers.IcBrandForegroundEnum.Dark,
                 ["has-background-image"]: backgroundImage !== undefined,
                 ["has-right-content"]: this.rightContent,
                 ["ic-hero-small"]: size === "small",
                 ["secondary-heading"]: !!secondaryHeading,
-            }, style: style }, index.h("ic-section-container", { key: 'b68716e353d9b2767dc16a5f701e3cdcbd32c748', aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { key: '6dd6f422c0bd36725be4b41b42633aeebfa1911d', class: {
+            }, style: style }, index.h("ic-section-container", { key: '178b06d47614a00c4dabe06841acfebe369f7c0a', aligned: aligned, fullHeight: true, class: "section-container" }, index.h("div", { key: '3cec4f74434ae64cc7c7df77755c32a54719e08a', class: {
                 ["left-container"]: true,
                 ["left-container-full-width"]: this.leftContentFullWidth,
-            } }, index.h("div", { key: '54ffef99b79eef5eedbf1571bff89270982b5671', class: "heading" }, index.h("slot", { key: '6b7f71caecbaa84d1a39295e100aedef32d1d522', name: "heading" }, index.h("ic-typography", { key: '841b429a53b8b72dd60017cb2b2404b826f5bbe8', variant: size === "small" ? "h2" : "h1", class: {
+            } }, index.h("div", { key: '8053a5fad4279b04af9bb3ec1f606ec443c70b80', class: "heading" }, index.h("slot", { key: 'ea0ec581076b555f8cbc03bd26be611e0e002df3', name: "heading" }, index.h("ic-typography", { key: '93e39803e6d71599ee3831161dee785b0fa6dda7', variant: size === "small" ? "h2" : "h1", class: {
                 ["heading-bottom-spacing"]: size !== "small",
-            } }, index.h("h2", { key: 'ee802d396bb8a5638f2ab8a62fddbf764436e20e' }, heading)))), index.h("div", { key: '9a051783a24c9a92fc0aeff2db50689befe4834e', class: "subheading" }, index.h("slot", { key: 'eb894eaeb4b4303be0caf090d85d487aa11284fb', name: "subheading" }, index.h("ic-typography", { key: '92b4d9af6118e2ff9bf2b9166862067c610fffee', variant: "body" }, subheading))), index.h("div", { key: 'cacf81a4666eba19211493914e9b1af466e61478', class: "interaction-container" }, index.h("slot", { key: '982fb4b528bea4c486d9c0df2cf47fb3ace19414', name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { key: '32cd6196da302dd5d0896c90d53d1b35c060e31c', class: "right-container" }, index.h("slot", { key: '655f0a9978d8402faab43e7e143987f2934255f6', name: "secondary" }, secondaryHeading && (index.h("div", { key: '94de7e79fd9122b4084b57bf0b5b0571d77e7adc', class: "secondary-container" }, index.h("div", { key: 'afd414fd37f9b1c8fb6d9f2d7957314f35a1da40', class: "secondary-heading" }, index.h("ic-typography", { key: 'd643e471ec716d3e6f33ec7761027323ca31bc8c', variant: "h4" }, index.h("h3", { key: 'f6296bbd33d2ca70beb5100151cebfa8732206d0' }, secondaryHeading))), index.h("div", { key: '0575ef33984c79674626d9f114ad90a3f973e63a', class: "secondary-subheading" }, index.h("ic-typography", { key: '8045e445231e4cbbd07ad9fa21a7b6bbf5015eff', variant: "subtitle-small" }, secondarySubheading))))))))));
+            } }, index.h("h2", { key: '6931cd6ef37ca5ab9d01d4ca969130b9daf8d7a5' }, heading)))), index.h("div", { key: 'a6212993adb3a6f3e4b267825e73cbf02e3129e7', class: "subheading" }, index.h("slot", { key: '993071f73747a2d880a1b858f4fd6d9fec507002', name: "subheading" }, index.h("ic-typography", { key: 'e16fd2e61701713aa782b9d128de9187cc81edd3', variant: "body" }, subheading))), index.h("div", { key: '0ecd487ff2614787759eb35bdc8c6aecb385d795', class: "interaction-container" }, index.h("slot", { key: '653843aca5d99e5bed6d0343e31c285ca1ad7e6d', name: "interaction" }))), (helpers.isPropDefined(secondaryHeading) || this.rightContent) && (index.h("div", { key: 'ce6b3edc98f9f112b0bde6c590e1fbf7d3b75af8', class: "right-container" }, index.h("slot", { key: '173399d87b56f858542b71da3105d25f639aad87', name: "secondary" }, secondaryHeading && (index.h("div", { key: 'a2e895801f1611c60baacde029f2c55ce36b60a3', class: "secondary-container" }, index.h("div", { key: 'aedd5eb54afb5f93a263cf366223257c6074b697', class: "secondary-heading" }, index.h("ic-typography", { key: '6ec103c17df879c443aa587c09e32bfac942c2e3', variant: "h4" }, index.h("h3", { key: '37623268a450894886e5ae7fe773a950a120c3cc' }, secondaryHeading))), index.h("div", { key: '8e0ca17e68cf68c016040827d2999635babd1c9d', class: "secondary-subheading" }, index.h("ic-typography", { key: '14c59d487b56af4c70a4ec37ab6091262bcc4b69', variant: "subtitle-small" }, secondarySubheading))))))))));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -168,22 +168,22 @@ const HorizontalScroll = class {
     }
     render() {
         const { firstItemVisible, lastItemVisible, itemOverflow } = this;
-        return (index.h(index.Host, { key: '3c307f5bddcc7b6c8ab7764d08504585f61e203d', class: {
+        return (index.h(index.Host, { key: '5c313665e71e0abc91a19f204ccf08d7b017f46b', class: {
                 ["ic-horizontal-scroll-visible"]: itemOverflow,
                 ["ic-horizontal-scroll-dark"]: this.appearance === helpers.IcBrandForegroundEnum.Dark,
                 ["ic-horizontal-scroll-light"]: this.appearance === helpers.IcBrandForegroundEnum.Light,
                 [`ic-theme-${this.theme}`]: this.theme !== "inherit",
-            } }, index.h("div", { key: 'f4bda7e5c0108e986191cde56ef8e255a80b604f', "aria-hidden": "true", class: {
+            } }, index.h("div", { key: '7a65d56af26a6bfe660c3e923beaf7b512f77de8', "aria-hidden": "true", class: {
                 ["scroll-container-left"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: firstItemVisible,
-            }, role: "tab" }, index.h("ic-button", { key: '5eb199e69ca500c8e84e9b79cec4a3448b604c39', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll left", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, index.h("ic-button", { key: '0203d6acdde7444d03038b3ec86f3e318615030d', 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 }), index.h("span", { key: 'c939c5db95cc4b61645045ef498cc9b80c4f3d69', class: "scroll-splitter-left" })), index.h("slot", { key: '3ded812f11a7bbdc25157d840ee32f23ed58131b' }), index.h("div", { key: 'e713490eb2995ff19ec70bf0a098193eaa9829a8', "aria-hidden": "true", class: {
+                : "light", monochrome: this.monochrome, innerHTML: LeftArrow, disabled: firstItemVisible, tabindex: "-1", onClick: this.scrollLeft, onMouseDown: this.leftArrowMouseDownHandler }), index.h("span", { key: 'dffb5fee1c17005205216d0901141317e2dc4aa6', class: "scroll-splitter-left" })), index.h("slot", { key: 'f637c15f3020e1572a61179c2132dece11d0699a' }), index.h("div", { key: 'c563d5ca6d07a66f2111bea5aebe7d36ae481770', "aria-hidden": "true", class: {
                 ["scroll-container-right"]: true,
                 ["hidden"]: !itemOverflow,
                 ["disabled"]: lastItemVisible,
-            }, role: "tab" }, index.h("span", { key: 'a2427e872d8ab79ef0022ccb216238867e49065c', class: "scroll-splitter-right" }), index.h("ic-button", { key: 'a58d98e7d695fe15e3c085f1bec0079045817b2d', class: "scroll-arrow", variant: "icon-tertiary", "aria-label": "Scroll right", theme: this.theme === "light" || this.theme === "inherit"
+            }, role: "tab" }, index.h("span", { key: 'd8afe9aaf2304d13909815aeb8e60ac4f8952f7f', class: "scroll-splitter-right" }), index.h("ic-button", { key: '4f3be747e736a50705793742b0a1e9fab44d56db', 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 }))));
     }