@sebgroup/green-core 1.5.0 → 1.6.0

package/components/dropdown/dropdown.d.ts

@@ -10,7 +10,7 @@ import { CSSResult } from 'lit';
  *
  * @status beta
  *
- * @slot - Options for the dropdown. Accepts `gds-option` elements.
+ * @slot - Options for the dropdown. Accepts `gds-option` and `gds-menu-heading` elements.
  * @slot button - The trigger button for the dropdown. Custom content for the button can be assigned through this slot.
  * @slot sub-label - Renders between the label and the trigger button.
  * @slot message - Renders below the trigger button. Will be red if there is a validation error.

package/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './dropdown/dropdown';
 export * from '../primitives/listbox/option';
+export * from '../primitives/menu/menu-heading';
 export * from './context-menu/context-menu';
 export * from '../primitives/menu/menu-item';
 export * from './datepicker/datepicker';

package/index.js

@@ -143,10 +143,11 @@ 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 = "-eaa4d5";
+var VER_SUFFIX = "-f9a04d";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+    elementLookupTable.set(tagName, tagName);
     return customElement(tagName);
   }
   const versionedTagName = tagName + VER_SUFFIX;
@@ -419,7 +420,7 @@ var GdsListbox = class extends GdsElement {
     if (!__privateGet(this, _slotRef).value)
       return [];
     return unwrap(__privateGet(this, _slotRef).value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-option"
     ) || [];
   }
   /**
@@ -674,163 +675,6 @@ import {
   flip
 } from "@floating-ui/dom";
 
-// libs/core/src/primitives/popover/topLayerOverTransforms.middleware.ts
-var topLayerOverTransforms = () => ({
-  name: "topLayer",
-  async fn(middlewareArguments) {
-    const {
-      x,
-      y,
-      elements: { reference, floating }
-    } = middlewareArguments;
-    let onTopLayer = false;
-    let topLayerIsFloating = false;
-    const diffCoords = {
-      x: 0,
-      y: 0
-    };
-    try {
-      onTopLayer = onTopLayer || floating.matches(":open");
-    } catch (e) {
-    }
-    try {
-      onTopLayer = onTopLayer || floating.matches(":modal");
-    } catch (e) {
-    }
-    topLayerIsFloating = onTopLayer;
-    if (!onTopLayer) {
-      const dialogAncestorQueryEvent = new Event("floating-ui-dialog-test", {
-        composed: true,
-        bubbles: true
-      });
-      floating.addEventListener(
-        "floating-ui-dialog-test",
-        (event) => {
-          event.composedPath().forEach((el) => {
-            if (el === floating || el.localName !== "dialog")
-              return;
-            try {
-              onTopLayer = onTopLayer || el.matches(":modal");
-              if (onTopLayer) {
-              }
-            } catch (e) {
-            }
-          });
-        },
-        { once: true }
-      );
-      floating.dispatchEvent(dialogAncestorQueryEvent);
-    }
-    let overTransforms = false;
-    const containingBlock = getContainingBlock(reference);
-    if (containingBlock !== null && !isWindow(containingBlock)) {
-      overTransforms = true;
-    }
-    if (onTopLayer && overTransforms) {
-      const rect = containingBlock.getBoundingClientRect();
-      diffCoords.x = rect.x;
-      diffCoords.y = rect.y;
-    }
-    if (onTopLayer && topLayerIsFloating) {
-      return {
-        x: x + diffCoords.x,
-        y: y + diffCoords.y,
-        data: diffCoords
-      };
-    }
-    if (onTopLayer) {
-      return {
-        x,
-        y,
-        data: diffCoords
-      };
-    }
-    return {
-      x: x - diffCoords.x,
-      y: y - diffCoords.y,
-      data: diffCoords
-    };
-  }
-});
-function getContainingBlock(element) {
-  let currentNode = getParentNode(element);
-  if (isShadowRoot(currentNode)) {
-    currentNode = currentNode.host;
-  }
-  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
-    if (isContainingBlock(currentNode)) {
-      return currentNode;
-    } else {
-      const parent = currentNode.assignedSlot ? currentNode.assignedSlot : currentNode.parentNode;
-      currentNode = isShadowRoot(parent) ? parent.host : parent;
-    }
-  }
-  return null;
-}
-function isLastTraversableNode(node) {
-  return ["html", "body", "#document"].includes(getNodeName(node));
-}
-function isContainingBlock(element) {
-  const isFirefox = /firefox/i.test(getUAString());
-  if (element.tagName === "dialog") {
-    return true;
-  }
-  const css7 = getComputedStyle(element);
-  return css7.transform !== "none" || css7.perspective !== "none" || css7.contain === "paint" || ["transform", "perspective"].includes(css7.willChange) || isFirefox && css7.willChange === "filter" || isFirefox && (css7.filter ? css7.filter !== "none" : false);
-}
-function getUAString() {
-  const uaData = navigator.userAgentData;
-  if (uaData?.brands) {
-    return uaData.brands.map((item) => `${item.brand}/${item.version}`).join(" ");
-  }
-  return navigator.userAgent;
-}
-function getParentNode(node) {
-  if (getNodeName(node) === "html") {
-    return node;
-  }
-  return (
-    // this is a quicker (but less type safe) way to save quite some bytes from the bundle
-    node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
-    node.parentNode || // DOM Element detected
-    (isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
-    getDocumentElement(node)
-  );
-}
-function getNodeName(node) {
-  return isWindow(node) ? "" : node ? (node.nodeName || "").toLowerCase() : "";
-}
-function getDocumentElement(node) {
-  return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
-}
-function isNode(value) {
-  return value instanceof getWindow(value).Node;
-}
-function isWindow(value) {
-  return value && value.document && value.location && value.alert && value.setInterval;
-}
-function getWindow(node) {
-  if (node == null) {
-    return window;
-  }
-  if (!isWindow(node)) {
-    const ownerDocument = node.ownerDocument;
-    return ownerDocument ? ownerDocument.defaultView || window : window;
-  }
-  return node;
-}
-function isShadowRoot(node) {
-  if (typeof ShadowRoot === "undefined") {
-    return false;
-  }
-  const OwnElement = getWindow(node).ShadowRoot;
-  const testNode = node;
-  return node instanceof OwnElement || testNode instanceof ShadowRoot;
-}
-function isHTMLElement(value) {
-  return value instanceof getWindow(value).HTMLElement;
-}
-
 // libs/core/src/primitives/popover/popover.styles.ts
 import { css as css3 } from "lit";
 var style3 = css3`
@@ -1058,7 +902,7 @@ registerAutoPositioning_fn = function() {
   __privateSet(this, _autoPositionCleanupFn, autoUpdate(referenceEl, floatingEl, () => {
     computePosition(referenceEl, floatingEl, {
       placement: this.placement,
-      middleware: [offset(8), flip(), topLayerOverTransforms()],
+      middleware: [offset(8), flip()],
       strategy: "fixed"
     }).then(
       ({ x, y }) => Object.assign(floatingEl.style, {
@@ -1443,7 +1287,7 @@ var GdsDropdown = class extends GdsFormControlElement {
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
         >
-          <slot gds-allow="gds-option"></slot>
+          <slot gds-allow="gds-option gds-menu-heading"></slot>
         </gds-listbox>
       </gds-popover>
     `;
@@ -1591,6 +1435,44 @@ GdsDropdown = __decorateClass([
   gdsCustomElement("gds-dropdown")
 ], GdsDropdown);
 
+// libs/core/src/primitives/menu/menu-heading.ts
+import { html as html5 } from "lit";
+
+// libs/core/src/primitives/menu/menu-heading.styles.ts
+import { css as css5 } from "lit";
+var style5 = css5`
+  @layer base, reset, transitional-styles;
+  @layer base {
+    :host {
+      padding: 0.5 1rem;
+      cursor: pointer;
+    }
+
+    :host(:hover) {
+      background-color: grey;
+    }
+  }
+`;
+var menu_heading_styles_default = style5;
+
+// libs/core/src/primitives/menu/menu-heading.ts
+var GdsMenuHeading = class extends GdsElement {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("inert", "true");
+    this.updateComplete.then(
+      () => TransitionalStyles.instance.apply(this, "gds-menu-heading")
+    );
+  }
+  render() {
+    return html5`<slot></slot>`;
+  }
+};
+GdsMenuHeading.styles = menu_heading_styles_default;
+GdsMenuHeading = __decorateClass([
+  gdsCustomElement("gds-menu-heading")
+], GdsMenuHeading);
+
 // libs/core/src/components/context-menu/context-menu.ts
 import { nothing } from "lit";
 import { msg as msg3 } from "@lit/localize";
@@ -1616,7 +1498,7 @@ var GdsMenu = class extends GdsElement {
     if (!this.#slotRef.value)
       return [];
     return unwrap(this.#slotRef.value).assignedElements().filter(
-      (o) => !o.hasAttribute("isplaceholder")
+      (o) => !o.hasAttribute("isplaceholder") && o.gdsElementName === "gds-menu-item"
     ) || [];
   }
   /**
@@ -1688,7 +1570,7 @@ var GdsContextMenu = class extends GdsElement {
           aria-label=${this.label ?? this.buttonLabel}
           @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
         >
-          <slot allow="gds-menu-item"></slot>
+          <slot allow="gds-menu-item gds-menu-heading"></slot>
         </gds-menu>
       </gds-popover>`;
   }
@@ -1779,7 +1661,7 @@ import { nothing as nothing2 } from "lit";
 import { msg as msg5 } from "@lit/localize";
 
 // libs/core/src/primitives/calendar/calendar.ts
-import { html as html6 } from "lit";
+import { html as html7 } from "lit";
 import { classMap as classMap4 } from "lit/directives/class-map.js";
 import { when as when3 } from "lit/directives/when.js";
 import { property as property7, query as query2, state as state8 } from "lit/decorators.js";
@@ -1801,7 +1683,7 @@ import {
   eachWeekOfInterval,
   eachDayOfInterval
 } from "date-fns";
-import { html as html5 } from "lit-html";
+import { html as html6 } from "lit-html";
 function renderMonthGridView(date, template) {
   const monthStart = startOfMonth(date);
   const monthEnd = endOfMonth(date);
@@ -1809,7 +1691,7 @@ function renderMonthGridView(date, template) {
     { start: monthStart, end: monthEnd },
     { weekStartsOn: 1 }
   );
-  return html5`${template(
+  return html6`${template(
     weeks.map((weekStartDay) => ({
       days: eachDayOfInterval({
         start: weekStartDay,
@@ -1820,8 +1702,8 @@ function renderMonthGridView(date, template) {
 }
 
 // libs/core/src/primitives/calendar/calendar.styles.ts
-import { css as css5 } from "lit";
-var style5 = css5`
+import { css as css6 } from "lit";
+var style6 = css6`
   @layer base, reset, transitional-styles;
   @layer base {
     td.disabled {
@@ -1833,7 +1715,7 @@ var style5 = css5`
     }
   }
 `;
-var calendar_styles_default = style5;
+var calendar_styles_default = style6;
 
 // libs/core/src/primitives/calendar/calendar.ts
 var _setSelectedDate, setSelectedDate_fn, _handleKeyDown, handleKeyDown_fn;
@@ -1877,11 +1759,11 @@ var GdsCalendar = class extends GdsElement {
   }
   render() {
     const currentDate = /* @__PURE__ */ new Date();
