@sebgroup/green-core 3.25.0 → 3.25.1

package/components/datepicker/datepicker.component.d.ts

@@ -117,8 +117,18 @@ declare class Datepicker extends GdsFormControlElement<Date> {
      * Intended for use in integration tests.
      */
     test_getDateCell(dayNumber: number): Promise<Element | null | undefined>;
-    private _focusedMonth;
-    private _focusedYear;
+    /**
+     * The month currently displayed in the calendar popover. Defaults to today's month, clamped into
+     * `min`/`max`, until explicitly set (e.g. by a `value`, or user navigation) - so that opening the
+     * calendar without a value never lands on an out-of-range month where no date can be selected.
+     */
+    private get _focusedMonth();
+    private set _focusedMonth(value);
+    /**
+     * The year currently displayed in the calendar popover. See `_focusedMonth` for defaulting behaviour.
+     */
+    private get _focusedYear();
+    private set _focusedYear(value);
     private _dateFormatLayout;
     private _outOfRangeAction?;
     private _currentLocale;

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _utcHours, _valueOnOpen, _Datepicker_instances, shouldShowFooter_fn, renderBackToValidRangeButton_fn, updateOutOfRangeAction_fn, normalizeDate_fn, focusDate_fn, isDateSelectable_fn, nearestSelectableDate_fn, shouldShowTodayButton_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, getLocalizedPlaceholder_fn, getSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
+var _utcHours, _focusedMonthOverride, _focusedYearOverride, _Datepicker_instances, defaultFocusedDate_get, _valueOnOpen, shouldShowFooter_fn, renderBackToValidRangeButton_fn, updateOutOfRangeAction_fn, normalizeDate_fn, focusDate_fn, isDateSelectable_fn, nearestSelectableDate_fn, shouldShowTodayButton_fn, getSpinnerLabel_fn, getMinSpinnerValue_fn, getMaxSpinnerValue_fn, getLocalizedPlaceholder_fn, getSpinnerValue_fn, dispatchChangeEvent_fn, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, years_get, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -59,8 +59,8 @@ let Datepicker = class extends GdsFormControlElement {
     __privateAdd(this, _utcHours, 12);
     this.disabledWeekends = false;
     this.showExtendedSupportingText = false;
-    this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
-    this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
+    __privateAdd(this, _focusedMonthOverride);
+    __privateAdd(this, _focusedYearOverride);
     this._dateFormatLayout = __privateMethod(this, _Datepicker_instances, parseDateFormat_fn).call(this, "y-m-d");
     this._currentLocale = navigator.language;
     __privateAdd(this, _valueOnOpen);
@@ -257,6 +257,18 @@ let Datepicker = class extends GdsFormControlElement {
   async test_getDateCell(dayNumber) {
     return this._elCalendar.then((el) => el.getDateCell(dayNumber));
   }
+  get _focusedMonth() {
+    return __privateGet(this, _focusedMonthOverride) ?? __privateGet(this, _Datepicker_instances, defaultFocusedDate_get).getMonth();
+  }
+  set _focusedMonth(value) {
+    __privateSet(this, _focusedMonthOverride, value);
+  }
+  get _focusedYear() {
+    return __privateGet(this, _focusedYearOverride) ?? __privateGet(this, _Datepicker_instances, defaultFocusedDate_get).getFullYear();
+  }
+  set _focusedYear(value) {
+    __privateSet(this, _focusedYearOverride, value);
+  }
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-datepicker");
@@ -559,8 +571,16 @@ let Datepicker = class extends GdsFormControlElement {
   }
 };
 _utcHours = new WeakMap();
-_valueOnOpen = new WeakMap();
+_focusedMonthOverride = new WeakMap();
+_focusedYearOverride = new WeakMap();
 _Datepicker_instances = new WeakSet();
+defaultFocusedDate_get = function() {
+  const today = /* @__PURE__ */ new Date();
+  if (today < this.min) return this.min;
+  if (today > this.max) return this.max;
+  return today;
+};
+_valueOnOpen = new WeakMap();
 shouldShowFooter_fn = function() {
   return !this.plain;
 };
@@ -815,10 +835,10 @@ __decorateClass([
 ], Datepicker.prototype, "test_backToValidRangeButton", 2);
 __decorateClass([
   state()
-], Datepicker.prototype, "_focusedMonth", 2);
+], Datepicker.prototype, "_focusedMonth", 1);
 __decorateClass([
   state()
-], Datepicker.prototype, "_focusedYear", 2);
+], Datepicker.prototype, "_focusedYear", 1);
 __decorateClass([
   state()
 ], Datepicker.prototype, "_dateFormatLayout", 2);

