@sebgroup/green-core 3.32.0 → 3.32.2

package/components/checkbox/checkbox.component.d.ts

@@ -35,6 +35,7 @@ export declare class GdsCheckbox extends GdsFormControlElement {
     set value(value: string);
     private _elCheckbox;
     private _handleIndeterminateChange;
+    private _handleCheckedChange;
     focus(options?: FocusOptions): void;
     render(): any;
     protected _getValidityAnchor(): HTMLElement;

package/components/checkbox/checkbox.component.js

@@ -55,6 +55,9 @@ let GdsCheckbox = class extends GdsFormControlElement {
       this.checked = false;
     }
   }
+  _handleCheckedChange() {
+    __privateMethod(this, _GdsCheckbox_instances, syncFormValue_fn).call(this);
+  }
   focus(options) {
     this._elCheckbox.focus(options);
   }
@@ -158,6 +161,9 @@ __decorateClass([
 __decorateClass([
   watch("indeterminate")
 ], GdsCheckbox.prototype, "_handleIndeterminateChange", 1);
+__decorateClass([
+  watch("checked")
+], GdsCheckbox.prototype, "_handleCheckedChange", 1);
 GdsCheckbox = __decorateClass([
   gdsCustomElement("gds-checkbox", {
     dependsOn: [GdsToggleControlBase, IconCheckmark, IconMinusSmall]

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/switch/switch.component.d.ts

@@ -26,6 +26,7 @@ declare class Switch extends GdsFormControlElement<string> {
      */
     get value(): string;
     set value(val: string);
+    private _handleCheckedChange;
     protected _getValidityAnchor(): HTMLElement;
     protected formResetCallback(): void;
     focus(options?: FocusOptions): void;

package/components/switch/switch.component.js

@@ -11,6 +11,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import { watch } from "../../utils/decorators/watch.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -55,6 +56,9 @@ let Switch = class extends GdsFormControlElement {
   set value(val) {
     this._internalValue = val;
   }
+  _handleCheckedChange() {
+    __privateMethod(this, _Switch_instances, syncFormValue_fn).call(this);
+  }
   _getValidityAnchor() {
     return this._input;
   }
@@ -176,6 +180,9 @@ __decorateClass([
 __decorateClass([
   query(".perimeter")
 ], Switch.prototype, "_perimeter", 2);
+__decorateClass([
+  watch("checked")
+], Switch.prototype, "_handleCheckedChange", 1);
 Switch = __decorateClass([
   ariaForwarding({
     labelledBy: "#switch-input",