@sebgroup/green-core 3.24.0 → 3.24.1

package/components/button/button.component.js

@@ -28,7 +28,12 @@ import {
 import { GdsFormControlElement } from "../form/form-control.js";
 import ButtonStyles from "./button.styles.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
-const attributeForwards = [...ariaForwards, "gds-tabindex", "gds-aria-selected"];
+const attributeForwards = [
+  ...ariaForwards,
+  "gds-tabindex",
+  "gds-aria-selected",
+  "gds-aria-expanded"
+];
 const html = stripWhitespace(customElementHtml);
 let Button = class extends GdsFormControlElement {
   constructor() {

package/components/calendar/calendar.component.js

@@ -26,6 +26,7 @@ import { tokens } from "../../tokens.style.js";
 import { TransitionalStyles } from "../../transitional-styles.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { watch } from "../../utils/decorators/watch.js";
+import { dateHasChanged } from "../../utils/helpers/has-changed.js";
 import CalendarStyles from "./calendar.styles.js";
 import { renderMonthGridView } from "./functions.js";
 let GdsCalendar = class extends GdsElement {
@@ -268,7 +269,7 @@ GdsCalendar.shadowRootOptions = {
   delegatesFocus: true
 };
 __decorateClass([
-  property()
+  property({ hasChanged: dateHasChanged })
 ], GdsCalendar.prototype, "value", 2);
 __decorateClass([
   property({ type: Date })

package/components/context-menu/context-menu.component.js

@@ -132,6 +132,9 @@ let GdsContextMenu = class extends withMarginProps(
       ${when(this.open, __privateGet(this, _renderPopover))}`;
   }
   _handleOpenChange() {
+    if (__privateGet(this, _elTriggerBtn)) {
+      applyTriggerAriaAttributes(__privateGet(this, _elTriggerBtn), this.open, "menu");
+    }
     if (!this.open) {
       requestAnimationFrame(() => __privateGet(this, _elTriggerBtn)?.focus());
     }

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn, _getSpinnerValue, getSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _isDateSelectable, isDateSelectable_fn, _nearestSelectableDate, nearestSelectableDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn, _getSpinnerValue, getSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -13,7 +13,7 @@ import { join } from "lit/directives/join.js";
 import { map } from "lit/directives/map.js";
 import { repeat } from "lit/directives/repeat.js";
 import { when } from "lit/directives/when.js";
-import { isSameDay, lastDayOfMonth, setHours } from "date-fns";
+import { addDays, isSameDay, lastDayOfMonth, setHours } from "date-fns";
 import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
@@ -27,6 +27,7 @@ import {
   dateArrayConverter,
   dateConverter
 } from "../../utils/helpers/attribute-converters.js";
+import { dateHasChanged } from "../../utils/helpers/has-changed.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -52,7 +53,24 @@ let Datepicker = class extends GdsFormControlElement {
      * the local calendar day is preserved, then to the configured UTC hour.
      */
     __privateAdd(this, _normalizeDate);
+    /**
+     * Focuses (and selects) a date in the calendar. The month/year state and value are derived
+     * directly from `d` rather than read back from the calendar element asynchronously, so that a
+     * concurrent update (e.g. the host re-assigning an equivalent `value`) cannot race with, and
+     * overwrite, the requested focus change.
+     */
     __privateAdd(this, _focusDate);
+    /**
+     * Whether the given date can be selected, taking `min`/`max`, `disabledWeekends` and
+     * `disabledDates` into account.
+     */
+    __privateAdd(this, _isDateSelectable);
+    /**
+     * Finds the nearest selectable date starting from `from` (inclusive), stepping a day at a time in
+     * `direction` (`1` towards `max`, `-1` towards `min`). Falls back to `from` if the min/max range is
+     * exhausted without finding a selectable date.
+     */
+    __privateAdd(this, _nearestSelectableDate);
     __privateAdd(this, _shouldShowTodayButton);
     __privateAdd(this, _getSpinnerLabel);
     __privateAdd(this, _getMinSpinnerValue);
@@ -254,6 +272,8 @@ let Datepicker = class extends GdsFormControlElement {
     return super.value;
   }
   set value(value) {
+    if (!dateHasChanged(value, super.value))
+      return;
     super.value = value;
   }
   get utcHours() {
@@ -606,13 +626,14 @@ renderBackToValidRangeButton_fn = function() {
   if (!this._outOfRangeAction)
     return nothing;
   const isAfterMax = this._outOfRangeAction === "max";
+  const target = isAfterMax ? __privateMethod(this, _nearestSelectableDate, nearestSelectableDate_fn).call(this, this.max, -1) : __privateMethod(this, _nearestSelectableDate, nearestSelectableDate_fn).call(this, this.min, 1);
   return html`<gds-button
       id="back-to-valid-range-button"
       rank="tertiary"
       size="small"
       @click=${(e) => {
     e.stopPropagation();
-    __privateMethod(this, _focusDate, focusDate_fn).call(this, isAfterMax ? this.max : this.min);
+    __privateMethod(this, _focusDate, focusDate_fn).call(this, target);
   }}
     >
       ${isAfterMax ? msg("Last available date") : msg("First available date")}
@@ -639,20 +660,43 @@ normalizeDate_fn = function(d) {
 _focusDate = new WeakSet();
 focusDate_fn = function(d) {
   const focusDate = __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, d);
-  this._elCalendar.then((el) => el.focusedDate = focusDate).then(__privateGet(this, _handleCalendarFocusChange)).then(() => this._elCalendar).then((el) => el.updateComplete.then(() => el.focus()));
+  this._focusedMonth = focusDate.getMonth();
+  this._focusedYear = focusDate.getFullYear();
+  this.value = new Date(focusDate);
+  this.requestUpdate();
+  __privateMethod(this, _dispatchInputEvent, dispatchInputEvent_fn).call(this);
+  this._elCalendar.then((el) => {
+    el.focusedDate = focusDate;
+    el.updateComplete.then(() => el.focus());
+  });
 };
-_shouldShowTodayButton = new WeakSet();
-shouldShowTodayButton_fn = function() {
-  if (this.hideTodayButton)
-    return false;
-  const today = __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, /* @__PURE__ */ new Date());
-  const isOutsideMinMax = (today < this.min || today > this.max) && !isSameDay(today, this.min) && !isSameDay(today, this.max);
+_isDateSelectable = new WeakSet();
+isDateSelectable_fn = function(date) {
+  const isOutsideMinMax = (date < this.min || date > this.max) && !isSameDay(date, this.min) && !isSameDay(date, this.max);
   if (isOutsideMinMax)
     return false;
-  const isWeekend = today.getDay() === 0 || today.getDay() === 6;
+  const isWeekend = date.getDay() === 0 || date.getDay() === 6;
   if (this.disabledWeekends && isWeekend)
     return false;
-  return !this.disabledDates?.some((d) => isSameDay(d, today));
+  return !this.disabledDates?.some((d) => isSameDay(d, date));
+};
+_nearestSelectableDate = new WeakSet();
+nearestSelectableDate_fn = function(from, direction) {
+  let candidate = new Date(from);
+  while (!__privateMethod(this, _isDateSelectable, isDateSelectable_fn).call(this, candidate)) {
+    const next = addDays(candidate, direction);
+    const passedBoundary = direction === 1 ? next > this.max : next < this.min;
+    if (passedBoundary)
+      return from;
+    candidate = next;
+  }
+  return candidate;
+};
+_shouldShowTodayButton = new WeakSet();
+shouldShowTodayButton_fn = function() {
+  if (this.hideTodayButton)
+    return false;
+  return __privateMethod(this, _isDateSelectable, isDateSelectable_fn).call(this, __privateMethod(this, _normalizeDate, normalizeDate_fn).call(this, /* @__PURE__ */ new Date()));
 };
 _getSpinnerLabel = new WeakSet();
 getSpinnerLabel_fn = function(name) {
@@ -768,7 +812,7 @@ isValueOutsideRange_get = function() {
 };
 Datepicker.styles = [tokens, formControlHostStyle, DatepickerStyles];
 __decorateClass([
-  property({ converter: dateConverter })
+  property({ converter: dateConverter, hasChanged: dateHasChanged })
 ], Datepicker.prototype, "value", 1);
 __decorateClass([
   property({ converter: dateConverter })

package/components/link/link.styles.js

@@ -12,9 +12,16 @@ const style = css`
 
   @layer link {
     a {
-      display: flex;
-      align-items: center;
-      gap: 1ch;
+      /*
+       * Intentionally not display: flex. A flex row only wraps onto a new
+       * flex line if the container wraps, but text wrapping inside a flex
+       * item happens within a single flex line. That caused lead/trail
+       * icons to center against the full height of multi-line wrapped text
+       * instead of following the specific line they're adjacent to.
+       * display: inline lets icons flow and wrap together with the text
+       * like any other inline content.
+       */
+      display: inline;
       text-decoration: none;
       text-underline-offset: 0.2lh;
       color: currentColor;
@@ -39,6 +46,19 @@ const style = css`
         }
       }
     }
+
+    ::slotted(*) {
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    slot[name='lead']::slotted(*) {
+      margin-inline-end: 1ch;
+    }
+
+    slot[name='trail']::slotted(*) {
+      margin-inline-start: 1ch;
+    }
   }
 `;
 var link_styles_default = style;

package/components/popover/popover.component.js

@@ -27,7 +27,8 @@ function roundByDPR(value) {
   return Math.round(value * dpr) / dpr;
 }
 function applyTriggerAriaAttributes(trigger, open, popupRole) {
-  trigger.setAttribute("aria-expanded", String(open));
+  const ariaExpandedAttr = trigger.nodeName.startsWith("GDS-") ? "gds-aria-expanded" : "aria-expanded";
+  trigger.setAttribute(ariaExpandedAttr, String(open));
   const focusableNodeNames = ["A", "BUTTON", "INPUT", "TEXTAREA"];
   const isProbablyFocusable = trigger.nodeName.startsWith("GDS-") || focusableNodeNames.includes(trigger.nodeName);
   if (!isProbablyFocusable) {
@@ -222,7 +223,7 @@ let GdsPopover = class extends GdsElement {
   }
   _handleOpenChange() {
     this.updateComplete.then(() => {
-      this._trigger?.setAttribute("aria-expanded", String(this.open));
+      __privateMethod(this, _setupTriggerAttributes, setupTriggerAttributes_fn).call(this);
       if (this.open) {
         !this.nonmodal ? this._elDialog?.showModal() : this._elDialog?.setAttribute("open", "true");
         if (this.autofocus) {