@sebgroup/green-core 1.0.0-beta.14 → 1.0.0-beta.16

package/components/dropdown/dropdown.d.ts

@@ -40,6 +40,33 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * The value of the dropdown will be an array of the selected values.
      */
     multiple: boolean;
+    /**
+     * Delegate function for comparing option values.
+     * By default the option values are compared using strict equality.
+     * If you want to compare objects by field values, you can provide
+     * a custom compare function here. The function should return true
+     * if the values are considered equal.
+     *
+     * Example:
+     * ```ts
+     * dropdown.compareWith = (a, b) => a.id === b.id
+     * ```
+     */
+    compareWith: (a: ValueT, b: ValueT) => boolean;
+    /**
+     * Delegate function for customizing the search filtering.
+     * By default, the search filter will just check if the option label
+     * contains the search string using [String.includes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes).
+     *
+     * This property allows you to provide a custom filter function to use instead.
+     *
+     * For example, to filter on value instead of label:
+     * ```ts
+     * dropdown.searchFilter = (query, option) =>
+     *    option.value.toLowerCase().includes(query.toLowerCase())
+     * ```
+     */
+    searchFilter: (q: string, o: GdsOption) => boolean;
     constructor();
     connectedCallback(): void;
     /**

package/index.js

@@ -37,7 +37,7 @@ import { property as property5 } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { when as when2 } from "lit/directives/when.js";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
+import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 import { msg, str, updateWhenLocaleChanges } from "@lit/localize";
 import "reflect-metadata";
 
@@ -119,10 +119,31 @@ function observeLightDOM() {
   };
 }
 
+// libs/core/src/utils/decorators/watch-media-query.ts
+function watchMediaQuery(q) {
+  return (proto, _propertyKey, descriptor) => {
+    const mediaQuery = window.matchMedia(q);
+    const connectedCallback = proto.connectedCallback;
+    const disconnectedCallback = proto.disconnectedCallback;
+    proto.connectedCallback = function() {
+      connectedCallback?.call(this);
+      const listener = (e) => {
+        descriptor.value?.call(this, e.matches);
+      };
+      mediaQuery.addEventListener("change", listener);
+      this.disconnectedCallback = function() {
+        disconnectedCallback?.call(this);
+        mediaQuery.removeEventListener("change", listener);
+      };
+      descriptor.value?.call(this, mediaQuery.matches);
+    };
+  };
+}
+
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-00499f";
+var VER_SUFFIX = "-c16ded";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -381,6 +402,7 @@ var GdsListbox = class extends LitElement2 {
   constructor() {
     super();
     this.multiple = false;
+    this.compareWith = (a, b) => a === b;
     __privateAdd(this, _slotRef, createRef());
     __privateAdd(this, _handleSelect, (e) => {
       const option = e.target;
@@ -478,7 +500,7 @@ var GdsListbox = class extends LitElement2 {
   }
   set selection(values) {
     this.options.forEach((el) => {
-      el.selected = values.includes(el.value) || values.includes(el);
+      el.selected = values.some((v) => this.compareWith(v, el.value));
     });
   }
   connectedCallback() {
@@ -520,6 +542,9 @@ __decorateClass([
     }
   })
 ], GdsListbox.prototype, "multiple", 2);
+__decorateClass([
+  property2()
+], GdsListbox.prototype, "compareWith", 2);
 __decorateClass([
   watch("multiple")
 ], GdsListbox.prototype, "_rerenderOptions", 1);
@@ -530,6 +555,7 @@ GdsListbox = __decorateClass([
 // libs/core/src/primitives/popover/popover.ts
 import { LitElement as LitElement3, html as html3, unsafeCSS as unsafeCSS3 } from "lit";
 import { property as property3 } from "lit/decorators.js";
+import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
 
 // libs/core/src/primitives/popover/popover.styles.ts
@@ -540,19 +566,31 @@ var style3 = css3`
     background-color: white;
     box-shadow: 0 1rem 1rem 1rem rgba(0, 0, 0, 0.1);
   }
+
+  dialog::backdrop {
+    pointer-events: none;
+  }
 `;
 var popover_styles_default = style3;
 
 // libs/core/src/primitives/popover/popover.ts
-var _autoPositionCleanup, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _triggerKeyDownListener, _setOpen, setOpen_fn;
+var _dialogElementRef, _handleCloseButton, _registerTriggerEvents, registerTriggerEvents_fn, _unregisterTriggerEvents, unregisterTriggerEvents_fn, _autoPositionCleanup, _registerAutoPositioning, registerAutoPositioning_fn, _triggerKeyDownListener, _focusFirstSlottedChild;
 var GdsPopover = class extends LitElement3 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _registerTriggerEvents);
     __privateAdd(this, _unregisterTriggerEvents);
-    __privateAdd(this, _setOpen);
+    __privateAdd(this, _registerAutoPositioning);
     this.open = false;
     this.trigger = void 0;
+    this.label = void 0;
+    __privateAdd(this, _dialogElementRef, createRef2());
+    __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.
@@ -560,16 +598,21 @@ var GdsPopover = class extends LitElement3 {
     __privateAdd(this, _triggerKeyDownListener, (e) => {
       if (e.key === "ArrowDown") {
         e.preventDefault();
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, true);
-        const firstSlottedChild = this.shadowRoot?.querySelector("slot")?.assignedElements()[0];
-        this.updateComplete.then(() => {
-          firstSlottedChild?.focus();
-        });
+        this.open = true;
       }
       if (e.key === "Escape") {
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+        this.open = false;
       }
     });
+    /**
+     * Move focus to the first slotted child.
+     */
+    __privateAdd(this, _focusFirstSlottedChild, () => {
+      const firstSlottedChild = this.shadowRoot?.querySelector("slot")?.assignedElements()[0];
+      this.updateComplete.then(() => {
+        firstSlottedChild?.focus();
+      });
+    });
   }
   _handleTriggerChanged() {
     __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
@@ -578,10 +621,10 @@ var GdsPopover = class extends LitElement3 {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-popover");
     __privateMethod(this, _registerTriggerEvents, registerTriggerEvents_fn).call(this);
-    this._updateHidden();
+    this._handleOpenChange();
     this.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
-        __privateMethod(this, _setOpen, setOpen_fn).call(this, false);
+        this.open = false;
       }
     });
   }
