@sebgroup/green-core 1.2.3 → 1.2.4

package/index.js

@@ -139,7 +139,7 @@ function watchMediaQuery(q) {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-b059fe";
+var VER_SUFFIX = "-001f73";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -585,6 +585,7 @@ GdsOption = __decorateClass([
 // libs/core/src/primitives/popover/popover.ts
 import { LitElement as LitElement3, html as html3, unsafeCSS } from "lit";
 import { property as property3, state } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
 import { msg } from "@lit/localize";
 import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 import {
@@ -763,7 +764,7 @@ var style3 = css3`
 var popover_styles_default = style3;
 
 // libs/core/src/primitives/popover/popover.ts
-var _dialogElementRef, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _autoPositionCleanup, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
+var _dialogElementRef, _autoPositionCleanupFn, _isMobileViewport, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild, _clickOutsideListener;
 var GdsPopover = class extends LitElement3 {
   constructor() {
     super(...arguments);
@@ -775,14 +776,18 @@ var GdsPopover = class extends LitElement3 {
     this.label = void 0;
     this.placement = "bottom-start";
     this._trigger = void 0;
+    this._isVirtKbVisible = false;
+    // A reference to the dialog element used to make the popover modal
     __privateAdd(this, _dialogElementRef, createRef2());
+    // 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);
     __privateAdd(this, _handleCloseButton, (e) => {
       e.stopPropagation();
       e.preventDefault();
       this.open = false;
       setTimeout(() => this._trigger?.focus(), 250);
     });
-    __privateAdd(this, _autoPositionCleanup, void 0);
     /**
      * ArrowDown on the trigger element will trigger the popover by default, and escape will close it.
      */
@@ -836,13 +841,27 @@ var GdsPopover = class extends LitElement3 {
         e.stopImmediatePropagation();
       }
     });
+    this.addEventListener("focusin", (e) => {
+      const t = e.target;
+      if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        this._isVirtKbVisible = true;
+      } else {
+        this._isVirtKbVisible = false;
+      }
+    });
+    this.addEventListener("blurin", (_) => {
+      this._isVirtKbVisible = false;
+    });
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html3`<dialog ${ref2(__privateGet(this, _dialogElementRef))}>
+    return html3`<dialog
+      class="${classMap2({ "v-kb-visible": this._isVirtKbVisible })}"
+      ${ref2(__privateGet(this, _dialogElementRef))}
+    >
       <header>
         <h2>${this.label}</h2>
         <button
@@ -888,10 +907,12 @@ var GdsPopover = class extends LitElement3 {
   }
   _handleMobileLayout(matches) {
     var _a;
+    __privateSet(this, _isMobileViewport, matches);
     if (matches) {
-      (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+      (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
       __privateGet(this, _dialogElementRef).value?.style.removeProperty("left");
       __privateGet(this, _dialogElementRef).value?.style.removeProperty("top");
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("minWidth");
       this.updateComplete.then(() => {
         if (this.open)
           __privateGet(this, _dialogElementRef).value?.showModal();
@@ -904,6 +925,8 @@ var GdsPopover = class extends LitElement3 {
   }
 };
 _dialogElementRef = new WeakMap();
+_autoPositionCleanupFn = new WeakMap();
+_isMobileViewport = new WeakMap();
 _handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
@@ -913,16 +936,18 @@ _unregisterTriggerEvents = new WeakSet();
 unregisterTriggerEvents_fn = function() {
   var _a;
   this._trigger?.removeEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
-  (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+  (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
 };
-_autoPositionCleanup = new WeakMap();
 _registerAutoPositioning = new WeakSet();
 registerAutoPositioning_fn = function() {
   const referenceEl = this._trigger;
   const floatingEl = __privateGet(this, _dialogElementRef).value;
-  if (!referenceEl || !floatingEl)
+  if (!referenceEl || !floatingEl || __privateGet(this, _isMobileViewport))
     return;
-  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, floatingEl, () => {
+  if (__privateGet(this, _autoPositionCleanupFn)) {
+    __privateGet(this, _autoPositionCleanupFn).call(this);
+  }
+  __privateSet(this, _autoPositionCleanupFn, autoUpdate(referenceEl, floatingEl, () => {
     computePosition(referenceEl, floatingEl, {
       placement: this.placement,
       middleware: [offset(8), flip(), topLayerOverTransforms()],
@@ -955,6 +980,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], GdsPopover.prototype, "_trigger", 2);
+__decorateClass([
+  state()
+], GdsPopover.prototype, "_isVirtKbVisible", 2);
 __decorateClass([
   watch("triggerRef")
 ], GdsPopover.prototype, "_handleTriggerRefChanged", 1);
@@ -1396,7 +1424,7 @@ GdsDropdown = __decorateClass([
 // libs/core/src/components/context-menu/context-menu.ts
 import { LitElement as LitElement6 } from "lit";
 import { msg as msg3 } from "@lit/localize";
-import { classMap as classMap2 } from "lit-html/directives/class-map.js";
+import { classMap as classMap3 } from "lit-html/directives/class-map.js";
 import { property as property6, queryAsync as queryAsync2 } from "lit/decorators.js";
 
 // libs/core/src/primitives/menu/menu.ts
@@ -1462,7 +1490,7 @@ var GdsContextMenu = class extends LitElement6 {
   render() {
     return html`<button
         id="trigger"
-        class="ghost border-0 small ${classMap2({ highlighted: this.open })}"
+        class="ghost border-0 small ${classMap3({ highlighted: this.open })}"
         aria-label="${this.buttonLabel}"
         aria-haspopup="menu"
         aria-controls="menu"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/popover/popover.d.ts

@@ -34,6 +34,7 @@ export declare class GdsPopover extends LitElement {
      */
     placement: Placement;
     private _trigger;
+    private _isVirtKbVisible;
     private _handleTriggerRefChanged;
     private _handleTriggerChanged;
     connectedCallback(): void;

package/transitional-styles.js

@@ -3808,13 +3808,16 @@ a.button.tertiary.danger:focus-visible {
 header {
   border-bottom: 1px solid var(--border-color);
   display: flex;
-  padding: 0.5rem 0.75rem;
+  padding: 0.25rem 0.75rem;
 }
 @media (min-width: 36em) {
   header {
     display: none;
   }
 }
+header button.close {
+  margin: -0.25rem;
+}
 
 header h2 {
   flex-grow: 1;
@@ -3885,7 +3888,13 @@ dialog .close {
 }
 @media (max-width: 35.98em) {
   dialog {
-    border-radius: 1rem;
+    border-radius: 0.5rem;
+    max-height: 80svh;
+  }
+  dialog.v-kb-visible {
+    inset-block-end: auto;
+    max-height: 50svh;
+    top: 1rem;
   }
 }
 @media (min-width: 36em) {
@@ -6347,7 +6356,7 @@ function register4() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-b059fe";
+var VER_SUFFIX = "-001f73";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {