@sebgroup/green-core 1.4.3 → 1.4.5

package/components/datepicker/datepicker.d.ts

@@ -78,4 +78,5 @@ export declare class GdsDatepicker extends GdsFormControlElement<Date> {
     connectedCallback(): void;
     render(): any;
     private _handleValueChange;
+    private _handleOpenChange;
 }

package/index.js

@@ -139,7 +139,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 = "-ebe3ca";
+var VER_SUFFIX = "-6cf221";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var gdsCustomElement = (tagName) => {
   if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
@@ -1907,6 +1907,9 @@ var GdsCalendar = class extends GdsElement {
         </tbody>
       </table>`;
   }
+  _valueChanged() {
+    this.focusedDate = this.value;
+  }
 };
 _setSelectedDate = new WeakSet();
 setSelectedDate_fn = function(date) {
@@ -2003,6 +2006,9 @@ __decorateClass([
 __decorateClass([
   state8()
 ], GdsCalendar.prototype, "_tStyles", 2);
+__decorateClass([
+  watch("value")
+], GdsCalendar.prototype, "_valueChanged", 1);
 GdsCalendar = __decorateClass([
   gdsCustomElement("gds-calendar")
 ], GdsCalendar);
@@ -2203,7 +2209,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, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+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 GdsDatepicker = class extends GdsFormControlElement {
   constructor() {
     super(...arguments);
@@ -2230,6 +2236,9 @@ 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, _handleFieldClick, (e) => {
+      this._elSpinners[0].focus();
+    });
     __privateAdd(this, _handleCalendarChange, (e) => {
       e.stopPropagation();
       this.value = e.detail;
@@ -2336,7 +2345,7 @@ var GdsDatepicker = class extends GdsFormControlElement {
 
       <div class="form-info"><slot name="sub-label"></slot></div>
 
-      <div class="field" id="trigger">
+      <div class="field" id="trigger" @click=${__privateGet(this, _handleFieldClick)}>
         <div class="input">
           ${join(
       map(
@@ -2483,6 +2492,10 @@ var GdsDatepicker = class extends GdsFormControlElement {
     const day = date.getDate().toString().padStart(2, "0");
     __privateSet(this, _spinnerState, { year, month, day });
   }
+  _handleOpenChange() {
+    if (this.open)
+      this._elCalendar.then((el) => el.focus());
+  }
 };
 _renderBackToValidRangeButton = new WeakSet();
 renderBackToValidRangeButton_fn = async function() {
@@ -2544,6 +2557,7 @@ dispatchChangeEvent_fn2 = function() {
     })
   );
 };
+_handleFieldClick = new WeakMap();
 _handleCalendarChange = new WeakMap();
 _handleMonthChange = new WeakMap();
 _handleYearChange = new WeakMap();
@@ -2644,6 +2658,9 @@ __decorateClass([
 __decorateClass([
   watch("value")
 ], GdsDatepicker.prototype, "_handleValueChange", 1);
+__decorateClass([
+  watch("open")
+], GdsDatepicker.prototype, "_handleOpenChange", 1);
 GdsDatepicker = __decorateClass([
   gdsCustomElement("gds-datepicker")
 ], GdsDatepicker);

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.3",
+  "version": "1.4.5",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -24,7 +24,8 @@
     "@floating-ui/dom": "^1.5.4",
     "@lit/localize": "0.11.4",
     "lit": "^2.8.0",
-    "reflect-metadata": "^0.1.13"
+    "reflect-metadata": "^0.1.13",
+    "date-fns": "^2.28.0"
   },
   "exports": {
     ".": {

package/primitives/calendar/calendar.d.ts

@@ -51,4 +51,5 @@ export declare class GdsCalendar extends GdsElement {
     connectedCallback(): void;
     focus(): void;
     render(): import("lit").TemplateResult<1>;
+    private _valueChanged;
 }

package/transitional-styles.js

@@ -2871,8 +2871,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
     :host table tbody tr td.today {
       background: transparent;
       border-radius: 4px;
-      box-shadow: inset 0 0 0 2px hsl(var(--sg-hsl-blue-2));
       color: hsl(var(--sg-hsl-blue-2));
+      text-decoration: underline;
     }
     :host table tbody tr td:hover:not(.disabled) {
       background: hsl(var(--sg-hsl-blue-0));
@@ -2882,10 +2882,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       cursor: pointer;
     }
     :host table tbody tr td:focus-visible:not(.disabled) {
-      background: hsl(var(--sg-hsl-blue-0));
       border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
       cursor: pointer;
       position: relative;
       z-index: 0;
@@ -2907,10 +2905,8 @@ var calendar_trans_styles_default = `/* stylelint-disable max-nesting-depth */
       color: hsl(var(--sg-hsl-white));
     }
     :host table tbody tr td[tabindex="0"] {
-      background: hsl(var(--sg-hsl-blue-2));
-      border: solid 1px var(--sg-bg-level-2);
       border-radius: 4px;
-      color: hsl(var(--sg-hsl-white));
+      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));
@@ -3216,7 +3212,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 = "-ebe3ca";
+var VER_SUFFIX = "-6cf221";
 var elementLookupTable = /* @__PURE__ */ new Map();
 var templateCache = /* @__PURE__ */ new WeakMap();
 function applyElementScoping(strings, ...values) {