@sebgroup/green-core 1.21.2 → 1.22.0

package/chunks/{chunk.RR73DCKW.js → chunk.3NDQ53OL.js}

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

package/chunks/{chunk.T47FZ32J.js → chunk.5IFR5NGK.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.2ND5EWHE.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.KDQIFEAP.js → chunk.A5T4P7QS.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.3SXUKXZV.js → chunk.AB2OQWFX.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.2ND5EWHE.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.MU5DFDDU.js → chunk.AEGZCLBR.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";
@@ -80,7 +80,6 @@ var GdsContextMenu = class extends GdsElement {
         aria-haspopup="menu"
         aria-controls="menu"
         aria-expanded=${this.open}
-        @click=${() => this.open = !this.open}
       >
         <slot name="trigger">
           ${this.showLabel ? (_b = this.buttonLabel) != null ? _b : this.label : nothing}
@@ -96,6 +95,7 @@ var GdsContextMenu = class extends GdsElement {
         id="menu"
         .open=${this.open}
         .triggerRef=${this.elTriggerBtn}
+        .anchorRef=${this.elTriggerBtn}
         .label=${this.label}
         .placement=${this.placement}
         @gds-ui-state=${(e) => this.open = e.detail.open}

package/chunks/{chunk.77RANRZR.js → chunk.C2MXNUCE.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.KBYQYDL3.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.FHNY57AB.js → chunk.DFW523YG.js}

@@ -1,15 +1,15 @@
 import {
   GdsSegment
-} from "./chunk.ZWAAQYUP.js";
+} from "./chunk.TIBYVWJK.js";
 import {
   resizeObserver
 } from "./chunk.VHN4JEZC.js";
 import {
   tokens
-} from "./chunk.HT7H7ZIV.js";
+} from "./chunk.VH7TVVFL.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.4ZZYYAX4.js → chunk.DHSXS2A3.js}

@@ -1,6 +1,6 @@
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   watchMediaQuery
 } from "./chunk.WM7HBMMV.js";
@@ -21,12 +21,11 @@ import {
   __privateSet
 } from "./chunk.5VURDMKE.js";
 
-// libs/core/src/primitives/popover/popover.ts
+// libs/core/src/components/popover/popover.ts
 import { html, unsafeCSS } from "lit";