-    return html6`${this._tStyles}
+    return html7`${this._tStyles}
       <table>
         <thead>
           <tr>
-            ${when3(this.showWeekNumbers, () => html6`<th></th>`)}
+            ${when3(this.showWeekNumbers, () => html7`<th></th>`)}
             <th>${msg4("Mon")}</th>
             <th>${msg4("Tue")}</th>
             <th>${msg4("Wed")}</th>
@@ -1894,19 +1776,19 @@ var GdsCalendar = class extends GdsElement {
         <tbody>
           ${renderMonthGridView(
       this.focusedDate,
-      (weeks) => html6`
+      (weeks) => html7`
               ${weeks.map(
-        (week) => html6`
+        (week) => html7`
                   <tr>
                     ${when3(
           this.showWeekNumbers,
-          () => html6`<td class="week-number">
+          () => html7`<td class="week-number">
                           ${getWeek(week.days[0])}
                         </td>`
         )}
                     ${week.days.map((day) => {
           const isDisabled = !isSameMonth(this.focusedDate, day) || day < this.min || day > this.max;
-          return html6`
+          return html7`
                         <td
                           class="${classMap4({
             disabled: isDisabled,
@@ -2040,10 +1922,10 @@ GdsCalendar = __decorateClass([
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement7 } from "lit";
+import { LitElement as LitElement6 } from "lit";
 import { property as property8, state as state9 } from "lit/decorators.js";
 var _inputBuffer, _increment, _decrement, _handleClick, _handleFocus, _handleBlur, _handleWheel, _handleKeyDown2, _focusNextSpinner, focusNextSpinner_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _formatNumber, formatNumber_fn, _clamp, clamp_fn, _clearInputBuffer, clearInputBuffer_fn;
-var GdsDatePartSpinner = class extends LitElement7 {
+var GdsDatePartSpinner = class extends LitElement6 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -2085,7 +1967,6 @@ var GdsDatePartSpinner = class extends LitElement7 {
       __privateMethod(this, _clearInputBuffer, clearInputBuffer_fn).call(this);
       this.value = __privateMethod(this, _clamp, clamp_fn).call(this, parseInt(this.value.toString()));
       __privateMethod(this, _dispatchChangeEvent, dispatchChangeEvent_fn).call(this);
-      document.getSelection()?.removeAllRanges();
     });
     __privateAdd(this, _handleWheel, (e) => {
       e.stopPropagation();
@@ -2216,8 +2097,8 @@ GdsDatePartSpinner = __decorateClass([
 ], GdsDatePartSpinner);
 
 // libs/core/src/components/datepicker/datepicker.styles.ts
-import { css as css6 } from "lit";
-var styles = css6`
+import { css as css7 } from "lit";
+var styles = css7`
   @layer base, reset, transitional-styles;
   @layer base {
     label {
@@ -2235,7 +2116,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _valueOnOpen, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _dispatchInputEvent, dispatchInputEvent_fn, _handleFieldFocusOut, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 var GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
@@ -2245,6 +2126,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
     __privateAdd(this, _getMinSpinnerValue);
     __privateAdd(this, _getMaxSpinnerValue);
     __privateAdd(this, _dispatchChangeEvent2);
+    __privateAdd(this, _dispatchInputEvent);
     /**
      * Takes a dateformat string from the dateformat attribute and turnes it to a DateFormatLayout object used in rendering the template.
      */
@@ -2263,24 +2145,48 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
     __privateAdd(this, _valueOnOpen, void 0);
+    __privateAdd(this, _handleFieldFocusOut, (e) => {
+      this._elTrigger.then((_) => {
+        const parent = e.relatedTarget?.parentElement;
+        if (parent === e.target)
+          return;
+        document.getSelection()?.removeAllRanges();
+      });
+    });
+    __privateAdd(this, _handleSpinnerFocus, (e) => {
+      this._elTrigger.then((field) => {
+        document.getSelection()?.removeAllRanges();
+        const range = new Range();
+        range.setStart(field.firstChild, 0);
+        range.setEnd(field.lastChild, 4);
+        document.getSelection()?.addRange(range);
+      });
+    });
     __privateAdd(this, _handleClipboardCopy, (e) => {
-      e.preventDefault();
-      e.clipboardData?.setData("text/plain", this.displayValue);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        e.clipboardData?.setData("text/plain", this.displayValue);
+      });
     });
     __privateAdd(this, _handleClipboardPaste, (e) => {
-      e.preventDefault();
-      const pasted = e.clipboardData?.getData("text/plain");
-      if (!pasted)
-        return;
-      const pastedDate = new Date(pasted);
-      if (pastedDate.toString() === "Invalid Date")
-        return;
-      this.value = pastedDate;
-      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      this._elTrigger.then((field) => {
+        if (e.currentTarget !== field)
+          return;
+        e.preventDefault();
+        const pasted = e.clipboardData?.getData("text/plain");
+        if (!pasted)
+          return;
+        const pastedDate = new Date(pasted);
+        if (pastedDate.toString() === "Invalid Date")
+          return;
+        this.value = pastedDate;
+        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      });
     });
     __privateAdd(this, _handleFieldClick, (e) => {
       this._elSpinners[0].focus();
-      window.getSelection()?.selectAllChildren(this._elSpinners[0]);
     });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
@@ -2315,15 +2221,18 @@ var GdsDatepicker = class extends GdsFormControlElement {
       this._focusedYear = (await this._elCalendar).focusedYear;
       this.value = (await this._elCalendar).focusedDate;
       this.requestUpdate();
-      __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
     });
-    __privateAdd(this, _handlePopoverStateChange, (e) => {
+    __privateAdd(this, _handlePopoverStateChange, async (e) => {
       if (e.target !== e.currentTarget)
         return;
       this.open = e.detail.open;
+      if (e.detail.reason === "close") {
+        this.value = (await this._elCalendar).focusedDate;
+        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      }
       if (e.detail.reason === "cancel") {
         this.value = __privateGet(this, _valueOnOpen);
-        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
       }
     });
     __privateAdd(this, _handleSpinnerKeydown, (e) => {
@@ -2407,7 +2316,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
         @copy=${__privateGet(this, _handleClipboardCopy)}
         @paste=${__privateGet(this, _handleClipboardPaste)}
       >
-        <div class="input">
+        <div class="input" @focusout=${__privateGet(this, _handleFieldFocusOut)}>
           ${join(
       map(
         this._dateFormatLayout.layout,
@@ -2421,6 +2330,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
                   aria-describedby="label"
                   @keydown=${__privateGet(this, _handleSpinnerKeydown)}
                   @change=${(e) => __privateGet(this, _handleSpinnerChange).call(this, e.detail.value, f.name)}
+                  @focus=${__privateGet(this, _handleSpinnerFocus)}
                 ></gds-date-part-spinner>`
       ),
       html`<span>${this._dateFormatLayout.delimiter}</span>`
@@ -2621,6 +2531,16 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_dispatchInputEvent = new WeakSet();
+dispatchInputEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("input", {
+      detail: { value: this.value }
+    })
+  );
+};
+_handleFieldFocusOut = new WeakMap();
+_handleSpinnerFocus = new WeakMap();
 _handleClipboardCopy = new WeakMap();
 _handleClipboardPaste = new WeakMap();
 _handleFieldClick = new WeakMap();
@@ -2737,6 +2657,7 @@ export {
   GdsContextMenu,
   GdsDatepicker,
   GdsDropdown,
+  GdsMenuHeading,
   GdsMenuItem,
   GdsOption,
   VER_SUFFIX,

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.5.0",
+  "version": "1.6.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -22,11 +22,11 @@
     "directory": "../../dist/libs/core/src"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
+    "@floating-ui/dom": "^1.6.1",
     "@lit/localize": "0.11.4",
+    "date-fns": "^2.28.0",
     "lit": "^2.8.0",
-    "reflect-metadata": "^0.1.13",
-    "date-fns": "^2.28.0"
+    "reflect-metadata": "^0.1.13"
   },
   "exports": {
     ".": {

package/primitives/listbox/option.d.ts

@@ -1,11 +1,10 @@
-import { LitElement } from 'lit';
 import { GdsElement } from '../../gds-element';
 import 'reflect-metadata';
 export interface OptionsContainer extends HTMLElement {
     options: GdsOption[];
     multiple: boolean;
 }
-declare const GdsOption_base: (new (...args: any[]) => LitElement) & typeof GdsElement;
+declare const GdsOption_base: (new (...args: any[]) => import("lit").LitElement) & typeof GdsElement;
 /**
  * @element gds-option
  * @internal

package/primitives/menu/menu-heading.d.ts

@@ -0,0 +1,6 @@
+import { GdsElement } from '../../gds-element';
+export declare class GdsMenuHeading extends GdsElement {
+    static styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/primitives/menu/menu-heading.styles.d.ts

@@ -0,0 +1,2 @@
+declare const style: import("lit").CSSResult;
+export default style;

package/transitional-styles.js

@@ -146,10 +146,32 @@ var option_trans_styles_default = `/**
   }
 }`;
 
+// libs/core/src/primitives/menu/menu-heading.trans.styles.scss
+var menu_heading_trans_styles_default = `@layer base, reset, transitional-styles;
+@layer transitional-styles {
+  :host {
+    padding: 0.5rem 1rem;
+    background-color: var(--gds-ref-pallet-base100);
+    color: var(--gds-ref-pallet-base800);
+    display: flex;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    font-size: 0.875rem;
+  }
+  :host([aria-hidden=true]) {
+    display: none;
+  }
+}`;
+
 // libs/core/src/primitives/listbox/listbox.trans.styles.ts
 function register() {
   TransitionalStyles.instance.register("gds-listbox", listbox_trans_styles_default.toString());
   TransitionalStyles.instance.register("gds-option", option_trans_styles_default.toString());
+  TransitionalStyles.instance.register(
+    "gds-menu-heading",
+    menu_heading_trans_styles_default.toString()
+  );
 }
 
 // libs/core/src/primitives/popover/popover.trans.styles.scss
@@ -1967,6 +1989,7 @@ a.button.tertiary.danger:focus-visible {
     width: 2rem;
     border-radius: 50%;
     position: relative;
+    --color: var(--gds-sys-color-base);
   }
   .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
     height: 0.789375rem;
@@ -3071,16 +3094,22 @@ i.sg-icon.sg-icon-ellipsis::before {
     outline-width: 0.125rem;
     outline-offset: 0.125rem;
   }
+  .field .input::-moz-selection {
+    background: transparent;
+  }
+  .field .input::selection {
+    background: transparent;
+  }
   .field span {
-    cursor: default;
+    cursor: text;
   }
   .field [role=spinbutton] {
-    cursor: default;
+    cursor: text;
     display: inline-block;
   }
   .field [role=spinbutton]:focus {
-    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
     outline: none;
+    background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
   }
   .field [role=spinbutton]::-moz-selection {
     background: transparent;
@@ -3215,7 +3244,7 @@ function register6() {
 // libs/core/src/utils/helpers/custom-element-scoping.ts
 import { html as litHtml } from "lit";
 import { customElement } from "lit/decorators.js";
-var VER_SUFFIX = "-eaa4d5";
+var VER_SUFFIX = "-f9a04d";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {

package/primitives/popover/topLayerOverTransforms.middleware.d.ts

@@ -1,28 +0,0 @@
-/**
- * Temporary implemenation of topLayerOverTransforms middleware snagged from here: https://github.com/floating-ui/floating-ui/issues/1842
- *
- * This solved positioning issues when a popover is opened from a parent element that is using transforms.
- *
- * As soon as this is merged in FloatingUI we can remove this and use the official version.
- */
-export declare const topLayerOverTransforms: () => {
-    name: string;
-    fn(middlewareArguments: any): Promise<{
-        x: any;
-        y: any;
-        data: {
-            x: number;
-            y: number;
-        };
-    }>;
-};
-export declare function isLastTraversableNode(node: any): boolean;
-export declare function getUAString(): any;
-export declare function getParentNode(node: any): any;
-export declare function getNodeName(node: any): any;
-export declare function getDocumentElement(node: any): any;
-export declare function isNode(value: any): boolean;
-export declare function isWindow(value: any): any;
-export declare function getWindow(node: any): any;
-export declare function isShadowRoot(node: any): boolean;
-export declare function isHTMLElement(value: any): boolean;