@sebgroup/green-core 3.31.0 → 3.32.1

package/components/dropdown/dropdown.component.d.ts

@@ -132,6 +132,7 @@ declare class Dropdown extends GdsFormControlElement implements OptionsContainer
     get navigableItems(): GdsOption[];
     private _elTriggerBtn;
     private _elSearchInput;
+    private _elListbox;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): any;

package/components/dropdown/dropdown.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _optionElements, _Dropdown_instances, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, toggleOptionValue_fn, syncOptionSelection_fn, _focusListbox, _isPointerPressedInListbox, _handleListboxPointerDown, _handleListboxFocus, _isCommitting, commitSelection_fn, registerAutoCloseListener_fn, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _Dropdown_instances, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, toggleOptionValue_fn, syncOptionSelection_fn, _focusListbox, _isPointerPressedInListbox, _handleListboxPointerDown, _handleListboxFocus, _isCommitting, commitSelection_fn, scrollOptionIntoView_fn, registerAutoCloseListener_fn, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
@@ -162,6 +162,8 @@ let Dropdown = class extends GdsFormControlElement {
       }
       if (__privateGet(this, _dispatchUISateEvent).call(this, e.detail.open, e.detail.reason)) {
         this.open = e.detail.open;
+      } else {
+        e.preventDefault();
       }
     });
     __privateAdd(this, _handleClearButton, (e) => {
@@ -535,9 +537,7 @@ let Dropdown = class extends GdsFormControlElement {
     const selectedOption = this.options.find((option) => option.selected);
     requestAnimationFrame(async () => {
       await this.updateComplete;
-      selectedOption?.scrollIntoView({
-        block: "center"
-      });
+      __privateMethod(this, _Dropdown_instances, scrollOptionIntoView_fn).call(this, selectedOption);
     });
   }
 };
@@ -605,6 +605,22 @@ commitSelection_fn = function(value, options = {}) {
     __privateSet(this, _isCommitting, false);
   }
 };
+/**
+ * Centers an option inside the listbox container by adjusting the container's own
+ * `scrollTop`. `Element.scrollIntoView` was used here previously, but it also scrolls
+ * ancestor scrollports, including the window when the popover is non-modal (combobox
+ * mode). That self-inflicted page scroll closes the popover through its own
+ * scroll-to-close behavior. See #3290.
+ */
+scrollOptionIntoView_fn = function(option) {
+  const container = this._elListbox;
+  if (!container || !option) return;
+  const containerRect = container.getBoundingClientRect();
+  const optionRect = option.getBoundingClientRect();
+  const offsetFromContainerTop = optionRect.top - containerRect.top;
+  const centeredOffset = (containerRect.height - optionRect.height) / 2;
+  container.scrollTop += offsetFromContainerTop - centeredOffset;
+};
 registerAutoCloseListener_fn = function() {
   this.addEventListener("blur", __privateGet(this, _blurCloseListener));
   this.addEventListener("gds-blur", __privateGet(this, _blurCloseListener));
@@ -678,6 +694,9 @@ __decorateClass([
 __decorateClass([
   query("#searchinput")
 ], Dropdown.prototype, "_elSearchInput", 2);
+__decorateClass([
+  query("#listbox")
+], Dropdown.prototype, "_elListbox", 2);
 __decorateClass([
   observeLightDOM({
     attributes: true,

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>`,