-import { property, state } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
-import { createRef, ref } from "lit/directives/ref.js";
 import {
   computePosition,
   autoUpdate,
@@ -34,11 +33,15 @@ import {
   flip
 } from "@floating-ui/dom";
 
-// libs/core/src/primitives/popover/popover.styles.ts
+// libs/core/src/components/popover/popover.styles.ts
 import { css } from "lit";
 var style = css`
   @layer base, reset, transitional-styles;
   @layer base {
+    :host {
+      display: contents;
+    }
+
     :host([open]) dialog {
       opacity: 1;
       box-sizing: border-box;
@@ -74,26 +77,28 @@ var style = css`
 `;
 var popover_styles_default = style;
 
-// libs/core/src/primitives/popover/popover.ts
-var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
+// libs/core/src/components/popover/popover.ts
+var _handleTriggerSlotChange, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _setupTriggerAttributes, setupTriggerAttributes_fn, _registerAutoPositioning, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside;
 var GdsPopover = class extends GdsElement {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _handleTriggerSlotChange);
     __privateAdd(this, _registerTriggerEvents);
     __privateAdd(this, _unregisterTriggerEvents);
+    __privateAdd(this, _setupTriggerAttributes);
     __privateAdd(this, _registerAutoPositioning);
     this.open = false;
-    this.triggerRef = Promise.resolve(void 0);
+    this.popupRole = "dialog";
     this.label = void 0;
     this.placement = "bottom-start";
+    this.useModalInMobileView = false;
     this.calcMinWidth = (referenceEl) => `${referenceEl.offsetWidth}px`;
     this.calcMaxWidth = (_referenceEl) => `auto`;
-    this.calcMinHeight = (referenceEl) => `auto`;
+    this.calcMinHeight = (_referenceEl) => `auto`;
     this.calcMaxHeight = (_referenceEl) => `500px`;
     this._trigger = void 0;
+    this._anchor = void 0;
     this._isVirtKbVisible = false;
-    // A reference to the dialog element used to make the popover modal
-    __privateAdd(this, _dialogElementRef, createRef());
     // A function that removes the Floating UI auto positioning. This gets called when we switch to mobile view layout.
     __privateAdd(this, _autoPositionCleanupFn, void 0);
     __privateAdd(this, _isMobileViewport, false);
@@ -117,10 +122,10 @@ var GdsPopover = class extends GdsElement {
       }, 250);
     });
     /**
-     * ArrowDown on the trigger element will trigger the popover by default, and escape will close it.
+     * ArrowDown or ArrowUp on the trigger element will trigger the popover by default, and escape will close it.
      */
-    __privateAdd(this, _triggerKeyDownListener, (e) => {
-      if (e.key === "ArrowDown") {
+    __privateAdd(this, _handleTriggerKeyDown, (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
         e.preventDefault();
         this.open = true;
         __privateGet(this, _dispatchUiStateEvent).call(this, "show");
@@ -130,19 +135,24 @@ var GdsPopover = class extends GdsElement {
         __privateGet(this, _dispatchUiStateEvent).call(this, "cancel");
       }
     });
+    __privateAdd(this, _handleTriggerClick, (e) => {
+      e.preventDefault();
+      this.open = !this.open;
+      __privateGet(this, _dispatchUiStateEvent).call(this, this.open ? "show" : "close");
+    });
     /**
      * Move focus to the first slotted child.
      */
     __privateAdd(this, _focusFirstSlottedChild, () => {
-      var _a, _b;
-      const firstSlottedChild = (_b = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("slot")) == null ? void 0 : _b.assignedElements()[0];
+      var _a;
+      const firstSlottedChild = (_a = this._elDefaultSlot) == null ? void 0 : _a.assignedElements()[0];
       this.updateComplete.then(() => {
         firstSlottedChild == null ? void 0 : firstSlottedChild.focus();
       });
     });
-    __privateAdd(this, _clickOutsideListener, (evt) => {
+    __privateAdd(this, _handleClickOutside, (evt) => {
       const e = evt;
-      const dialog = __privateGet(this, _dialogElementRef).value;
+      const dialog = this._elDialog;
       const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
       if (isNotEnterKey && dialog && this.open) {
         const rect = dialog.getBoundingClientRect();
@@ -156,13 +166,24 @@ var GdsPopover = class extends GdsElement {
     });
   }
   _handleTriggerRefChanged() {
-    this.triggerRef.then((el) => {
+    var _a;
+    (_a = this.triggerRef) == null ? void 0 : _a.then((el) => {
       if (el)
         this._trigger = el;
     });
   }
+  _handleAnchorRefChanged() {
+    var _a;
+    (_a = this.anchorRef) == null ? void 0 : _a.then((el) => {
+      if (el)
+        this._anchor = el;
+    });
+  }
   _handleTriggerChanged() {
     __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
+    __privateMethod(this, _setupTriggerAttributes, setupTriggerAttributes_fn).call(this);
+  }
+  _handleAnchorChanged() {
     __privateMethod(this, _registerAutoPositioning, registerAutoPositioning_fn).call(this);
   }
   connectedCallback() {
@@ -195,62 +216,67 @@ var GdsPopover = class extends GdsElement {
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html`<dialog
-      class="${classMap({ "v-kb-visible": this._isVirtKbVisible })}"
-      ${ref(__privateGet(this, _dialogElementRef))}
-    >
-      <header>
-        <h2>${this.label}</h2>
-        <button
-          class="close"
-          @click=${__privateGet(this, _handleCloseButton)}
-          aria-label="${msg("Close")}"
+    return html`<slot
+        name="trigger"
+        @slotchange=${__privateMethod(this, _handleTriggerSlotChange, handleTriggerSlotChange_fn)}
+      ></slot>
+      <div ?hidden="${!this.open}">
+        <dialog
+          class="${classMap({
+      "v-kb-visible": this._isVirtKbVisible,
+      "use-modal-in-mobile": this.useModalInMobileView
+    })}"
+          aria-hidden="${String(!this.open)}"
+          @close=${() => this.open = false}
         >
-          <i></i>
-        </button>
-      </header>
-      <slot></slot>
-    </dialog>`;
+          <header>
+            <h2>${this.label}</h2>
+            <gds-button
+              @click=${__privateGet(this, _handleCloseButton)}
+              class="close"
+              label="${msg("Close")}"
+              size="small"
+              rank="tertiary"
+            >
+              <gds-icon-cross-small></icon-cross-small>
+            </gds-button>
+          </header>
+          <slot></slot>
+        </dialog>
+      </div>`;
   }
   _handleOpenChange() {
-    this.setAttribute("aria-hidden", String(!this.open));
-    this.hidden = !this.open;
     this.updateComplete.then(() => {
-      var _a, _b, _c;
+      var _a, _b, _c, _d;
+      (_a = this._trigger) == null ? void 0 : _a.setAttribute("aria-expanded", String(this.open));
       if (this.open) {
-        (_a = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _a.showModal();
+        (_b = this._elDialog) == null ? void 0 : _b.showModal();
         __privateGet(this, _focusFirstSlottedChild).call(this);
         setTimeout(
           () => {
             var _a2;
-            return (_a2 = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _a2.addEventListener(
-              "click",
-              __privateGet(this, _clickOutsideListener)
-            );
+            return (_a2 = this._elDialog) == null ? void 0 : _a2.addEventListener("click", __privateGet(this, _handleClickOutside));
           },
           0
         );
       } else {
-        (_b = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _b.close();
-        (_c = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _c.removeEventListener(
-          "click",
-          __privateGet(this, _clickOutsideListener)
-        );
+        (_c = this._elDialog) == null ? void 0 : _c.close();
+        (_d = this._elDialog) == null ? void 0 : _d.removeEventListener("click", __privateGet(this, _handleClickOutside));
       }
     });
   }
   _handleMobileLayout(matches) {
     var _a, _b, _c, _d;
     __privateSet(this, _isMobileViewport, matches);
-    if (matches) {
+    if (matches && this.useModalInMobileView) {
       (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
-      (_b = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _b.style.removeProperty("left");
-      (_c = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _c.style.removeProperty("top");
-      (_d = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _d.style.removeProperty("minWidth");
+      (_b = this._elDialog) == null ? void 0 : _b.style.removeProperty("left");
+      (_c = this._elDialog) == null ? void 0 : _c.style.removeProperty("top");
+      (_d = this._elDialog) == null ? void 0 : _d.style.removeProperty("minWidth");
       this.updateComplete.then(() => {
         var _a2;
         if (this.open)
-          (_a2 = __privateGet(this, _dialogElementRef).value) == null ? void 0 : _a2.showModal();
+          (_a2 = this._elDialog) == null ? void 0 : _a2.showModal();
       });
     } else {
       this.updateComplete.then(() => {
@@ -259,27 +285,55 @@ var GdsPopover = class extends GdsElement {
     }
   }
 };
-_dialogElementRef = new WeakMap();
+_handleTriggerSlotChange = new WeakSet();
+handleTriggerSlotChange_fn = function() {
+  if (this._elTriggerSlot && this._elTriggerSlot.assignedElements()[0]) {
+    this._trigger = this._elTriggerSlot.assignedElements()[0];
+    this._anchor = this._elTriggerSlot.assignedElements()[0];
+  }
+};
 _autoPositionCleanupFn = new WeakMap();
 _isMobileViewport = new WeakMap();
 _dispatchUiStateEvent = new WeakMap();
 _handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
-  var _a;
-  (_a = this._trigger) == null ? void 0 : _a.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
+  var _a, _b;
+  (_a = this._trigger) == null ? void 0 : _a.addEventListener("keydown", __privateGet(this, _handleTriggerKeyDown));
+  (_b = this._trigger) == null ? void 0 : _b.addEventListener("click", __privateGet(this, _handleTriggerClick));
 };
 _unregisterTriggerEvents = new WeakSet();
 unregisterTriggerEvents_fn = function() {
-  var _a, _b;
-  (_a = this._trigger) == null ? void 0 : _a.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
-  (_b = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _b.call(this);
+  var _a, _b, _c;
+  (_a = this._trigger) == null ? void 0 : _a.removeEventListener("keydown", __privateGet(this, _handleTriggerKeyDown));
+  (_b = this._trigger) == null ? void 0 : _b.removeEventListener("click", __privateGet(this, _handleTriggerClick));
+  (_c = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _c.call(this);
+};
+_setupTriggerAttributes = new WeakSet();
+setupTriggerAttributes_fn = function() {
+  var _a;
+  if (this._trigger) {
+    (_a = this._trigger) == null ? void 0 : _a.setAttribute("aria-expanded", String(this.open));
+    const focusableNodeNames = ["A", "BUTTON", "INPUT", "TEXTAREA"];
+    const isProbablyFocusable = this._trigger.nodeName.startsWith("GDS-") || focusableNodeNames.includes(this._trigger.nodeName);
+    if (!isProbablyFocusable) {
+      this._trigger.setAttribute("tabindex", "0");
+      this._trigger.setAttribute("role", "button");
+    }
+    const ariaHasPopupAttr = this._trigger.nodeName.startsWith("GDS-") ? "gds-aria-haspopup" : "aria-haspopup";
+    if (this._trigger.getAttribute(ariaHasPopupAttr) === null) {
+      this._trigger.setAttribute(ariaHasPopupAttr, this.popupRole);
+    }
+  }
 };
 _registerAutoPositioning = new WeakSet();
 registerAutoPositioning_fn = function() {
-  const referenceEl = this._trigger;
-  const floatingEl = __privateGet(this, _dialogElementRef).value;
-  if (!referenceEl || !floatingEl || __privateGet(this, _isMobileViewport))
+  if (!this._anchor || !this._elDialog) {
+    return;
+  }
+  const referenceEl = this._anchor;
+  const floatingEl = this._elDialog;
+  if (!referenceEl || !floatingEl || __privateGet(this, _isMobileViewport) && this.useModalInMobileView)
     return;
   if (__privateGet(this, _autoPositionCleanupFn)) {
     __privateGet(this, _autoPositionCleanupFn).call(this);
@@ -301,16 +355,23 @@ registerAutoPositioning_fn = function() {
     );
   }));
 };
-_triggerKeyDownListener = new WeakMap();
+_handleTriggerKeyDown = new WeakMap();
+_handleTriggerClick = new WeakMap();
 _focusFirstSlottedChild = new WeakMap();
-_clickOutsideListener = new WeakMap();
+_handleClickOutside = new WeakMap();
 GdsPopover.styles = unsafeCSS(popover_styles_default);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], GdsPopover.prototype, "open", 2);
 __decorateClass([
-  property()
+  property({ attribute: "popup-role" })
+], GdsPopover.prototype, "popupRole", 2);
+__decorateClass([
+  property({ attribute: false })
 ], GdsPopover.prototype, "triggerRef", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "anchorRef", 2);
 __decorateClass([
   property()
 ], GdsPopover.prototype, "label", 2);
@@ -319,28 +380,49 @@ __decorateClass([
 ], GdsPopover.prototype, "placement", 2);
 __decorateClass([
   property()
+], GdsPopover.prototype, "useModalInMobileView", 2);
+__decorateClass([
+  property({ attribute: false })
 ], GdsPopover.prototype, "calcMinWidth", 2);
 __decorateClass([
-  property()
+  property({ attribute: false })
 ], GdsPopover.prototype, "calcMaxWidth", 2);
 __decorateClass([
-  property()
+  property({ attribute: false })
 ], GdsPopover.prototype, "calcMinHeight", 2);
 __decorateClass([
-  property()
+  property({ attribute: false })
 ], GdsPopover.prototype, "calcMaxHeight", 2);
 __decorateClass([
   state()
 ], GdsPopover.prototype, "_trigger", 2);
+__decorateClass([
+  state()
+], GdsPopover.prototype, "_anchor", 2);
 __decorateClass([
   state()
 ], GdsPopover.prototype, "_isVirtKbVisible", 2);
+__decorateClass([
+  query("slot:not([name])")
+], GdsPopover.prototype, "_elDefaultSlot", 2);
+__decorateClass([
+  query('slot[name="trigger"]')
+], GdsPopover.prototype, "_elTriggerSlot", 2);
+__decorateClass([
+  query("dialog")
+], GdsPopover.prototype, "_elDialog", 2);
 __decorateClass([
   watch("triggerRef")
 ], GdsPopover.prototype, "_handleTriggerRefChanged", 1);
+__decorateClass([
+  watch("anchorRef")
+], GdsPopover.prototype, "_handleAnchorRefChanged", 1);
 __decorateClass([
   watch("_trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
+__decorateClass([
+  watch("_anchor")
+], GdsPopover.prototype, "_handleAnchorChanged", 1);
 __decorateClass([
   watch("open")
 ], GdsPopover.prototype, "_handleOpenChange", 1);

package/chunks/{chunk.2QXAOTCS.js → chunk.EOQOGT7K.js}

@@ -4,7 +4,7 @@ import {
 } from "./chunk.2X23R32H.js";
 import {
   TransitionalStyles
-} from "./chunk.SSRI6BF6.js";
+} from "./chunk.SCB55JEL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";

package/chunks/{chunk.XFKEBTU3.js → chunk.HL2NDSAL.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.NBEFLQNK.js";
 import {
   tokens
-} from "./chunk.HT7H7ZIV.js";
+} from "./chunk.VH7TVVFL.js";
 import {
   GdsElement
 } from "./chunk.ZQ4D5K7J.js";