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

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

@@ -442,10 +442,6 @@ video {
 
 
 :host(.ic-checkbox-disabled) {
-  color: var(--ic-architectural-200);
-
-  --ic-typography-color: var(--ic-architectural-200);
-
   pointer-events: none;
 }
 
@@ -472,8 +468,8 @@ video {
   left: 0;
   height: var(--ic-space-lg);
   width: var(--ic-space-lg);
-  background-color: var(--ic-architectural-white);
-  border: var(--ic-border-width) solid var(--ic-architectural-400);
+  background-color: var(--ic-checkbox-background-unselected);
+  border: var(--ic-border-width) solid var(--ic-checkbox-border-unselected);
   border-radius: var(--ic-border-radius);
   outline: none;
   cursor: pointer;
@@ -481,6 +477,11 @@ video {
   flex-shrink: 0;
 }
 
+:host .container svg {
+  width: var(--ic-space-lg);
+  height: var(--ic-space-lg);
+}
+
 :host(.ic-checkbox-small) .checkbox,
 :host(.ic-checkbox-small) .container svg {
   width: var(--ic-space-md);
@@ -494,51 +495,59 @@ video {
 }
 
 .checkbox:checked {
-  background-color: var(--ic-action-default);
-  border: var(--ic-border-width) solid var(--ic-action-default);
+  background-color: var(--ic-checkbox-background-selected);
+  border: var(--ic-border-width) solid var(--ic-checkbox-background-selected);
   transition: var(--ic-easing-transition-slow);
 }
 
 .checkbox:checked:disabled {
-  background-color: var(--ic-architectural-200);
+  background-color: var(--ic-checkbox-background-selected-disabled);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-background-selected-disabled);
 }
 
 .checkbox:indeterminate,
 .checkbox.indeterminate:checked {
-  background-color: var(--ic-architectural-white);
-  border: 0.125rem solid var(--ic-action-default);
+  background-color: var(--ic-checkbox-background-indeterminate);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate);
+}
+
+.checkbox:indeterminate:disabled,
+.checkbox.indeterminate:checked:disabled {
+  background-color: var(--ic-checkbox-background-indeterminate-disabled);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-disabled);
 }
 
 .checkbox:checked:hover {
-  background-color: var(--ic-action-default-hover);
+  background-color: var(--ic-checkbox-background-selected-hover);
 }
 
 .checkbox:indeterminate:hover,
 .checkbox.indeterminate:checked:hover {
-  background-color: var(--ic-action-default-bg-hover-no-alpha);
-  border: 0.125rem solid var(--ic-action-default-hover);
+  background-color: var(--ic-checkbox-background-indeterminate-hover);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-hover);
 }
 
 .checkbox:checked:active {
-  background-color: var(--ic-action-default-pressed);
+  background-color: var(--ic-checkbox-background-selected-pressed);
 }
 
 .checkbox:indeterminate:active,
 .checkbox.indeterminate:checked:active {
-  background-color: var(--ic-action-default-bg-active-no-alpha);
-  border: 0.125rem solid var(--ic-action-default-pressed);
+  background-color: var(--ic-checkbox-background-indeterminate-pressed);
+  border: 0.125rem solid var(--ic-checkbox-background-indeterminate-pressed);
 }
 
 .checkbox:hover {
-  background-color: var(--ic-action-default-bg-hover-no-alpha);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-hover);
-  border: var(--ic-border-width) solid var(--ic-action-default-hover);
+  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-hover);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-border-unselected-hover);
 }
 
 .checkbox:active {
-  background-color: var(--ic-action-default-bg-active-no-alpha);
-  box-shadow: 0 0 0 0.25rem var(--ic-action-default-bg-active);
-  border: var(--ic-border-width) solid var(--ic-action-default-pressed);
+  box-shadow: 0 0 0 0.25rem var(--ic-checkbox-action-background-pressed);
+  border: var(--ic-border-width) solid
+    var(--ic-checkbox-border-unselected-pressed);
 }
 
 .checkbox:focus {
@@ -546,11 +555,19 @@ video {
 }
 
 .checkbox:disabled {
-  border: var(--ic-border-width) dashed var(--ic-architectural-200);
+  border: var(--ic-border-width) dashed
+    var(--ic-checkbox-border-unselected-disabled);
 }
 
 .checkbox-label {
   padding-left: var(--ic-space-sm);
+  color: var(--ic-checkbox-text);
+  --ic-typography-color: var(--ic-checkbox-text);
+}
+
+:host(.ic-checkbox-disabled) .checkbox-label {
+  color: var(--ic-checkbox-text-disabled);
+  --ic-typography-color: var(--ic-checkbox-text-disabled);
 }
 
 .checkbox-label:hover {
@@ -561,7 +578,7 @@ video {
   position: relative;
   right: calc(-1 * var(--ic-space-lg));
   margin-left: calc(-1 * var(--ic-space-lg));
-  fill: white;
+  fill: var(--ic-checkbox-icon-pressed);
   z-index: 1;
   background-color: transparent;
   pointer-events: none;
@@ -585,7 +602,7 @@ video {
   right: -1.188rem;
   margin-left: -0.875rem;
   z-index: 1;
-  background-color: var(--ic-action-default);
+  background-color: var(--ic-checkbox-icon-indeterminate);
   pointer-events: none;
   flex-shrink: 0;
 }
@@ -602,26 +619,17 @@ video {
   margin-left: -1.25rem;
 }
 
-.container:hover .indeterminate-symbol {
-  background-color: var(--ic-action-default-hover);
-}
-
-.container:active .indeterminate-symbol {
-  background-color: var(--ic-action-default-pressed);
-}
-
 .additional-field-wrapper {
   margin-left: calc(var(--ic-space-md) + var(--ic-space-lg));
   margin-top: calc(var(--ic-space-sm) / 2);
 }
 
 .branch-corner {
-  color: var(--ic-action-default);
   height: var(--ic-space-md);
   width: var(--ic-space-xl);
   border-radius: 0 0 0 0.188rem;
-  border-bottom: 0.125rem solid var(--ic-action-default);
-  border-left: 0.125rem solid var(--ic-action-default);
+  border-bottom: 0.125rem solid var(--ic-checkbox-required-bar);
+  border-left: 0.125rem solid var(--ic-checkbox-required-bar);
 }
 
 .dynamic-container {
@@ -632,9 +640,9 @@ video {
 }
 
 .dynamic-text {
-  color: var(--ic-action-default);
+  color: var(--ic-checkbox-required-text);
 
-  --ic-typography-color: var(--ic-action-default);
+  --ic-typography-color: var(--ic-checkbox-required-text);
 
   margin-top: calc(var(--ic-space-sm) / 2);
   margin-bottom: var(--ic-space-xs);

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

@@ -29,6 +29,7 @@ export class Checkbox {
         this.name = undefined;
         this.nativeIndeterminateBehaviour = false;
         this.size = undefined;
+        this.theme = "inherit";
         this.value = undefined;
         this.hideLabel = false;
     }
@@ -80,7 +81,7 @@ export class Checkbox {
         (_a = this.el.shadowRoot.querySelector(".checkbox")) === null || _a === void 0 ? void 0 : _a.focus();
     }
     render() {
-        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, displayIndeterminate, groupLabel, label, name, size, value, } = this;
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, displayIndeterminate, groupLabel, label, name, size, value, theme, } = this;
         const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
         const parentElementSize = el.parentElement
             .size;
@@ -90,7 +91,8 @@ export class Checkbox {
         return (h(Host, { class: {
                 "ic-checkbox-disabled": disabled,
                 [`ic-checkbox-${size || parentElementSize}`]: true,
-            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { class: "checkmark", width: "1.5rem", height: "1.5rem", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { role: "checkbox", class: {
+                [`ic-theme-${theme}`]: theme !== "inherit",
+            } }, h("div", { class: "container" }, displayIndeterminate && h("div", { class: "indeterminate-symbol" }), !displayIndeterminate && checked && (h("svg", { class: "checkmark", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", "fill-rule": "evenodd", "clip-rule": "evenodd" }, h("title", null, "checkmark icon"), h("path", { d: "M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z" }))), h("input", { role: "checkbox", class: {
                 checkbox: true,
                 checked,
                 indeterminate: displayIndeterminate,
@@ -149,7 +151,7 @@ export class Checkbox {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If `true`, the checkbox will be set to the checked state."
+                    "text": "If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked."
                 },
                 "attribute": "checked",
                 "reflect": true,
@@ -318,6 +320,30 @@ export class Checkbox {
                 "attribute": "size",
                 "reflect": false
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "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": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "value": {
                 "type": "string",
                 "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport { IcAdditionalFieldTypes, IcSizes } from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer: HTMLDivElement;\n\n  @Element() el: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n  @State() displayIndeterminate = this.indeterminate;\n\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? this.indeterminate\n      : this.indeterminate && this.checked;\n  }\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop({ mutable: true }) name: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop() size?: IcSizes;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: 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 = false;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n    if (checkboxGroup) {\n      if (!this.name) this.name = checkboxGroup.name;\n      this.groupLabel = checkboxGroup.label;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield?.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield?.removeAttribute(\"disabled\");\n      }\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? false\n      : this.indeterminate && this.checked;\n    this.icCheck.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      dynamicText,\n      el,\n      form,\n      displayIndeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      value,\n    } = this;\n\n    const id = `ic-checkbox-${\n      isPropDefined(label) || value\n    }-${groupLabel}`.replace(/ /g, \"-\");\n\n    const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n      .size;\n\n    checked\n      ? renderHiddenInput(true, el, name, checked && value, disabled)\n      : removeHiddenInput(el);\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-disabled\": disabled,\n          [`ic-checkbox-${size || parentElementSize}`]: true,\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n          {!displayIndeterminate && checked && (\n            <svg\n              class=\"checkmark\"\n              width=\"1.5rem\"\n              height=\"1.5rem\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            type=\"checkbox\"\n            name={name}\n            id={id}\n            value={value}\n            disabled={disabled ? true : null}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={this.handleClick}\n            form={form}\n            aria-label={this.hideLabel ? this.label : undefined}\n          ></input>\n          {!this.hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-checkbox.js","sourceRoot":"","sources":["../../../src/components/ic-checkbox/ic-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,OAAO,EACP,KAAK,EAEL,KAAK,EACL,MAAM,EACN,KAAK,GACN,MAAM,eAAe,CAAC;AAMvB,OAAO,EACL,UAAU,EACV,gCAAgC,EAChC,iBAAiB,EACjB,iBAAiB,EACjB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACnB,aAAa,GACd,MAAM,qBAAqB,CAAC;AAE7B;;GAEG;AAQH,6DAA6D;AAC7D,MAAM,OAAO,QAAQ;;QA4IX,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B;gBAC3D,CAAC,CAAC,KAAK;gBACP,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,CAAC,CAAC;sCA7IA,QAAQ;uBAKkD,KAAK;gCACrC,IAAI,CAAC,OAAO;wBAKX,KAAK;2BAMJ,4CAA4C;;;6BAezC,KAAK;oCACN,IAAI,CAAC,aAAa;;;4CAsBF,KAAK;;qBAUvB,SAAS;;yBAUnB,KAAK;;IAvCzB,yBAAyB;QACvB,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,4BAA4B;YAC3D,CAAC,CAAC,IAAI,CAAC,aAAa;YACpB,CAAC,CAAC,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,OAAO,CAAC;IACzC,CAAC;IA0CD,iBAAiB;QACf,mBAAmB,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;QAE5C,oBAAoB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAEpD,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,CAAC,aAA2C,CAAC;QAC1E,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,IAAI,CAAC,IAAI;gBAAE,IAAI,CAAC,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;YAC/C,IAAI,CAAC,UAAU,GAAG,aAAa,CAAC,KAAK,CAAC;QACxC,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,gCAAgC,CAC9B;YACE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;YACvC,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE;SACxC,EACD,UAAU,CACX,CAAC;IACJ,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,sBAAsB,KAAK,QAAQ,EAAE,CAAC;YAC7C,MAAM,SAAS,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;YACzD,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACN,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,eAAe,CAAC,UAAU,CAAC,CAAC;YACzC,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,wBAAwB,EAAE,CAAC;YACzC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO;gBACzD,CAAC,CAAC,MAAM;gBACR,CAAC,CAAC,MAAM,CAAC;QACb,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,uBAAuB,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAc,WAAW,CAAC,0CAAE,KAAK,EAAE,CAAC;IACtE,CAAC;IAcD,MAAM;QACJ,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,EAAE,EACF,IAAI,EACJ,oBAAoB,EACpB,UAAU,EACV,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,KAAK,GACN,GAAG,IAAI,CAAC;QAET,MAAM,EAAE,GAAG,eACT,aAAa,CAAC,KAAK,CAAC,IAAI,KAC1B,IAAI,UAAU,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;QAEpC,MAAM,iBAAiB,GAAI,EAAE,CAAC,aAA4C;aACvE,IAAI,CAAC;QAER,OAAO;YACL,CAAC,CAAC,iBAAiB,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,QAAQ,CAAC;YAC/D,CAAC,CAAC,iBAAiB,CAAC,EAAE,CAAC,CAAC;QAE1B,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE;gBACL,sBAAsB,EAAE,QAAQ;gBAChC,CAAC,eAAe,IAAI,IAAI,iBAAiB,EAAE,CAAC,EAAE,IAAI;gBAClD,CAAC,YAAY,KAAK,EAAE,CAAC,EAAE,KAAK,KAAK,SAAS;aAC3C;YAED,WAAK,KAAK,EAAC,WAAW;gBACnB,oBAAoB,IAAI,WAAK,KAAK,EAAC,sBAAsB,GAAG;gBAC5D,CAAC,oBAAoB,IAAI,OAAO,IAAI,CACnC,WACE,KAAK,EAAC,WAAW,EACjB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B,eACxB,SAAS,eACT,SAAS;oBAEnB,kCAA6B;oBAC7B,YAAM,CAAC,EAAC,qFAAqF,GAAG,CAC5F,CACP;gBACD,aACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE;wBACL,QAAQ,EAAE,IAAI;wBACd,OAAO;wBACP,aAAa,EAAE,oBAAoB;qBACpC,EACD,IAAI,EAAC,UAAU,EACf,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAChC,OAAO,EAAE,OAAO,EAChB,aAAa,EAAE,oBAAoB,EACnC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,IAAI,EAAE,IAAI,gBACE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,GAC5C;gBACR,CAAC,IAAI,CAAC,SAAS,IAAI,CAClB,qBAAe,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAC,MAAM;oBAClD,aAAO,OAAO,EAAE,EAAE,IAAG,KAAK,CAAS,CACrB,CACjB,CACG;YACL,UAAU,CAAC,EAAE,EAAE,kBAAkB,CAAC,IAAI,CACrC,WACE,KAAK,EAAC,mBAAmB,EACzB,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;gBAEhD,sBAAsB,KAAK,SAAS,IAAI,CACvC,WAAK,KAAK,EAAC,eAAe,GAAO,CAClC;gBACD;oBACG,sBAAsB,KAAK,SAAS,IAAI,CACvC,qBAAe,OAAO,EAAC,SAAS;wBAC9B,SAAG,KAAK,EAAC,cAAc,eAAW,QAAQ,IACvC,WAAW,CACV,CACU,CACjB;oBACD,WACE,KAAK,EAAE;4BACL,0BAA0B,EACxB,sBAAsB,KAAK,QAAQ;yBACtC;wBAED,YAAM,IAAI,EAAC,kBAAkB,GAAQ,CACjC,CACF,CACF,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  State,\n  Method,\n  Watch,\n} from \"@stencil/core\";\nimport {\n  IcAdditionalFieldTypes,\n  IcSizes,\n  IcThemeMode,\n} from \"../../utils/types\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  renderHiddenInput,\n  removeHiddenInput,\n  addFormResetListener,\n  removeFormResetListener,\n  removeDisabledFalse,\n  isPropDefined,\n} from \"../../utils/helpers\";\n\n/**\n * @slot additional-field - Content to be displayed alongside a checkbox.\n */\n@Component({\n  tag: \"ic-checkbox\",\n  styleUrl: \"ic-checkbox.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport class Checkbox {\n  private additionalFieldContainer: HTMLDivElement;\n\n  @Element() el: HTMLIcCheckboxElement;\n\n  /**\n   * The style of additionalField that will be displayed if used.\n   */\n  @Prop({ reflect: true }) additionalFieldDisplay: IcAdditionalFieldTypes =\n    \"static\";\n\n  /**\n   * If `true`, the checkbox will be set to the checked state. This is only the initial state and will be updated to unchecked if the checkbox is clicked.\n   */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean = false;\n  @State() initiallyChecked = this.checked;\n\n  /**\n   * If `true`, the checkbox will be set to the disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * The text to be displayed when dynamic.\n   */\n\n  @Prop() dynamicText: string = \"This selection requires additional answers\";\n\n  /**\n   * The <form> element to associate the checkbox with.\n   */\n  @Prop() form?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop({ mutable: true }) groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\n  @State() displayIndeterminate = this.indeterminate;\n\n  @Watch(\"indeterminate\")\n  watchIndeterminateHandler(): void {\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? this.indeterminate\n      : this.indeterminate && this.checked;\n  }\n\n  /**\n   * The label for the checkbox.\n   */\n  @Prop() label!: string;\n\n  /**\n   * The name for the checkbox. If not set when used in a checkbox group, the name will be based on the group name.\n   */\n  @Prop({ mutable: true }) name: string;\n\n  /**\n   * If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state.\n   */\n  @Prop() nativeIndeterminateBehaviour: boolean = false;\n\n  /**\n   * The size of the checkbox to be displayed. This does not affect the font size of the label. If a checkbox is contained in a checkbox group, this will override the size set on checkbox group.\n   */\n  @Prop() size?: IcSizes;\n\n  /**\n   * Sets the theme color to the dark or light theme color. \"inherit\" will set the color based on the system settings or ic-theme component.\n   */\n  @Prop() theme?: IcThemeMode = \"inherit\";\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: 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 = false;\n\n  /**\n   * Emitted when a checkbox has been checked.\n   */\n  @Event() icCheck: EventEmitter<void>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    addFormResetListener(this.el, this.handleFormReset);\n\n    const checkboxGroup = this.el.parentElement as HTMLIcCheckboxGroupElement;\n    if (checkboxGroup) {\n      if (!this.name) this.name = checkboxGroup.name;\n      this.groupLabel = checkboxGroup.label;\n    }\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        { prop: this.label, propName: \"label\" },\n        { prop: this.value, propName: \"value\" },\n      ],\n      \"Checkbox\"\n    );\n  }\n\n  componentDidRender(): void {\n    if (this.additionalFieldDisplay === \"static\") {\n      const textfield = this.el.querySelector(\"ic-text-field\");\n      if (!this.checked) {\n        textfield?.setAttribute(\"disabled\", \"\");\n      } else {\n        textfield?.removeAttribute(\"disabled\");\n      }\n    } else if (this.additionalFieldContainer) {\n      this.additionalFieldContainer.style.display = !this.checked\n        ? \"none\"\n        : \"flex\";\n    }\n  }\n\n  disconnectedCallback(): void {\n    removeFormResetListener(this.el, this.handleFormReset);\n  }\n\n  /**\n   * Sets focus on the checkbox.\n   */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.el.shadowRoot.querySelector<HTMLElement>(\".checkbox\")?.focus();\n  }\n\n  private handleClick = () => {\n    this.checked = !this.checked;\n    this.displayIndeterminate = this.nativeIndeterminateBehaviour\n      ? false\n      : this.indeterminate && this.checked;\n    this.icCheck.emit();\n  };\n\n  private handleFormReset = (): void => {\n    this.checked = this.initiallyChecked;\n  };\n\n  render() {\n    const {\n      additionalFieldDisplay,\n      checked,\n      disabled,\n      dynamicText,\n      el,\n      form,\n      displayIndeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      value,\n      theme,\n    } = this;\n\n    const id = `ic-checkbox-${\n      isPropDefined(label) || value\n    }-${groupLabel}`.replace(/ /g, \"-\");\n\n    const parentElementSize = (el.parentElement as HTMLIcCheckboxGroupElement)\n      .size;\n\n    checked\n      ? renderHiddenInput(true, el, name, checked && value, disabled)\n      : removeHiddenInput(el);\n\n    return (\n      <Host\n        class={{\n          \"ic-checkbox-disabled\": disabled,\n          [`ic-checkbox-${size || parentElementSize}`]: true,\n          [`ic-theme-${theme}`]: theme !== \"inherit\",\n        }}\n      >\n        <div class=\"container\">\n          {displayIndeterminate && <div class=\"indeterminate-symbol\" />}\n          {!displayIndeterminate && checked && (\n            <svg\n              class=\"checkmark\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              fill-rule=\"evenodd\"\n              clip-rule=\"evenodd\"\n            >\n              <title>checkmark icon</title>\n              <path d=\"M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z\" />\n            </svg>\n          )}\n          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate: displayIndeterminate,\n            }}\n            type=\"checkbox\"\n            name={name}\n            id={id}\n            value={value}\n            disabled={disabled ? true : null}\n            checked={checked}\n            indeterminate={displayIndeterminate}\n            onClick={this.handleClick}\n            form={form}\n            aria-label={this.hideLabel ? this.label : undefined}\n          ></input>\n          {!this.hideLabel && (\n            <ic-typography class=\"checkbox-label\" variant=\"body\">\n              <label htmlFor={id}>{label}</label>\n            </ic-typography>\n          )}\n        </div>\n        {isSlotUsed(el, \"additional-field\") && (\n          <div\n            class=\"dynamic-container\"\n            ref={(el) => (this.additionalFieldContainer = el)}\n          >\n            {additionalFieldDisplay === \"dynamic\" && (\n              <div class=\"branch-corner\"></div>\n            )}\n            <div>\n              {additionalFieldDisplay === \"dynamic\" && (\n                <ic-typography variant=\"caption\">\n                  <p class=\"dynamic-text\" aria-live=\"polite\">\n                    {dynamicText}\n                  </p>\n                </ic-typography>\n              )}\n              <div\n                class={{\n                  \"additional-field-wrapper\":\n                    additionalFieldDisplay === \"static\",\n                }}\n              >\n                <slot name=\"additional-field\"></slot>\n              </div>\n            </div>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -443,12 +443,25 @@ video {
 
 :host {
   display: block;
+
+  --ic-input-label-text-color: var(--ic-checkbox-group-label);
+  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle);
+  --ic-input-validation-error: var(--ic-checkbox-state-icon-error);
+  --ic-input-validation-status-text-color: var(--ic-checkbox-state-text);
+}
+
+:host(.ic-checkbox-group-disabled) {
+  --ic-input-label-text-color: var(--ic-checkbox-group-label-disabled);
+  --ic-input-label-helper-text-color: var(
+    --ic-checkbox-group-subtitle-disabled
+  );
 }
 
 ic-input-label.error {
-  color: var(--ic-status-error-default);
+  color: var(--ic-checkbox-group-label-error);
 
-  --ic-typography-color: var(--ic-status-error-default);
+  --ic-typography-color: var(--ic-checkbox-group-label-error);
+  --ic-input-label-helper-text-color: var(--ic-checkbox-group-subtitle-error);
 }
 
 ic-input-label ic-typography {

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

@@ -3,6 +3,7 @@ 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;
@@ -10,11 +11,12 @@ export class CheckboxGroup {
         this.name = undefined;
         this.required = false;
         this.size = "medium";
+        this.theme = "inherit";
         this.validationStatus = "";
         this.validationText = "";
     }
     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) {
@@ -23,6 +25,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
@@ -32,6 +39,7 @@ export class CheckboxGroup {
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
+        this.watchThemeHandler(this.theme);
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -54,13 +62,15 @@ export class CheckboxGroup {
         });
     }
     render() {
-        const { disabled, helperText, hideLabel, label, name, required, size, 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: {
                 [`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"; }
@@ -206,6 +216,30 @@ export class CheckboxGroup {
                 "reflect": false,
                 "defaultValue": "\"medium\""
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "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": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
+            },
             "validationStatus": {
                 "type": "string",
                 "mutable": false,
@@ -282,6 +316,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\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 = \"medium\";\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      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        }}\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                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\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-classification-banner/ic-classification-banner.css

@@ -454,22 +454,6 @@ 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) {
@@ -487,24 +471,28 @@ video {
 }
 
 .default {
-  background-color: var(--ic-color-classification-not-set);
-  color: var(--ic-color-classification-not-set-foreground);
+  background-color: var(--ic-classification-banner-not-set);
+  color: var(--ic-classification-banner-text-inverted);
+}
+
+.official {
+  background-color: var(--ic-classification-banner-official);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
-.official,
 .official-sensitive {
-  background-color: var(--ic-color-classification-official);
-  color: var(--ic-color-classification-official-foreground);
+  background-color: var(--ic-classification-banner-official-sensitive);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .secret {
-  background-color: var(--ic-color-classification-secret);
-  color: var(--ic-color-classification-secret-foreground);
+  background-color: var(--ic-classification-banner-secret);
+  color: var(--ic-classification-banner-text);
 }
 
 .top-secret {
-  background-color: var(--ic-color-classification-top-secret);
-  color: var(--ic-color-classification-top-secret-foreground);
+  background-color: var(--ic-classification-banner-top-secret);
+  color: var(--ic-classification-banner-text-inverted);
 }
 
 .offscreen {

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

@@ -497,9 +497,10 @@ video {
 }
 
 .dialog {
-  background-color: var(--ic-architectural-white);
-  color: var(--ic-architectural-black);
-  border: var(--ic-border-default);
+  background-color: var(--ic-dialog-background);
+  color: var(--ic-dialog-text-primary);
+  --ic-typography-color: var(--ic-dialog-text-primary);
+  border: var(--ic-space-1px) solid var(--ic-dialog-border);
   border-radius: var(--ic-border-radius);
   padding: var(--ic-space-xs) 0 var(--ic-space-md);
   display: flex;
@@ -543,6 +544,10 @@ video {
   margin-left: auto;
 }
 
+.close-icon > svg {
+  color: var(--ic-dialog-icon);
+}
+
 .content-area {
   -ms-overflow-style: none;
   scrollbar-width: none;
@@ -593,6 +598,14 @@ video {
   padding-bottom: 16px;
 }
 
+.heading ic-typography {
+  --ic-typography-color: var(--ic-dialog-text-primary);
+}
+
+.label ic-typography {
+  --ic-typography-color: var(--ic-dialog-label);
+}
+
 @media (min-width: 800px) {
   :host([size="large"]) .dialog:not(.disable-width-constraint) > .content-area {
     width: 75%;

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

@@ -179,6 +179,7 @@ export class Dialog {
         this.label = undefined;
         this.open = undefined;
         this.size = "small";
+        this.theme = "inherit";
     }
     watchOpenHandler() {
         if (this.open) {
@@ -283,6 +284,7 @@ export class Dialog {
                 ["ic-dialog-hidden"]: !this.dialogRendered,
                 ["ic-dialog-fade-in"]: this.fadeIn,
                 ["disable-height-constraint"]: this.disableHeightConstraint,
+                [`ic-theme-${this.theme}`]: this.theme !== "inherit",
             } }, this.disableHeightConstraint ? (h("div", { class: "backdrop", ref: (el) => (this.backdropEl = el) }, this.renderDialog())) : (this.renderDialog())));
     }
     static get is() { return "ic-dialog"; }
@@ -494,6 +496,30 @@ export class Dialog {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "\"small\""
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IcThemeMode",
+                    "resolved": "\"dark\" | \"inherit\" | \"light\"",
+                    "references": {
+                        "IcThemeMode": {
+                            "location": "import",
+                            "path": "../../utils/types",
+                            "id": "src/utils/types.ts::IcThemeMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "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": "theme",
+                "reflect": false,
+                "defaultValue": "\"inherit\""
             }
         };
     }