@@ -590,50 +633,86 @@ var GdsPopover = class extends LitElement3 {
     __privateMethod(this, _unregisterTriggerEvents, unregisterTriggerEvents_fn).call(this);
   }
   render() {
-    return html3` <slot></slot> `;
+    return html3`<dialog ${ref2(__privateGet(this, _dialogElementRef))}>
+      <header>
+        <h2>${this.label}</h2>
+        <button class="close" @click=${__privateGet(this, _handleCloseButton)}>
+          <i></i>
+        </button>
+      </header>
+      <slot></slot>
+    </dialog>`;
   }
-  _updateHidden() {
+  _handleOpenChange() {
     this.setAttribute("aria-hidden", String(!this.open));
     this.hidden = !this.open;
+    this.updateComplete.then(() => {
+      if (this.open) {
+        __privateGet(this, _dialogElementRef).value?.showModal();
+        __privateGet(this, _focusFirstSlottedChild).call(this);
+      } else {
+        __privateGet(this, _dialogElementRef).value?.close();
+      }
+    });
+    this.dispatchEvent(
+      new CustomEvent("gds-ui-state", {
+        detail: { open: this.open },
+        bubbles: true,
+        composed: false
+      })
+    );
+  }
+  _handleMobileLayout(matches) {
+    var _a;
+    if (matches) {
+      (_a = __privateGet(this, _autoPositionCleanup)) == null ? void 0 : _a.call(this);
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("left");
+      __privateGet(this, _dialogElementRef).value?.style.removeProperty("top");
+      this.updateComplete.then(() => {
+        if (this.open)
+          __privateGet(this, _dialogElementRef).value?.showModal();
+      });
+    } else {
+      this.updateComplete.then(() => {
+        __privateMethod(this, _registerAutoPositioning, registerAutoPositioning_fn).call(this);
+      });
+    }
   }
 };
