@sebgroup/green-core 1.31.0 → 1.32.0

package/chunks/{chunk.P4WYUSGN.js → chunk.2HUICVEB.js}

@@ -1,6 +1,6 @@
 import {
   GdsSegment
-} from "./chunk.NPXN7ELA.js";
+} from "./chunk.RALLT724.js";
 import {
   resizeObserver
 } from "./chunk.VHN4JEZC.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.UZLOEUQK.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.CMBWSAV5.js → chunk.2YZSLAXQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.I2ZBV4TU.js → chunk.3NWU65G2.js}

@@ -1,6 +1,6 @@
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.YT5MTXP5.js";
 import {
   constrainSlots
 } from "./chunk.KBYQYDL3.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.UZLOEUQK.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   gdsCustomElement,
   html
@@ -470,6 +470,9 @@ var GdsButton = class extends GdsFormControlElement {
       </${tag}>
     `;
   }
+  _getValidityAnchor() {
+    return this._button;
+  }
 };
 _isIconButton = new WeakMap();
 _isLink = new WeakSet();
@@ -523,6 +526,9 @@ __decorateClass([
 __decorateClass([
   query("slot:not([name])")
 ], GdsButton.prototype, "_mainSlot", 2);
+__decorateClass([
+  query(".button")
+], GdsButton.prototype, "_button", 2);
 GdsButton = __decorateClass([
   gdsCustomElement("gds-button")
 ], GdsButton);

package/chunks/{chunk.FI7FECDT.js → chunk.432YVDHB.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.C3DZ5TYR.js → chunk.BEYBLGU3.js}

@@ -1,6 +1,6 @@
 import {
   GdsContainer
-} from "./chunk.GA7DIQNG.js";
+} from "./chunk.CIWHLTEC.js";
 import {
   card_style_css_default
 } from "./chunk.3ULLOORV.js";
@@ -9,7 +9,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   gdsCustomElement,
   html

package/chunks/{chunk.N6P4NYWB.js → chunk.CF2FHRNR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.GA7DIQNG.js → chunk.CIWHLTEC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.ZBJOM5ED.js → chunk.DH47VYYQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.JG4R6KQ7.js → chunk.KJKUEZ33.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.C3ECHGX7.js";
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.YT5MTXP5.js";
 import {
   watch
 } from "./chunk.2WO4NHJ2.js";
@@ -121,6 +121,9 @@ var GdsFilterChips = class extends GdsFormControlElement {
       ></slot>
     </div>`;
   }
