@sebgroup/green-core 1.4.6 → 1.5.1

package/components/context-menu/context-menu.d.ts

@@ -25,6 +25,10 @@ export declare class GdsContextMenu extends GdsElement {
      * The label for the trigger button.
      */
     buttonLabel: string;
+    /**
+     * The label for the trigger button.
+     */
+    showLabel: boolean;
     /**
      * The label for the popover and menu. Should describe the context of the menu.
      */

package/components/datepicker/datepicker.d.ts

@@ -58,6 +58,10 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
      * is closed, the value will be undefined.
      */
     getFocusedDate(): Promise<Date | undefined>;
+    /**
+     * Get a string representation of the currently displayed value in the input field. The formatting will match the dateformat attribute.
+     */
+    get displayValue(): string;
     /**
      * A reference to the calendar button element inside the shadow root.
      * Inteded for use in integration tests.
@@ -74,6 +78,7 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
     private _elCalendar;
     private _elTrigger;
     private _elSpinners;
+    private _elInput;
     private _tStyles?;
     connectedCallback(): void;
     render(): any;

package/index.js

@@ -143,7 +143,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 = "-a568b5";
+var VER_SUFFIX = "-ea801b";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -674,163 +674,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`
@@ -877,10 +720,10 @@ var GdsPopover = class extends GdsElement {
     // 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, _dispatchUiStateEvent, () => {
+    __privateAdd(this, _dispatchUiStateEvent, (reason) => {
       this.dispatchEvent(
         new CustomEvent("gds-ui-state", {
-          detail: { open: this.open },
+          detail: { open: this.open, reason },
           bubbles: false,
           composed: false
         })
@@ -890,7 +733,7 @@ var GdsPopover = class extends GdsElement {
       e.stopPropagation();
       e.preventDefault();
       this.open = false;
-      __privateGet(this, _dispatchUiStateEvent).call(this);
+      __privateGet(this, _dispatchUiStateEvent).call(this, "close");
       setTimeout(() => this._trigger?.focus(), 250);
     });
     /**
@@ -900,11 +743,11 @@ var GdsPopover = class extends GdsElement {
       if (e.key === "ArrowDown") {
         e.preventDefault();
         this.open = true;
-        __privateGet(this, _dispatchUiStateEvent).call(this);
+        __privateGet(this, _dispatchUiStateEvent).call(this, "show");
       }
       if (e.key === "Escape") {
         this.open = false;
-        __privateGet(this, _dispatchUiStateEvent).call(this);
+        __privateGet(this, _dispatchUiStateEvent).call(this, "cancel");
       }
     });
     /**
@@ -926,7 +769,7 @@ var GdsPopover = class extends GdsElement {
         if (!isInDialog) {
           e.stopPropagation();
           this.open = false;
-          __privateGet(this, _dispatchUiStateEvent).call(this);
+          __privateGet(this, _dispatchUiStateEvent).call(this, "close");
         }
       }
     });
@@ -949,7 +792,7 @@ var GdsPopover = class extends GdsElement {
     this.addEventListener("keydown", (e) => {
       if (e.key === "Escape") {
         this.open = false;
-        __privateGet(this, _dispatchUiStateEvent).call(this);
+        __privateGet(this, _dispatchUiStateEvent).call(this, "cancel");
         e.stopPropagation();
         e.preventDefault();
       }
@@ -1058,7 +901,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, {
@@ -1592,6 +1435,7 @@ GdsDropdown = __decorateClass([
 ], GdsDropdown);
 
 // libs/core/src/components/context-menu/context-menu.ts
+import { nothing } from "lit";
 import { msg as msg3 } from "@lit/localize";
 import { classMap as classMap3 } from "lit-html/directives/class-map.js";
 import { property as property6, queryAsync as queryAsync2, state as state6 } from "lit/decorators.js";
@@ -1643,6 +1487,7 @@ var GdsContextMenu = class extends GdsElement {
     __privateAdd(this, _handleItemClick);
     this.open = false;
     this.buttonLabel = msg3("Open context menu");
+    this.showLabel = false;
     this.label = "";
     this.placement = "bottom-start";
     constrainSlots(this);
@@ -1662,14 +1507,15 @@ var GdsContextMenu = class extends GdsElement {
     return html`${this._tStyles}
       <button
         id="trigger"
-        class="ghost border-0 small ${classMap3({ highlighted: this.open })}"
-        aria-label="${this.buttonLabel}"
+        class="icon border-0 small ${classMap3({ highlighted: this.open })}"
+        aria-label=${this.buttonLabel ?? this.label}
         aria-haspopup="menu"
         aria-controls="menu"
         aria-expanded=${this.open}
         @click=${() => this.open = !this.open}
       >
         <slot name="trigger">
+          ${this.showLabel ? this.buttonLabel ?? this.label : nothing}
           <i class="sg-icon sg-icon-ellipsis"></i>
         </slot>
       </button>
@@ -1682,7 +1528,7 @@ var GdsContextMenu = class extends GdsElement {
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
         <gds-menu
-          aria-label=${this.label}
+          aria-label=${this.label ?? this.buttonLabel}
           @gds-menu-item-click=${__privateMethod(this, _handleItemClick, handleItemClick_fn)}
         >
           <slot allow="gds-menu-item"></slot>
@@ -1702,8 +1548,15 @@ __decorateClass([
   property6({ type: Boolean, reflect: true })
 ], GdsContextMenu.prototype, "open", 2);
 __decorateClass([
-  property6()
+  property6({
+    attribute: "button-label"
+  })
 ], GdsContextMenu.prototype, "buttonLabel", 2);
+__decorateClass([
+  property6({
+    attribute: "show-label"
+  })
+], GdsContextMenu.prototype, "showLabel", 2);
 __decorateClass([
   property6()
 ], GdsContextMenu.prototype, "label", 2);
@@ -1759,13 +1612,13 @@ GdsMenuItem = __decorateClass([
 ], GdsMenuItem);
 
 // libs/core/src/components/datepicker/datepicker.ts
-import { property as property9, queryAll, queryAsync as queryAsync3, state as state10 } from "lit/decorators.js";
+import { property as property9, query as query3, queryAll, queryAsync as queryAsync3, state as state10 } from "lit/decorators.js";
 import { join } from "lit/directives/join.js";
 import { when as when4 } from "lit/directives/when.js";
 import { until } from "lit/directives/until.js";
 import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
-import { nothing } from "lit";
+import { nothing as nothing2 } from "lit";
 import { msg as msg5 } from "@lit/localize";
 
 // libs/core/src/primitives/calendar/calendar.ts
@@ -1922,6 +1775,8 @@ var GdsCalendar = class extends GdsElement {
       </table>`;
   }
   _valueChanged() {
+    if (!this.value)
+      return;
     this.focusedDate = this.value;
   }
 };
@@ -2028,10 +1883,10 @@ GdsCalendar = __decorateClass([
 ], GdsCalendar);
 
 // libs/core/src/components/datepicker/date-part-spinner.ts
-import { LitElement as LitElement6 } from "lit";
+import { LitElement as LitElement7 } 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 LitElement6 {
+var GdsDatePartSpinner = class extends LitElement7 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _focusNextSpinner);
@@ -2223,7 +2078,7 @@ var dateConverter = {
     return value.toISOString();
   }
 };
-var _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _focusDate, focusDate_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent2, dispatchChangeEvent_fn2, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _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, _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);
@@ -2233,6 +2088,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.
      */
@@ -2250,8 +2106,25 @@ var GdsDatepicker = class extends GdsFormControlElement {
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     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, _handleClipboardCopy, (e) => {
+      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);
+    });
     __privateAdd(this, _handleFieldClick, (e) => {
       this._elSpinners[0].focus();
+      window.getSelection()?.selectAllChildren(this._elSpinners[0]);
     });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
