@sebgroup/green-core 1.69.4 → 1.70.1

package/components/popover/popover.component.js

@@ -0,0 +1,427 @@
+import {
+  __decorateClass,
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "../../chunks/chunk.QTSIPXV3.js";
+var _handleTriggerSlotChange, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _setupTriggerAttributes, setupTriggerAttributes_fn, _registerAutoPositioning, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside;
+import { localized, msg } from "@lit/localize";
+import { unsafeCSS } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+  autoUpdate,
+  computePosition,
+  offset,
+  shift
+} from "@floating-ui/dom";
+import { GdsElement } from "../../gds-element";
+import { gdsCustomElement, html } from "../../scoping";
+import { TransitionalStyles } from "../../transitional-styles";
+import { watch, watchMediaQuery } from "../../utils/decorators";
+import { IconCrossSmall } from "../icon/icons/cross-small.component";
+import styles from "./popover.styles";
+let 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.popupRole = "dialog";
+    this.label = void 0;
+    this.placement = "bottom-start";
+    this.disableMobileStyles = false;
+    this.autofocus = false;
+    this.calcMinWidth = (referenceEl) => `${referenceEl.offsetWidth}px`;
+    this.calcMaxWidth = (_referenceEl) => `auto`;
+    this.calcMinHeight = (_referenceEl) => `auto`;
+    this.calcMaxHeight = (_referenceEl) => `${window.innerHeight - 16}px`;
+    this.nonmodal = false;
+    this.floatingUIMiddleware = GdsPopover.DefaultMiddleware;
+    this._trigger = void 0;
+    this._anchor = void 0;
+    this._isVirtKbVisible = false;
+    // 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, _backdropEl, void 0);
+    __privateAdd(this, _handleCancel, () => {
+      if (__privateGet(this, _dispatchUiStateEvent).call(this, "cancel"))
+        this.open = false;
+    });
+    __privateAdd(this, _dispatchUiStateEvent, (reason) => {
+      const toState = reason === "show" ? true : false;
+      return this.dispatchEvent(
+        new CustomEvent("gds-ui-state", {
+          detail: { open: toState, reason },
+          bubbles: false,
+          composed: false,
+          cancelable: true
+        })
+      );
+    });
+    __privateAdd(this, _handleCloseButton, (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (__privateGet(this, _dispatchUiStateEvent).call(this, "close")) {
+        this.open = false;
+        setTimeout(() => this._trigger?.focus(), 250);
+      }
+    });
+    /**
+     * ArrowDown or ArrowUp on the trigger element will trigger the popover by default, and escape will close it.
+     */
+    __privateAdd(this, _handleTriggerKeyDown, (e) => {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+        e.preventDefault();
+        this.open = true;
+        __privateGet(this, _dispatchUiStateEvent).call(this, "show");
+      }
+      if (e.key === "Escape" && this.open) {
+        __privateGet(this, _handleCancel).call(this);
+      }
+    });
+    __privateAdd(this, _handleTriggerClick, (e) => {
+      e.preventDefault();
+      if (__privateGet(this, _dispatchUiStateEvent).call(this, this.open ? "close" : "show"))
+        this.open = !this.open;
+    });
+    /**
+     * Move focus to the first slotted child.
+     */
+    __privateAdd(this, _focusFirstSlottedChild, () => {
+      const firstSlottedChild = this._elDefaultSlot?.assignedElements()[0];
+      this.updateComplete.then(() => {
+        firstSlottedChild?.focus();
+      });
+    });
+    __privateAdd(this, _handleClickOutside, (evt) => {
+      const e = evt;
+      const dialog = this._elDialog;
+      const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
+      if (isNotEnterKey && dialog && this.open) {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
+        if (!isInDialog && __privateGet(this, _dispatchUiStateEvent).call(this, "close")) {
+          this.open = false;
+        }
+      }
+    });
+  }
+  _handleTriggerRefChanged() {
+    this.triggerRef?.then((el) => {
+      if (el)
+        this._trigger = el;
+    });
+  }
+  _handleAnchorRefChanged() {
+    this.anchorRef?.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() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-popover");
+    __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
+    this._handleOpenChange();
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.open) {
+        __privateGet(this, _handleCancel).call(this);
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+    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 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.disableMobileStyles,
+      "has-backdrop": Boolean(this.backdrop && this.backdrop === "true")
+    })}"
+          ?inert="${!this.open}"
+          @close=${() => this.open && __privateGet(this, _handleCancel).call(this)}
+        >
+          <header>
+            <h2>${this.label}</h2>
+            <gds-button
+              @click=${__privateGet(this, _handleCloseButton)}
+              class="close"
+              label="${msg("Close")}"
+              size="small"
+              rank="tertiary"
+            >
+              <gds-icon-cross-small></gds-icon-cross-small>
+            </gds-button>
+          </header>
+          <slot></slot>
+        </dialog>
+      </div>`;
+  }
+  _handleOpenChange() {
+    const clickOutsideTarget = (this.nonmodal ? __privateGet(this, _backdropEl) : this._elDialog) || document;
+    this.updateComplete.then(() => {
+      this._trigger?.setAttribute("aria-expanded", String(this.open));
+      if (this.open) {
+        !this.nonmodal ? this._elDialog?.showModal() : this._elDialog?.setAttribute("open", "true");
+        if (this.autofocus) {
+          __privateGet(this, _focusFirstSlottedChild).call(this);
+          setTimeout(() => __privateGet(this, _focusFirstSlottedChild).call(this), 250);
+        }
+        requestAnimationFrame(() => {
+          if (__privateGet(this, _backdropEl))
+            __privateGet(this, _backdropEl).show = true;
+        });
+        setTimeout(
+          () => clickOutsideTarget.addEventListener(
+            "click",
+            __privateGet(this, _handleClickOutside)
+          ),
+          0
+        );
+      } else {
+        this._elDialog?.close();
+        clickOutsideTarget.removeEventListener(
+          "click",
+          __privateGet(this, _handleClickOutside)
+        );
+        if (__privateGet(this, _backdropEl))
+          __privateGet(this, _backdropEl).show = false;
+      }
+    });
+  }
+  _handleBackdropChange() {
+    const parentRoot = this.parentElement?.getRootNode();
+    if (!this.backdrop || !parentRoot)
+      return;
+    __privateSet(this, _backdropEl, parentRoot.querySelector(this.backdrop));
+  }
+  _handleMobileLayout(matches) {
+    var _a;
+    __privateSet(this, _isMobileViewport, matches);
+    if (matches && !this.disableMobileStyles) {
+      (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
+      this._elDialog?.style.removeProperty("left");
+      this._elDialog?.style.removeProperty("top");
+      this._elDialog?.style.removeProperty("minWidth");
+      this.updateComplete.then(() => {
+        if (this.open)
+          this._elDialog?.showModal();
+      });
+    } else {
+      this.updateComplete.then(() => {
+        __privateMethod(this, _registerAutoPositioning, registerAutoPositioning_fn).call(this);
+      });
+    }
+  }
+};
+_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();
+_backdropEl = new WeakMap();
+_handleCancel = new WeakMap();
+_dispatchUiStateEvent = new WeakMap();
+_handleCloseButton = new WeakMap();
+_registerTriggerEvents = new WeakSet();
+registerTriggerEvents_fn = function() {
+  this._trigger?.addEventListener("keydown", __privateGet(this, _handleTriggerKeyDown));
+  this._trigger?.addEventListener("click", __privateGet(this, _handleTriggerClick));
+};
+_unregisterTriggerEvents = new WeakSet();
+unregisterTriggerEvents_fn = function() {
+  var _a;
+  this._trigger?.removeEventListener("keydown", __privateGet(this, _handleTriggerKeyDown));
+  this._trigger?.removeEventListener("click", __privateGet(this, _handleTriggerClick));
+  (_a = __privateGet(this, _autoPositionCleanupFn)) == null ? void 0 : _a.call(this);
+};
+_setupTriggerAttributes = new WeakSet();
+setupTriggerAttributes_fn = function() {
+  if (this._trigger) {
+    this._trigger?.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() {
+  if (!this._anchor || !this._elDialog) {
+    return;
+  }
+  const referenceEl = this._anchor;
+  const floatingEl = this._elDialog;
+  if (!referenceEl || !floatingEl || __privateGet(this, _isMobileViewport) && !this.disableMobileStyles)
+    return;
+  if (__privateGet(this, _autoPositionCleanupFn)) {
+    __privateGet(this, _autoPositionCleanupFn).call(this);
+  }
+  __privateSet(this, _autoPositionCleanupFn, autoUpdate(referenceEl, floatingEl, () => {
+    Object.assign(floatingEl.style, {
+      minWidth: this.calcMinWidth(referenceEl),
+      maxWidth: this.calcMaxWidth(referenceEl),
+      minHeight: this.calcMinHeight(referenceEl),
+      maxHeight: this.calcMaxHeight(referenceEl)
+    });
+    computePosition(referenceEl, floatingEl, {
+      placement: this.placement,
+      middleware: this.floatingUIMiddleware,
+      strategy: "fixed"
+    }).then(
+      ({ x, y }) => Object.assign(floatingEl.style, {
+        left: `${x}px`,
+        top: `${y}px`
+      })
+    );
+  }));
+};
+_handleTriggerKeyDown = new WeakMap();
+_handleTriggerClick = new WeakMap();
+_focusFirstSlottedChild = new WeakMap();
+_handleClickOutside = new WeakMap();
+GdsPopover.styles = unsafeCSS(styles);
+/**
+ * The default set of middleware for Floating UI positioning used by GdsPopover.
+ */
+GdsPopover.DefaultMiddleware = [
+  offset(8),
+  shift({
+    crossAxis: true,
+    padding: 8
+  })
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsPopover.prototype, "open", 2);
+__decorateClass([
+  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);
+__decorateClass([
+  property()
+], GdsPopover.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsPopover.prototype, "disableMobileStyles", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsPopover.prototype, "autofocus", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "calcMinWidth", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "calcMaxWidth", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "calcMinHeight", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "calcMaxHeight", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsPopover.prototype, "nonmodal", 2);
+__decorateClass([
+  property()
+], GdsPopover.prototype, "backdrop", 2);
+__decorateClass([
+  property({ attribute: false })
+], GdsPopover.prototype, "floatingUIMiddleware", 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);
+__decorateClass([
+  watch("backdrop")
+], GdsPopover.prototype, "_handleBackdropChange", 1);
+__decorateClass([
+  watchMediaQuery("(max-width: 576px)")
+], GdsPopover.prototype, "_handleMobileLayout", 1);
+GdsPopover = __decorateClass([
+  gdsCustomElement("gds-popover", { dependsOn: [IconCrossSmall] }),
+  localized()
+], GdsPopover);
+export {
+  GdsPopover
+};

package/components/popover/popover.d.ts

@@ -1,128 +1,2 @@
-import { Middleware, Placement } from '@floating-ui/dom';
-import { GdsElement } from '../../gds-element';
-import '../icon/icons/cross-small';
-export type UIStateChangeReason = 'show' | 'close' | 'cancel';
-/**
- * @element gds-popover
- * @status stable
- *
- * A popover is a transient view that appears above other content. It is used by components such as dropdowns.
- *
- * GdsPopover can be supplied with a trigger through the `trigger` property. If a trigger is specified, the popover will
- * register a keydown listener on the trigger and listen to `ArrowDown` key presses. When the trigger is focused and
- * `ArrowDown` is pressed, the popover will open and focus the first slotted child.
- *
- * @fires gds-ui-state - Fired when the popover is opened or closed. Can be cancelled to prevent the popover from opening or closing. The `detail` object contains the `open` boolean to indicate the result of the state change, and the `reason` string which can be one of `show`, `close`, or `cancel`.
- *
- * @slot - Content of the popover
- * @slot trigger - Trigger element for the popover. If this slot is occupied, the popover will listen to keydown and click events on the trigger and automtaiclly open when clicked or when the trigger is focused and `ArrowDown` is pressed.
- */
-export declare class GdsPopover extends GdsElement {
-    #private;
-    static styles: import("lit").CSSResult;
-    /**
-     * The default set of middleware for Floating UI positioning used by GdsPopover.
-     */
-    static DefaultMiddleware: Middleware[];
-    /**
-     * Whether the popover is open.
-     */
-    open: boolean;
-    /**
-     * This is used to indicate the semantic role of the popover. This will set the `aria-haspopup` attribute on the trigger element.
-     * Read here for more information: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup
-     */
-    popupRole: 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
-    /**
-     * Optional way to assign a trigger element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the trigger element programatically.
-     */
-    triggerRef?: Promise<HTMLElement>;
-    /**
-     * Optional way to assign an anchor element for the popover. When using Lit, this can take a value from a `@queryAsync` decorator in order to set the anchor element programatically.
-     */
-    anchorRef?: Promise<HTMLElement>;
-    /**
-     * Optional trigger element for the popover.
-     */
-    label: string | undefined;
-    /**
-     * The placement of the popover relative to the trigger.
-     * Accepts any of the placements supported by Floating UI.
-     */
-    placement: Placement;
-    /**
-     * Whether to use a modal dialog in mobile viewport.
-     */
-    disableMobileStyles: boolean;
-    /**
-     * Whether the popover should autofocus the first slotted child when opened.
-     */
-    autofocus: boolean;
-    /**
-     * A callback that returns the minimum width of the popover.
-     * By default, the popover minWidth will be as wide as the trigger element.
-     */
-    calcMinWidth: (referenceEl: HTMLElement) => string;
-    /**
-     * A callback that returns the maximum width of the popover.
-     * By default, the popover maxWidth will be set to `auto` and will grow as needed.
-     */
-    calcMaxWidth: (_referenceEl: HTMLElement) => string;
-    /**
-     * A callback that returns the minimum height of the popover.
-     * By default, the popover minHeight will be set to `auto`
-     */
-    calcMinHeight: (_referenceEl: HTMLElement) => string;
-    /**
-     * A callback that returns the maximum height of the popover.
-     * By default, the popover maxHeight will be set to a hard coded pixel value (check source code).
-     */
-    calcMaxHeight: (_referenceEl: HTMLElement) => string;
-    /**
-     * Whether the popover is nonmodal. When true, the popover will not trap focus and other elements
-     * on the page will still be interactable while the popover is open.
-     */
-    nonmodal: boolean;
-    /**
-     * When this is set to `true`, the `:backdrop` pseudo-element will be visible if the popover is
-     * in modal mode. When not in modal mode (using the `nonmodal` attribute), this can instead be
-     * set to a selector matching a `<gds-backdrop>` element, in wich case the popover will take
-     * control of that backdrop.
-     *
-     * Example:
-     * ```html
-     * <gds-popover backdrop=".my-backdrop">
-     *   <gds-button slot="trigger">Open</gds-button>
-     *   <p>Popover content</p>
-     * </gds-popover>
-     * <gds-backdrop class="my-backdrop"></gds-backdrop>
-     * ```
-     */
-    backdrop?: string;
-    /**
-     * An array of middleware for the Floating UI positioning algorithm. Here you can pass in an array
-     * of middleware to customize positioning to your needs. This array is passed directly to Floting UI,
-     * so you can just follow the documentation here: https://floating-ui.com/docs/middleware
-     *
-     * This property does not have a corresponding attribute, so it can only be set in JavaScript.
-     *
-     * Defaults to `[offset(8), flip()]`
-     */
-    floatingUIMiddleware: Middleware[];
-    private _trigger;
-    private _anchor;
-    private _isVirtKbVisible;
-    private _elDefaultSlot;
-    private _elTriggerSlot;
-    private _elDialog;
-    private _handleTriggerRefChanged;
-    private _handleAnchorRefChanged;
-    private _handleTriggerChanged;
-    private _handleAnchorChanged;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): any;
-    private _handleOpenChange;
-    private _handleBackdropChange;
-    private _handleMobileLayout;
-}
+import { GdsPopover } from './popover.component';
+export { GdsPopover };

package/components/popover/popover.js

@@ -1,18 +1,6 @@
-import {
-  GdsPopover
-} from "../../chunks/chunk.RZSPZXEW.js";
-import "../../chunks/chunk.UDVUT4HS.js";
-import "../../chunks/chunk.GUAH7AIO.js";
-import "../../chunks/chunk.WM7HBMMV.js";
-import "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.TYGMNHNO.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.YO24ZYAD.js";
-import "../../chunks/chunk.TMEWQZER.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { GdsPopover } from "./popover.component";
+GdsPopover.define();
 export {
   GdsPopover
 };

package/components/popover/popover.styles.js

@@ -0,0 +1,94 @@
+import "../../chunks/chunk.QTSIPXV3.js";
+import { css } from "lit";
+const style = css`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      display: contents;
+    }
+
+    :host > div:not([hidden]) {
+      display: contents;
+    }
+
+    :host([open]) dialog {
+      opacity: 1;
+      box-sizing: border-box;
+      /*transform: translate3d(0, 0, 0);*/
+      visibility: visible;
+    }
+
+    dialog {
+      display: flex;
+      flex-direction: column;
+      inset: auto;
+      position: fixed;
+      overflow: hidden;
+      padding: 0px;
+      box-sizing: border-box;
+      right: 0;
+      margin: 0;
+      box-shadow:
+        0 0 0 1px rgba(0, 0, 0, 0.2),
+        0 1rem 28px rgba(0, 0, 0, 0.15);
+      border-width: 0;
+      border-radius: 0.5rem;
+    }
+
+    :host([nonmodal]) dialog {
+      z-index: 1;
+    }
+
+    @media (max-width: 767px) {
+      dialog.use-modal-in-mobile {
+        border-radius: 1rem 1rem 0 0;
+        transition: all 200ms ease;
+        min-width: 100vw;
+        position: fixed;
+        bottom: 0;
+        left: 0;
+
+        max-height: 50svh;
+        padding-bottom: 0;
+
+        transform: translateY(0);
+        @starting-style {
+          transform: translateY(100%);
+        }
+
+        &::backdrop {
+          background-color: rgba(0, 0, 0, 0.3);
+          display: block;
+          position: fixed;
+          opacity: 1;
+          transition: opacity 200ms ease;
+          @starting-style {
+            opacity: 0;
+          }
+        }
+      }
+    }
+
+    @media (min-width: 768px) {
+      header {
+        display: none;
+      }
+    }
+
+    header {
+      display: none;
+    }
+
+    @media (min-width: 768px) {
+      dialog:not(.has-backdrop)::backdrop {
+        background-color: transparent;
+        display: block;
+        position: fixed;
+      }
+    }
+  }
+`;
+var popover_styles_default = style;
+export {
+  popover_styles_default as default
+};

package/components/popover/popover.trans.styles.js

@@ -1,12 +1,10 @@
-import {
-  popover_trans_styles_default,
-  register2 as register
-} from "../../chunks/chunk.T4D3GD4D.js";
-import "../../chunks/chunk.HEZEUVHT.js";
-import "../../chunks/chunk.6QMJ7GQK.js";
-import "../../chunks/chunk.QK3R23GV.js";
-import "../../chunks/chunk.B7ZOSVCQ.js";
-import "../../chunks/chunk.SEHSDSX2.js";
+import "../../chunks/chunk.QTSIPXV3.js";
+import { TransitionalStyles } from "../../utils/transitional-styles/transitional-styles";
+import styles from "./popover.trans.styles.scss.js";
+function register() {
+  TransitionalStyles.instance.register("gds-popover", styles.toString());
+}
+var popover_trans_styles_default = register;
 export {
   popover_trans_styles_default as default,
   register