@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/collection/components/ic-chip/ic-chip.css

@@ -444,17 +444,30 @@ video {
 :host {
   display: inline-block;
   max-width: 100%;
+  vertical-align: middle;
 }
 
 .chip {
+  --chip-bg-color: transparent;
+  --chip-hover-bg: var(--ic-chip-action-hover);
+  --chip-pressed-bg: var(--ic-chip-action-pressed);
+
   display: flex;
   padding: var(--ic-space-xxs);
   font-size: 0.875rem;
   border-radius: var(--ic-space-md);
   text-align: left;
   text-decoration: none;
-  transition: var(--ic-easing-transition-fast);
   position: relative;
+  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 {
@@ -471,69 +484,79 @@ video {
   padding: 0 var(--ic-space-xs);
 }
 
-.chip.hovered:not(:focus-within) {
-  background-color: var(--ic-architectural-300);
-}
-
 .chip:focus-within {
   box-shadow: var(--ic-border-focus);
   outline: var(--ic-hc-focus-outline);
   z-index: 1;
 }
 
-.chip.outlined.hovered:not(:focus-within) {
-  background-color: var(--ic-action-dark-bg-hover);
-}
-
 ic-tooltip:focus-within {
   z-index: 1;
 }
 
 .filled {
-  background-color: var(--chip-custom-color, var(--ic-architectural-200));
-  color: var(--chip-custom-foreground-color, black);
+  --chip-bg-color: var(
+    --chip-custom-color,
+    var(--ic-chip-background-filled-default)
+  );
+  --ic-typography-color: var(
+    --chip-custom-foreground-color,
+    var(--ic-chip-label)
+  );
 
-  --ic-typography-color: var(--chip-custom-foreground-color, black);
-
-  border: none;
+  color: var(--chip-custom-foreground-color, var(--ic-chip-label));
 }
 
 .filled.disabled {
-  background-color: var(--ic-architectural-100);
+  --chip-bg-color: var(--ic-chip-background-filled-inactive);
 }
 
-.outlined {
-  color: var(--ic-architectural-900);
-  border: var(--ic-border-width) solid
-    var(--chip-custom-color, var(--ic-architectural-900));
-  padding: calc(var(--ic-space-xxs) - var(--ic-space-1px));
+: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);
 }
 
-.outlined.small {
-  padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
+:host(.ic-chip-dark-text) .chip.filled:focus-within {
+  --chip-pressed-bg: var(--ic-action-dark-bg-pressed);
 }
 
-.outlined.large {
-  padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
+: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-label);
+  border-color: var(--chip-custom-color, var(--ic-chip-outline));
+  padding: calc(var(--ic-space-xxs));
+
+  --ic-typography-color: var(--ic-chip-label);
 }
 
 .outlined.disabled {
   border: var(--ic-border-disabled);
-  background: none;
+  border-color: var(--ic-chip-outline-inactive);
 }
 
 .chip.disabled ic-typography {
-  --ic-typography-color: var(--ic-architectural-500);
-}
-
-.filled.disabled ic-typography {
-  --ic-typography-color: var(--ic-architectural-600);
+  --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);
@@ -547,7 +570,7 @@ ic-tooltip:focus-within {
 
 .dismiss-icon[disabled] {
   pointer-events: none;
-  color: var(--ic-architectural-200);
+  color: var(--ic-chip-icon-inactive);
 }
 
 .icon {
@@ -563,32 +586,24 @@ ic-tooltip {
 
 .chip.disabled path,
 .chip.disabled ::slotted(svg) {
-  fill: var(--ic-architectural-200);
+  fill: var(--ic-chip-icon-inactive);
 }
 
-.chip.white-background {
-  background-color: var(--ic-architectural-white);
+.outlined.non-transparent {
+  background-color: var(--ic-chip-outline-background);
 }
 
-.chip.white-background.hovered:not(:focus-within) {
-  background-color: var(--ic-action-dark-bg-hover-no-alpha) !important;
+: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);
 }
 
 @media (forced-colors: active) {
   .chip {
-    border: var(--ic-hc-border);
-  }
-
-  .filled.small {
-    padding: calc(var(--ic-space-xxxs) - var(--ic-space-1px));
-  }
-
-  .filled {
-    padding: calc(var(--ic-space-xxxs) + var(--ic-space-1px));
-  }
-
-  .filled.large {
-    padding: calc(var(--ic-space-xs) - var(--ic-space-1px));
+    border: var(--ic-border-hc);
   }
 
   .chip.disabled {

package/dist/collection/components/ic-chip/ic-chip.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h, Host, } from "@stencil/core";
 import { onComponentRequiredPropUndefined, isSlotUsed, removeDisabledFalse, convertToRGBA, isElInAGGrid, } from "../../utils/helpers";
 import dismissIcon from "../../assets/dismiss-icon.svg";
 /**
@@ -21,10 +21,17 @@ export class Chip {
             const colorRGBA = convertToRGBA(this.customColor);
             if (colorRGBA) {
                 const { r, g, b, a } = colorRGBA;
-                const foregroundColour = (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? "black" : "white";
-                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`);
+                this.customColorClass =
+                    (r * 299 + g * 587 + b * 114) / 1000 > 133.3505
+                        ? "ic-chip-dark-text"
+                        : "ic-chip-light-text";
+                this.el.setAttribute("style", `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`);
+            }
+            else {
+                this.customColorClass = "";
             }
         };
+        this.customColorClass = "";
         this.hovered = false;
         this.visible = true;
         this.customColor = null;
@@ -32,19 +39,16 @@ export class Chip {
         this.dismissible = false;
         this.label = undefined;
         this.size = "medium";
+        this.theme = "inherit";
         this.transparentBackground = true;
         this.variant = "filled";
     }
     customColorHandler() {
-        if (!this.dismissible) {
-            this.setChipColour();
-        }
+        this.setChipColour();
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
-        if (!this.dismissible) {
-            this.setChipColour();
-        }
+        this.customColorHandler();
     }
     componentWillRender() {
         if (isElInAGGrid(this.el)) {
@@ -65,16 +69,19 @@ export class Chip {
         (_a = this.el.shadowRoot.querySelector("button")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { label, variant, size, dismissible, visible, disabled, hovered } = this;
-        return (visible && (h("div", { class: {
+        const { label, variant, size, dismissible, visible, disabled, hovered, theme, customColorClass, } = this;
+        return (h(Host, { class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+                [`${customColorClass}`]: variant === "filled" && customColorClass !== "",
+            } }, visible && (h("div", { class: {
                 chip: true,
                 [`${variant}`]: true,
                 [`${size}`]: true,
                 disabled,
                 dismissible,
                 hovered,
-                "white-background": this.variant === "outlined" && !this.transparentBackground,
-            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" }))));
+                "non-transparent": this.variant === "outlined" && !this.transparentBackground,
+            } }, isSlotUsed(this.el, "icon") && (h("div", { class: "icon" }, h("slot", { name: "icon" }))), h("ic-typography", { variant: "label", "apply-vertical-margins": false, class: { label: true, "in-ag-grid": this.inAGGrid } }, h("span", null, label)), dismissible && (h("ic-tooltip", { label: "Dismiss", target: "dismiss-icon", class: { "tooltip-disabled": disabled } }, h("button", { id: "dismiss-icon", class: "dismiss-icon", "aria-label": `Dismiss ${label} chip`, disabled: disabled, tabindex: disabled ? -1 : 0, onClick: this.dismissAction, onMouseEnter: this.mouseEnterHandler, onMouseLeave: this.mouseLeaveHandler, innerHTML: dismissIcon }))), isSlotUsed(this.el, "badge") && h("slot", { name: "badge" })))));
     }
     static get is() { return "ic-chip"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +116,7 @@ export class Chip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
+                    "text": "The custom chip colour. This will override the theme colour.\nCan be a hex value e.g. \"#ff0000\", RGB e.g. \"rgb(255, 0, 0)\", or RGBA e.g. \"rgba(255, 0, 0, 1)\"."
                 },
                 "attribute": "custom-color",
                 "reflect": false,
@@ -192,6 +199,24 @@ export class Chip {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"dark\" | \"light\" | \"inherit\"",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the chip to the dark or light theme colors. \"inherit\" will set the color based on the system settings or ic-theme component.\nSetting the \"customColor\" prop will override this."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "transparentBackground": {
                 "type": "boolean",
                 "mutable": false,
@@ -204,7 +229,7 @@ export class Chip {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the outlined variant of chip will have a transparent background rather than white."
+                    "text": "If `true`, the outlined variant of chip will have a transparent background rather than the theme defined color."
                 },
                 "attribute": "transparent-background",
                 "reflect": false,
@@ -238,6 +263,7 @@ export class Chip {
     }
     static get states() {
         return {
+            "customColorClass": {},
             "hovered": {},
             "visible": {}
         };

package/dist/collection/components/ic-chip/ic-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Listen,\n  Event,\n  EventEmitter,\n  Element,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  onComponentRequiredPropUndefined,\n  isSlotUsed,\n  removeDisabledFalse,\n  convertToRGBA,\n  isElInAGGrid,\n} from \"../../utils/helpers\";\nimport { IcColor, IcEmphasisType, IcSizes } 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 inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() hovered: boolean = false;\n  @State() visible: boolean = true;\n\n  /**\n   * The custom chip colour. This prop will be applied to the chip component if `dismissible` is set to `false`.\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 = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\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  /**\n   * If `true`, the outlined variant of chip will have a transparent background rather than white.\n   */\n  @Prop() transparentBackground?: boolean = 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\n    if (!this.dismissible) {\n      this.setChipColour();\n    }\n  }\n\n  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\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.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      const foregroundColour =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505 ? \"black\" : \"white\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a}); --chip-custom-foreground-color: var(--ic-architectural-${foregroundColour})`\n      );\n    }\n  };\n\n  render() {\n    const { label, variant, size, dismissible, visible, disabled, hovered } =\n      this;\n\n    return (\n      visible && (\n        <div\n          class={{\n            chip: true,\n            [`${variant}`]: true,\n            [`${size}`]: true,\n            disabled,\n            dismissible,\n            hovered,\n            \"white-background\":\n              this.variant === \"outlined\" && !this.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\": this.inAGGrid }}\n          >\n            <span>{label}</span>\n          </ic-typography>\n          {dismissible && (\n            <ic-tooltip\n              label=\"Dismiss\"\n              target=\"dismiss-icon\"\n              class={{ \"tooltip-disabled\": disabled }}\n            >\n              <button\n                id=\"dismiss-icon\"\n                class=\"dismiss-icon\"\n                aria-label={`Dismiss ${label} chip`}\n                disabled={disabled}\n                tabindex={disabled ? -1 : 0}\n                onClick={this.dismissAction}\n                onMouseEnter={this.mouseEnterHandler}\n                onMouseLeave={this.mouseLeaveHandler}\n                innerHTML={dismissIcon}\n              ></button>\n            </ic-tooltip>\n          )}\n          {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n        </div>\n      )\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-chip.js","sourceRoot":"","sources":["../../../src/components/ic-chip/ic-chip.tsx"],"names":[],"mappings":"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","sourcesContent":["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} from \"../../utils/helpers\";\nimport { IcColor, IcEmphasisType, IcSizes } 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 inAGGrid: boolean = false;\n\n  @Element() el: HTMLIcChipElement;\n\n  @State() customColorClass: string = \"\";\n  @State() hovered: boolean = false;\n  @State() visible: boolean = 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 = null;\n\n  @Watch(\"customColor\")\n  customColorHandler(): void {\n    this.setChipColour();\n  }\n\n  /**\n   * If `true`, the chip will appear disabled.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the chip will have a close button at the end to dismiss it.\n   */\n  @Prop() dismissible?: boolean = false;\n\n  /**\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?: \"dark\" | \"light\" | \"inherit\" = \"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?: boolean = 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  componentWillRender(): void {\n    if (isElInAGGrid(this.el)) {\n      this.inAGGrid = true;\n    }\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.el.shadowRoot.querySelector(\"button\")?.focus();\n  }\n\n  private dismissAction = (): void => {\n    this.icDismiss.emit();\n  };\n\n  private mouseEnterHandler = (): void => {\n    this.hovered = true;\n  };\n\n  private mouseLeaveHandler = (): void => {\n    this.hovered = false;\n  };\n\n  private setChipColour = () => {\n    const colorRGBA = convertToRGBA(this.customColor);\n    if (colorRGBA) {\n      const { r, g, b, a } = colorRGBA;\n      this.customColorClass =\n        (r * 299 + g * 587 + b * 114) / 1000 > 133.3505\n          ? \"ic-chip-dark-text\"\n          : \"ic-chip-light-text\";\n      this.el.setAttribute(\n        \"style\",\n        `--chip-custom-color: rgba(${r}, ${g}, ${b}, ${a});`\n      );\n    } else {\n      this.customColorClass = \"\";\n    }\n  };\n\n  render() {\n    const {\n      label,\n      variant,\n      size,\n      dismissible,\n      visible,\n      disabled,\n      hovered,\n      theme,\n      customColorClass,\n    } = this;\n\n    return (\n      <Host\n        class={{\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n          [`${customColorClass}`]:\n            variant === \"filled\" && customColorClass !== \"\",\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                this.variant === \"outlined\" && !this.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\": this.inAGGrid }}\n            >\n              <span>{label}</span>\n            </ic-typography>\n            {dismissible && (\n              <ic-tooltip\n                label=\"Dismiss\"\n                target=\"dismiss-icon\"\n                class={{ \"tooltip-disabled\": disabled }}\n              >\n                <button\n                  id=\"dismiss-icon\"\n                  class=\"dismiss-icon\"\n                  aria-label={`Dismiss ${label} chip`}\n                  disabled={disabled}\n                  tabindex={disabled ? -1 : 0}\n                  onClick={this.dismissAction}\n                  onMouseEnter={this.mouseEnterHandler}\n                  onMouseLeave={this.mouseLeaveHandler}\n                  innerHTML={dismissIcon}\n                ></button>\n              </ic-tooltip>\n            )}\n            {isSlotUsed(this.el, \"badge\") && <slot name=\"badge\"></slot>}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js

@@ -79,6 +79,22 @@ describe("ic-chip component renders label", () => {
         });
         expect(page.root).toMatchSnapshot();
     });
+    it("should render outlined variant", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should render outlined variant with solid-background", async () => {
+        const page = await newSpecPage({
+            components: [Chip],
+            html: `<ic-chip label="Label" variant="outlined" transparent-background="false">
+        </ic-chip>`,
+        });
+        expect(page.root).toMatchSnapshot();
+    });
     it("should apply 'hovered' style when cursor is on dismiss button", async () => {
         const page = await newSpecPage({
             components: [Chip],

package/dist/collection/components/ic-chip/test/basic/ic-chip.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\n\ndescribe(\"ic-chip component renders label\", () => {\n  it(\"should render static\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render dismissible\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" disabled=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" size=\"small\">\n              <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n  </svg>\n              </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'hovered' style when cursor is on dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n\n    const event = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(event);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n  });\n\n  it(\"should lose 'hovered' style when cursor moves off dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    const enterEvent = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(enterEvent);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n\n    const leaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(leaveEvent);\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    let chip = await page.root.shadowRoot.querySelector(\"div\");\n    const dismissButton = await page.root.shadowRoot.querySelector(\"button\");\n\n    expect(chip).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    chip = await page.root.shadowRoot.querySelector(\"div\");\n\n    expect(chip).toBeNull();\n  });\n\n  it(\"should call 'setFocus' when chip is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}
+{"version":3,"file":"ic-chip.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-chip/test/basic/ic-chip.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Chip } from \"../../ic-chip\";\nimport * as helpers from \"../../../../utils/helpers\";\n\ndescribe(\"ic-chip component renders label\", () => {\n  it(\"should render static\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render dismissible\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render disabled\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" disabled=\"true\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n            </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render small\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" dismissible=\"true\" size=\"small\">\n              <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n  </svg>\n              </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#F8C8DC\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom rgb colour\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"rgb(248,200,220)\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render with custom colour that sets white foreground text\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" custom-color=\"#00008B\">\n            <svg slot=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM10 3C11.66 3 13 4.34 13 6C13 7.66 11.66 9 10 9C8.34 9 7 7.66 7 6C7 4.34 8.34 3 10 3ZM10 17.2C7.5 17.2 5.29 15.92 4 13.98C4.03 11.99 8 10.9 10 10.9C11.99 10.9 15.97 11.99 16 13.98C14.71 15.92 12.5 17.2 10 17.2Z\" fill=\"currentColor\"/>\n</svg>\n</ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render outlined variant\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\">\n        </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render outlined variant with solid-background\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Label\" variant=\"outlined\" transparent-background=\"false\">\n        </ic-chip>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should apply 'hovered' style when cursor is on dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n\n    const event = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(event);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n  });\n\n  it(\"should lose 'hovered' style when cursor moves off dismiss button\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip id=\"test-id\" label=\"Label\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    expect(page.root).not.toBeNull;\n\n    const chip = await document.getElementById(\"test-id\");\n\n    const dismissButton = page.root.shadowRoot.querySelector(\"button\");\n\n    const enterEvent = new Event(\"mouseenter\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(enterEvent);\n    await page.waitForChanges();\n\n    await expect(chip.classList.contains(\"hovered\")).toBeTruthy;\n\n    const leaveEvent = new Event(\"mouseleave\", {\n      bubbles: true,\n      cancelable: true,\n    });\n\n    dismissButton.dispatchEvent(leaveEvent);\n\n    await expect(chip.classList.contains(\"hovered\")).toBeFalsy;\n  });\n\n  it(\"should close on dismiss icon click\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    let chip = await page.root.shadowRoot.querySelector(\"div\");\n    const dismissButton = await page.root.shadowRoot.querySelector(\"button\");\n\n    expect(chip).not.toBeNull();\n    expect(dismissButton).not.toBeNull();\n\n    await dismissButton.click();\n\n    await page.waitForChanges();\n    chip = await page.root.shadowRoot.querySelector(\"div\");\n\n    expect(chip).toBeNull();\n  });\n\n  it(\"should call 'setFocus' when chip is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"This is dismissible\" dismissible=\"true\"></ic-chip>`,\n    });\n\n    //Can't expect anything in this test - this is to increase code coverage only\n    await page.rootInstance.setFocus().toHaveBeenCalled;\n  });\n\n  it(\"should switch custom colour after initial render\", async () => {\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\" custom-color=\"#F8C8DC\"></ic-chip>`,\n    });\n\n    const chip = document.querySelector(\"ic-chip\");\n\n    expect(page.rootInstance.customColor).toBe(\"#F8C8DC\");\n\n    chip.customColor = \"#00008B\";\n    await page.waitForChanges();\n\n    expect(page.rootInstance.customColor).toBe(\"#00008B\");\n  });\n\n  it(\"should apply the correct class when in an AG Grid\", async () => {\n    Object.defineProperty(helpers, \"isElInAGGrid\", {\n      value: jest.fn().mockReturnValue(true),\n    });\n\n    const page = await newSpecPage({\n      components: [Chip],\n      html: `<ic-chip label=\"Default\"></ic-chip>`,\n    });\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.inAGGrid).toBe(true);\n    expect(\n      page.root.shadowRoot\n        .querySelector(\"ic-typography\")\n        .classList.contains(\"in-ag-grid\")\n    ).toBe(true);\n  });\n});\n"]}

package/dist/collection/components/ic-classification-banner/ic-classification-banner.css

@@ -454,6 +454,22 @@ video {
   z-index: var(--ic-z-index-classification-banner);
 
   --ic-typography-color: currentcolor;
+
+  /* classification official */
+  --ic-color-classification-official: var(--ic-color-classification-blue);
+  --ic-color-classification-official-foreground: #fff;
+
+  /* classification secret */
+  --ic-color-classification-secret: var(--ic-color-classification-yellow);
+  --ic-color-classification-secret-foreground: #000;
+
+  /* classification top secret */
+  --ic-color-classification-top-secret: var(--ic-color-classification-red);
+  --ic-color-classification-top-secret-foreground: #fff;
+
+  /* classification not set */
+  --ic-color-classification-not-set: var(--ic-color-classification-grey);
+  --ic-color-classification-not-set-foreground: #fff;
 }
 
 :host(.ic-classification-banner-inline) {
@@ -471,24 +487,24 @@ video {
 }
 
 .default {
-  background-color: var(--ic-classification-not-set);
-  color: var(--ic-classification-not-set-foreground);
+  background-color: var(--ic-color-classification-not-set);
+  color: var(--ic-color-classification-not-set-foreground);
 }
 
 .official,
 .official-sensitive {
-  background-color: var(--ic-classification-official);
-  color: var(--ic-classification-official-foreground);
+  background-color: var(--ic-color-classification-official);
+  color: var(--ic-color-classification-official-foreground);
 }
 
 .secret {
-  background-color: var(--ic-classification-secret);
-  color: var(--ic-classification-secret-foreground);
+  background-color: var(--ic-color-classification-secret);
+  color: var(--ic-color-classification-secret-foreground);
 }
 
 .top-secret {
-  background-color: var(--ic-classification-top-secret);
-  color: var(--ic-classification-top-secret-foreground);
+  background-color: var(--ic-color-classification-top-secret);
+  color: var(--ic-color-classification-top-secret-foreground);
 }
 
 .offscreen {
@@ -501,6 +517,6 @@ video {
 
 @media (forced-colors: active) {
   .classification-banner {
-    border: var(--ic-hc-border);
+    border: var(--ic-border-hc);
   }
 }

package/dist/collection/components/ic-divider/ic-divider.css

@@ -3,9 +3,9 @@ hr {
   margin: 0;
   border: none;
   height: var(--ic-space-1px);
-  background-color: var(--ic-keyline-darken-rgb);
+  background-color: var(--ic-color-keyline-darken);
 }
 
 hr.light {
-  background-color: var(--ic-keyline-lighten-rgb);
+  background-color: var(--ic-color-keyline-lighten);
 }

package/dist/collection/components/ic-footer/ic-footer.css

@@ -462,13 +462,13 @@ video {
 :host(.ic-footer-foreground-light) {
   --footer-theme-secondary: var(--ic-theme-secondary);
   --footer-theme-tertiary: var(--ic-theme-tertiary);
-  --footer-keyline: var(--ic-keyline-lighten);
+  --footer-keyline: var(--ic-border-keyline-lighten);
 }
 
 :host(.ic-footer-foreground-dark) {
   --footer-theme-secondary: var(--ic-theme-secondary-light);
   --footer-theme-tertiary: var(--ic-theme-tertiary-light);
-  --footer-keyline: var(--ic-keyline-darken);
+  --footer-keyline: var(--ic-border-keyline-darken);
 }
 
 :host(.ic-footer-small.ic-footer-ungrouped) {
@@ -545,6 +545,6 @@ footer {
 
 @media (forced-colors: active) {
   footer {
-    border-top: var(--ic-hc-border);
+    border-top: var(--ic-border-hc);
   }
 }

package/dist/collection/components/ic-footer-link/ic-footer-link.css

@@ -477,7 +477,7 @@ video {
 }
 
 .ic-link > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink);
+  fill: var(--ic-color-hyperlink-default);
 }
 
 .ic-link-open-in-new-icon > svg {
@@ -487,11 +487,11 @@ video {
 }
 
 .ic-link:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-visited);
+  fill: var(--ic-color-hyperlink-visited);
 }
 
 .ic-link.light:visited > .ic-link-open-in-new-icon {
-  fill: var(--ic-hyperlink-contrast-visited);
+  fill: var(--ic-color-hyperlink-contrast-visited);
 }
 
 :host(.breadcrumb-link) .ic-link {
@@ -521,7 +521,7 @@ video {
 }
 
 :host(.breadcrumb-link.current-page) .ic-link:visited {
-  color: var(--ic-color-primary-text);
+  color: var(--ic-color-text-primary);
 }
 
 :host(.footer-link-light) ::part(link),

package/dist/collection/components/ic-footer-link-group/ic-footer-link-group.css

@@ -457,11 +457,11 @@ video {
 }
 
 :host(.footer-link-group-light.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-keyline-lighten);
+  --footer-link-group-border-bottom: var(--ic-border-keyline-lighten);
 }
 
 :host(.footer-link-group-dark.footer-link-group-small) {
-  --footer-link-group-border-bottom: var(--ic-keyline-darken);
+  --footer-link-group-border-bottom: var(--ic-border-keyline-darken);
 }
 
 :host(.footer-link-group) {
@@ -494,11 +494,11 @@ video {
 }
 
 :host(.footer-link-group-small.footer-link-group-light:active) {
-  background-color: var(--ic-action-light-bg-active);
+  background-color: var(--ic-action-light-bg-pressed);
 }
 
 :host(.footer-link-group-small.footer-link-group-dark:active) {
-  background-color: var(--ic-action-dark-bg-active);
+  background-color: var(--ic-action-dark-bg-pressed);
 }
 
 .footer-link-label {