@ukic/web-components 2.26.0 → 3.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test showing and hiding toasts with deprecated showVisible method\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    await page.root.setVisible(toasts[0]);\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.root.setVisible(toasts[1]);\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test showing and hiding toasts with openToast prop\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    page.root.openToast = toasts[0];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    page.root.openToast = toasts[1];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previouslyFocused\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast, Button],\n      html: `<ic-toast-region>\n      <ic-button>Click Me</ic-button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"ic-button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previously focused - standard element\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <button>Click Me</button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n});\n"]}
+{"version":3,"file":"ic-toast-region.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toast-region/test/basic/ic-toast-region.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { Button } from \"../../../ic-button/ic-button\";\nimport { Toast } from \"../../../ic-toast/ic-toast\";\nimport { ToastRegion } from \"../../ic-toast-region\";\n\ndescribe(\"ic-toast-region component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should test showing and hiding toasts with openToast prop\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const toasts = page.root.querySelectorAll(\"ic-toast\");\n\n    page.root.openToast = toasts[0];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    page.root.openToast = toasts[1];\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.pendingVisibility.length).toBe(2);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(1);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previouslyFocused\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast, Button],\n      html: `<ic-toast-region>\n      <ic-button>Click Me</ic-button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"ic-button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n\n  it(\"should test previously focused - standard element\", async () => {\n    const page = await newSpecPage({\n      components: [ToastRegion, Toast],\n      html: `<ic-toast-region>\n      <button>Click Me</button>\n      <ic-toast heading=\"Heading\"></ic-toast>\n      </ic-toast-region>`,\n    });\n\n    const button = page.root.querySelector(\"button\");\n    page.rootInstance.previouslyFocused = button;\n\n    await page.rootInstance.handleDismissedToast();\n    expect(page.rootInstance.pendingVisibility.length).toBe(0);\n  });\n});\n"]}

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

@@ -449,21 +449,21 @@ video {
   );
 }
 
-:host(.dark) {
+:host(.ic-toggle-button-dark) {
   --button-border: var(
     --toggle-button-border,
     var(--ic-border-width) solid var(--ic-action-dark)
   );
 }
 
-:host(.light) {
+:host(.ic-toggle-button-light) {
   --button-border: var(
     --toggle-button-border,
     var(--ic-border-width) solid var(--ic-action-light)
   );
 }
 
-:host(.disabled) {
+:host(.ic-toggle-button-disabled) {
   --button-border: var(--toggle-button-border, var(--ic-border-disabled));
 }
 
@@ -487,13 +487,14 @@ video {
 }
 
 :host(.expand-toggle-group-child) ::part(button):focus,
-:host(.expand-toggle-group-child.checked) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-checked)
+  ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-default),
     var(--ic-border-focus);
 }
 
-:host(.expand-toggle-group-child.light) ::part(button):focus,
-:host(.expand-toggle-group-child.dark) ::part(button):focus {
+:host(.expand-toggle-group-child.ic-toggle-button-light) ::part(button):focus,
+:host(.expand-toggle-group-child.ic-toggle-button-dark) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-action-dark),
     var(--ic-border-focus);
 }
@@ -506,136 +507,142 @@ video {
   border: var(--button-border);
 }
 
-:host(.checked) ::part(button) {
+:host(.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-default);
   color: var(--ic-architectural-white);
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white);
 }
 
-:host(.checked) ::part(button):focus {
+:host(.ic-toggle-button-checked) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
     var(--ic-border-focus);
 }
 
-:host(.checked) ::part(button):hover {
+:host(.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--button-default-hover);
 }
 
-:host(.checked) ::part(button):active,
-:host(.icon.checked) ::part(button):active {
+:host(.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-checked) ::part(button):active {
   background-color: var(--ic-action-default-active);
 }
 
-:host(.dark.checked) ::part(button) {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-dark);
 }
 
