@sebgroup/green-core 1.4.5 → 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/components/dropdown/dropdown.d.ts

@@ -77,13 +77,6 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * are still readable and apply appropriate custom layout or truncation if neccecary.
      */
     syncPopoverWidth: boolean;
-    private _tStyles?;
-    private elTriggerBtn;
-    private elTriggerBtnAsync;
-    private elListbox;
-    private elSearchInput;
-    constructor();
-    connectedCallback(): void;
     /**
      * Get the options of the dropdown.
      */
@@ -98,6 +91,13 @@ export declare class GdsDropdown<ValueT = any> extends GdsFormControlElement<Val
      * If the dropdown is in multiple mode, this will be a comma separated list of the selected values.
      */
     get displayValue(): string;
+    private _tStyles?;
+    private _elTriggerBtn;
+    private _elTriggerBtnAsync;
+    private _elListbox;
+    private _elSearchInput;
+    constructor();
+    connectedCallback(): void;
     render(): any;
     /**
      * Update value assignment and request update when the light DOM changes.

package/index.js

@@ -94,9 +94,13 @@ function watch(propertyName, options) {
 }
 
 // libs/core/src/utils/decorators/observe-light-dom.ts
-function observeLightDOM() {
+function observeLightDOM(observerConfig = {
+  attributes: true,
+  childList: true,
+  subtree: false,
+  characterData: true
+}) {
   return (proto, _propertyKey, descriptor) => {
-    const observerConfig = { attributes: true, childList: true, subtree: false };
     let observer;
     const connectedCallback = proto.connectedCallback;
     const disconnectedCallback = proto.disconnectedCallback;
@@ -139,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 = "-6cf221";
+var VER_SUFFIX = "-eaa4d5";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -873,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
         })
@@ -886,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);
     });
     /**
@@ -896,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");
       }
     });
     /**
@@ -922,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");
         }
       }
     });
@@ -945,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();
       }
@@ -1285,7 +1289,7 @@ var GdsDropdown = class extends GdsFormControlElement {
      * @param e The keyboard event.
      */
     __privateAdd(this, _handleSearchFieldKeyUp, (e) => {
-      const input = this.elSearchInput;
+      const input = this._elSearchInput;
       const options = Array.from(__privateGet(this, _optionElements));
       options.forEach((o) => o.hidden = false);
       if (!input.value)
@@ -1300,11 +1304,13 @@ var GdsDropdown = class extends GdsFormControlElement {
      * If found, focus should be moved to the listbox.
      */
     __privateAdd(this, _handleSearchFieldKeyDown, (e) => {
-      if (e.key === "ArrowDown" || e.key === "Tab") {
-        e.preventDefault();
-        this.elListbox?.focus();
-        return;
-      }
+      this._elListbox?.then((listbox) => {
+        if (e.key === "ArrowDown" || e.key === "Tab") {
+          e.preventDefault();
+          listbox.focus();
+          return;
+        }
+      });
     });
     /**
      * Check for Tab in the listbox.
@@ -1313,12 +1319,12 @@ var GdsDropdown = class extends GdsFormControlElement {
     __privateAdd(this, _handleListboxKeyDown, (e) => {
       if (e.key === "Tab" && this.searchable) {
         e.preventDefault();
-        this.elSearchInput?.focus();
+        this._elSearchInput?.focus();
         return;
       }
     });
     __privateAdd(this, _handleOptionFocusChange, (e) => {
-      const triggerButton = this.elTriggerBtn;
+      const triggerButton = this._elTriggerBtn;
       if (triggerButton)
         triggerButton.ariaActiveDescendantElement = e.target;
     });
@@ -1334,7 +1340,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       if (e.key === "Tab" && !this.searchable) {
         e.preventDefault();
         this.open = false;
-        this.elTriggerBtn?.focus();
+        this._elTriggerBtn?.focus();
       }
     });
     constrainSlots(this);
@@ -1343,14 +1349,6 @@ var GdsDropdown = class extends GdsFormControlElement {
       getScopedTagName("gds-option")
     ));
   }
-  connectedCallback() {
-    super.connectedCallback();
-    TransitionalStyles.instance.apply(this, "gds-dropdown");
-    this.updateComplete.then(() => {
-      this._handleLightDOMChange();
-      this._handleValueChange();
-    });
-  }
   /**
    * Get the options of the dropdown.
    */
@@ -1384,6 +1382,14 @@ var GdsDropdown = class extends GdsFormControlElement {
     }
     return displayValue || this.placeholder?.innerHTML || "";
   }
+  connectedCallback() {
+    super.connectedCallback();
+    TransitionalStyles.instance.apply(this, "gds-dropdown");
+    this.updateComplete.then(() => {
+      this._handleLightDOMChange();
+      this._handleValueChange();
+    });
+  }
   render() {
     return html`
       ${this._tStyles}
@@ -1413,7 +1419,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       <gds-popover
         .label=${this.label}
         .open=${this.open}
-        .triggerRef=${this.elTriggerBtnAsync}
+        .triggerRef=${this._elTriggerBtnAsync}
         .calcMaxWidth=${(trigger) => this.syncPopoverWidth ? `${trigger.offsetWidth}px` : `auto`}
         @gds-ui-state=${(e) => this.open = e.detail.open}
       >
@@ -1444,27 +1450,31 @@ var GdsDropdown = class extends GdsFormControlElement {
   }
   _handleLightDOMChange() {
     this.requestUpdate();
-    this._handleValueChange();
-    if (this.multiple)
+    if (this.multiple) {
+      this._handleValueChange();
       return;
+    }
     if (!this.value) {
       if (this.placeholder)
         this.value = this.placeholder.value;
       else
         this.value = this.options[0]?.value;
-    } else if (!this.placeholder && this.options.find((o) => o.value === this.value) === void 0) {
+    } else if (!this.placeholder && this.options.find(
+      (o) => this.compareWith(o.value, this.value)
+    ) === void 0) {
       this.options[0] && (this.options[0].selected = true);
       this.value = this.options[0]?.value;
     }
   }
   _handleValueChange() {
-    const listbox = this.elListbox;
-    if (listbox) {
-      if (Array.isArray(this.value))
-        listbox.selection = this.value;
-      else
-        listbox.selection = [this.value];
-    }
+    this._elListbox.then((listbox) => {
+      if (listbox) {
+        if (Array.isArray(this.value))
+          listbox.selection = this.value;
+        else
+          listbox.selection = [this.value];
+      }
+    });
   }
   _onOpenChange() {
     const open = this.open;
@@ -1473,7 +1483,7 @@ var GdsDropdown = class extends GdsFormControlElement {
       __privateMethod(this, _registerAutoCloseListener, registerAutoCloseListener_fn).call(this);
     else {
       __privateMethod(this, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn).call(this);
-      this.elSearchInput && (this.elSearchInput.value = "");
+      this._elSearchInput && (this._elSearchInput.value = "");
     }
     this.dispatchEvent(
       new CustomEvent("gds-ui-state", {
@@ -1491,23 +1501,22 @@ _handleListboxKeyDown = new WeakMap();
 _handleOptionFocusChange = new WeakMap();
 _handleSelectionChange = new WeakSet();
 handleSelectionChange_fn = function() {
-  const listbox = this.elListbox;
-  if (!listbox)
-    return;
-  if (this.multiple)
-    this.value = listbox.selection.map((s) => s.value);
-  else {
-    this.value = listbox.selection[0]?.value;
-    this.open = false;
-    setTimeout(() => this.elTriggerBtn?.focus(), 0);
-  }
-  this.dispatchEvent(
-    new CustomEvent("change", {
-      detail: { value: this.value },
-      bubbles: true,
-      composed: true
-    })
-  );
+  this._elListbox.then((listbox) => {
+    if (this.multiple)
+      this.value = listbox.selection.map((s) => s.value);
+    else {
+      this.value = listbox.selection[0]?.value;
+      this.open = false;
+      setTimeout(() => this._elTriggerBtn?.focus(), 0);
+    }
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  });
 };
 _registerAutoCloseListener = new WeakSet();
 registerAutoCloseListener_fn = function() {
@@ -1554,18 +1563,23 @@ __decorateClass([
 ], GdsDropdown.prototype, "_tStyles", 2);
 __decorateClass([
   query("#trigger")
-], GdsDropdown.prototype, "elTriggerBtn", 2);
+], GdsDropdown.prototype, "_elTriggerBtn", 2);
 __decorateClass([
   queryAsync("#trigger")
-], GdsDropdown.prototype, "elTriggerBtnAsync", 2);
+], GdsDropdown.prototype, "_elTriggerBtnAsync", 2);
 __decorateClass([
-  query("#listbox")
-], GdsDropdown.prototype, "elListbox", 2);
+  queryAsync("#listbox")
+], GdsDropdown.prototype, "_elListbox", 2);
 __decorateClass([
   query("#searchinput")
-], GdsDropdown.prototype, "elSearchInput", 2);
+], GdsDropdown.prototype, "_elSearchInput", 2);
 __decorateClass([
-  observeLightDOM()
+  observeLightDOM({
+    attributes: true,
+    childList: true,
+    subtree: true,
+    characterData: true
+  })
 ], GdsDropdown.prototype, "_handleLightDOMChange", 1);
 __decorateClass([
   watch("value")
@@ -1578,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";
@@ -1629,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);
@@ -1648,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>
@@ -1668,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>
@@ -1688,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);
@@ -1745,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
@@ -1908,6 +1932,8 @@ var GdsCalendar = class extends GdsElement {
       </table>`;
   }
   _valueChanged() {
+    if (!this.value)
+      return;
     this.focusedDate = this.value;
   }
 };
@@ -2014,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);
@@ -2209,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);
@@ -2236,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();
@@ -2267,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(
@@ -2328,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.
@@ -2345,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(
@@ -2443,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}
@@ -2462,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=${() => {
@@ -2493,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();
@@ -2514,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) {
@@ -2557,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();
@@ -2652,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.5",
+  "version": "1.5.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -18,7 +18,8 @@
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "public"
+    "access": "public",
+    "directory": "../../dist/libs/core/src"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.4",

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

package/utils/decorators/observe-light-dom.d.ts

@@ -3,5 +3,5 @@ declare type Handler = () => void;
 /**
  * Runs when the light DOM children of the component changes.
  */
-export declare function observeLightDOM(): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
+export declare function observeLightDOM(observerConfig?: MutationObserverInit): <ElemClass extends LitElement>(proto: ElemClass, _propertyKey: string, descriptor: TypedPropertyDescriptor<Handler>) => void;
 export {};