package/components/details/details.component.d.ts

@@ -20,6 +20,17 @@ export declare class GdsDetails extends GdsDetails_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     private _isAnimating;
+    /**
+     * Drives the native `<details>` element's `open` attribute. Kept as a
+     * separate state from `open` because its timing must be sequenced around
+     * the height transition below (see `__handleOpenChange`).
+     */
+    private _detailsOpen;
+    /**
+     * Drives the CSS classes that trigger the height/padding transition.
+     * Kept separate from `open` for the same reason as `_detailsOpen`.
+     */
+    private _visualOpen;
     /**
      * The summary text displayed in the details header
      */
@@ -39,6 +50,8 @@ export declare class GdsDetails extends GdsDetails_base {
     private _content?;
     private _openIconSlot?;
     private _closedIconSlot?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     private __handleOpenChange;
     render(): any;
 }

package/components/details/details.component.js

@@ -1,9 +1,12 @@
 import {
   __decorateClass,
   __privateAdd,
-  __privateGet
+  __privateGet,
+  __privateMethod,
+  __privateSet,
+  __privateWrapper
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _handleContentTransitionEnd, _renderHeader, _renderIconButton, _renderContent;
+var _pendingToggleId, _animationFallbackTimeoutId, _GdsDetails_instances, scheduleAnimationFallback_fn, _handleToggle, _handleKeydown, _syncGroupState, _dispatchStateEvent, _handleContentTransitionEnd, _renderHeader, _renderIconButton, _renderContent;
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { GdsElement } from "../../gds-element.js";
@@ -22,17 +25,32 @@ import {
 import { GdsButton } from "../button/button.component.js";
 import { GdsIconDetails } from "./details-icon/details-icon.component.js";
 import DetailsStyles from "./details.styles.js";
+function parseCssTimeToMs(value) {
+  const trimmed = value.trim();
+  const num = parseFloat(trimmed);
+  if (Number.isNaN(num)) return 0;
+  return trimmed.endsWith("ms") ? num : num * 1e3;
+}
+function getTransitionDurationMs(el) {
+  return getComputedStyle(el).transitionDuration.split(",").reduce((max, value) => Math.max(max, parseCssTimeToMs(value)), 0);
+}
 let GdsDetails = class extends withSizeXProps(
   withMarginProps(withLayoutChildProps(GdsElement))
 ) {
   constructor() {
     super(...arguments);
+    __privateAdd(this, _GdsDetails_instances);
     this._isAnimating = false;
+    this._detailsOpen = false;
+    this._visualOpen = false;
     this.summary = "";
     this.name = "";
     this.open = false;
     this.size = "large";
-    __privateAdd(this, _handleToggle, () => {
+    __privateAdd(this, _pendingToggleId, 0);
+    __privateAdd(this, _animationFallbackTimeoutId);
+    __privateAdd(this, _handleToggle, (event) => {
+      event?.preventDefault();
       this.open = !this.open;
       __privateGet(this, _dispatchStateEvent).call(this);
     });
@@ -63,35 +81,34 @@ let GdsDetails = class extends withSizeXProps(
     __privateAdd(this, _handleContentTransitionEnd, (event) => {
       if (event.target !== this._content || event.propertyName !== "height")
         return;
+      if (__privateGet(this, _animationFallbackTimeoutId) !== void 0) {
+        clearTimeout(__privateGet(this, _animationFallbackTimeoutId));
+        __privateSet(this, _animationFallbackTimeoutId, void 0);
+      }
       this._isAnimating = false;
+      this._detailsOpen = this.open;
     });
     __privateAdd(this, _renderHeader, () => {
       return html`
-      <div
+      <summary
         class="summary"
         part="summary"
-        role="button"
-        tabindex="0"
         @click=${__privateGet(this, _handleToggle)}
         @keydown=${__privateGet(this, _handleKeydown)}
-        aria-expanded="${this.open}"
-        aria-controls="content-${this.name || "default"}"
       >
         <div id="summary-${this.name || "default"}" class="summary-label">
           ${this.summary || "Summary"}
         </div>
         ${__privateGet(this, _renderIconButton).call(this)}
-      </div>
+      </summary>
     `;
     });
     __privateAdd(this, _renderIconButton, () => {
       return html`
-      <div class="summary-icon" role="presentation" aria-hidden="true">
+      <div class="summary-icon" inert>
         <gds-button
           rank="tertiary"
           size=${this.size === "small" ? "xs" : "medium"}
-          role="presentation"
-          gds-tabindex="-1"
         >
           <gds-icon-details .open=${this.open}></gds-icon-details>
         </gds-button>
@@ -104,7 +121,7 @@ let GdsDetails = class extends withSizeXProps(
         id="content-${this.name || "default"}"
         class=${classMap({
         content: true,
-        open: this.open,
+        open: this._visualOpen,
         animating: this._isAnimating,
         small: this.size === "small"
       })}
@@ -117,26 +134,92 @@ let GdsDetails = class extends withSizeXProps(
     `;
     });
   }
+  connectedCallback() {
+    super.connectedCallback();
+    __privateWrapper(this, _pendingToggleId)._++;
+    if (__privateGet(this, _animationFallbackTimeoutId) !== void 0) {
+      clearTimeout(__privateGet(this, _animationFallbackTimeoutId));
+      __privateSet(this, _animationFallbackTimeoutId, void 0);
+    }
+    this._isAnimating = false;
+    this._detailsOpen = this.open;
+    this._visualOpen = this.open;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    __privateWrapper(this, _pendingToggleId)._++;
+    if (__privateGet(this, _animationFallbackTimeoutId) !== void 0) {
+      clearTimeout(__privateGet(this, _animationFallbackTimeoutId));
+      __privateSet(this, _animationFallbackTimeoutId, void 0);
+    }
+  }
   __handleOpenChange() {
     __privateGet(this, _syncGroupState).call(this);
-    if (this.hasUpdated) {
-      this._isAnimating = true;
+    if (!this.hasUpdated) {
+      this._detailsOpen = this.open;
+      this._visualOpen = this.open;
+      return;
+    }
+    this._isAnimating = true;
+    const toggleId = ++__privateWrapper(this, _pendingToggleId)._;
+    if (__privateGet(this, _animationFallbackTimeoutId) !== void 0) {
+      clearTimeout(__privateGet(this, _animationFallbackTimeoutId));
+      __privateSet(this, _animationFallbackTimeoutId, void 0);
+    }
+    if (this.open) {
+      this._detailsOpen = true;
+      this.updateComplete.then(() => {
+        if (toggleId !== __privateGet(this, _pendingToggleId) || !this.open) return;
+        this._content?.getBoundingClientRect();
+        this._visualOpen = true;
+        __privateMethod(this, _GdsDetails_instances, scheduleAnimationFallback_fn).call(this);
+      });
+    } else {
+      this._visualOpen = false;
+      this.updateComplete.then(() => {
+        if (toggleId !== __privateGet(this, _pendingToggleId) || this.open) return;
+        __privateMethod(this, _GdsDetails_instances, scheduleAnimationFallback_fn).call(this);
+      });
     }
   }
   render() {
     return html`
-      <div
+      <details
         class=${classMap({
       details: true,
-      open: this.open,
+      open: this._visualOpen,
       small: this.size === "small"
     })}
+        ?open=${this._detailsOpen}
       >
         ${__privateGet(this, _renderHeader).call(this)} ${__privateGet(this, _renderContent).call(this)}
-      </div>
+      </details>
     `;
   }
 };
+_pendingToggleId = new WeakMap();
+_animationFallbackTimeoutId = new WeakMap();
+_GdsDetails_instances = new WeakSet();
+/**
+ * Guarantees `_isAnimating`/`_detailsOpen` eventually settle even if the
+ * `height` transitionend this normally waits for never fires -- e.g.
+ * browsers without support for animating to/from intrinsic sizing
+ * keywords (`interpolate-size`) don't actually transition `height` here,
+ * so no such event is ever dispatched.
+ */
+scheduleAnimationFallback_fn = function() {
+  if (!this._content) {
+    this._isAnimating = false;
+    this._detailsOpen = this.open;
+    return;
+  }
+  const fallbackDelay = getTransitionDurationMs(this._content) + 100;
+  __privateSet(this, _animationFallbackTimeoutId, setTimeout(() => {
+    __privateSet(this, _animationFallbackTimeoutId, void 0);
+    this._isAnimating = false;
+    this._detailsOpen = this.open;
+  }, fallbackDelay));
+};
 _handleToggle = new WeakMap();
 _handleKeydown = new WeakMap();
 _syncGroupState = new WeakMap();
@@ -149,6 +232,12 @@ GdsDetails.styles = [tokens, DetailsStyles];
 __decorateClass([
   state()
 ], GdsDetails.prototype, "_isAnimating", 2);
+__decorateClass([
+  state()
+], GdsDetails.prototype, "_detailsOpen", 2);
+__decorateClass([
+  state()
+], GdsDetails.prototype, "_visualOpen", 2);
 __decorateClass([
   property({ type: String })
 ], GdsDetails.prototype, "summary", 2);

package/components/details/details.styles.js

@@ -101,6 +101,10 @@ const style = css`
     }
 
     .content {
+      /* Overrides the UA stylesheet's details:not([open]) > *:not(summary)
+         rule (display: none), which would otherwise prevent the
+         height-based open/close transition below from running. */
+      display: block;
       interpolate-size: allow-keywords;
       height: 0;
       transition:

package/components/fab/fab.styles.js

@@ -13,6 +13,11 @@ const style = css`
     width: max-content;
   }
 
+  /* Match the icon-only button's inline size to the height boost above, so it renders as a circle instead of a stadium shape. */
+  .button.circle {
+    min-inline-size: calc(var(--_block-size) + var(--gds-sys-space-xs));
+  }
+
   ::slotted([gds-element='gds-signal']) {
     margin-left: var(--gds-sys-space-xs);
   }

package/components/table/table.component.js

@@ -519,6 +519,7 @@ renderCellContent_fn = function(row, column, index) {
   return html`
       <div
         class="cell-content"
+        role=${ifDefined(isMobile ? void 0 : "presentation")}
         aria-label=${ifDefined(isMobile ? column.label : void 0)}
       >
         ${isMobile ? __privateMethod(this, _GdsTable_instances, renderMobileLabel_fn).call(this, column) : null} ${content}
@@ -903,7 +904,7 @@ renderExpandedLoadingRow_fn = function(_row, _index, groupId, childIndex, rowCou
     const isActionsColumn = String(column.key) === "actions";
     return html`
             <td class=${classes} style=${style}>
-              <div class="cell-content">
+              <div class="cell-content" role="presentation">
                 ${isActionsColumn ? html`<span class="skeleton skeleton-action"></span>` : html`<span class="skeleton skeleton-text"></span>`}
               </div>
             </td>
@@ -1091,7 +1092,7 @@ renderSkeletonCell_fn = function(column) {
   const isResponsive = this._isMobile && this.responsive;
   const mobileLabel = isResponsive ? html`<span class="skeleton skeleton-text"></span>` : null;
   return html`
-      <div class="cell-content">
+      <div class="cell-content" role="presentation">
         ${mobileLabel}
         <span class="skeleton skeleton-text"></span>
       </div>
@@ -1199,7 +1200,7 @@ renderTableFoot_fn = function() {
         column.sticky ? column.key : void 0
       )}
                 >
-                  <div class="cell-content">
+                  <div class="cell-content" role="presentation">
                     <span class="tablefoot-label">${label}</span>
                     <slot name="tfoot:${column.key}"></slot>
                   </div>
@@ -1214,7 +1215,7 @@ renderTableFoot_fn = function() {
       column.sticky ? column.key : void 0
     )}
               >
-                <div class="cell-content">
+                <div class="cell-content" role="presentation">
                   <slot name="tfoot:${column.key}"></slot>
                 </div>
               </td>