@sebgroup/green-core 1.83.2 → 1.85.0

package/components/details/details.component.js

@@ -53,13 +53,11 @@ let GdsDetails = class extends withSizeXProps(
       });
     });
     __privateAdd(this, _dispatchStateEvent, () => {
-      this.dispatchEvent(
-        new CustomEvent("gds-ui-state", {
-          bubbles: true,
-          composed: true,
-          detail: this.open
-        })
-      );
+      this.dispatchCustomEvent("gds-ui-state", {
+        bubbles: true,
+        composed: true,
+        detail: this.open
+      });
     });
     __privateAdd(this, _renderHeader, () => {
       return html`

package/components/dialog/dialog.component.js

@@ -24,7 +24,7 @@ import { GdsButton } from "../button/button.component.js";
 import { GdsCard } from "../card/card.component.js";
 import { GdsDiv } from "../div/div.component.js";
 import { GdsFlex } from "../flex/flex.component.js";
-import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
+import { IconCrossSmall } from "../icon/icons/cross-small.component.js";
 import { styles } from "./dialog.styles.js";
 import {
   lockBodyScrolling,
@@ -52,34 +52,21 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
       this.close(returnValue || "native-close");
     });
     __privateAdd(this, _dispatchCloseEvent, (reason) => {
-      this.dispatchEvent(
-        new CustomEvent("gds-close", {
-          detail: reason,
-          bubbles: false,
-          composed: false
-        })
-      );
+      this.dispatchCustomEvent("gds-close", {
+        detail: reason
+      });
       return __privateGet(this, _dispatchUiStateEvent).call(this, reason);
     });
     __privateAdd(this, _dispatchShowEvent, (reason) => {
-      this.dispatchEvent(
-        new CustomEvent("gds-show", {
-          detail: reason,
-          bubbles: false,
-          composed: false
-        })
-      );
+      this.dispatchCustomEvent("gds-show", {
+        detail: reason
+      });
       return __privateGet(this, _dispatchUiStateEvent).call(this, reason);
     });
     __privateAdd(this, _dispatchUiStateEvent, (reason) => {
-      return this.dispatchEvent(
-        new CustomEvent("gds-ui-state", {
-          detail: { reason, open: this.open },
-          bubbles: false,
-          composed: false,
-          cancelable: true
-        })
-      );
+      return this.dispatchCustomEvent("gds-ui-state", {
+        detail: { reason, open: this.open }
+      });
     });
     __privateAdd(this, _handleTriggerClick, (e) => {
       this.show("slotted-trigger");
@@ -134,14 +121,12 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
               display="flex"
               variant="secondary"
               box-shadow="xl"
-              padding="s"
-              border-radius=${this.variant === "default" ? "s" : "0"}
+              padding="l"
+              gap="l"
+              border-radius="s"
             >
               <gds-flex
                 justify-content="space-between"
-                border-width="0 0 4xs 0"
-                margin="0 -s"
-                padding="0 s s"
                 background-color="secondary"
               >
                 <h2 id="heading">${this.heading}</h2>
@@ -151,10 +136,10 @@ let GdsDialog = class extends withSizeXProps(withSizeYProps(GdsElement)) {
                   size="small"
                   label=${msg("Close")}
                   @click=${() => this.close("btn-close")}
-                  ><gds-icon-cross-large></gds-icon-cross-large
+                  ><gds-icon-cross-small></gds-icon-cross-small
                 ></gds-button>
               </gds-flex>
-              <gds-div id="content" padding="m 0" overflow="auto" flex="1">
+              <gds-div id="content" overflow="auto" flex="1">
                 <slot></slot>
               </gds-div>
               <gds-flex
@@ -239,7 +224,7 @@ __decorateClass([
 ], GdsDialog.prototype, "_handleOpenChange", 1);
 GdsDialog = __decorateClass([
   gdsCustomElement("gds-dialog", {
-    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
+    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossSmall]
   }),
   localized()
 ], GdsDialog);

package/components/dialog/dialog.styles.js

@@ -41,12 +41,16 @@ const styles = css`
     }
 
     dialog.slide-out {
+      --_in: var(--gds-sys-space-l);
       width: 600px;
-      height: 100vh;
+      height: auto;
       inset: 0 0 0 auto;
       @starting-style {
         transform: translateX(96px);
       }
+      @media (min-width: 648px) {
+        inset: var(--_in) var(--_in) var(--_in) auto;
+      }
     }
 
     dialog:focus {
@@ -65,8 +69,8 @@ const styles = css`
     h2 {
       margin: 0;
       padding: 0;
-      font-size: 1.5rem;
-      font-weight: 450;
+      font-size: var(--gds-sys-text-size-heading-s);
+      font-weight: 400;
     }
   }
 `;

package/components/dropdown/dropdown.component.js

@@ -131,14 +131,11 @@ let GdsDropdown = class extends GdsFormControlElement {
       const height = Math.min(window.innerHeight, this.maxHeight);
       return `${height - 16}px`;
     });
-    __privateAdd(this, _dispatchUISateEvent, (toState, reason) => this.dispatchEvent(
-      new CustomEvent("gds-ui-state", {
-        detail: { reason, open: toState },
-        bubbles: false,
-        composed: false,
-        cancelable: true
-      })
-    ));
+    __privateAdd(this, _dispatchUISateEvent, (toState, reason) => this.dispatchCustomEvent("gds-ui-state", {
+      detail: { reason, open: toState },
+      bubbles: false,
+      composed: false
+    }));
     __privateAdd(this, _handlePopoverStateChange, (e) => {
       if (__privateGet(this, _dispatchUISateEvent).call(this, e.detail.open, e.detail.reason)) {
         this.open = e.detail.open;
@@ -153,12 +150,9 @@ let GdsDropdown = class extends GdsFormControlElement {
       if (!e.currentTarget)
         return;
       e.stopPropagation();
-      const wasCancelled = !this.dispatchEvent(
-        new CustomEvent("gds-filter-input", {
-          detail: { value: e.currentTarget.value },
-          cancelable: true
-        })
-      );
+      const wasCancelled = !this.dispatchCustomEvent("gds-filter-input", {
+        detail: { value: e.currentTarget.value }
+      });
       if (wasCancelled)
         return;
       const input = e.currentTarget;
@@ -201,23 +195,19 @@ let GdsDropdown = class extends GdsFormControlElement {
     });
     __privateAdd(this, _dispatchInputEvent, () => {
       this.updateComplete.then(
-        () => this.dispatchEvent(
-          new Event("input", {
-            bubbles: true,
-            composed: true
-          })
-        )
+        () => this.dispatchStandardEvent("input", {
+          bubbles: true,
+          composed: true
+        })
       );
     });
     __privateAdd(this, _dispatchChangeEvent, () => {
       this.updateComplete.then(
-        () => this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        )
+        () => this.dispatchCustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        })
       );
     });
     /**

package/components/filter-chips/filter-chips.component.js

@@ -43,13 +43,11 @@ let GdsFilterChips = class extends GdsFormControlElement {
         } else {
           this.value = clickedChip.value;
         }
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { clickedChip, value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.dispatchCustomEvent("change", {
+          detail: { clickedChip, value: this.value },
+          bubbles: true,
+          composed: true
+        });
       }
     });
     __privateAdd(this, _collapseThreshold, 3);

package/components/form/form-control.js

@@ -108,16 +108,13 @@ class GdsFormControlElement extends GdsElement {
     );
     if (oldValue !== this.invalid) {
       this.requestUpdate("invalid", oldValue);
-      this.dispatchEvent(
-        new CustomEvent("gds-validity-state", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            valid: this.validity.valid,
-            message: this.validationMessage
-          }
-        })
-      );
+      this.dispatchCustomEvent("gds-validity-state", {
+        detail: {
+          valid: this.validity.valid,
+          message: this.validationMessage
+        },
+        composed: true
+      });
     }
     return __privateGet(this, _internals).checkValidity();
   }

package/components/input/input.component.js

@@ -53,30 +53,24 @@ let Input = class extends GdsFormControlElement {
     __privateAdd(this, _handleOnChange, (e) => {
       const element = e.target;
       this.value = element.value;
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchStandardEvent("change", {
+        bubbles: true,
+        composed: true
+      });
     });
     __privateAdd(this, _handleFieldClick, () => {
       this.elInputAsync.then((el) => el.focus());
     });
     __privateAdd(this, _handleClearBtnClick, () => {
       this.value = "";
-      this.dispatchEvent(
-        new Event("gds-input-cleared", {
-          bubbles: true,
-          composed: true
-        })
-      );
-      this.dispatchEvent(
-        new Event("input", {
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchCustomEvent("gds-input-cleared", {
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchStandardEvent("input", {
+        bubbles: true,
+        composed: true
+      });
     });
     this.value = "";
   }

package/components/popover/popover.component.js

@@ -55,14 +55,12 @@ let GdsPopover = class extends GdsElement {
     });
     __privateAdd(this, _dispatchUiStateEvent, (reason) => {
       const toState = reason === "show" ? true : false;
-      return this.dispatchEvent(
-        new CustomEvent("gds-ui-state", {
-          detail: { open: toState, reason },
-          bubbles: false,
-          composed: false,
-          cancelable: true
-        })
-      );
+      return this.dispatchCustomEvent("gds-ui-state", {
+        detail: { open: toState, reason },
+        bubbles: false,
+        composed: false,
+        cancelable: true
+      });
     });
     __privateAdd(this, _handleCloseButton, (e) => {
       e.stopPropagation();
@@ -145,7 +143,9 @@ let GdsPopover = class extends GdsElement {
     });
     this.addEventListener("focusin", (e) => {
       const t = e.target;
-      if (t === this || t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+      if (t === this)
+        return;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
         this._isVirtKbVisible = true;
       } else {
         this._isVirtKbVisible = false;

package/components/radio/radio-group/radio-group.component.js

@@ -131,20 +131,16 @@ handleFocus_fn = function() {
 _dispatchChangeEvents = new WeakSet();
 dispatchChangeEvents_fn = function() {
   this.updateComplete.then(
-    () => this.dispatchEvent(
-      new Event("change", {
-        composed: true,
-        bubbles: true
-      })
-    )
+    () => this.dispatchStandardEvent("change", {
+      composed: true,
+      bubbles: true
+    })
   );
   this.updateComplete.then(
-    () => this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    )
+    () => this.dispatchStandardEvent("input", {
+      bubbles: true,
+      composed: true
+    })
   );
 };
 _handleRadioChange = new WeakSet();

package/components/radio/radio.component.js

@@ -27,7 +27,7 @@ let GdsRadio = class extends GdsElement {
       e.preventDefault();
       this.checked = true;
       this.focus();
-      this.dispatchEvent(new Event("input", { bubbles: true }));
+      this.dispatchStandardEvent("input", { bubbles: true });
     });
     __privateAdd(this, _handleKeyDown, (e) => {
       if (this.disabled)
@@ -35,7 +35,7 @@ let GdsRadio = class extends GdsElement {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         this.checked = true;
-        this.dispatchEvent(new Event("input", { bubbles: true }));
+        this.dispatchStandardEvent("input", { bubbles: true });
       }
     });
     this.addEventListener("keydown", __privateGet(this, _handleKeyDown));

package/components/segmented-control/segmented-control.component.js

@@ -86,13 +86,11 @@ let GdsSegmentedControl = class extends withLayoutChildProps(
         selectedSegment.selected = true;
         __privateSet(this, _value, selectedSegment.value);
         __privateGet(this, _updateIndicator).call(this);
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { segment: selectedSegment },
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.dispatchCustomEvent("change", {
+          detail: { segment: selectedSegment },
+          bubbles: true,
+          composed: true
+        });
       }
     });
     __privateAdd(this, _updateSelectedFromValue, () => {

package/components/select/select.component.js

@@ -67,20 +67,16 @@ let Select = class extends GdsFormControlElement {
       e.stopPropagation();
       __privateMethod(this, _setValueFromSelectElement, setValueFromSelectElement_fn).call(this);
       requestAnimationFrame(() => {
-        this.dispatchEvent(
-          new CustomEvent("input", {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        );
-        this.dispatchEvent(
-          new CustomEvent("change", {
-            detail: { value: this.value },
-            bubbles: true,
-            composed: true
-          })
-        );
+        this.dispatchCustomEvent("input", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        });
+        this.dispatchCustomEvent("change", {
+          detail: { value: this.value },
+          bubbles: true,
+          composed: true
+        });
       });
     });
   }

package/components/spinner/spinner.component.js

@@ -53,7 +53,7 @@ let GdsSpinner = class extends withMarginProps(
     this.setAttribute("role", "status");
     this.setAttribute("aria-live", "polite");
     this._isAnimating = true;
-    this.dispatchEvent(new CustomEvent("gds-spinner-connected"));
+    this.dispatchCustomEvent("gds-spinner-connected");
   }
   /**
    * Cleans up document styles if fullscreen mode was used

package/components/textarea/textarea.component.js

@@ -62,12 +62,10 @@ let Textarea = class extends GdsFormControlElement {
     __privateAdd(this, _handleOnChange, (e) => {
       const element = e.target;
       this.value = element.value;
-      this.dispatchEvent(
-        new Event("change", {
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchStandardEvent("change", {
+        bubbles: true,
+        composed: true
+      });
     });
     __privateAdd(this, _handleOnPaste, (e) => {
       requestAnimationFrame(() => {
@@ -93,18 +91,14 @@ let Textarea = class extends GdsFormControlElement {
           element.style.height = "";
         }
       });
-      this.dispatchEvent(
-        new Event("gds-input-cleared", {
-          bubbles: true,
-          composed: true
-        })
-      );
-      this.dispatchEvent(
-        new Event("input", {
-          bubbles: true,
-          composed: true
-        })
-      );
+      this.dispatchCustomEvent("gds-input-cleared", {
+        bubbles: true,
+        composed: true
+      });
+      this.dispatchStandardEvent("input", {
+        bubbles: true,
+        composed: true
+      });
     });
     this.value = "";
   }

package/components/theme/theme.component.js

@@ -37,18 +37,14 @@ let GdsTheme = class extends GdsElement {
         unsafeCSS(`:host { ${colorsLight}}`)
       );
     }
-    this.dispatchEvent(
-      new CustomEvent("gds-color-scheme-changed", {
-        detail: { colorScheme: this.colorScheme }
-      })
-    );
+    this.dispatchCustomEvent("gds-color-scheme-changed", {
+      detail: { colorScheme: this.colorScheme }
+    });
   }
   _onDesignVersionChange() {
-    this.dispatchEvent(
-      new CustomEvent("gds-design-version-changed", {
-        detail: { designVersion: this.designVersion }
-      })
-    );
+    this.dispatchCustomEvent("gds-design-version-changed", {
+      detail: { designVersion: this.designVersion }
+    });
   }
 };
 GdsTheme.styles = [

package/gds-element.d.ts

@@ -42,4 +42,14 @@ export declare class GdsElement extends LitElement {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * Dispatches a standard event with the given name and options.
+     * A pascal cased version of the event name is also dispatched for compatibility.
+     */
+    dispatchStandardEvent(name: string, options?: EventInit): boolean;
+    /**
+     * Dispatches a custom event with the given name and options.
+     * A pascal cased version of the event name is also dispatched for compatibility.
+     */
+    dispatchCustomEvent<T>(name: string, options?: CustomEventInit<T>): boolean;
 }

