@ukic/web-components 2.21.0 → 2.23.0

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

@@ -489,8 +489,6 @@ video {
 }
 
 .button:focus,
-:host .button:focus,
-:host(.light) .button:focus,
 ::slotted(a:focus) {
   box-shadow: var(--ic-border-focus);
 }
@@ -558,6 +556,7 @@ video {
 
 :host(.top-icon) .button {
   flex-direction: column;
+
   --height: fit-content;
 }
 
@@ -571,42 +570,19 @@ video {
 
 :host(.button-variant-primary) .button,
 :host(.button-variant-primary) ::slotted(a) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
   background-color: var(--button-default);
 }
 
-:host(.button-variant-primary) .button:hover:not(:focus) {
-  background-color: var(--button-default-hover);
-}
-
-:host(.button-variant-primary) .button:hover:focus {
+:host(.button-variant-primary) .button:hover {
   background-color: var(--button-default-hover);
-  border-color: var(--button-default-hover);
-}
-
-:host(.button-variant-primary:not(.light)) .button:hover:focus,
-:host(.button-variant-primary:not(.light)) ::slotted(a:hover:focus) {
-  color: var(--ic-architectural-white);
-}
-
-:host(.button-variant-primary) .button:active:not(:focus),
-:host(.button-variant-primary.loading) .button {
-  background-color: var(--button-default-active);
-}
-
-:host(.button-variant-primary) .button:active:focus {
-  background-color: var(--button-default-active);
 }
 
+:host(.button-variant-primary.loading) .button,
 :host(.button-variant-primary) .button:active {
   background-color: var(--button-default-active);
 }
 
-:host(.button-variant-primary:not(.light)) .button:active,
-:host(.button-variant-primary:not(.light)) ::slotted(a:active) {
-  color: var(--ic-architectural-white);
-}
-
 :host(.button-variant-primary.disabled) .button,
 :host(.button-variant-primary.disabled) ::slotted(a) {
   background: var(--ic-architectural-200);
@@ -627,26 +603,15 @@ video {
   color: var(--button-default);
 }
 
-:host(.button-variant-secondary) .button:hover:not(:focus),
-:host(.button-variant-secondary) .button:hover:focus,
-:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-secondary) ::slotted(a:hover:focus) {
+:host(.button-variant-secondary) .button:hover,
+:host(.button-variant-secondary) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover);
   border-color: var(--button-default-hover);
   color: var(--button-default-hover);
 }
 
-:host(.button-variant-secondary) .button:active:not(:focus),
-:host(.button-variant-secondary) .button:active:focus,
 :host(.button-variant-secondary) .button:active,
-:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-secondary) ::slotted(a:active:focus),
-:host(.button-variant-secondary) ::slotted(a:active) {
-  border-color: var(--button-default-active);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
-}
-
+:host(.button-variant-secondary) ::slotted(a:active),
 :host(.button-variant-secondary.loading) .button {
   border-color: var(--button-default-active);
   background-color: var(--button-default-background-active);
@@ -654,25 +619,16 @@ video {
 }
 
 :host(.button-variant-secondary.disabled) .button,
-:host(.button-variant-secondary.disabled) .button:hover,
-:host(.button-variant-secondary.disabled) .button:active,
-:host(.button-variant-secondary.disabled) ::slotted(a),
-:host(.button-variant-secondary.disabled) ::slotted(a:hover),
-:host(.button-variant-secondary.disabled) ::slotted(a:active) {
+:host(.button-variant-secondary.disabled) ::slotted(a) {
   border-color: var(--ic-architectural-300);
   color: var(--ic-architectural-300);
   background: none;
 }
 
 :host(.button-variant-secondary.light.disabled) .button,
-:host(.button-variant-secondary.light.disabled) .button:hover,
-:host(.button-variant-secondary.light.disabled) .button:active,
-:host(.button-variant-secondary.light.disabled) ::slotted(a),
-:host(.button-variant-secondary.light.disabled) ::slotted(a:hover),
-:host(.button-variant-secondary.light.disabled) ::slotted(a:active) {
+:host(.button-variant-secondary.light.disabled) ::slotted(a) {
   border-color: var(--ic-architectural-500);
   color: var(--ic-architectural-500);
-  background: none;
 }
 
 /* Tertiary */
@@ -682,19 +638,13 @@ video {
   color: var(--button-default);
 }
 
-:host(.button-variant-tertiary) .button:hover:not(:focus),
-:host(.button-variant-tertiary) .button:hover:focus,
-:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-tertiary) ::slotted(a:hover:focus) {
+:host(.button-variant-tertiary) .button:hover,
+:host(.button-variant-tertiary) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover);
   color: var(--button-default-hover);
 }
 
-:host(.button-variant-tertiary) .button:active:not(:focus),
-:host(.button-variant-tertiary) .button:active:focus,
 :host(.button-variant-tertiary) .button:active,
-:host(.button-variant-tertiary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-tertiary) ::slotted(a:active:focus),
 :host(.button-variant-tertiary) ::slotted(a:active),
 :host(.button-variant-tertiary.loading) .button {
   background-color: var(--button-default-background-active);
@@ -702,43 +652,30 @@ video {
 }
 
 :host(.button-variant-tertiary.disabled) .button,
-:host(.button-variant-tertiary.disabled) .button:hover,
-:host(.button-variant-tertiary.disabled) .button:active,
-:host(.button-variant-tertiary.disabled) ::slotted(a),
-:host(.button-variant-tertiary.disabled) ::slotted(a:hover),
-:host(.button-variant-tertiary.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-300);
+:host(.button-variant-tertiary.disabled) ::slotted(a) {
   color: var(--ic-architectural-300);
   background: none;
 }
 
 :host(.button-variant-tertiary.light.disabled) .button,
-:host(.button-variant-tertiary.light.disabled) .button:hover,
-:host(.button-variant-tertiary.light.disabled) .button:active,
-:host(.button-variant-tertiary.light.disabled) ::slotted(a),
-:host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),
-:host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {
-  border-color: var(--ic-architectural-500);
+:host(.button-variant-tertiary.light.disabled) ::slotted(a) {
   color: var(--ic-architectural-500);
-  background: none;
 }
 
 /* Destructive */
 
 :host(.button-variant-destructive) .button,
 :host(.button-variant-destructive) ::slotted(a) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
   background-color: var(--ic-action-destructive);
   text-transform: uppercase;
 }
 
-:host(.button-variant-destructive) .button:hover:not(:focus),
-:host(.button-variant-destructive) .button:hover:focus {
+:host(.button-variant-destructive) .button:hover {
   background-color: var(--ic-action-destructive-hover);
 }
 
-:host(.button-variant-destructive) .button:active:not(:focus),
-:host(.button-variant-destructive) .button:active:focus,
+:host(.button-variant-destructive) .button:active,
 :host(.button-variant-destructive.loading) .button {
   background-color: var(--ic-action-destructive-active);
 }
@@ -764,10 +701,8 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon) .button:hover:not(:focus),
-:host(.button-variant-icon) .button:hover:focus,
-:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-icon) ::slotted(a:hover:focus) {
+:host(.button-variant-icon) .button:hover,
+:host(.button-variant-icon) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover);
   color: var(--button-default-hover);
 }
