@sebgroup/green-core 1.88.2 → 1.88.3

package/components/checkbox/checkbox.component.d.ts

@@ -35,10 +35,7 @@ export declare class GdsCheckbox extends GdsFormControlElement {
     get value(): string;
     set value(value: string);
     private _elCheckbox;
-    connectedCallback(): void;
-    private _updateAriaState;
     private _handleIndeterminateChange;
-    protected updated(changedProperties: Map<string, unknown>): void;
     render(): any;
     protected _getValidityAnchor(): HTMLElement;
     protected formResetCallback(): void;

package/components/checkbox/checkbox.component.js

@@ -1,11 +1,11 @@
 import {
   __decorateClass,
   __privateAdd,
-  __privateGet,
   __privateMethod
 } from "../../chunks/chunk.QTSIPXV3.js";
-var _handleClick, _handleKeyDown, _toggleChecked, toggleChecked_fn;
+var _toggleChecked, toggleChecked_fn, _dispatchChangeEvents, dispatchChangeEvents_fn;
 import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { GdsToggleControlBase } from "../../primitives/toggle-controls-base/toggle-control-base.component.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import rbcbToggleStyles from "../../shared-styles/rbcb-toggle.style.js";
@@ -13,29 +13,18 @@ import { checkboxToggle } from "../../shared-styles/rbcb-toggle.template.js";
 import { tokens } from "../../tokens.style.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { GdsFormControlElement } from "../form/form-control.js";
-import { IconCheckmark } from "../pure.js";
+import { IconCheckmark, IconMinusSmall } from "../pure.js";
 import { styles } from "./checkbox.styles.js";
 let GdsCheckbox = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
     __privateAdd(this, _toggleChecked);
+    __privateAdd(this, _dispatchChangeEvents);
     this.label = "";
     this.supportingText = "";
     this.checked = false;
     this.indeterminate = false;
     this.disabled = false;
-    __privateAdd(this, _handleClick, (e) => {
-      this.focus();
-      __privateMethod(this, _toggleChecked, toggleChecked_fn).call(this);
-    });
-    __privateAdd(this, _handleKeyDown, (e) => {
-      if (this.disabled)
-        return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        __privateMethod(this, _toggleChecked, toggleChecked_fn).call(this);
-      }
-    });
   }
   get value() {
     return this._internalValue || "";
@@ -43,40 +32,37 @@ let GdsCheckbox = class extends GdsFormControlElement {
   set value(value) {
     this._internalValue = value;
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setAttribute("role", "checkbox");
-    this._updateAriaState();
-    this.addEventListener("keydown", __privateGet(this, _handleKeyDown));
-    this.addEventListener("click", __privateGet(this, _handleClick));
-  }
-  _updateAriaState() {
-    this.setAttribute(
-      "aria-checked",
-      this.indeterminate ? "mixed" : this.checked.toString()
-    );
-    this.setAttribute("aria-disabled", this.disabled.toString());
-    this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    this.toggleAttribute("aria-invalid", this.invalid);
-  }
   _handleIndeterminateChange() {
     if (this.indeterminate) {
       this.checked = false;
     }
   }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("checked") || changedProperties.has("indeterminate") || changedProperties.has("disabled") || changedProperties.has("invalid")) {
-      this._updateAriaState();
-    }
-  }
   render() {
     return html`
-      <gds-toggle-control-base
-        supporting-text=${this.supportingText}
-        label=${this.label}
+      <input
         type="checkbox"
-      >
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        ?indeterminate=${this.indeterminate}
+        aria-invalid=${this.invalid}
+        aria-describedby=${ifDefined(
+      this.supportingText ? "supporting-text" : ""
+    )}
+        id="checkbox-input"
+        @change=${() => {
+      this.checked = this._elCheckbox.checked;
+      __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
+    }}
+      />
+      <gds-toggle-control-base type="checkbox" @click=${__privateMethod(this, _toggleChecked, toggleChecked_fn)}>
+        <label for="checkbox-input" slot="label"> ${this.label} </label>
+        <span
+          slot="supporting-text"
+          class="supporting-text"
+          id="supporting-text"
+        >
+          ${this.supportingText}
+        </span>
         ${checkboxToggle({
       checked: this.checked,
       indeterminate: this.indeterminate,
@@ -93,16 +79,19 @@ let GdsCheckbox = class extends GdsFormControlElement {
     this.checked = false;
   }
 };
-_handleClick = new WeakMap();
-_handleKeyDown = new WeakMap();
 _toggleChecked = new WeakSet();
-toggleChecked_fn = function() {
+toggleChecked_fn = function(e) {
+  if (this.disabled || e.target instanceof HTMLLabelElement)
+    return;
   if (this.indeterminate) {
     this.indeterminate = false;
-    this.checked = true;
   } else {
     this.checked = !this.checked;
   }
+  __privateMethod(this, _dispatchChangeEvents, dispatchChangeEvents_fn).call(this);
+};
+_dispatchChangeEvents = new WeakSet();
+dispatchChangeEvents_fn = function() {
   this.dispatchStandardEvent("change", {
     bubbles: true,
     composed: true
@@ -129,14 +118,14 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsCheckbox.prototype, "disabled", 2);
 __decorateClass([
-  query(".rbcb")
+  query('input[type="checkbox"]')
 ], GdsCheckbox.prototype, "_elCheckbox", 2);
 __decorateClass([
   watch("indeterminate")
 ], GdsCheckbox.prototype, "_handleIndeterminateChange", 1);
 GdsCheckbox = __decorateClass([
   gdsCustomElement("gds-checkbox", {
-    dependsOn: [GdsToggleControlBase, IconCheckmark]
+    dependsOn: [GdsToggleControlBase, IconCheckmark, IconMinusSmall]
   })
 ], GdsCheckbox);
 export {

package/components/checkbox/checkbox.styles.js

@@ -17,6 +17,14 @@ const styles = css`
   :host(:focus) {
     outline: none;
   }
+
+  input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
 `;
 export {
   styles

package/components/radio/radio.component.js

@@ -62,11 +62,9 @@ let GdsRadio = class extends GdsElement {
   }
   render() {
     return html`
-      <gds-toggle-control-base
-        supporting-text=${this.supportingText}
-        label=${this.label}
-        type="radio"
-      >
+      <gds-toggle-control-base type="radio">
+        <label slot="label" @click=${__privateGet(this, _handleClick)}> ${this.label} </label>
+        <span slot="supporting-text"> ${this.supportingText} </span>
         ${radioToggle({
       checked: this.checked,
       disabled: this.disabled,

package/generated/react/checkbox/index.d.ts

@@ -7,7 +7,6 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     indeterminate?: boolean | undefined;
     disabled?: boolean | undefined;
     value?: string | undefined;
-    connectedCallback?: (() => void) | undefined;
     render?: (() => any) | undefined;
     validator?: import("../../../components/form/form-control").GdsValidator | undefined;
     required?: boolean | undefined;
@@ -23,6 +22,7 @@ export declare const GdsCheckbox: (props: React.ComponentProps<ReturnType<typeof
     gdsElementName?: string | undefined;
     _isUsingTransitionalStyles?: boolean | undefined;
     _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
+    connectedCallback?: (() => void) | undefined;
     disconnectedCallback?: (() => void) | undefined;
     dispatchStandardEvent?: ((name: string, options?: EventInit) => boolean) | undefined;
     dispatchCustomEvent?: (<T>(name: string, options?: CustomEventInit<T>) => boolean) | undefined;

package/generated/react/index.d.ts

@@ -11,8 +11,8 @@ export * from './container/index.js';
 export * from './context-menu/index.js';
 export * from './datepicker/index.js';
 export * from './details/index.js';
-export * from './div/index.js';
 export * from './dialog/index.js';
+export * from './div/index.js';
 export * from './divider/index.js';
 export * from './dropdown/index.js';
 export * from './fab/index.js';
@@ -43,8 +43,8 @@ export * from './theme/index.js';
 export * from './video/index.js';
 export * from './form-control-footer/index.js';
 export * from './form-control-header/index.js';
-export * from './option/index.js';
 export * from './menu-item/index.js';
+export * from './option/index.js';
 export * from './checkbox-group/index.js';
 export * from './icons/icon-details/index.js';
 export * from './filter-chip/index.js';

package/generated/react/index.js

@@ -11,8 +11,8 @@ export * from "./container/index.js";
 export * from "./context-menu/index.js";
 export * from "./datepicker/index.js";
 export * from "./details/index.js";
-export * from "./div/index.js";
 export * from "./dialog/index.js";
+export * from "./div/index.js";
 export * from "./divider/index.js";
 export * from "./dropdown/index.js";
 export * from "./fab/index.js";
@@ -43,8 +43,8 @@ export * from "./theme/index.js";
 export * from "./video/index.js";
 export * from "./form-control-footer/index.js";
 export * from "./form-control-header/index.js";
-export * from "./option/index.js";
 export * from "./menu-item/index.js";
+export * from "./option/index.js";
 export * from "./checkbox-group/index.js";
 export * from "./icons/icon-details/index.js";
 export * from "./filter-chip/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.88.2",
+  "version": "1.88.3",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/toggle-controls-base/toggle-control-base.component.js

@@ -25,10 +25,8 @@ let GdsToggleControlBase = class extends GdsElement {
           <slot></slot>
         </div>
         <div class="${classMap(classes)}">
-          <label class="primary-label"> ${this.label} </label>
-          ${this.label ? html`
-                <span class="supporting-text"> ${this.supportingText} </span>
-              ` : ""}
+          <slot name="label"></slot>
+          <slot name="supporting-text"></slot>
         </div>
       </div>
     `;

package/primitives/toggle-controls-base/toggle-control-base.styles.js

@@ -27,12 +27,12 @@ const styles = css`
       justify-content: center;
     }
 
-    .primary-label {
+    slot[name='label']::slotted(*) {
       font-weight: var(--gds-sys-text-weight-book);
       cursor: inherit;
     }
 
-    .supporting-text {
+    slot[name='supporting-text']::slotted(*) {
       font-size: var(--_font-size-supporting-text);
       line-height: var(--_line-height-supporting-text);
       font-weight: var(--gds-sys-text-weight-regular);

package/shared-styles/rbcb-toggle.style.js

@@ -140,7 +140,8 @@ var rbcb_toggle_style_default = css`
     color: var(--gds-sys-color-l3-content-negative);
   }
 
-  :host(:focus-visible) .rbcb__perimeter {
+  :host(:focus-visible) .rbcb__perimeter,
+  :host(:focus-within) .rbcb__perimeter {
     outline-width: var(--gds-sys-space-3xs);
     scale: 1;
   }

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QTSIPXV3.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-f27f4b";
+const VER_SUFFIX = "-10d557";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])