@@ -2281,15 +2154,24 @@ var GdsDatepicker = class extends GdsFormControlElement {
         this._focusedYear--;
       }
     });
-    __privateAdd(this, _handleFocusChange, async () => {
+    __privateAdd(this, _handleCalendarFocusChange, async () => {
       this._focusedMonth = (await this._elCalendar).focusedMonth;
       this._focusedYear = (await this._elCalendar).focusedYear;
+      this.value = (await this._elCalendar).focusedDate;
       this.requestUpdate();
+      __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);
+      }
     });
     __privateAdd(this, _handleSpinnerKeydown, (e) => {
       const index = Array.from(this._elSpinners).findIndex(
@@ -2342,6 +2224,12 @@ var GdsDatepicker = class extends GdsFormControlElement {
     else
       return void 0;
   }
+  /**
+   * Get a string representation of the currently displayed value in the input field. The formatting will match the dateformat attribute.
+   */
+  get displayValue() {
+    return this._elInput.innerText;
+  }
   /**
    * A reference to a date cell element (<td>) inside the shadow root of the calendar primitive.
    * Inteded for use in integration tests.
@@ -2359,7 +2247,13 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
       <div class="form-info"><slot name="sub-label"></slot></div>
 
-      <div class="field" id="trigger" @click=${__privateGet(this, _handleFieldClick)}>
+      <div
+        class="field"
+        id="trigger"
+        @click=${__privateGet(this, _handleFieldClick)}
+        @copy=${__privateGet(this, _handleClipboardCopy)}
+        @paste=${__privateGet(this, _handleClipboardPaste)}
+      >
         <div class="input">
           ${join(
       map(
@@ -2457,7 +2351,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
         <gds-calendar
           id="calendar"
           @change=${__privateGet(this, _handleCalendarChange)}
-          @gds-date-focused=${__privateGet(this, _handleFocusChange)}
+          @gds-date-focused=${__privateGet(this, _handleCalendarFocusChange)}
           .focusedMonth=${this._focusedMonth}
           .focusedYear=${this._focusedYear}
           .value=${this.value}
@@ -2476,7 +2370,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
           >
             ${msg5("Clear")}
           </button>
-          ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing)}
+          ${until(__privateMethod(this, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn).call(this), nothing2)}
           <button
             class="tertiary today"
             @click=${() => {
@@ -2507,10 +2401,13 @@ var GdsDatepicker = class extends GdsFormControlElement {
     __privateSet(this, _spinnerState, { year, month, day });
   }
   _handleOpenChange() {
-    if (this.open)
+    if (this.open) {
+      __privateSet(this, _valueOnOpen, this.value);
       this._elCalendar.then((el) => el.focus());
+    }
   }
 };
+_valueOnOpen = new WeakMap();
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {
   const focusedDate = await this.getFocusedDate();
@@ -2528,13 +2425,13 @@ renderBackToValidRangeButton_fn = async function() {
     () => html`<button class="tertiary back-to-range" @click=${buttonAction}>
           ${buttonTxt}
         </button>`,
-    () => nothing
+    () => nothing2
   )}`;
 };
 _focusDate = new WeakSet();
 focusDate_fn = function(d) {
   const firstValidDate = new Date(d);
-  this._elCalendar.then((el) => el.focusedDate = firstValidDate).then(__privateGet(this, _handleFocusChange));
+  this._elCalendar.then((el) => el.focusedDate = firstValidDate).then(__privateGet(this, _handleCalendarFocusChange));
 };
 _getSpinnerLabel = new WeakSet();
 getSpinnerLabel_fn = function(name) {
@@ -2571,13 +2468,23 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_dispatchInputEvent = new WeakSet();
+dispatchInputEvent_fn = function() {
+  this.dispatchEvent(
+    new CustomEvent("input", {
+      detail: { value: this.value }
+    })
+  );
+};
+_handleClipboardCopy = new WeakMap();
+_handleClipboardPaste = new WeakMap();
 _handleFieldClick = new WeakMap();
 _handleCalendarChange = new WeakMap();
 _handleMonthChange = new WeakMap();
 _handleYearChange = new WeakMap();
 _handleIncrementFocusedMonth = new WeakMap();
 _handleDecrementFocusedMonth = new WeakMap();
-_handleFocusChange = new WeakMap();
+_handleCalendarFocusChange = new WeakMap();
 _handlePopoverStateChange = new WeakMap();
 _handleSpinnerKeydown = new WeakMap();
 _parseDateFormat = new WeakSet();
@@ -2666,6 +2573,9 @@ __decorateClass([
 __decorateClass([
   queryAll(getScopedTagName("gds-date-part-spinner"))
 ], GdsDatepicker.prototype, "_elSpinners", 2);
+__decorateClass([
+  query3(".input")
+], GdsDatepicker.prototype, "_elInput", 2);
 __decorateClass([
   state10()
 ], GdsDatepicker.prototype, "_tStyles", 2);

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.4.6",
+  "version": "1.5.1",
   "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/transitional-styles.js

@@ -102,6 +102,9 @@ var option_trans_styles_default = `/**
   }
   :host(:hover),
   :host(:focus-visible) {
+    background-color: var(--gds-ref-pallet-base200);
+  }
+  :host(:active) {
     background-color: var(--gds-ref-pallet-base300);
   }
   :host(:focus) {
@@ -1301,6 +1304,7 @@ button.icon,
   height: 2.75rem;
   width: 2.75rem;
   min-width: auto;
+  --color: var(--gds-ref-pallet-base800);
 }
 .form-group button.icon,
 .form-group .button.icon {
@@ -1336,27 +1340,17 @@ button.icon text,
   stroke: var(--gds-ref-pallet-base800);
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
 }
-button.icon:hover,
-.button.icon:hover {
-  background-color: var(--gds-ref-pallet-base800);
-  border-color: var(--gds-ref-pallet-base800);
-}
-button.icon:hover path,
-button.icon:hover line,
-button.icon:hover circle,
-button.icon:hover rect,
-button.icon:hover ellipse,
-button.icon:hover polyline,
-button.icon:hover text,
-.button.icon:hover path,
-.button.icon:hover line,
-.button.icon:hover circle,
-.button.icon:hover rect,
-.button.icon:hover ellipse,
-.button.icon:hover polyline,
-.button.icon:hover text {
-  fill: var(--gds-ref-pallet-base000);
-  stroke: var(--gds-ref-pallet-base000);
+button.icon:hover, button.icon.highlighted,
+.button.icon:hover,
+.button.icon.highlighted {
+  background-color: rgba(0, 0, 0, 0.1);
+  border-color: transparent;
+}
+button.icon:active, button.icon.highlighted:hover,
+.button.icon:active,
+.button.icon.highlighted:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-color: transparent;
 }
 
 button.primary.danger,
@@ -2708,10 +2702,13 @@ i.sg-icon.sg-icon-ellipsis::before {
       align-items: center;
       display: inline-flex;
       justify-content: center;
-      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
-      border-color: rgb(51, 51, 51);
-      color: rgb(51, 51, 51);
-      --color: rgb(51, 51, 51);
+      background-color: transparent;
+      border: 0.0625rem solid transparent;
+      padding: 0.625rem;
+      height: 2.75rem;
+      width: 2.75rem;
+      min-width: auto;
+      --color: var(--gds-ref-pallet-base800);
     }
     button:focus:not(:focus-visible) {
       box-shadow: none;
@@ -2744,47 +2741,48 @@ i.sg-icon.sg-icon-ellipsis::before {
       font-size: 1.5rem;
       line-height: 2rem;
     }
-    button:not(:disabled, .disabled, [aria-disabled]):hover {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51);
-    }
-    button[aria-selected], button:active, button.active, button.active:hover, button:active:hover {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51);
+    .form-group button {
+      margin-top: -0.625rem;
     }
-    button[aria-selected]:hover, button.active:hover, button:active:hover {
-      opacity: 0.9;
+    button.small {
+      height: 2rem;
+      width: 2rem;
+      padding: 0.4375rem;
+      line-height: 1.125rem;
     }
-    button:focus-visible {
-      background-color: rgb(51, 51, 51);
-      color: rgb(255, 255, 255);
-      --background: rgb(51, 51, 51);
-      --color: rgb(255, 255, 255);
-      border-color: rgb(51, 51, 51) !important;
+    button svg {
+      height: 1rem;
+      width: 1rem;
     }
-    button:disabled, button.disabled, button[aria-disabled=true] {
-      color: var(--text-disabled-color) !important;
-      border-color: var(--border-disabled-color) !important;
-      cursor: not-allowed;
+    button path,
+    button line,
+    button circle,
+    button rect,
+    button ellipse,
+    button polyline,
+    button text {
+      fill: var(--gds-ref-pallet-base800);
+      stroke: var(--gds-ref-pallet-base800);
+      transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
     }
-    button:disabled::-moz-placeholder, button.disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder {
-      color: var(--text-disabled-color);
+    button:hover, button.highlighted {
+      background-color: rgba(0, 0, 0, 0.1);
+      border-color: transparent;
     }
-    button:disabled::placeholder, button.disabled::placeholder, button[aria-disabled=true]::placeholder {
-      color: var(--text-disabled-color);
+    button:active, button.highlighted:hover {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-color: transparent;
     }
   }
   @layer _overrides {
     button {
       border-color: transparent;
+      color: var(--gds-ref-pallet-base800);
+      display: flex;
+      gap: 0.5rem;
       line-height: 0.75;
       padding-inline: 0.4375rem;
+      width: auto;
     }
     button.highlighted {
       background-color: var(--gds-ref-pallet-base300);
@@ -2871,14 +2869,14 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-blue-2));
-      text-decoration: underline;
+      color: var(--gds-ref-pallet-base800);
+      box-shadow: inset 0 0 0 2px var(--gds-ref-pallet-base800);
     }
     :host table tbody tr td:hover:not(.disabled) {
-      background: hsl(var(--sg-hsl-blue-0));
+      background: var(--gds-ref-pallet-base300);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
+      color: var(--gds-sys-color-font);
       cursor: pointer;
     }
     :host table tbody tr td:focus-visible:not(.disabled) {
@@ -2899,17 +2897,16 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       outline-offset: 0.125rem;
     }
     :host table tbody tr td[aria-selected=true] {
-      background: hsl(var(--sg-hsl-blue-2));
+      background: var(--gds-ref-pallet-base800);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
     }
     :host table tbody tr td[tabindex="0"] {
       border-radius: 4px;
-      box-shadow: inset 0 0 0 2px hsl(var(--sg-hsl-blue-2));
     }
     :host table tbody tr td:hover:active:not(.disabled) {
-      background: hsl(var(--sg-hsl-blue-2));
+      background: var(--gds-ref-pallet-base800);
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
       color: hsl(var(--sg-hsl-white));
@@ -3085,6 +3082,12 @@ i.sg-icon.sg-icon-ellipsis::before {
     background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);
     outline: none;
   }
+  .field [role=spinbutton]::-moz-selection {
+    background: transparent;
+  }
+  .field [role=spinbutton]::selection {
+    background: transparent;
+  }
   .field button {
     -webkit-appearance: none;
        -moz-appearance: none;
@@ -3212,7 +3215,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 = "-a568b5";
+var VER_SUFFIX = "-ea801b";
 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;