-:host(.dark.checked) ::part(button):hover {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--ic-action-dark-hover);
 }
 
-:host(.dark.checked) ::part(button):active,
-:host(.icon.dark.checked) ::part(button):active {
+:host(.ic-toggle-button-dark.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-dark.ic-toggle-button-checked)
+  ::part(button):active {
   background-color: var(--ic-action-dark-active);
 }
 
-:host(.light.checked) ::part(button) {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button) {
   background-color: var(--ic-action-light);
   color: var(--ic-color-primary-text);
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black);
 }
 
-:host(.light.checked) ::part(button):hover {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):hover {
   background-color: var(--ic-action-light-hover);
 }
 
-:host(.light.checked) ::part(button):active,
-:host(.icon.light.checked) ::part(button):active {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):active,
+:host(.ic-toggle-button-icon.ic-toggle-button-light.ic-toggle-button-checked)
+  ::part(button):active {
   background-color: var(--ic-action-light-active);
 }
 
-:host(.light.checked) ::part(button):focus {
+:host(.ic-toggle-button-light.ic-toggle-button-checked) ::part(button):focus {
   box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-black),
     var(--ic-border-focus);
 }
 
-:host(.disabled) ::part(button),
-:host(.icon.disabled) ::part(button) {
+:host(.ic-toggle-button-disabled) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled) ::part(button) {
   border: var(--button-border);
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button) {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button) {
   background-color: transparent;
 }
 