-_autoPositionCleanup = new WeakMap();
+_dialogElementRef = new WeakMap();
+_handleCloseButton = new WeakMap();
 _registerTriggerEvents = new WeakSet();
 registerTriggerEvents_fn = function() {
-  if (!this.trigger)
-    return;
-  this.trigger.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
+  this.trigger?.addEventListener("keydown", __privateGet(this, _triggerKeyDownListener));
+};
+_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);
+};
+_autoPositionCleanup = new WeakMap();
+_registerAutoPositioning = new WeakSet();
+registerAutoPositioning_fn = function() {
   const referenceEl = this.trigger;
-  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, this, () => {
-    computePosition(referenceEl, this, {
+  const floatingEl = __privateGet(this, _dialogElementRef).value;
+  if (!referenceEl || !floatingEl)
+    return;
+  __privateSet(this, _autoPositionCleanup, autoUpdate(referenceEl, floatingEl, () => {
+    computePosition(referenceEl, floatingEl, {
       placement: "bottom-start",
       middleware: [offset(8), flip()]
     }).then(({ x, y }) => {
-      Object.assign(this.style, {
+      Object.assign(floatingEl.style, {
         left: `${x}px`,
-        top: `${y}px`
+        top: `${y}px`,
+        minWidth: `${referenceEl.offsetWidth}px`
       });
     });
   }));
 };
-_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);
-};
 _triggerKeyDownListener = new WeakMap();
-_setOpen = new WeakSet();
-setOpen_fn = function(open) {
-  this.open = open;
-  this.dispatchEvent(
-    new CustomEvent("gds-ui-state", {
-      detail: { open },
-      bubbles: true,
-      composed: false
-    })
-  );
-};
+_focusFirstSlottedChild = new WeakMap();
 GdsPopover.styles = unsafeCSS3(popover_styles_default);
 __decorateClass([
   property3({ type: Boolean, reflect: true })
@@ -641,12 +720,18 @@ __decorateClass([
 __decorateClass([
   property3()
 ], GdsPopover.prototype, "trigger", 2);
+__decorateClass([
+  property3()
+], GdsPopover.prototype, "label", 2);
 __decorateClass([
   watch("trigger")
 ], GdsPopover.prototype, "_handleTriggerChanged", 1);
 __decorateClass([
   watch("open")
-], GdsPopover.prototype, "_updateHidden", 1);
+], GdsPopover.prototype, "_handleOpenChange", 1);
+__decorateClass([
+  watchMediaQuery("(max-width: 576px)")
+], GdsPopover.prototype, "_handleMobileLayout", 1);
 GdsPopover = __decorateClass([
   gdsCustomElement("gds-popover")
 ], GdsPopover);
@@ -763,7 +848,7 @@ var style4 = css4`
 var dropdown_styles_default = style4;
 
 // libs/core/src/components/dropdown/dropdown.ts
-var _listboxRef, _triggerRef, _searchInputRef, _optionElements, _listboxId, _triggerId, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleOptionFocusChange, _registerPopoverTrigger, registerPopoverTrigger_fn, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _autoCloseListener;
+var _listboxRef, _triggerRef, _searchInputRef, _optionElements, _listboxId, _triggerId, _handleSearchFieldKeyUp, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _registerPopoverTrigger, registerPopoverTrigger_fn, _handleSelectionChange, handleSelectionChange_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _autoCloseListener, _tabCloseListener;
 var GdsDropdown = class extends GdsFormControlElement {
   constructor() {
     super();
@@ -785,10 +870,12 @@ var GdsDropdown = class extends GdsFormControlElement {
     this.open = false;
     this.searchable = false;
     this.multiple = false;
+    this.compareWith = (a, b) => a === b;
+    this.searchFilter = (q, o) => o.innerHTML.toLowerCase().includes(q.toLowerCase());
     // Private members
-    __privateAdd(this, _listboxRef, createRef2());
-    __privateAdd(this, _triggerRef, createRef2());
-    __privateAdd(this, _searchInputRef, createRef2());
+    __privateAdd(this, _listboxRef, createRef3());
+    __privateAdd(this, _triggerRef, createRef3());
+    __privateAdd(this, _searchInputRef, createRef3());
     __privateAdd(this, _optionElements, void 0);
     __privateAdd(this, _listboxId, randomId());
     __privateAdd(this, _triggerId, randomId());
@@ -798,26 +885,38 @@ var GdsDropdown = class extends GdsFormControlElement {
      * @param e The keyboard event.
      */
     __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
-      const input = e.target;
+      const input = __privateGet(this, _searchInputRef).value;
       const options = Array.from(__privateGet(this, _optionElements));
       options.forEach((o) => o.hidden = false);
       if (!input.value)
         return;
       const filteredOptions = options.filter(
-        (o) => !o.innerHTML.toLowerCase().includes(input.value.toLowerCase())
+        (o) => !this.searchFilter(input.value, o)
       );
       filteredOptions.forEach((o) => o.hidden = true);
     });
     /**
-     * Check for ArrowDown in the search field.
+     * Check for ArrowDown or Tab in the search field.
      * If found, focus should be moved to the listbox.
      */
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
-      if (e.key === "ArrowDown") {
+      if (e.key === "ArrowDown" || e.key === "Tab") {
+        e.preventDefault();
         __privateGet(this, _listboxRef).value?.focus();
         return;
       }
     });
+    /**
+     * Check for Tab in the listbox.
+     * If found, focus should be moved to the search field.
+     */
+    __privateAdd(this, _handleListboxKeyDown, (e) => {
+      if (e.key === "Tab" && this.searchable) {
+        e.preventDefault();
+        __privateGet(this, _searchInputRef).value?.focus();
+        return;
+      }
+    });
     __privateAdd(this, _handleOptionFocusChange, (e) => {
       const triggerButton = __privateGet(this, _triggerRef).value;
       if (triggerButton)
@@ -833,6 +932,13 @@ var GdsDropdown = class extends GdsFormControlElement {
       if (isClickOutside || isFocusOutside)
         this.open = false;
     });
+    __privateAdd(this, _tabCloseListener, (e) => {
+      if (e.key === "Tab" && !this.searchable) {
+        e.preventDefault();
+        this.open = false;
+        __privateGet(this, _triggerRef).value?.focus();
+      }
+    });
     constrainSlots(this);
     updateWhenLocaleChanges(this);
     __privateSet(this, _optionElements, this.getElementsByTagName(
@@ -897,7 +1003,7 @@ var GdsDropdown = class extends GdsFormControlElement {
         aria-owns="${__privateGet(this, _listboxId)}"
         aria-controls="${__privateGet(this, _listboxId)}"
         aria-expanded="${this.open}"
-        ${ref2(__privateGet(this, _triggerRef))}
+        ${ref3(__privateGet(this, _triggerRef))}
       >
         <slot name="trigger">
           <span>${unsafeHTML(this.displayValue)}</span>
@@ -907,9 +1013,10 @@ var GdsDropdown = class extends GdsFormControlElement {
       <span class="form-info"><slot name="message"></slot></span>
 
       <gds-popover
+        .label=${this.label}
         .open=${this.open}
         @gds-ui-state=${(e) => this.open = e.detail.open}
-        ${ref2(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
+        ${ref3(__privateMethod(this, _registerPopoverTrigger, registerPopoverTrigger_fn))}
       >
         ${when2(
       this.searchable,
@@ -917,7 +1024,7 @@ var GdsDropdown = class extends GdsFormControlElement {
             type="text"
             aria-label="${msg("Filter available options")}"
             placeholder="${msg("Search")}"
-            ${ref2(__privateGet(this, _searchInputRef))}
+            ${ref3(__privateGet(this, _searchInputRef))}
             @keydown=${__privateGet(this, _handleSearchFieldKeyDown)}
             @keyup=${__privateGet(this, _handleSearchFieldKeyUp)}
           />`
@@ -926,9 +1033,11 @@ var GdsDropdown = class extends GdsFormControlElement {
         <gds-listbox
           id="${__privateGet(this, _listboxId)}"
           .multiple="${ifDefined(this.multiple)}"
-          ${ref2(__privateGet(this, _listboxRef))}
+          .compareWith="${this.compareWith}"
+          ${ref3(__privateGet(this, _listboxRef))}
           @change="${__privateMethod(this, _handleSelectionChange, handleSelectionChange_fn)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
+          @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
           <slot gds-allow="gds-option"></slot>
         </gds-listbox>
@@ -960,12 +1069,12 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   _onOpenChange() {
     const open = this.open;
+    Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = !open);
     if (open)
       __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
     else {
       __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
       __privateGet(this, _searchInputRef).value && (__privateGet(this, _searchInputRef).value.value = "");
-      Array.from(__privateGet(this, _optionElements)).forEach((o) => o.hidden = false);
     }
     this.dispatchEvent(
       new CustomEvent("gds-ui-state", {
@@ -984,6 +1093,7 @@ _listboxId = new WeakMap();
 _triggerId = new WeakMap();
 _handleSearchFieldKeyUp = new WeakMap();
 _handleSearchFieldKeyDown = new WeakMap();
+_handleListboxKeyDown = new WeakMap();
 _handleOptionFocusChange = new WeakMap();
 _registerPopoverTrigger = new WeakSet();
 registerPopoverTrigger_fn = function(el) {
@@ -1017,14 +1127,17 @@ registerAutoCloseListener_fn = function() {
   window.addEventListener("click", __privateGet(this, _autoCloseListener));
   this.addEventListener("blur", __privateGet(this, _autoCloseListener));
   this.addEventListener("gds-blur", __privateGet(this, _autoCloseListener));
+  this.addEventListener("keydown", __privateGet(this, _tabCloseListener));
 };
 _unregisterAutoCloseListener = new WeakSet();
 unregisterAutoCloseListener_fn = function() {
   window.removeEventListener("click", __privateGet(this, _autoCloseListener));
   this.removeEventListener("blur", __privateGet(this, _autoCloseListener));
   this.removeEventListener("gds-blur", __privateGet(this, _autoCloseListener));
+  this.removeEventListener("keydown", __privateGet(this, _tabCloseListener));
 };
 _autoCloseListener = new WeakMap();
+_tabCloseListener = new WeakMap();
 GdsDropdown.styles = dropdown_styles_default;
 GdsDropdown.shadowRootOptions = {
   mode: "open",
@@ -1042,6 +1155,12 @@ __decorateClass([
 __decorateClass([
   property5({ type: Boolean, reflect: true })
 ], GdsDropdown.prototype, "multiple", 2);
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "compareWith", 2);
+__decorateClass([
+  property5()
+], GdsDropdown.prototype, "searchFilter", 2);
 __decorateClass([
   observeLightDOM()
 ], GdsDropdown.prototype, "_handleLightDOMChange", 1);

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.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/listbox/listbox.d.ts

@@ -21,6 +21,10 @@ export declare class GdsListbox extends LitElement implements OptionsContainer {
      * Controls whether the listbox allows multiple selection or not.
      */
     multiple: boolean;
+    /**
+     * Delegate function for comparing option values.
+     */
+    compareWith: (a: any, b: any) => boolean;
     constructor();
     /**
      * Returns a list of all `gds-option` elements in the listbox.
@@ -38,7 +42,7 @@ export declare class GdsListbox extends LitElement implements OptionsContainer {
      * Returns a list of all selected `gds-option` elements in the listbox.
      */
     get selection(): GdsOption[];
-    set selection(values: GdsOption[] | any[]);
+    set selection(values: any[]);
     connectedCallback(): void;
     /**
      * Focuses the first selected option in the listbox.

package/primitives/popover/popover.d.ts

@@ -23,9 +23,14 @@ export declare class GdsPopover extends LitElement {
      * Optional trigger element for the popover.
      */
     trigger: HTMLElement | undefined;
+    /**
+     * Optional trigger element for the popover.
+     */
+    label: string | undefined;
     private _handleTriggerChanged;
     connectedCallback(): void;
     disconnectedCallback(): void;
     render(): import("lit-html").TemplateResult<1>;
-    private _updateHidden;
+    private _handleOpenChange;
+    private _handleMobileLayout;
 }

package/transitional-styles.js

@@ -21,6 +21,7 @@ var listbox_trans_styles_default = `
   display: flex;
   flex-direction: column;
   list-style: none;
+  overflow-y: auto;
 }
 :host > li {
   padding-bottom: 0.5rem;
@@ -1723,6 +1724,7 @@ a.button.tertiary.danger:focus {
   cursor: pointer;
   display: flex;
   gap: 0.75rem;
+  user-select: none;
 }
 :host:not(:disabled, .disabled, [aria-disabled]):hover {
   background-color: #199be3;
@@ -3471,7 +3473,106 @@ a.button.tertiary.danger:focus {
   outline-style: solid;
 }
 
-:host {
+.close {
+  /* smartphones, touchscreens */
+  outline: none;
+  font-size: 0;
+  background: hsla(var(--background-hsl), 0);
+  border: 0;
+  border-radius: 50%;
+  content: "";
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  height: 2rem;
+  position: relative;
+  width: 2rem;
+}
+@media (hover: none) and (pointer: coarse) {
+  .close:not(:disabled):not(.disabled) {
+    padding: 0.375rem;
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+  .close:not(:disabled):not(.disabled) > i {
+    background: var(--gds-ref-pallet-base200);
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    position: relative;
+  }
+  .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
+    height: 0.789375rem;
+    width: 0.130625rem;
+    top: 0.625rem;
+  }
+}
+.close:focus-visible > i {
+  border-color: var(--gds-sys-color-blue-dark-2);
+  box-shadow: 0 0 0.0625rem 0 var(--gds-sys-color-blue-dark-2), 0 0 0.25rem 0.0625rem var(--gds-sys-color-blue-dark-2);
+  outline-color: transparent;
+  outline-style: solid;
+}
+.close > i {
+  border-radius: var(--gds-sys-shape-corner-round);
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.close > i::after, .close > i::before {
+  background: var(--gds-sys-color-font);
+  content: "";
+  display: block;
+  height: 0.789375rem;
+  width: 0.130625rem;
+  border-radius: 0.5px;
+  left: calc(50% - 0.0625rem);
+  position: absolute;
+  top: 0.625rem;
+}
+.close > i::after {
+  transform: rotateZ(45deg);
+}
+.close > i::before {
+  transform: rotateZ(-45deg);
+}
+.close > svg path {
+  fill: var(--gds-sys-color-font);
+}
+@media (min-width: 768px) {
+  .close:not(:disabled, .disabled):hover > i {
+    background: var(--gds-ref-pallet-base200);
+  }
+  .close:not(:disabled, .disabled):hover:active > i {
+    background: var(--gds-ref-pallet-base500);
+  }
+}
+
+:host([open]) dialog {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+}
+
+header {
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  padding: 0.5rem 0.75rem;
+}
+@media (min-width: 576px) {
+  header {
+    display: none;
+  }
+}
+
+header h2 {
+  flex-grow: 1;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0;
+}
+
+dialog {
   --z-index: var(--sg-z-index-popover);
   max-height: calc(100% - 1rem);
   background-color: var(--sg-popover-background);
@@ -3482,10 +3583,13 @@ a.button.tertiary.danger:focus {
   position: fixed;
   visibility: hidden;
   z-index: var(--z-index);
+  border-width: 0;
   overflow: hidden;
+  padding: 0;
+  right: 0;
 }
 @media (max-width: 575.98px) {
-  :host {
+  dialog {
     border-top: solid var(--sg-border-width) var(--sg-border-color);
     --border-color: var(--sg-border-color);
     padding-bottom: 0.5rem;
@@ -3499,7 +3603,7 @@ a.button.tertiary.danger:focus {
   }
 }
 @media (min-width: 576px) {
-  :host {
+  dialog {
     padding-bottom: 0;
     border: solid var(--sg-border-width) var(--sg-border-color);
     --border-color: var(--sg-popover-border-color);
@@ -3511,30 +3615,47 @@ a.button.tertiary.danger:focus {
     position: absolute;
   }
 }
-:host > [role=listbox] {
+dialog > [role=listbox] {
   width: 100%;
   overflow-y: auto;
 }
-:host.active {
+dialog.active {
   opacity: 1;
   transform: translate3d(0, 0, 0);
   visibility: visible;
 }
-:host .close {
+dialog .close {
   margin: 0.25rem;
   flex-shrink: 0;
   align-self: flex-end;
 }
 @media (min-width: 576px) {
-  :host .close {
+  dialog .close {
     display: none;
   }
 }
+@media (max-width: 575.98px) {
+  dialog {
+    border-radius: 1rem;
+  }
+}
+@media (min-width: 576px) {
+  dialog {
+    inset: auto;
+    position: absolute;
+  }
+}
 
-:host([open]) {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  visibility: visible;
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+  display: block;
+  pointer-events: none;
+  position: fixed;
+}
+@media (min-width: 576px) {
+  dialog::backdrop {
+    display: none;
+  }
 }`;
 
 // libs/core/src/primitives/popover/popover.trans.styles.ts
@@ -5472,6 +5593,7 @@ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner
 
 input[type=text] {
   border-radius: 0;
+  font-size: 1rem;
   line-height: 1;
   margin: -1px;
   min-height: auto;

package/utils/decorators/index.d.ts

@@ -1,2 +1,3 @@
 export * from './watch';
 export * from './observe-light-dom';
+export * from './watch-media-query';

package/utils/decorators/watch-media-query.d.ts

@@ -0,0 +1,31 @@
+import type { LitElement } from 'lit';
+declare type Handler = (matches: boolean) => void;
+/**
+ * Media queries expressing standard breakpoints.
+ * TODO: These should probably be imported from somehere, so that they are always in sync with CSS.
+ */
+export declare const standardBreakpoints: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+/**
+ * Runs when the match state of the specified media query changes.
+ *
+ * @param q The media query to watch.
+ *
+ * Usage:
+ * ```javascript
+ * \@watchMediaQuery('(max-width: 576px)')
+ * handleMobileLayout(matches) {
+ *  if (matches) {
+ *   // Do something when the media query matches
+ *  } else
+ *   // Do something when the media query no longer matches
+ *  }
+ * }
+ * ```
+ */
+export declare function watchMediaQuery(q: string): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
+export {};