@ukic/web-components 2.35.2 → 3.0.0-alpha.10

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js

@@ -3,14 +3,15 @@ import { getInputDescribedByText, hasValidationStatus, onComponentRequiredPropUn
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export class CheckboxGroup {
     constructor() {
+        this.checkboxSelector = "ic-checkbox";
         this.disabled = false;
         this.helperText = "";
         this.hideLabel = false;
         this.label = undefined;
         this.name = undefined;
         this.required = false;
-        this.size = "default";
-        this.small = false;
+        this.size = "medium";
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
     }
@@ -18,7 +19,7 @@ export class CheckboxGroup {
         removeDisabledFalse(this.disabled, this.el);
     }
     labelNameHandler(newValue, oldValue, propName) {
-        Array.from(this.el.querySelectorAll("ic-checkbox")).forEach((checkbox) => {
+        Array.from(this.el.querySelectorAll(this.checkboxSelector)).forEach((checkbox) => {
             if (propName === "label")
                 checkbox.groupLabel = newValue;
             else if (checkbox.name === oldValue) {
@@ -27,6 +28,11 @@ export class CheckboxGroup {
             }
         });
     }
+    watchThemeHandler(newValue) {
+        Array.from(this.el.querySelectorAll(this.checkboxSelector)).forEach((checkbox) => {
+            checkbox.theme = newValue;
+        });
+    }
     handleChange(ev) {
         //don't pass on the event if it has come from slotted text field
         //otherwise any icChange handler bound to the checkbox group will also run
@@ -36,6 +42,7 @@ export class CheckboxGroup {
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
+        this.watchThemeHandler(this.theme);
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -58,11 +65,15 @@ export class CheckboxGroup {
         });
     }
     render() {
-        const { disabled, helperText, hideLabel, label, name, required, size, small, validationStatus, validationText, } = this;
+        const { disabled, helperText, hideLabel, label, name, required, size, theme, validationStatus, validationText, } = this;
         const describedBy = getInputDescribedByText(name, helperText !== "", validationStatus !== "");
-        return (h(Host, { class: { ["small"]: small, [`${size}`]: true } }, (validationStatus === "error" || required || hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
+        return (h(Host, { class: {
+                [`ic-checkbox-group-${size}`]: true,
+                [`ic-checkbox-group-disabled`]: disabled,
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, (validationStatus === "error" || required || hideLabel) && (h("span", { id: "screenReaderOnlyText", class: "screen-reader-only-text", "aria-hidden": "true" }, label, " ", validationStatus === "error" ? "invalid data " : null, " ", required ? "required" : null)), h("fieldset", { id: name, "aria-labelledby": `${validationStatus === "error" || required || hideLabel
                 ? "screenReaderOnlyText"
-                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", null, h("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, for: name }))), h("div", { class: "checkboxes-container" }, h("slot", null))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
+                : ""} ${describedBy}`.trim(), disabled: disabled }, !hideLabel && (h("legend", null, h("ic-input-label", { class: { [`${validationStatus}`]: true }, label: label, helperText: helperText, required: required, disabled: disabled, useLabelTag: false }))), h("div", { class: "checkboxes-container" }, h("slot", null))), hasValidationStatus(validationStatus, disabled) && (h("ic-input-validation", { for: name, ariaLiveMode: "polite", status: validationStatus, message: validationText }))));
     }
     static get is() { return "ic-checkbox-group"; }
     static get encapsulation() { return "shadow"; }
@@ -189,7 +200,7 @@ export class CheckboxGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "IcSizes",
-                    "resolved": "\"default\" | \"large\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {
                         "IcSizes": {
                             "location": "import",
@@ -206,28 +217,31 @@ export class CheckboxGroup {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "\"default\""
+                "defaultValue": "\"medium\""
             },
-            "small": {
-                "type": "boolean",
+            "theme": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [{
-                            "name": "deprecated",
-                            "text": "This prop should not be used anymore. Set prop `size` to \"small\" instead."
-                        }],
-                    "text": ""
+                    "tags": [],
+                    "text": "Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component."
                 },
-                "attribute": "small",
+                "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "\"inherit\""
             },
             "validationStatus": {
                 "type": "string",
@@ -308,6 +322,9 @@ export class CheckboxGroup {
             }, {
                 "propName": "name",
                 "methodName": "labelNameHandler"
+            }, {
+                "propName": "theme",
+                "methodName": "watchThemeHandler"
             }];
     }
     static get listeners() {

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.js.map

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

package/dist/collection/components/ic-checkbox-group/ic-checkbox-group.stories.js

@@ -15,10 +15,11 @@ const defaultArgs = {
   label: "Checkbox label",
   nativeIndeterminateBehaviour: false,
   required: false,
-  size: "default",
+  size: "medium",
   validationStatus: "",
   validationText: "",
   value: "checkbox-value",
+  theme: "inherit",
 };
 
 export default {
@@ -115,7 +116,7 @@ export const Sizes = {
         label="Unselected / Default"
       ></ic-checkbox>
       <ic-checkbox
-        size="default"
+        size="medium"
         value="valueName2"
         label="Selected / Default"
         checked
@@ -148,7 +149,7 @@ export const Sizes = {
       ></ic-checkbox>
     </ic-checkbox-group>
     <ic-checkbox-group
-      size="default"
+      size="medium"
       label="This is a checkbox group with default-sized checkboxes"
       name="group1"
     >
@@ -612,6 +613,8 @@ export const TextFieldValueChange = {
   name: "TextField value change",
 };
 
+const inlineRadioSelector = "inline-radio";
+
 export const Playground = {
   render: (args) => {
     const [{ checked }, updateArgs] = useArgs();
@@ -625,6 +628,7 @@ export const Playground = {
       required=${args.required}
       validation-status=${args.validationStatus}
       validation-text=${args.validationText}
+      theme=${args.theme}
     >
       <ic-checkbox
         disabled=${args.disabled}
@@ -654,7 +658,7 @@ export const Playground = {
       options: ["dynamic", "static"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -667,10 +671,10 @@ export const Playground = {
     },
 
     size: {
-      options: ["default", "large", "small"],
+      options: ["medium", "large", "small"],
 
       control: {
-        type: "inline-radio",
+        type: inlineRadioSelector,
       },
     },
 
@@ -681,6 +685,14 @@ export const Playground = {
         type: "select",
       },
     },
+
+    theme: {
+      options: ["inherit", "light", "dark"],
+
+      control: {
+        type: inlineRadioSelector,
+      },
+    },
   },
 
   name: "Playground",

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

@@ -149,7 +149,7 @@ describe("ic-checkbox-group", () => {
         expect(page.root).toMatchSnapshot();
         const checkboxes = page.root.querySelectorAll("ic-checkbox");
         checkboxes.forEach((checkbox) => {
-            expect(checkbox.classList.contains("small")).toBe(true);
+            expect(checkbox.classList.contains("ic-checkbox-small")).toBe(true);
         });
     });
     it("should prioritise the size on an individual checkbox over the size on the checkbox group", async () => {
@@ -163,7 +163,7 @@ describe("ic-checkbox-group", () => {
         const smallCheckbox = page.root.querySelector("ic-checkbox#small-checkbox");
         expect(smallCheckbox["size"]).toMatch("small");
         const largeCheckbox = page.root.querySelector("ic-checkbox:not(#small-checkbox)");
-        expect(largeCheckbox.classList.contains("large")).toBe(true);
+        expect(largeCheckbox.classList.contains("ic-checkbox-large")).toBe(true);
         expect(page.root).toMatchSnapshot();
     });
     it("should change checked state", async () => {

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

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should test checkbox option as submit on form\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render indeterminate\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n  });\n\n  it(\"should render an aria label when group label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n  });\n\n  it(\"should render an aria label when checkbox label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\" hide-label></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-checkbox-label\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n\n    document.querySelector(\"ic-checkbox\").disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n  });\n\n  it(\"should render with hidden dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n  });\n\n  it(\"should render with dynamic additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-dynamic-field-when-checked\"\n    );\n  });\n\n  it(\"should render with disabled static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n  });\n\n  it(\"should remove disabled attribute from static additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-disabled-attribute-removed-from-field\"\n    );\n  });\n\n  it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox.classList.contains(\"small\")).toBe(true);\n    });\n  });\n\n  it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n        <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    const smallCheckbox = page.root.querySelector(\n      \"ic-checkbox#small-checkbox\"\n    ) as HTMLIcCheckboxElement;\n    expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n    const largeCheckbox = page.root.querySelector(\n      \"ic-checkbox:not(#small-checkbox)\"\n    ) as HTMLIcCheckboxElement;\n    expect(largeCheckbox.classList.contains(\"large\")).toBe(true);\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should change checked state\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.rootInstance.handleClick();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when checkbox is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\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 emit icCheck on click\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icCheck\", eventSpy);\n\n    page.root\n      .querySelector(\"ic-checkbox\")\n      .shadowRoot.querySelector(\"input\")\n      .click();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'false'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked indeterminate></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'true'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" indeterminate native-indeterminate-behaviour></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form>\n          <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>    \n          <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test labelNameHandler\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox, CheckboxGroup],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n      <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n    </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.root.label = \"new label\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}
+{"version":3,"file":"ic-checkbox-group.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-checkbox-group/test/basic/ic-checkbox-group.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { CheckboxGroup } from \"../../ic-checkbox-group\";\nimport { Checkbox } from \"../../../ic-checkbox/ic-checkbox\";\nimport { TextField } from \"../../../ic-text-field/ic-text-field\";\n\ndescribe(\"ic-checkbox-group\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders\");\n  });\n\n  it(\"should render as required\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" required>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-required\");\n  });\n\n  it(\"should render as helper text\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" helper-text=\"helper test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-helpertext\");\n  });\n\n  it(\"should test checkbox option as submit on form\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form id=\"new-form\"></form><ic-checkbox id=\"ic-checkbox\" label=\"IC Checkbox Test\" value=\"test-value\" form=\"new-form\" selected></ic-checkbox>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-checked\");\n  });\n\n  it(\"should render indeterminate\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" checked indeterminate label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-indeterminate\");\n  });\n\n  it(\"should render an aria label when group label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-label\");\n  });\n\n  it(\"should render an aria label when checkbox label hidden\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\" hide-label></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-hidden-checkbox-label\");\n  });\n\n  it(\"should render in a disabled state\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" disabled label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-disabled\");\n\n    document.querySelector(\"ic-checkbox\").disabled = false;\n\n    await page.waitForChanges();\n    expect(page.root).toMatchSnapshot(\"disabled-removed\");\n  });\n\n  it(\"should render with validation status\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-validation\");\n  });\n\n  it(\"should render with hidden dynamic additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" additional-field-display=\"dynamic\" label=\"test label\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-dynamic-field\");\n  });\n\n  it(\"should render with dynamic additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"dynamic\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-dynamic-field-when-checked\"\n    );\n  });\n\n  it(\"should render with disabled static additional field\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\">\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\"renders-with-disabled-additional-field\");\n  });\n\n  it(\"should remove disabled attribute from static additional field when checked\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox, TextField],\n      html: `<ic-checkbox-group label=\"test label\" hide-label name=\"test\" validation-status=\"error\">\n        <ic-checkbox value=\"test\" label=\"test label\" additional-field-display=\"static\" checked>\n        <ic-text-field slot=\"additional-field\" placeholder=\"Placeholder\" label=\"Test label\"></ic-text-field>\n        </ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot(\n      \"renders-with-disabled-attribute-removed-from-field\"\n    );\n  });\n\n  it(\"should pass the size on the checkbox group to the child checkboxes when there's no size set on them individually\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"small\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    const checkboxes = page.root.querySelectorAll(\"ic-checkbox\");\n\n    checkboxes.forEach((checkbox) => {\n      expect(checkbox.classList.contains(\"ic-checkbox-small\")).toBe(true);\n    });\n  });\n\n  it(\"should prioritise the size on an individual checkbox over the size on the checkbox group\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\" size=\"large\">\n        <ic-checkbox value=\"test\" label=\"test label\" id=\"large-checkbox\"></ic-checkbox>\n        <ic-checkbox value=\"test\" label=\"test label\" size=\"small\" id=\"small-checkbox\"></ic-checkbox>  \n      </ic-checkbox-group>`,\n    });\n\n    const smallCheckbox = page.root.querySelector(\n      \"ic-checkbox#small-checkbox\"\n    ) as HTMLIcCheckboxElement;\n    expect(smallCheckbox[\"size\"]).toMatch(\"small\");\n\n    const largeCheckbox = page.root.querySelector(\n      \"ic-checkbox:not(#small-checkbox)\"\n    ) as HTMLIcCheckboxElement;\n    expect(largeCheckbox.classList.contains(\"ic-checkbox-large\")).toBe(true);\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should change checked state\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.rootInstance.handleClick();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n  });\n\n  it(\"should call 'setFocus' when checkbox is focused\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>`,\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 emit icCheck on click\", async () => {\n    const page = await newSpecPage({\n      components: [CheckboxGroup, Checkbox],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n        <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n      </ic-checkbox-group>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icCheck\", eventSpy);\n\n    page.root\n      .querySelector(\"ic-checkbox\")\n      .shadowRoot.querySelector(\"input\")\n      .click();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'false'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" checked indeterminate></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n  });\n\n  it(\"should test indeterminate with 'nativeIndeterminateBehaviour' set to 'true'\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<ic-checkbox value=\"test\" label=\"test label\" indeterminate native-indeterminate-behaviour></ic-checkbox>`,\n    });\n    await page.waitForChanges();\n\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n\n    page.root.indeterminate = false;\n    await page.waitForChanges();\n\n    page.root.indeterminate = true;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n    expect(page.rootInstance.displayIndeterminate).toBe(true);\n\n    page.root.shadowRoot.querySelector(\"input\").click();\n\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n    expect(page.rootInstance.displayIndeterminate).toBe(false);\n  });\n\n  it(\"should test form reset event\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox],\n      html: `<form>\n          <ic-checkbox value=\"test\" label=\"test label\" checked></ic-checkbox>    \n          <button id=\"resetButton\" type=\"reset\">Reset</button>  \n      </form>`,\n    });\n\n    expect(page.root.checked).toBe(true);\n\n    page.root.checked = false;\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(false);\n\n    await page.rootInstance.handleFormReset();\n    await page.waitForChanges();\n\n    expect(page.root.checked).toBe(true);\n\n    //test disconnected callback\n    page.setContent(\"\");\n  });\n\n  it(\"should test labelNameHandler\", async () => {\n    const page = await newSpecPage({\n      components: [Checkbox, CheckboxGroup],\n      html: `<ic-checkbox-group label=\"test label\" name=\"test\">\n      <ic-checkbox value=\"test\" label=\"test label\"></ic-checkbox>    \n    </ic-checkbox-group>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n\n    page.root.label = \"new label\";\n    await page.waitForChanges();\n\n    expect(page.root).toMatchSnapshot();\n  });\n});\n"]}

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,71 +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.outline.hovered:not(:focus-within),
-.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);
-  border: none;
+  --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)
+  );
+
+  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);
 }
 
-.outline,
-.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);
 }
 
-.outline.small,
-.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);
 }
 
-.outline.large,
-.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);
 }
 
-.outline.disabled,
 .outlined.disabled {
   border: var(--ic-border-disabled);
-  background: none;
+  border-color: var(--ic-chip-outline-inactive);
 }
 
 .chip.disabled ic-typography {
-  color: var(--ic-architectural-500);
-}
-
-.filled.disabled 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);
@@ -549,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 {
@@ -565,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 {
@@ -601,7 +614,7 @@ ic-tooltip {
   }
 
   .chip.disabled ic-typography {
-    color: GrayText;
+    --ic-typography-color: GrayText;
   }
 
   .chip.disabled path,