-:host(.disabled.checked) ::part(button),
-:host(.icon.disabled.checked) ::part(button)::before {
+:host(.ic-toggle-button-disabled.ic-toggle-button-checked) ::part(button),
+:host(.ic-toggle-button-icon.ic-toggle-button-disabled.ic-toggle-button-checked)
+  ::part(button)::before {
   background-image: radial-gradient(var(--ic-architectural-400) 95%, white 20%);
   background-repeat: no-repeat;
 }
 
-:host(.icon) ::part(button) {
+:host(.ic-toggle-button-icon) ::part(button) {
   border: var(--button-border);
   height: calc(var(--ic-space-xl) + var(--ic-space-xs));
   width: calc(var(--ic-space-xl) + var(--ic-space-xs));
 }
 
-:host(.icon) ::part(button):active {
+:host(.ic-toggle-button-icon) ::part(button):active {
   background-color: var(--ic-action-default-bg-active);
 }
 
-:host(.icon.dark) ::part(button):active {
+:host(.ic-toggle-button-icon.ic-toggle-button-dark) ::part(button):active {
   background-color: var(--ic-action-dark-bg-active);
 }
 
-:host(.icon.light) ::part(button):active {
+:host(.ic-toggle-button-icon.ic-toggle-button-light) ::part(button):active {
   background-color: var(--ic-action-light-bg-active);
 }
 
-:host(.icon.small) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-small) ::part(button) {
   height: var(--ic-space-xl);
   width: var(--ic-space-xl);
 }
 
-:host(.icon.large) ::part(button) {
+:host(.ic-toggle-button-icon.ic-toggle-button-large) ::part(button) {
   height: var(--ic-space-xxl);
   width: var(--ic-space-xxl);
 }
 
-:host(.checked.loading) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading) ::part(button) {
   background-color: var(--button-default-active);
 }
 
-:host(.loading) ::part(ic-loading-container) {
+:host(.ic-toggle-button-loading) ::part(ic-loading-container) {
   --inner-color: var(--ic-architectural-white);
 }
 
-:host(.checked.loading.light) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-light)
+  ::part(button) {
   background-color: var(--ic-action-light-active);
 }
 
-:host(.checked.loading.dark) ::part(button) {
+:host(.ic-toggle-button-checked.ic-toggle-button-loading.ic-toggle-button-dark)
+  ::part(button) {
   background-color: var(--ic-action-dark-active);
 }
 
 @media (forced-colors: active) {
-  :host(.checked) ::part(button),
-  :host(.checked) ::part(button):hover {
+  :host(.ic-toggle-button-checked) ::part(button),
+  :host(.ic-toggle-button-checked) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.light) ::part(button),
-  :host(.checked.light) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-light) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.dark) ::part(button),
-  :host(.checked.dark) ::part(button):hover {
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button),
+  :host(.ic-toggle-button-checked.ic-toggle-button-dark) ::part(button):hover {
     background-color: Highlight;
   }
 
-  :host(.checked.disabled) ::part(button) {
+  :host(.ic-toggle-button-checked.ic-toggle-button-disabled) ::part(button) {
     background-color: GrayText;
   }
 }

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js

@@ -13,7 +13,7 @@ export class ToggleButton {
             !this.loading &&
                 !this.disabled &&
                 this.icToggleChecked.emit({
-                    checked: this.toggleChecked,
+                    checked: this.checked,
                 });
         };
         this.accessibleLabel = undefined;
@@ -24,13 +24,13 @@ export class ToggleButton {
         this.label = undefined;
         this.loading = false;
         this.size = "default";
-        this.toggleChecked = false;
+        this.checked = false;
         this.variant = "default";
     }
     componentWillLoad() {
         removeDisabledFalse(this.disabled, this.el);
         const parentIconPlacement = this.el.parentElement.iconPlacement;
-        this.iconPosition = this.iconPlacement || parentIconPlacement;
+        this.iconPosition = this.iconPlacement || parentIconPlacement || "left";
     }
     componentDidLoad() {
         onComponentRequiredPropUndefined([
@@ -45,18 +45,18 @@ export class ToggleButton {
             e.stopImmediatePropagation();
         }
         else if (!this.loading) {
-            this.toggleChecked = !this.toggleChecked;
+            this.checked = !this.checked;
         }
     }
     render() {
         return (h(Host, { class: {
-                ["disabled"]: this.disabled,
-                ["checked"]: this.toggleChecked,
-                [`${this.appearance}`]: true,
-                ["icon"]: this.variant === "icon",
-                [`${this.size}`]: true,
-                ["loading"]: this.loading,
-            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.toggleChecked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.toggleChecked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition ? `${this.iconPosition}-icon` : "icon"}` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
+                ["ic-toggle-button-disabled"]: this.disabled,
+                ["ic-toggle-button-checked"]: this.checked,
+                [`ic-toggle-button-${this.appearance}`]: true,
+                ["ic-toggle-button-icon"]: this.variant === "icon",
+                [`ic-toggle-button-${this.size}`]: true,
+                ["ic-toggle-button-loading"]: this.loading,
+            }, onFocus: this.handleFocus }, h("ic-button", { "aria-pressed": this.checked.toString(), variant: this.variant === "icon" ? "icon" : "secondary", onClick: this.handleClick, title: this.accessibleLabel, "aria-label": `${this.accessibleLabel ? this.accessibleLabel : this.label}, ${this.checked ? "ticked" : "unticked"}`, disabled: this.disabled, appearance: this.appearance, size: this.size, fullWidth: this.fullWidth, loading: this.loading, "aria-disabled": `${this.disabled}` }, this.variant !== "icon" && this.label, h("slot", null), isSlotUsed(this.el, "icon") && (h("slot", { name: "icon", slot: `${this.iconPosition}-icon` })), isSlotUsed(this.el, "badge") && (h("slot", { name: "badge", slot: "badge" })))));
     }
     static get is() { return "ic-toggle-button"; }
     static get encapsulation() { return "shadow"; }
@@ -226,7 +226,7 @@ export class ToggleButton {
                 "reflect": false,
                 "defaultValue": "\"default\""
             },
-            "toggleChecked": {
+            "checked": {
                 "type": "boolean",
                 "mutable": true,
                 "complexType": {
@@ -240,7 +240,7 @@ export class ToggleButton {
                     "tags": [],
                     "text": "If `true`, the toggle button will be in a checked state."
                 },
-                "attribute": "toggle-checked",
+                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },

package/dist/collection/components/ic-toggle-button/ic-toggle-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) toggleChecked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement;\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.toggleChecked = !this.toggleChecked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.toggleChecked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"disabled\"]: this.disabled,\n          [\"checked\"]: this.toggleChecked,\n          [`${this.appearance}`]: true,\n          [\"icon\"]: this.variant === \"icon\",\n          [`${this.size}`]: true,\n          [\"loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.toggleChecked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.toggleChecked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot\n              name=\"icon\"\n              slot={`${\n                this.iconPosition ? `${this.iconPosition}-icon` : \"icon\"\n              }`}\n            ></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ic-toggle-button.js","sourceRoot":"","sources":["../../../src/components/ic-toggle-button/ic-toggle-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  h,\n} from \"@stencil/core\";\nimport {\n  isSlotUsed,\n  onComponentRequiredPropUndefined,\n  removeDisabledFalse,\n} from \"../../utils/helpers\";\nimport { IcSizes, IcThemeForeground } from \"../../utils/types\";\n\n/**\n * @slot icon - Content will be displayed alongside the toggle button label.\n * @slot badge - Badge component overlaying the top right of the toggle button.\n */\n\n@Component({\n  tag: \"ic-toggle-button\",\n  styleUrl: \"ic-toggle-button.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ToggleButton {\n  private iconPosition: \"left\" | \"right\" | \"top\";\n\n  @Element() el: HTMLIcToggleButtonElement;\n\n  /**\n   * The accessible label that will be applied to the toggle button. This is required for the icon variant of toggle buttons.\n   */\n  @Prop() accessibleLabel?: string;\n\n  /**\n   * The appearance of the toggle button.\n   */\n  @Prop() appearance?: IcThemeForeground = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in disabled state.\n   */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * If `true`, the toggle button will fill the width of the container.\n   */\n  @Prop() fullWidth?: boolean = false;\n\n  /**\n   * The placement of the icon in relation to the toggle button label.\n   */\n  @Prop() iconPlacement?: \"left\" | \"right\" | \"top\";\n\n  /**\n   * The label to display in the toggle button. This is required for the default variant of toggle buttons.\n   */\n  @Prop() label?: string;\n\n  /**\n   * If `true`, the toggle button will be in loading state.\n   */\n  @Prop() loading?: boolean = false;\n\n  /**\n   * The size of the toggle button to be displayed.\n   */\n  @Prop() size?: IcSizes = \"default\";\n\n  /**\n   * If `true`, the toggle button will be in a checked state.\n   */\n  @Prop({ mutable: true, reflect: true }) checked: boolean = false;\n\n  /**\n   * The variant of the toggle button.\n   */\n  @Prop({ reflect: true }) variant: \"default\" | \"icon\" = \"default\";\n\n  /**\n   * Emitted when the user clicks a toggle button.\n   */\n  @Event() icToggleChecked: EventEmitter<{\n    checked: boolean;\n  }>;\n\n  componentWillLoad(): void {\n    removeDisabledFalse(this.disabled, this.el);\n\n    const parentIconPlacement = (\n      this.el.parentElement as HTMLIcToggleButtonGroupElement\n    ).iconPlacement;\n    this.iconPosition = this.iconPlacement || parentIconPlacement || \"left\";\n  }\n\n  componentDidLoad(): void {\n    onComponentRequiredPropUndefined(\n      [\n        {\n          prop: this.variant === \"icon\" ? this.accessibleLabel : this.label,\n          propName: this.variant === \"icon\" ? \"accessible-label\" : \"label\",\n        },\n      ],\n      \"Toggle button\"\n    );\n  }\n\n  @Listen(\"click\", { capture: true })\n  handleHostClick(e: Event): void {\n    if (this.disabled) {\n      e.stopImmediatePropagation();\n    } else if (!this.loading) {\n      this.checked = !this.checked;\n    }\n  }\n\n  private handleFocus = (ev: FocusEvent) => {\n    ev.stopImmediatePropagation();\n  };\n\n  private handleClick = (): void => {\n    !this.loading &&\n      !this.disabled &&\n      this.icToggleChecked.emit({\n        checked: this.checked,\n      });\n  };\n\n  render() {\n    return (\n      <Host\n        class={{\n          [\"ic-toggle-button-disabled\"]: this.disabled,\n          [\"ic-toggle-button-checked\"]: this.checked,\n          [`ic-toggle-button-${this.appearance}`]: true,\n          [\"ic-toggle-button-icon\"]: this.variant === \"icon\",\n          [`ic-toggle-button-${this.size}`]: true,\n          [\"ic-toggle-button-loading\"]: this.loading,\n        }}\n        onFocus={this.handleFocus}\n      >\n        <ic-button\n          aria-pressed={this.checked.toString()}\n          variant={this.variant === \"icon\" ? \"icon\" : \"secondary\"}\n          onClick={this.handleClick}\n          title={this.accessibleLabel}\n          aria-label={`${\n            this.accessibleLabel ? this.accessibleLabel : this.label\n          }, ${this.checked ? \"ticked\" : \"unticked\"}`}\n          disabled={this.disabled}\n          appearance={this.appearance}\n          size={this.size}\n          fullWidth={this.fullWidth}\n          loading={this.loading}\n          aria-disabled={`${this.disabled}`}\n        >\n          {this.variant !== \"icon\" && this.label}\n          <slot />\n          {isSlotUsed(this.el, \"icon\") && (\n            <slot name=\"icon\" slot={`${this.iconPosition}-icon`}></slot>\n          )}\n          {isSlotUsed(this.el, \"badge\") && (\n            <slot name=\"badge\" slot=\"badge\"></slot>\n          )}\n        </ic-button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -74,21 +74,21 @@ describe("ic-toggle-button component", () => {
         const page = await newSpecPage({
             components: [ToggleButton],
             html: `<ic-toggle-button label="Toggle">
-          <ic-badge text-label="1" slot="badge" variant="success"></ic-badge>
+          <ic-badge label="1" slot="badge" variant="success"></ic-badge>
         </ic-toggle-button>`,
         });
         expect(page.root).toMatchSnapshot();
     });
-    it("should update toggleChecked value on click", async () => {
+    it("should update checked value on click", async () => {
         const page = await newSpecPage({
             components: [ToggleButton],
             html: `<ic-toggle-button label="Toggle" id='test-button' onclick='alert('test')'></ic-toggle-button>`,
         });
-        expect(page.rootInstance.toggleChecked).toBeFalsy();
+        expect(page.rootInstance.checked).toBeFalsy();
         const element = document.getElementById("test-button");
         element.click();
         await page.waitForChanges();
-        expect(page.rootInstance.toggleChecked).toBeTruthy();
+        expect(page.rootInstance.checked).toBeTruthy();
     });
     it("should emit icToggleChecked on click", async () => {
         const page = await newSpecPage({

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

@@ -1 +1 @@
-{"version":3,"file":"ic-toggle-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toggle-button/test/basic/ic-toggle-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButton } from \"../../ic-toggle-button\";\n\ndescribe(\"ic-toggle-button component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\"></ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render icon variant\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button variant=\"icon\" accessible-label=\"Refresh the page\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon with icon placement\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" icon-placement=\"right\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted badge\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <ic-badge text-label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update toggleChecked value on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    expect(page.rootInstance.toggleChecked).toBeFalsy();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.toggleChecked).toBeTruthy();\n  });\n\n  it(\"should emit icToggleChecked on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icToggleChecked\", eventSpy);\n\n    page.rootInstance.handleClick();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' disabled=true onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(window.alert).not.toHaveBeenCalled;\n  });\n});\n"]}
+{"version":3,"file":"ic-toggle-button.spec.js","sourceRoot":"","sources":["../../../../../src/components/ic-toggle-button/test/basic/ic-toggle-button.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from \"@stencil/core/testing\";\nimport { ToggleButton } from \"../../ic-toggle-button\";\n\ndescribe(\"ic-toggle-button component\", () => {\n  it(\"should render\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\"></ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render icon variant\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button variant=\"icon\" accessible-label=\"Refresh the page\">\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted icon with icon placement\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" icon-placement=\"right\">\n          <svg\n            slot=\"icon\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            height=\"24px\"\n            viewBox=\"0 0 24 24\"\n            width=\"24px\"\n            fill=\"#000000\"\n          >\n            <path d=\"M0 0h24v24H0V0z\" fill=\"none\" />\n            <path\n              d=\"M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z\"\n            />\n          </svg>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should render slotted badge\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\">\n          <ic-badge label=\"1\" slot=\"badge\" variant=\"success\"></ic-badge>\n        </ic-toggle-button>`,\n    });\n\n    expect(page.root).toMatchSnapshot();\n  });\n\n  it(\"should update checked value on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    expect(page.rootInstance.checked).toBeFalsy();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(page.rootInstance.checked).toBeTruthy();\n  });\n\n  it(\"should emit icToggleChecked on click\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    const eventSpy = jest.fn();\n\n    page.win.addEventListener(\"icToggleChecked\", eventSpy);\n\n    page.rootInstance.handleClick();\n\n    await page.waitForChanges();\n\n    expect(eventSpy).toHaveBeenCalled();\n  });\n\n  it(\"should stop immediate propagation of a click event when disabled\", async () => {\n    const page = await newSpecPage({\n      components: [ToggleButton],\n      html: `<ic-toggle-button label=\"Toggle\" id='test-button' disabled=true onclick='alert('test')'></ic-toggle-button>`,\n    });\n\n    jest.spyOn(window, \"alert\").mockImplementation();\n\n    const element = document.getElementById(\"test-button\");\n\n    element.click();\n\n    await page.waitForChanges();\n\n    expect(window.alert).not.toHaveBeenCalled;\n  });\n});\n"]}

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

@@ -458,12 +458,12 @@ video {
   border-radius: var(--ic-border-radius);
 }
 
-:host(.full-width) {
+:host(.ic-toggle-button-group-full-width) {
   width: 100%;
   max-width: 100%;
 }
 
-:host(.loading) {
+:host(.ic-toggle-button-group-loading) {
   min-width: -moz-max-content;
   min-width: max-content;
 }
@@ -490,29 +490,32 @@ video {
 }
 
 /* DISABLED */
-:host(.disabled) {
+:host(.ic-toggle-button-group-disabled) {
   border: var(--ic-border-disabled);
   pointer-events: none;
 }
 
-:host(.disabled) ::slotted(ic-toggle-button:not(:last-of-type)) {
+:host(.ic-toggle-button-group-disabled)
+  ::slotted(ic-toggle-button:not(:last-of-type)) {
   border-right: var(--ic-border-disabled);
 }
 
 /* DARK */
-:host(.dark) {
+:host(.ic-toggle-button-group-dark) {
   border: var(--ic-border-width) solid var(--ic-action-dark);
 }
 
-:host(.dark) ::slotted(ic-toggle-button:not(:last-of-type)) {
+:host(.ic-toggle-button-group-dark)
+  ::slotted(ic-toggle-button:not(:last-of-type)) {
   border-right: var(--ic-border-width) solid var(--ic-action-dark);
 }
 
 /* LIGHT */
-:host(.light) ::slotted(ic-toggle-button:not(:last-of-type)) {
+:host(.ic-toggle-button-group-light)
+  ::slotted(ic-toggle-button:not(:last-of-type)) {
   border-right: var(--ic-border-width) solid var(--ic-action-light);
 }
 
-:host(.light) {
+:host(.ic-toggle-button-group-light) {
   border: var(--ic-border-width) solid var(--ic-action-light);
 }

package/dist/collection/components/ic-toggle-button-group/ic-toggle-button-group.js

@@ -24,18 +24,18 @@ export class ToggleButtonGroup {
             const el = ev.target;
             const relEl = ev.relatedTarget;
             const toggleButtons = Array.from(el.querySelectorAll("ic-toggle-button"));
-            if (((toggleButtons.every((el) => !el.toggleChecked) ||
+            if (((toggleButtons.every((el) => !el.checked) ||
                 this.selectType !== "single") &&
                 this.lastKeyPressed.shift === false) ||
-                (toggleButtons.every((el) => !el.toggleChecked) &&
+                (toggleButtons.every((el) => !el.checked) &&
                     this.lastKeyPressed.shift === true &&
                     relEl.tagName == TOGGLE_GROUP)) {
                 toggleButtons[0].focus();
             }
             else if (this.lastKeyPressed.shift === false ||
                 (this.lastKeyPressed.shift === true && relEl.tagName == TOGGLE_GROUP)) {
-                // if toggleChecked is true and selectMethod is "single", focus that toggle
-                const toggledButton = toggleButtons.filter((el) => el.toggleChecked);
+                // if checked is true and selectMethod is "single", focus that toggle
+                const toggledButton = toggleButtons.filter((el) => el.checked);
                 toggledButton[0].focus();
             }
         };
@@ -102,19 +102,19 @@ export class ToggleButtonGroup {
                 clickedToggle = tabTarget;
             }
             allToggles.forEach((el) => {
-                if (el.id !== clickedToggle.id && el.toggleChecked) {
-                    el.toggleChecked = false;
+                if (el.id !== clickedToggle.id && el.checked) {
+                    el.checked = false;
                 }
             });
             this.icChange.emit({
-                toggleChecked: ev.detail.toggleChecked,
+                checked: ev.detail.checked,
                 selectedOption: clickedToggle,
             });
         }
         else {
-            const toggledOptions = this.getAllToggleButtons().filter((el) => el.toggleChecked && !el.disabled);
+            const toggledOptions = this.getAllToggleButtons().filter((el) => el.checked && !el.disabled);
             this.icChange.emit({
-                toggleChecked: toggledOptions.map((opt) => opt.toggleChecked),
+                checked: toggledOptions.map((opt) => opt.checked),
                 toggledOptions: toggledOptions.map((opt) => ({
                     toggleButton: opt,
                 })),
@@ -150,10 +150,10 @@ export class ToggleButtonGroup {
     }
     // trigger selectHandler when unable to add 'target'
     proxySelectHandler(toggle) {
-        toggle.toggleChecked = true;
+        toggle.checked = true;
         const customEv = new CustomEvent("icToggleChecked", {
             detail: {
-                toggleChecked: toggle.toggleChecked,
+                checked: toggle.checked,
             },
         });
         this.selectHandler(customEv, toggle);
@@ -163,10 +163,10 @@ export class ToggleButtonGroup {
     }
     render() {
         return (h(Host, { role: "group", "aria-label": this.accessibleLabel, "aria-disabled": this.disabled ? "true" : "false", tabindex: 0, class: {
-                ["full-width"]: this.fullWidth,
-                ["loading"]: this.loading,
-                ["disabled"]: this.disabled,
-                [`${this.appearance}`]: true,
+                ["ic-toggle-button-group-full-width"]: this.fullWidth,
+                ["ic-toggle-button-group-loading"]: this.loading,
+                ["ic-toggle-button-group-disabled"]: this.disabled,
+                [`ic-toggle-button-group-${this.appearance}`]: true,
             }, onFocus: this.handleHostFocus }, h("slot", null)));
     }
     static get is() { return "ic-toggle-button-group"; }