+  _getValidityAnchor() {
+    return this;
+  }
   _handleResize() {
     if (!this.rowCollapse)
       return;

package/chunks/{chunk.YTLGGBXL.js → chunk.MR6N3VAU.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.C3SO7KTM.js → chunk.QVRZK3CQ.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.C3ECHGX7.js";
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.YT5MTXP5.js";
 import {
   TransitionalStyles
 } from "./chunk.UZLOEUQK.js";
@@ -327,7 +327,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
         </button>
       </div>
 
-      <div class="form-info"><slot name="message"></slot></div>
+      <div class="form-info">
+        <slot name="message">${this.validationMessage}</slot>
+      </div>
 
       <gds-popover
         .triggerRef=${this._elTrigger}
@@ -439,6 +441,9 @@ var GdsDatepicker = class extends GdsFormControlElement {
         </div>
       </gds-popover> `;
   }
+  _getValidityAnchor() {
+    return this._elSpinners[0];
+  }
   _handleValueChange() {
     if (!this.value) {
       __privateSet(this, _spinnerState, {

package/chunks/{chunk.NPXN7ELA.js → chunk.RALLT724.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.UZLOEUQK.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.Y7ZUVKRP.js → chunk.SIAKY7DM.js}

@@ -1,15 +1,15 @@
+import {
+  GdsContainer
+} from "./chunk.CIWHLTEC.js";
 import {
   flex_style_css_default
 } from "./chunk.54252E4T.js";
-import {
-  GdsContainer
-} from "./chunk.GA7DIQNG.js";
 import {
   styleExpressionProperty
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   gdsCustomElement,
   html

package/chunks/chunk.UNXDEINN.js

@@ -0,0 +1,86 @@
+import {
+  GdsElement
+} from "./chunk.ZQ4D5K7J.js";
+import {
+  gdsCustomElement,
+  html
+} from "./chunk.VOYMQ322.js";
+import {
+  __decorateClass
+} from "./chunk.5VURDMKE.js";
+
+// libs/core/src/components/form/summary/summary.ts
+import { when } from "lit/directives/when.js";
+import { msg, str } from "@lit/localize";
+import { css } from "lit";
+var GdsFormSummary = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.form = this.closest("form") || void 0;
+    if (this.form) {
+      this.formObserver = new MutationObserver(() => {
+        this.requestUpdate();
+      });
+      this.formObserver.observe(this.form, { attributes: true, subtree: true });
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    super.disconnectedCallback();
+    (_a = this.formObserver) == null ? void 0 : _a.disconnect();
+  }
+  render() {
+    var _a;
+    const formControlElements = Array.from(
+      ((_a = this.form) == null ? void 0 : _a.elements) || []
+    );
+    const errors = formControlElements.filter((e) => e.invalid);
+    return when(
+      errors.length > 0,
+      () => html`<gds-card border="4xs/error-text" radius="2xs" padding="m" color="error-text">
+          <gds-flex gap="s">
+            <gds-container>
+              <gds-icon-triangle-exclamation></gds-icon-triangle-exclamation>
+            </gds-container>
+            <gds-container>
+            ${msg(
+        str`There are ${errors.length} errors to correct before you can continue:`
+      )}
+            <ul>
+              ${errors.map(
+        (el) => html`<li><a href @click=${(e) => {
+          e.preventDefault();
+          el.focus();
+        }}>${el.label}</li>`
+      )}
+            </ul>
+          </gds-container>
+        <gds-flex>
+      </gds-card>`
+    );
+  }
+};
+GdsFormSummary.styles = css`
+    :host {
+      font-weight: 500;
+    }
+    ul {
+      list-style-type: none;
+      margin: 1rem 0 0;
+      padding: 0;
+    }
+    li {
+      margin: 0.5rem 0;
+    }
+    a {
+      color: var(--gds-sys-color-primary-text);
+      font-weight: 500;
+    }
+  `;
+GdsFormSummary = __decorateClass([
+  gdsCustomElement("gds-form-summary")
+], GdsFormSummary);
+
+export {
+  GdsFormSummary
+};

package/chunks/{chunk.WIA7QHCX.js → chunk.UOT5KPZH.js}

@@ -1,6 +1,6 @@
 import {
   GdsFormControlElement
-} from "./chunk.MZSK66DN.js";
+} from "./chunk.YT5MTXP5.js";
 import {
   observeLightDOM
 } from "./chunk.WM7HBMMV.js";
@@ -253,9 +253,14 @@ var GdsDropdown = class extends GdsFormControlElement {
         </gds-listbox>
       </gds-popover>
 
-      <span class="form-info"><slot name="message"></slot></span>
+      <span class="form-info"
+        ><slot name="message">${this.validationMessage}</slot></span
+      >
     `;
   }
+  _getValidityAnchor() {
+    return this._elTriggerBtn;
+  }
   _handleLightDOMChange() {
     var _a, _b;
     this.requestUpdate();

package/chunks/chunk.VOYMQ322.js

@@ -1,7 +1,7 @@
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-067182";
+var VER_SUFFIX = "-3b89e7";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {

package/chunks/{chunk.QVB7U5PX.js → chunk.X32AG3RQ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.ADPMTWTS.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.EHAQQKN7.js → chunk.Y4GPJIXU.js}

@@ -4,7 +4,7 @@ import { unsafeCSS } from "lit";
 // dist/libs/tokens/internal/pallet.css?inline
 var pallet_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 12:43:55 GMT
+ * Generated on Fri, 19 Jul 2024 16:10:23 GMT
  */
 
 :host {
@@ -165,7 +165,7 @@ var pallet_default = `/**
 // dist/libs/tokens/internal/theme/light.css?inline
 var light_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 12:43:55 GMT
+ * Generated on Fri, 19 Jul 2024 16:10:23 GMT
  */
 
 :host {
@@ -286,7 +286,7 @@ var light_default = `/**
 // dist/libs/tokens/internal/size.css?inline
 var size_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 12:43:55 GMT
+ * Generated on Fri, 19 Jul 2024 16:10:23 GMT
  */
 
 :host {
@@ -313,7 +313,7 @@ var size_default = `/**
 // dist/libs/tokens/internal/text.css?inline
 var text_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 12:43:55 GMT
+ * Generated on Fri, 19 Jul 2024 16:10:23 GMT
  */
 
 :host {
@@ -368,7 +368,7 @@ var text_default = `/**
 // dist/libs/tokens/internal/motion.css?inline
 var motion_default = `/**
  * Do not edit directly
- * Generated on Fri, 12 Jul 2024 12:43:55 GMT
+ * Generated on Fri, 19 Jul 2024 16:10:23 GMT
  */
 
 :host {

package/chunks/{chunk.6VYOPBWL.js → chunk.YDZD6ZMG.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.H2DROYO6.js → chunk.YRDSZC4U.js}

@@ -1,6 +1,6 @@
 import {
   tokens
-} from "./chunk.EHAQQKN7.js";
+} from "./chunk.Y4GPJIXU.js";
 import {
   gdsCustomElement
 } from "./chunk.VOYMQ322.js";

package/chunks/{chunk.MZSK66DN.js → chunk.YT5MTXP5.js}

@@ -8,25 +8,21 @@ import {
   __decorateClass,
   __privateAdd,
   __privateGet,
-  __privateSet
+  __privateSet,
+  __spreadProps,
+  __spreadValues
 } from "./chunk.5VURDMKE.js";
 
-// libs/core/src/components/form-control.ts
+// libs/core/src/components/form/form-control.ts
 import { property } from "lit/decorators.js";
+import { msg } from "@lit/localize";
 var _internals;
 var GdsFormControlElement = class extends GdsElement {
   constructor() {
     super();
     __privateAdd(this, _internals, void 0);
-    this.invalid = false;
+    this.required = false;
     this.name = "";
-    /**
-     * Event handler for the form reset event.
-     * Can be overridden by subclasses to rcustomize the reset value.
-     */
-    this._handleFormReset = () => {
-      this.value = void 0;
-    };
     try {
       __privateSet(this, _internals, this.attachInternals());
     } catch (e) {
@@ -58,6 +54,23 @@ var GdsFormControlElement = class extends GdsElement {
       });
     }
   }
+  set invalid(value) {
+    const oldValue = this.invalid;
+    __privateGet(this, _internals).setValidity(
+      __spreadProps(__spreadValues({}, __privateGet(this, _internals).validity), {
+        customError: value,
+        valid: !value
+      }),
+      this.validationMessage || msg(`Validation error`),
+      // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
+      this._getValidityAnchor() || void 0
+    );
+    this.requestUpdate("invalid", oldValue);
+    __privateGet(this, _internals).checkValidity();
+  }
+  get invalid() {
+    return !__privateGet(this, _internals).validity.valid;
+  }
   /**
    * The form element that the form control is associated with.
    */
@@ -74,45 +87,50 @@ var GdsFormControlElement = class extends GdsElement {
     return __privateGet(this, _internals).willValidate;
   }
   checkValidity() {
+    const anchor = this._getValidityAnchor();
+    if (!anchor || !this.validator)
+      return true;
+    const oldValue = this.invalid;
+    const validity = this.validator.validate(this) || [
+      __spreadProps(__spreadValues({}, this.validity), { valid: true }),
+      ""
+    ];
+    __privateGet(this, _internals).setValidity(
+      validity[0],
+      validity[1],
+      // @ts-expect-error - setValidity actually takes an element as the third argument, but the type definition is wrong.
+      this._getValidityAnchor()
+    );
+    this.requestUpdate("invalid", oldValue);
     return __privateGet(this, _internals).checkValidity();
   }
   reportValidity() {
     return __privateGet(this, _internals).reportValidity();
   }
-  connectedCallback() {
-    var _a;
-    super.connectedCallback();
-    (_a = __privateGet(this, _internals).form) == null ? void 0 : _a.addEventListener("reset", this._handleFormReset);
+  __handleValueChange() {
+    __privateGet(this, _internals).setFormValue(this.value);
+    this.checkValidity();
   }
-  disconnectedCallback() {
-    var _a;
-    super.disconnectedCallback();
-    (_a = __privateGet(this, _internals).form) == null ? void 0 : _a.removeEventListener("reset", this._handleFormReset);
+  formResetCallback() {
+    this.value = void 0;
   }
-  __handleValidityChange() {
-    __privateGet(this, _internals).setValidity(
-      {
-        badInput: false,
-        customError: this.invalid,
-        patternMismatch: false,
-        rangeOverflow: false,
-        rangeUnderflow: false,
-        stepMismatch: false,
-        tooLong: false,
-        tooShort: false,
-        typeMismatch: false,
-        valueMissing: false,
-        valid: !this.invalid
-      },
-      this.validationMessage || "Error message"
-    );
+  formAssociatedCallback(form) {
+    form.addEventListener("submit", this._handleFormSubmit.bind(this));
   }
-  __handleValueChange() {
-    __privateGet(this, _internals).setFormValue(this.value);
+  _handleFormSubmit(e) {
+    this.checkValidity();
+    if (!this.validity.valid)
+      e.preventDefault();
   }
 };
 _internals = new WeakMap();
 GdsFormControlElement.formAssociated = true;
+__decorateClass([
+  property({ attribute: false })
+], GdsFormControlElement.prototype, "validator", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsFormControlElement.prototype, "required", 2);
 __decorateClass([
   property({
     type: Boolean,
@@ -123,16 +141,16 @@ __decorateClass([
       toAttribute: (value) => value == null ? void 0 : value.toString()
     }
   })
-], GdsFormControlElement.prototype, "invalid", 2);
+], GdsFormControlElement.prototype, "invalid", 1);
+__decorateClass([
+  property()
+], GdsFormControlElement.prototype, "label", 2);
 __decorateClass([
   property()
 ], GdsFormControlElement.prototype, "value", 2);
 __decorateClass([
   property({ reflect: true })
 ], GdsFormControlElement.prototype, "name", 2);
-__decorateClass([
-  watch("invalid")
-], GdsFormControlElement.prototype, "__handleValidityChange", 1);
 __decorateClass([
   watch("value")
 ], GdsFormControlElement.prototype, "__handleValueChange", 1);

package/components/button/button.d.ts

@@ -1,5 +1,5 @@
 import '../../primitives/ripple';
-import { GdsFormControlElement } from '../../components/form-control';
+import { GdsFormControlElement } from '../form/form-control';
 /**
  * @element gds-button
  * @summary A custom button element that can display a label, lead and trail icons, and a ripple effect on click.
@@ -59,7 +59,9 @@ export declare class GdsButton<ValueT = any> extends GdsFormControlElement<Value
      */
     download?: string;
     private _mainSlot?;
+    private _button?;
     constructor();
     connectedCallback(): void;
     render(): import("lit").TemplateResult;
+    protected _getValidityAnchor(): HTMLElement;
 }

package/components/button/button.js

@@ -1,13 +1,13 @@
 import {
   GdsButton
-} from "../../chunks/chunk.I2ZBV4TU.js";
+} from "../../chunks/chunk.3NWU65G2.js";
 import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.H2DROYO6.js";
-import "../../chunks/chunk.MZSK66DN.js";
+import "../../chunks/chunk.YRDSZC4U.js";
+import "../../chunks/chunk.YT5MTXP5.js";
 import "../../chunks/chunk.WM7HBMMV.js";
 import "../../chunks/chunk.KBYQYDL3.js";
 import "../../chunks/chunk.UZLOEUQK.js";
-import "../../chunks/chunk.EHAQQKN7.js";
+import "../../chunks/chunk.Y4GPJIXU.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.2WO4NHJ2.js";

package/components/button/index.js

@@ -1,14 +1,14 @@
 import "../../chunks/chunk.JGTSJ4J6.js";
 import {
   GdsButton
-} from "../../chunks/chunk.I2ZBV4TU.js";
+} from "../../chunks/chunk.3NWU65G2.js";
 import "../../chunks/chunk.TX64TTBN.js";
-import "../../chunks/chunk.H2DROYO6.js";
-import "../../chunks/chunk.MZSK66DN.js";
+import "../../chunks/chunk.YRDSZC4U.js";
+import "../../chunks/chunk.YT5MTXP5.js";
 import "../../chunks/chunk.WM7HBMMV.js";
 import "../../chunks/chunk.KBYQYDL3.js";
 import "../../chunks/chunk.UZLOEUQK.js";
-import "../../chunks/chunk.EHAQQKN7.js";
+import "../../chunks/chunk.Y4GPJIXU.js";
 import "../../chunks/chunk.ZQ4D5K7J.js";
 import "../../chunks/chunk.W7CV3QYI.js";
 import "../../chunks/chunk.2WO4NHJ2.js";

package/components/content/divider/divider.js

@@ -1,8 +1,8 @@
 import {
   GdsDivider
-} from "../../../chunks/chunk.QVB7U5PX.js";
+} from "../../../chunks/chunk.X32AG3RQ.js";
 import "../../../chunks/chunk.ADPMTWTS.js";
-import "../../../chunks/chunk.EHAQQKN7.js";
+import "../../../chunks/chunk.Y4GPJIXU.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";

package/components/content/divider/index.js

@@ -1,8 +1,8 @@
 import {
   GdsDivider
-} from "../../../chunks/chunk.QVB7U5PX.js";
+} from "../../../chunks/chunk.X32AG3RQ.js";
 import "../../../chunks/chunk.ADPMTWTS.js";
-import "../../../chunks/chunk.EHAQQKN7.js";
+import "../../../chunks/chunk.Y4GPJIXU.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";

package/components/content/spacer/index.js

@@ -1,8 +1,8 @@
 import {
   GdsSpacer
-} from "../../../chunks/chunk.N6P4NYWB.js";
+} from "../../../chunks/chunk.CF2FHRNR.js";
 import "../../../chunks/chunk.ADPMTWTS.js";
-import "../../../chunks/chunk.EHAQQKN7.js";
+import "../../../chunks/chunk.Y4GPJIXU.js";
 import "../../../chunks/chunk.ZQ4D5K7J.js";
 import "../../../chunks/chunk.W7CV3QYI.js";
 import "../../../chunks/chunk.2WO4NHJ2.js";