@sebgroup/green-core 3.31.0 → 3.32.0

package/components/form-summary/summary.component.d.ts

@@ -8,6 +8,9 @@ import { GdsElement } from '../../gds-element';
  * in a consolidated manner. It provides a clear indication of what went wrong and what needs to be corrected.
  *
  * @slot header - Optional slot for customizing the header of the summary.
+ *
+ * @event gds-control-focus - Fired when an item in the summary is clicked, before focus moves to the related control.
+ * The detail object contains the control. Can be cancelled with event.preventDefault() to handle focus yourself.
  */
 export declare class GdsFormSummary extends GdsElement {
     #private;

package/components/form-summary/summary.component.js

@@ -7,9 +7,7 @@ import {
 } from "../../chunks/chunk.H2T4A5YY.js";
 var _form, _formObserver, _GdsFormSummary_instances, renderControlItem_fn, groupByFieldset_fn, getFormControls_fn, getErrorControls_fn, renderArrowIcon_fn;
 import { msg, str } from "@lit/localize";
-import { nothing } from "lit";
 import { property, queryAsync } from "lit/decorators.js";
-import { until } from "lit/directives/until.js";
 import { when } from "lit/directives/when.js";
 import { GdsElement } from "../../gds-element.js";
 import { gdsCustomElement, html } from "../../scoping.js";
@@ -43,9 +41,9 @@ let GdsFormSummary = class extends GdsElement {
    * Focuses the first focusable element in the summary.
    */
   focus(options) {
-    this._elRoot.then((el) => {
-      const firstFocusable = el.querySelector(
-        '[gds-element="gds-button"]'
+    void this._elRoot.then((el) => {
+      const firstFocusable = el?.querySelector(
+        'li.item:not([inert]) [gds-element="gds-button"]'
       );
       if (firstFocusable) {
         firstFocusable.focus(options);
@@ -89,7 +87,6 @@ let GdsFormSummary = class extends GdsElement {
           border-color="negative-01"
           border-radius="m"
           overflow="hidden"
-          aria-describedby="description"
           aria-label=${msg(`Form error summary`)}
         >
           <gds-flex gap="0" flex-direction="column">
@@ -137,6 +134,7 @@ _form = new WeakMap();
 _formObserver = new WeakMap();
 _GdsFormSummary_instances = new WeakSet();
 renderControlItem_fn = function(el) {
+  const label = el.dataset.label || el.label || el.ariaLabel;
   return html`<li
       class="item"
       ?inert=${!(el.ariaInvalid === "true" || el.invalid)}
@@ -155,20 +153,23 @@ renderControlItem_fn = function(el) {
         padding="xs s"
         @click=${(e) => {
     e.preventDefault();
-    el.focus();
+    const proceed = this.dispatchCustomEvent("gds-control-focus", {
+      detail: { control: el },
+      bubbles: false,
+      composed: false
+    });
+    if (proceed) el.focus();
   }}
       >
         <div>
-          <gds-div font-weight="book"
-            >${el.dataset.label || el.label || el.ariaLabel}</gds-div
-          >
+          <gds-div font-weight="book">${label}</gds-div>
         </div>
         <gds-button
           size="xs"
           rank="secondary"
-          label=${`Move focus to ${el.label} field`}
+          label=${msg(str`Move focus to ${label} field`)}
         >
-          ${until(__privateMethod(this, _GdsFormSummary_instances, renderArrowIcon_fn).call(this, el), nothing)}
+          ${__privateMethod(this, _GdsFormSummary_instances, renderArrowIcon_fn).call(this, el)}
         </gds-button>
       </gds-card>
     </li>`;
@@ -204,10 +205,10 @@ getErrorControls_fn = function() {
     (el) => el.ariaInvalid === "true" || el.invalid
   );
 };
-renderArrowIcon_fn = async function(el) {
-  const selfTop = (await this._elRoot).getBoundingClientRect().top;
-  const elTop = el.getBoundingClientRect().top;
-  const isAbove = elTop < selfTop;
+renderArrowIcon_fn = function(el) {
+  const isAbove = Boolean(
+    this.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING
+  );
   return when(
     isAbove,
     () => html`<gds-icon-arrow-up></gds-icon-arrow-up>`,