@@ -780,11 +715,7 @@ video {
 }
 
 :host(.button-variant-icon.disabled) .button,
-:host(.button-variant-icon.disabled) .button:hover,
-:host(.button-variant-icon.disabled) .button:active,
-:host(.button-variant-icon.disabled) ::slotted(a),
-:host(.button-variant-icon.disabled) ::slotted(a:hover),
-:host(.button-variant-icon.disabled) ::slotted(a:active) {
+:host(.button-variant-icon.disabled) ::slotted(a) {
   color: var(--ic-architectural-300);
   background: none;
 }
@@ -797,7 +728,7 @@ video {
 
 :host(.button-variant-icon-primary) .button,
 :host(.button-variant-icon-primary) ::slotted(a) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
   background-color: var(--button-default);
   min-width: 0;
   gap: var(--ic-space-xs);
@@ -809,21 +740,12 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-primary) .button:hover:not(:focus),
-:host(.button-variant-icon-primary) ::slotted(a:hover:not(:focus)) {
+:host(.button-variant-icon-primary) .button:hover,
+:host(.button-variant-icon-primary) ::slotted(a:hover) {
   background-color: var(--button-default-hover);
 }
-:host(.button-variant-icon-primary) .button:hover:focus,
-:host(.button-variant-icon-primary) ::slotted(a:hover:focus) {
-  background-color: var(--button-default-hover);
-  border-color: var(--button-default-hover);
-}
 
-:host(.button-variant-icon-primary) .button:active:not(:focus),
-:host(.button-variant-icon-primary) .button:active:focus,
 :host(.button-variant-icon-primary) .button:active,
-:host(.button-variant-icon-primary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-icon-primary) ::slotted(a:active:focus),
 :host(.button-variant-icon-primary) ::slotted(a:active),
 :host(.button-variant-icon-primary.loading) .button {
   background: var(--button-default-active);
@@ -833,17 +755,8 @@ video {
   --inner-color: var(--ic-architectural-white);
 }
 
-:host(.button-variant-icon-primary:not(.light)) .button:active,
-:host(.button-variant-icon-primary:not(.light)) ::slotted(a:active) {
-  color: var(--ic-architectural-white);
-}
-
 :host(.button-variant-icon-primary.disabled) .button,
-:host(.button-variant-icon-primary.disabled) .button:hover,
-:host(.button-variant-icon-primary.disabled) .button:active,
-:host(.button-variant-icon-primary.disabled) ::slotted(a),
-:host(.button-variant-icon-primary.disabled) ::slotted(a:hover),
-:host(.button-variant-icon-primary.disabled) ::slotted(a:active) {
+:host(.button-variant-icon-primary.disabled) ::slotted(a) {
   color: var(--ic-architectural-300);
   background: var(--ic-architectural-200);
 }
@@ -853,11 +766,6 @@ video {
   color: var(--ic-color-primary-text);
 }
 
-:host(.button-variant-icon-primary.light) .button,
-:host(.button-variant-icon-primary.light) ::slotted(a) {
-  color: var(--ic-color-primary-text);
-}
-
 :host(.button-variant-icon-primary.light) .button:hover,
 :host(.button-variant-icon-primary.light) ::slotted(a:hover) {
   background: var(--ic-action-light-hover);
@@ -867,12 +775,7 @@ video {
 :host(.button-variant-icon-primary.light) ::slotted(a:active),
 :host(.button-variant-icon-primary.light.loading) .button,
 :host(.button-variant-icon-primary.light.loading) ::slotted(a) {
-  background: var(--ic-architectural-300);
-}
-
-:host(.button-variant-icon-primary.dark) .button,
-:host(.button-variant-icon-primary.dark) ::slotted(a) {
-  color: var(--ic-architectural-white);
+  background: var(--ic-action-light-active);
 }
 
 :host(.button-variant-icon-primary.dark) .button:hover,
@@ -903,29 +806,18 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-secondary) .button:hover:not(:focus),
-:host(.button-variant-icon-secondary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-icon-secondary) .button:hover:focus,
-:host(.button-variant-icon-secondary) ::slotted(a:hover:focus) {
+:host(.button-variant-icon-secondary) .button:hover,
+:host(.button-variant-icon-secondary) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover);
   border-color: var(--button-default-hover);
   color: var(--button-default-hover);
 }
 
-:host(.button-variant-icon-secondary) .button:active:not(:focus),
-:host(.button-variant-icon-secondary) .button:active:focus,
 :host(.button-variant-icon-secondary) .button:active,
-:host(.button-variant-icon-secondary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-icon-secondary) ::slotted(a:active:focus),
-:host(.button-variant-icon-secondary) ::slotted(a:active) {
-  border-color: var(--button-default-active);
-  background-color: var(--button-default-background-active);
-  color: var(--button-default-active);
-}
-
+:host(.button-variant-icon-secondary) ::slotted(a:active),
 :host(.button-variant-icon-secondary.loading) .button {
   border-color: var(--button-default-active);
-  background: var(--button-default-background-active);
+  background-color: var(--button-default-background-active);
   color: var(--button-default-active);
 }
 
@@ -948,7 +840,6 @@ video {
 :host(.button-variant-icon-secondary.light.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-500);
   color: var(--ic-architectural-500);
-  background: none;
 }
 
 /* Icon-tertiary */
@@ -966,19 +857,13 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-tertiary) .button:hover:not(:focus),
-:host(.button-variant-icon-tertiary) .button:hover:focus,
-:host(.button-variant-icon-tertiary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-icon-tertiary) ::slotted(a:hover:focus) {
+:host(.button-variant-icon-tertiary) .button:hover,
+:host(.button-variant-icon-tertiary) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover);
   color: var(--button-default-hover);
 }
 
-:host(.button-variant-icon-tertiary) .button:active:not(:focus),
-:host(.button-variant-icon-tertiary) .button:active:focus,
 :host(.button-variant-icon-tertiary) .button:active,
-:host(.button-variant-icon-tertiary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-icon-tertiary) ::slotted(a:active:focus),
 :host(.button-variant-icon-tertiary) ::slotted(a:active),
 :host(.button-variant-icon-tertiary.loading) .button {
   background-color: var(--button-default-background-active);
@@ -999,7 +884,7 @@ video {
 
 :host(.button-variant-icon-destructive) .button,
 :host(.button-variant-icon-destructive) ::slotted(a) {
-  color: var(--ic-architectural-white);
+  color: var(--ic-color-white-text);
   background-color: var(--ic-action-destructive);
   min-width: 0;
   gap: var(--ic-space-xs);
@@ -1011,16 +896,13 @@ video {
   height: var(--ic-space-lg) !important;
 }
 
-:host(.button-variant-icon-destructive) .button:hover:not(:focus),
-:host(.button-variant-icon-destructive) .button:hover:focus,
-:host(.button-variant-icon-destructive) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-icon-destructive) ::slotted(a:hover:focus) {
+:host(.button-variant-icon-destructive) .button:hover,
+:host(.button-variant-icon-destructive) ::slotted(a:hover) {
   background-color: var(--ic-action-destructive-hover);
 }
 
-:host(.button-variant-icon-destructive) .button:active:not(:focus),
-:host(.button-variant-icon-destructive) .button:active:focus,
-:host(.button-variant-icon-destructive) ::slotted(a:active:not(:focus)),
+:host(.button-variant-icon-destructive) .button:active,
+:host(.button-variant-icon-destructive) ::slotted(a:active),
 :host(.button-variant-icon-destructive.loading) .button {
   background-color: var(--ic-action-destructive-active);
 }
@@ -1282,14 +1164,11 @@ slot[name="router-item"]::slotted(a) {
   background-color: var(--button-default) !important;
 }
 
-:host(.button-variant-primary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-primary) ::slotted(a:hover:focus) {
+:host(.button-variant-primary) ::slotted(a:hover) {
   background-color: var(--button-default-hover) !important;
 }
 
-:host(.button-variant-primary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-primary) ::slotted(a:active),
-:host(.button-variant-primary) ::sloted(a:active:focus) {
+:host(.button-variant-primary) ::slotted(a:active) {
   background-color: var(--button-default-active) !important;
 }
 
@@ -1306,14 +1185,11 @@ slot[name="router-item"]::slotted(a) {
   border: var(--ic-border-width) solid var(--button-default) !important;
 }
 
-:host(.button-variant-secondary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-secondary) ::slotted(a:hover:focus) {
+:host(.button-variant-secondary) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover) !important;
   border-color: var(--button-default-hover) !important;
 }
 
-:host(.button-variant-secondary) ::slotted(a:active:not(:focus)),
-:host(.button-variant-secondary) ::slotted(a:active:focus),
 :host(.button-variant-secondary) ::slotted(a:active) {
   border-color: var(--button-default-active) !important;
   background-color: var(--button-default-background-active) !important;
@@ -1336,13 +1212,10 @@ slot[name="router-item"]::slotted(a) {
 :host(.button-variant-tertiary.light.disabled) ::slotted(a:hover),
 :host(.button-variant-tertiary.light.disabled) ::slotted(a:active) {
   border-color: var(--ic-architectural-500) !important;
-  background: none !important;
 }
 
-:host(.button-variant-tertiary) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-tertiary) ::slotted(a:hover:focus),
-:host(.button-variant-icon) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-icon) ::slotted(a:hover:focus) {
+:host(.button-variant-tertiary) ::slotted(a:hover),
+:host(.button-variant-icon) ::slotted(a:hover) {
   background-color: var(--button-default-background-hover) !important;
 }
 
@@ -1363,13 +1236,11 @@ slot[name="router-item"]::slotted(a) {
   background-color: var(--ic-action-destructive) !important;
 }
 
-:host(.button-variant-destructive) ::slotted(a:hover:not(:focus)),
-:host(.button-variant-destructive) ::slotted(a:hover:focus) {
+:host(.button-variant-destructive) ::slotted(a:hover) {
   background-color: var(--ic-action-destructive-hover) !important;
 }
 
-:host(.button-variant-destructive) ::slotted(a:active:not(:focus)),
-:host(.button-variant-destructive) ::slotted(a:active:focus) {
+:host(.button-variant-destructive) ::slotted(a:active) {
   background-color: var(--ic-action-destructive-active) !important;
 }
 

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

@@ -8,6 +8,9 @@ export class Checkbox {
     constructor() {
         this.handleClick = () => {
             this.checked = !this.checked;
+            this.displayIndeterminate = this.nativeIndeterminateBehaviour
+                ? false
+                : this.indeterminate && this.checked;
             this.icCheck.emit();
             this.checkboxChecked.emit();
         };
@@ -27,11 +30,19 @@ export class Checkbox {
         this.formtarget = undefined;
         this.groupLabel = undefined;
         this.indeterminate = false;
+        this.displayIndeterminate = this.indeterminate;
         this.label = undefined;
         this.name = undefined;
+        this.nativeIndeterminateBehaviour = false;
         this.size = undefined;
         this.small = false;
         this.value = undefined;
+        this.hideLabel = false;
+    }
+    watchIndeterminateHandler() {
+        this.displayIndeterminate = this.nativeIndeterminateBehaviour
+            ? this.indeterminate
+            : this.indeterminate && this.checked;
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
@@ -76,7 +87,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, formaction, formenctype, formmethod, formnovalidate, formtarget, indeterminate, groupLabel, label, name, size, small, value, } = this;
+        const { additionalFieldDisplay, checked, disabled, dynamicText, el, form, formaction, formenctype, formmethod, formnovalidate, formtarget, displayIndeterminate, groupLabel, label, name, size, small, value, } = this;
         const id = `ic-checkbox-${isPropDefined(label) || value}-${groupLabel}`.replace(/ /g, "-");
         const parentElementSize = el.parentElement
             .size;
@@ -87,12 +98,11 @@ export class Checkbox {
                 disabled,
                 small,
                 [`${size || parentElementSize}`]: true,
-            } }, h("div", { class: "container" }, checked &&
-            (!indeterminate ? (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("div", { class: "indeterminate-symbol" }))), h("input", { role: "checkbox", class: {
+            } }, 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: {
                 checkbox: true,
                 checked,
-                indeterminate,
-            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: indeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget }), h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, label))), isSlotUsed(el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { class: {
+                indeterminate: displayIndeterminate,
+            }, type: "checkbox", name: name, id: id, value: value, disabled: disabled ? true : null, checked: checked, indeterminate: displayIndeterminate, onClick: this.handleClick, form: form, formaction: formaction, formenctype: formenctype, formmethod: formmethod, formnovalidate: formnovalidate, formtarget: formtarget, "aria-label": this.hideLabel ? this.label : undefined }), !this.hideLabel && (h("ic-typography", { class: "checkbox-label", variant: "body" }, h("label", { htmlFor: id }, label)))), isSlotUsed(el, "additional-field") && (h("div", { class: "dynamic-container", ref: (el) => (this.additionalFieldContainer = el) }, additionalFieldDisplay === "dynamic" && (h("div", { class: "branch-corner" })), h("div", null, additionalFieldDisplay === "dynamic" && (h("ic-typography", { variant: "caption" }, h("p", { class: "dynamic-text", "aria-live": "polite" }, dynamicText))), h("div", { class: {
                 "additional-field-wrapper": additionalFieldDisplay === "static",
             } }, h("slot", { name: "additional-field" })))))));
     }
@@ -293,7 +303,7 @@ export class Checkbox {
             },
             "groupLabel": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -345,7 +355,7 @@ export class Checkbox {
             },
             "name": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -360,6 +370,24 @@ export class Checkbox {
                 "attribute": "name",
                 "reflect": false
             },
+            "nativeIndeterminateBehaviour": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the checkbox will behave like a native checkbox where the `indeterminate` prop sets the indeterminate visual styling, independent of the `checked` state."
+                },
+                "attribute": "native-indeterminate-behaviour",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "size": {
                 "type": "string",
                 "mutable": false,
@@ -420,12 +448,31 @@ export class Checkbox {
                 },
                 "attribute": "value",
                 "reflect": false
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the label will be hidden and the required label value will be applied as an aria-label."
+                },
+                "attribute": "hide-label",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "initiallyChecked": {}
+            "initiallyChecked": {},
+            "displayIndeterminate": {}
         };
     }
     static get events() {
@@ -490,5 +537,11 @@ export class Checkbox {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "indeterminate",
+                "methodName": "watchIndeterminateHandler"
+            }];
+    }
 }
 //# sourceMappingURL=ic-checkbox.js.map

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} 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 URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n   */\n  @Prop() formtarget?: string;\n\n  /**\n   * The group label for the checkbox.\n   */\n  @Prop() groupLabel: string;\n\n  /**\n   * If `true`, the indeterminate state will be displayed when checked.\n   */\n  @Prop() indeterminate: boolean = false;\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() name: string;\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   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\n\n  /**\n   * The value for the checkbox.\n   */\n  @Prop() value!: string;\n\n  /**\n   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\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.icCheck.emit();\n    this.checkboxChecked.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      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      indeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      small,\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          disabled,\n          small,\n          [`${size || parentElementSize}`]: true,\n        }}\n      >\n        <div class=\"container\">\n          {checked &&\n            (!indeterminate ? (\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              <div class=\"indeterminate-symbol\" />\n            ))}\n          <input\n            role=\"checkbox\"\n            class={{\n              checkbox: true,\n              checked,\n              indeterminate,\n            }}\n            type=\"checkbox\"\n            name={name}\n            id={id}\n            value={value}\n            disabled={disabled ? true : null}\n            checked={checked}\n            indeterminate={indeterminate}\n            onClick={this.handleClick}\n            form={form}\n            formaction={formaction}\n            formenctype={formenctype}\n            formmethod={formmethod}\n            formnovalidate={formnovalidate}\n            formtarget={formtarget}\n          ></input>\n          <ic-typography class=\"checkbox-label\" variant=\"body\">\n            <label htmlFor={id}>{label}</label>\n          </ic-typography>\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;AAEvB,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;;QA0KX,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;YACpB,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;QAC9B,CAAC,CAAC;QAEM,oBAAe,GAAG,GAAS,EAAE;YACnC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC;QACvC,CAAC,CAAC;sCA5KA,QAAQ;uBAKkD,KAAK;gCACrC,IAAI,CAAC,OAAO;wBAKX,KAAK;2BAMJ,4CAA4C;;;;;;;;6BAwCzC,KAAK;oCACN,IAAI,CAAC,aAAa;;;4CAsBF,KAAK;;qBAU3B,KAAK;;yBAUX,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;IA+CD,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;IAeD,MAAM;QACJ,MAAM,EACJ,sBAAsB,EACtB,OAAO,EACP,QAAQ,EACR,WAAW,EACX,EAAE,EACF,IAAI,EACJ,UAAU,EACV,WAAW,EACX,UAAU,EACV,cAAc,EACd,UAAU,EACV,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,QAAQ;gBACR,KAAK;gBACL,CAAC,GAAG,IAAI,IAAI,iBAAiB,EAAE,CAAC,EAAE,IAAI;aACvC;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,KAAK,EAAC,QAAQ,EACd,MAAM,EAAC,QAAQ,EACf,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,EACV,UAAU,EAAE,UAAU,EACtB,WAAW,EAAE,WAAW,EACxB,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,UAAU,EAAE,UAAU,gBACV,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 { 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 URL that processes the information submitted by the checkbox. It overrides the action attribute of the checkbox's form owner. Does nothing if there is no form owner.\n   */\n  @Prop() formaction?: string;\n\n  /**\n   * The way the submitted form data is encoded.\n   */\n  @Prop() formenctype?: string;\n\n  /**\n   * The HTTP method used to submit the form.\n   */\n  @Prop() formmethod?: string;\n\n  /**\n   * If `true`, the form will not be validated when submitted.\n   */\n  @Prop() formnovalidate?: boolean;\n\n  /**\n   * The place to display the response from submitting the form. It overrides the target attribute of the checkbox's form owner.\n   */\n  @Prop() formtarget?: 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   * @deprecated This prop should not be used anymore. Set prop `size` to \"small\" instead.\n   */\n  @Prop() small?: boolean = false;\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   * @deprecated This event should not be used anymore. Use icCheck instead.\n   */\n  @Event() checkboxChecked: EventEmitter<void>;\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    this.checkboxChecked.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      formaction,\n      formenctype,\n      formmethod,\n      formnovalidate,\n      formtarget,\n      displayIndeterminate,\n      groupLabel,\n      label,\n      name,\n      size,\n      small,\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          disabled,\n          small,\n          [`${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            formaction={formaction}\n            formenctype={formenctype}\n            formmethod={formmethod}\n            formnovalidate={formnovalidate}\n            formtarget={formtarget}\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"]}