@sebgroup/green-core 1.83.1 → 1.84.0

package/components/button/button.component.js

@@ -49,13 +49,11 @@ class Button extends GdsFormControlElement {
       this.requestUpdate();
     });
     __privateAdd(this, _handleClick, (e) => {
-      this.dispatchEvent(
-        new CustomEvent("gds-click", {
-          bubbles: true,
-          composed: true,
-          detail: e
-        })
-      );
+      this.dispatchCustomEvent("gds-click", {
+        bubbles: true,
+        composed: true,
+        detail: e
+      });
       if (this.form && !__privateGet(this, _isLink, isLink_get)) {
         if (this.type === "submit") {
           this.form.requestSubmit();

package/components/calendar/calendar.component.js

@@ -182,20 +182,18 @@ let GdsCalendar = class extends GdsElement {
   _valueChanged() {
     if (!this.value)
       return;
-    this.focusedDate = this.value;
+    this.focusedDate = new Date(this.value);
   }
 };
 _setSelectedDate = new WeakSet();
 setSelectedDate_fn = function(date) {
   const dateOnMidDay = setHours(date, 12);
   this.value = dateOnMidDay;
-  this.dispatchEvent(
-    new CustomEvent("change", {
-      detail: dateOnMidDay,
-      bubbles: false,
-      composed: false
-    })
-  );
+  this.dispatchCustomEvent("change", {
+    detail: dateOnMidDay,
+    bubbles: false,
+    composed: false
+  });
 };
 _handleKeyDown = new WeakSet();
 handleKeyDown_fn = function(e) {
@@ -232,14 +230,11 @@ handleKeyDown_fn = function(e) {
     handled = true;
   }
   if (newFocusedDate.getFullYear() >= this.min.getFullYear() && newFocusedDate.getFullYear() <= this.max.getFullYear()) {
-    const proceed = this.dispatchEvent(
-      new CustomEvent("gds-date-focused", {
-        detail: newFocusedDate,
-        bubbles: false,
-        composed: false,
-        cancelable: true
-      })
-    );
+    const proceed = this.dispatchCustomEvent("gds-date-focused", {
+      detail: newFocusedDate,
+      bubbles: false,
+      composed: false
+    });
     if (proceed) {
       this.focusedDate = newFocusedDate;
     }

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

@@ -140,12 +140,10 @@ computeValue_fn = function() {
 _dispatchInputEvent = new WeakSet();
 dispatchInputEvent_fn = function() {
   this.updateComplete.then(
-    () => this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    )
+    () => this.dispatchStandardEvent("input", {
+      bubbles: true,
+      composed: true
+    })
   );
 };
 _renderFieldControlFooter = new WeakSet();

package/components/checkbox/checkbox.component.js

@@ -103,18 +103,14 @@ toggleChecked_fn = function() {
   } else {
     this.checked = !this.checked;
   }
-  this.dispatchEvent(
-    new Event("change", {
-      bubbles: true,
-      composed: true
-    })
-  );
-  this.dispatchEvent(
-    new Event("input", {
-      bubbles: true,
-      composed: true
-    })
-  );
+  this.dispatchStandardEvent("change", {
+    bubbles: true,
+    composed: true
+  });
+  this.dispatchStandardEvent("input", {
+    bubbles: true,
+    composed: true
+  });
 };
 GdsCheckbox.styles = [tokens, rbcbToggleStyles, styles];
 __decorateClass([

package/components/coachmark/coachmark.component.js

@@ -109,13 +109,11 @@ closeCoachMark_fn = function() {
   this._isVisible = false;
   __privateGet(this, _cardRef).value?.remove();
   (_a = __privateGet(this, _autoUpdateCleanupFn)) == null ? void 0 : _a.call(this);
-  this.dispatchEvent(
-    new CustomEvent("gds-ui-state", {
-      detail: { open: this._isVisible, reason: "closed" },
-      bubbles: false,
-      composed: false
-    })
-  );
+  this.dispatchCustomEvent("gds-ui-state", {
+    detail: { open: this._isVisible, reason: "closed" },
+    bubbles: false,
+    composed: false
+  });
 };
 _findTarget = new WeakSet();
 findTarget_fn = function(selectors) {

package/components/datepicker/date-part-spinner.js

@@ -140,11 +140,9 @@ focusNextSpinner_fn = function() {
 };
 _dispatchChangeEvent = new WeakSet();
 dispatchChangeEvent_fn = function() {
-  this.dispatchEvent(
-    new CustomEvent("change", {
-      detail: { value: this.value.toString() }
-    })
-  );
+  this.dispatchCustomEvent("change", {
+    detail: { value: this.value.toString() }
+  });
 };
 _formatNumber = new WeakSet();
 formatNumber_fn = function(num, padZeros) {

package/components/datepicker/datepicker.component.js

@@ -624,23 +624,19 @@ getMaxSpinnerValue_fn = function(name) {
 _dispatchChangeEvent = new WeakSet();
 dispatchChangeEvent_fn = function() {
   this.updateComplete.then(
-    () => this.dispatchEvent(
-      new Event("change", {
-        bubbles: true,
-        composed: true
-      })
-    )
+    () => this.dispatchStandardEvent("change", {
+      bubbles: true,
+      composed: true
+    })
   );
 };
 _dispatchInputEvent = new WeakSet();
 dispatchInputEvent_fn = function() {
   this.updateComplete.then(
-    () => this.dispatchEvent(
-      new Event("input", {
-        bubbles: true,
-        composed: true
-      })
-    )
+    () => this.dispatchStandardEvent("input", {
+      bubbles: true,
+      composed: true
+    })
   );
 };
 _handleFieldFocusOut = new WeakMap();

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();

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 = "";
   }