package/gds-element.js

@@ -5,6 +5,9 @@ import { LitElement } from "lit";
 import { state } from "lit/decorators.js";
 import { DynamicStylesController } from "./utils/controllers/dynamic-styles-controller.js";
 import "reflect-metadata";
+function toPascalCase(str) {
+  return str.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
 class GdsElement extends LitElement {
   constructor() {
     super();
@@ -31,6 +34,38 @@ class GdsElement extends LitElement {
       })
     );
   }
+  /**
+   * Dispatches a standard event with the given name and options.
+   * A pascal cased version of the event name is also dispatched for compatibility.
+   */
+  dispatchStandardEvent(name, options) {
+    const computedOptions = {
+      bubbles: true,
+      composed: false,
+      cancelable: true,
+      ...options
+    };
+    return [
+      this.dispatchEvent(new Event(name, computedOptions)),
+      this.dispatchEvent(new Event(toPascalCase(name), computedOptions))
+    ].every((event) => event !== false);
+  }
+  /**
+   * Dispatches a custom event with the given name and options.
+   * A pascal cased version of the event name is also dispatched for compatibility.
+   */
+  dispatchCustomEvent(name, options = {}) {
+    const computedOptions = {
+      bubbles: true,
+      composed: false,
+      cancelable: true,
+      ...options
+    };
+    return [
+      this.dispatchEvent(new CustomEvent(name, computedOptions)),
+      this.dispatchEvent(new CustomEvent(toPascalCase(name), computedOptions))
+    ].every((event) => event !== false);
+  }
 }
 /**
  * Whether the element is defined in the custom element registry.