@sebgroup/green-core 1.4.6 → 1.5.0

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 = "-eaa4d5";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -877,10 +877,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 +890,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 +900,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 +926,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 +949,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();
       }
@@ -1592,6 +1592,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 +1644,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 +1664,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 +1685,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 +1705,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 +1769,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 +1932,8 @@ var GdsCalendar = class extends GdsElement {
       </table>`;
   }
   _valueChanged() {
+    if (!this.value)
+      return;
     this.focusedDate = this.value;
   }
 };
@@ -2028,10 +2040,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 +2235,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, _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);
@@ -2250,8 +2262,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 +2310,21 @@ 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, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
     });
     __privateAdd(this, _handlePopoverStateChange, (e) => {
       if (e.target !== e.currentTarget)
         return;
       this.open = e.detail.open;
+      if (e.detail.reason === "cancel") {
+        this.value = __privateGet(this, _valueOnOpen);
+        __privateMethod(this, _dispatchChangeEvent2, dispatchChangeEvent_fn2).call(this);
+      }
     });
     __privateAdd(this, _handleSpinnerKeydown, (e) => {
       const index = Array.from(this._elSpinners).findIndex(
@@ -2342,6 +2377,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 +2400,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 +2504,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 +2523,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 +2554,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 +2578,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 +2621,15 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_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 +2718,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.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

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 = "-eaa4d5";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {