@sebgroup/green-core 2.13.2 → 2.14.0

package/components/button/button.component.d.ts

@@ -52,6 +52,7 @@ declare class Button extends GdsFormControlElement<any> {
     download?: string;
     private _mainSlot?;
     private _button?;
+    private _ripple?;
     focus(options?: FocusOptions): void;
     click(): void;
     connectedCallback(): void;

package/components/button/button.component.js

@@ -4,7 +4,7 @@ import {
   __privateGet,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _isIconButton, _Button_instances, isLink_get, defaultRel_get, _mainSlotChange, _handleClick;
+var _isIconButton, _Button_instances, isLink_get, defaultRel_get, _mainSlotChange, _handleClick, _handleKeyDown;
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -59,6 +59,15 @@ class Button extends GdsFormControlElement {
         }
       }
     });
+    __privateAdd(this, _handleKeyDown, (e) => {
+      if (this.disabled) return;
+      if ((e.code === "Space" || e.key === "Enter") && !e.repeat) {
+        const ripple = this._ripple;
+        if (ripple) {
+          ripple.triggerRipple();
+        }
+      }
+    });
   }
   focus(options) {
     this._getValidityAnchor()?.focus(options);
@@ -101,6 +110,7 @@ class Button extends GdsFormControlElement {
         download=${ifDefined(__privateGet(this, _Button_instances, isLink_get) ? this.download : void 0)}
         part="_button"
         @click="${__privateGet(this, _handleClick)}"
+        @keydown="${__privateGet(this, _handleKeyDown)}"
         ${forwardAttributes(
       (attr) => attr.name.startsWith("gds-aria") || attr.name === "gds-role" || ariaForwards.includes(attr.name)
     )}
@@ -112,8 +122,8 @@ class Button extends GdsFormControlElement {
       !this._isUsingTransitionalStyles,
       () => html`<gds-ripple part="_ripple"></gds-ripple>`
     )}
-        </${tag}>
-        `;
+      </${tag}>
+      `;
   }
   _getValidityAnchor() {
     return this._button;
@@ -132,6 +142,7 @@ defaultRel_get = function() {
 };
 _mainSlotChange = new WeakMap();
 _handleClick = new WeakMap();
+_handleKeyDown = new WeakMap();
 Button.styles = [tokens, ButtonStyles];
 /**
  * @internal
@@ -181,6 +192,9 @@ __decorateClass([
 __decorateClass([
   query(".button")
 ], Button.prototype, "_button", 2);
+__decorateClass([
+  query("gds-ripple")
+], Button.prototype, "_ripple", 2);
 __decorateClass([
   observeLightDOM({
     attributes: true,

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.13.2";
+    this.semanticVersion = "2.14.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/index.d.ts

@@ -53,11 +53,6 @@ export * from './filter-chip/index.js';
 export * from './formatted-account/index.js';
 export * from './formatted-date/index.js';
 export * from './formatted-number/index.js';
-export * from './radio-group/index.js';
-export * from './segment/index.js';
-export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
-export * from './sensitive-number/index.js';
 export * from './icons/icon-ai/index.js';
 export * from './icons/icon-airplane-up/index.js';
 export * from './icons/icon-archive/index.js';
@@ -391,3 +386,8 @@ export * from './icons/icon-youtube/index.js';
 export * from './icons/icon-zap/index.js';
 export * from './icons/icon-zoom-in/index.js';
 export * from './icons/icon-zoom-out/index.js';
+export * from './radio-group/index.js';
+export * from './segment/index.js';
+export * from './sensitive-account/index.js';
+export * from './sensitive-date/index.js';
+export * from './sensitive-number/index.js';

package/generated/react/index.js

@@ -53,11 +53,6 @@ export * from "./filter-chip/index.js";
 export * from "./formatted-account/index.js";
 export * from "./formatted-date/index.js";
 export * from "./formatted-number/index.js";
-export * from "./radio-group/index.js";
-export * from "./segment/index.js";
-export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
-export * from "./sensitive-number/index.js";
 export * from "./icons/icon-ai/index.js";
 export * from "./icons/icon-airplane-up/index.js";
 export * from "./icons/icon-archive/index.js";
@@ -391,3 +386,8 @@ export * from "./icons/icon-youtube/index.js";
 export * from "./icons/icon-zap/index.js";
 export * from "./icons/icon-zoom-in/index.js";
 export * from "./icons/icon-zoom-out/index.js";
+export * from "./radio-group/index.js";
+export * from "./segment/index.js";
+export * from "./sensitive-account/index.js";
+export * from "./sensitive-date/index.js";
+export * from "./sensitive-number/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": "2.13.2",
+  "version": "2.14.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/ripple/ripple.component.d.ts

@@ -4,4 +4,5 @@ export declare class GdsRipple extends GdsElement {
     private _rippleEl?;
     render(): import("lit-html").TemplateResult<1>;
     onmousedown: (e: MouseEvent) => void;
+    triggerRipple(x?: number, y?: number): void;
 }

package/primitives/ripple/ripple.component.js

@@ -11,22 +11,26 @@ let GdsRipple = class extends GdsElement {
   constructor() {
     super(...arguments);
     this.onmousedown = (e) => {
-      const target = e.target;
-      const rect = target.getBoundingClientRect();
-      const rippleEl = this._rippleEl;
-      if (rippleEl) {
-        rippleEl.classList.remove("gds-ripple-effect");
-        this.style.setProperty("--gds-ripple-top", `${e.clientY - rect.top}px`);
-        this.style.setProperty("--gds-ripple-left", `${e.clientX - rect.left}px`);
-        setTimeout(() => {
-          rippleEl.classList.add("gds-ripple-effect");
-        }, 20);
-      }
+      this.triggerRipple(e.clientX, e.clientY);
     };
   }
   render() {
     return html`<div></div>`;
   }
+  triggerRipple(x, y) {
+    const rippleEl = this._rippleEl;
+    const rect = this.getBoundingClientRect();
+    const rippleX = x !== void 0 ? x - rect.left : rect.width / 2;
+    const rippleY = y !== void 0 ? y - rect.top : rect.height / 2;
+    if (rippleEl) {
+      rippleEl.classList.remove("gds-ripple-effect");
+      this.style.setProperty("--gds-ripple-top", `${rippleY}px`);
+      this.style.setProperty("--gds-ripple-left", `${rippleX}px`);
+      setTimeout(() => {
+        rippleEl.classList.add("gds-ripple-effect");
+      }, 20);
+    }
+  }
 };
 GdsRipple.styles = [tokens, RippleStyles];
 __decorateClass([

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

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