@sebgroup/green-core 3.22.1 → 3.23.0

package/components/calendar/calendar.component.js

@@ -154,9 +154,7 @@ let GdsCalendar = class extends GdsElement {
           const shouldRenderBlank = this.hideExtraneousDays && isOutsideCurrentMonth;
           return shouldRenderBlank ? html`<td inert></td>` : html`
                           <td
-                            role="${ifDefined(
-            isDisabled ? void 0 : "gridcell"
-          )}"
+                            role="gridcell"
                             class="${classMap({
             small: Boolean(this.size === "small"),
             "custom-date": Boolean(customization),
@@ -165,6 +163,7 @@ let GdsCalendar = class extends GdsElement {
             "outside-month": isOutsideCurrentMonth
           })}"
                             ?disabled=${isDisabled}
+                            aria-disabled="${isDisabled ? "true" : "false"}"
                             tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
                             aria-selected="${this.value && isSameDay(this.value, day) ? "true" : "false"}"
                             aria-label="${this.dateLabelTemplate(day)}"

package/components/context-menu/context-menu.component.d.ts

@@ -43,6 +43,14 @@ export declare class GdsContextMenu extends GdsContextMenu_base {
      * The placement of the popover relative to the trigger.
      */
     placement: Placement;
+    /**
+     * Whether the context menu popover is nonmodal. When true, the popover will not trap focus,
+     * and other elements on the page (including other context menu triggers) will still be
+     * interactable while the menu is open. Enable this when rendering multiple `gds-context-menu`
+     * instances in the same view, so that clicking one trigger while another menu is open closes
+     * the first and opens the second in a single click.
+     */
+    nonmodal: boolean;
     private _elTriggerSlot;
     connectedCallback(): void;
     render(): any;

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

@@ -45,6 +45,7 @@ let GdsContextMenu = class extends withMarginProps(
     this.label = "";
     this.maxHeight = 500;
     this.placement = "bottom-start";
+    this.nonmodal = false;
     __privateAdd(this, _elTriggerBtn, void 0);
     __privateAdd(this, _setupButton, () => {
       if (!__privateGet(this, _elTriggerBtn))
@@ -84,6 +85,7 @@ let GdsContextMenu = class extends withMarginProps(
       .placement=${this.placement}
       .popupRole=${"menu"}
       .calcMaxHeight=${__privateGet(this, _calcMaxHeight)}
+      .nonmodal=${this.nonmodal}
       @gds-ui-state=${(e) => this.open = e.detail.open}
     >
       <gds-menu
@@ -172,6 +174,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsContextMenu.prototype, "nonmodal", 2);
 __decorateClass([
   query('slot[name="trigger"]')
 ], GdsContextMenu.prototype, "_elTriggerSlot", 2);

package/components/dropdown/dropdown.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, _toggleOptionValue, toggleOptionValue_fn, _syncOptionSelection, syncOptionSelection_fn, _focusListbox, _isCommitting, _commitSelection, commitSelection_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, _toggleOptionValue, toggleOptionValue_fn, _syncOptionSelection, syncOptionSelection_fn, _focusListbox, _isPointerPressedInListbox, _handleListboxPointerDown, _handleListboxFocus, _isCommitting, _commitSelection, commitSelection_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
@@ -258,6 +258,25 @@ let Dropdown = class extends GdsFormControlElement {
         (items.find((o) => o.selected) || items[0])?.focus();
       });
     });
+    __privateAdd(this, _isPointerPressedInListbox, false);
+    __privateAdd(this, _handleListboxPointerDown, () => {
+      __privateSet(this, _isPointerPressedInListbox, true);
+      window.addEventListener(
+        "pointerup",
+        () => __privateSet(this, _isPointerPressedInListbox, false),
+        { once: true }
+      );
+    });
+    /**
+     * A pointer press moves focus to the listbox container when it lands somewhere that is not an
+     * option. Handing that focus on to the selected option would scroll the list out from under the
+     * pointer, so the redirect is limited to programmatic focus.
+     */
+    __privateAdd(this, _handleListboxFocus, () => {
+      if (__privateGet(this, _isPointerPressedInListbox))
+        return;
+      __privateGet(this, _focusListbox).call(this);
+    });
     __privateAdd(this, _isCommitting, false);
     /**
      * A listener to close the dropdown when any other element is focused.
@@ -454,7 +473,8 @@ let Dropdown = class extends GdsFormControlElement {
           role="listbox"
           aria-multiselectable="${this.multiple}"
           tabindex="-1"
-          @focus="${__privateGet(this, _focusListbox)}"
+          @focus="${__privateGet(this, _handleListboxFocus)}"
+          @pointerdown="${__privateGet(this, _handleListboxPointerDown)}"
           @gds-select="${__privateGet(this, _handleOptionSelect)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
@@ -572,6 +592,9 @@ syncOptionSelection_fn = function() {
   });
 };
 _focusListbox = new WeakMap();
+_isPointerPressedInListbox = new WeakMap();
+_handleListboxPointerDown = new WeakMap();
+_handleListboxFocus = new WeakMap();
 _isCommitting = new WeakMap();
 _commitSelection = new WeakSet();
 commitSelection_fn = function(value, options = {}) {

package/components/dropdown/option.component.js

@@ -44,6 +44,7 @@ let GdsOption = class extends Focusable(GdsElement) {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "option");
+    this.setAttribute("tabindex", "-1");
     this.updateComplete.then(() => {
       if (this.isPlaceholder) {
         this.hidden = true;

package/components/radio/radio-group/radio-group.component.js

@@ -57,11 +57,13 @@ let RadioGroup = class extends GdsFormControlElement {
       __privateMethod(this, _initializeFocusable, initializeFocusable_fn).call(this);
     });
     this.addEventListener("invalid", this._syncRadioStates);
+    this.addEventListener("gds-validity-state", this._syncRadioStates);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._isConnected = false;
     this.removeEventListener("invalid", this._syncRadioStates);
+    this.removeEventListener("gds-validity-state", this._syncRadioStates);
   }
   focus(options) {
     this._getValidityAnchor()?.focus(options);

package/components/table/table.component.d.ts

@@ -166,6 +166,13 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsTable_
     private _onColumnsChange;
     connectedCallback(): void;
     private _handleLightDOMSlotsChange;
+    /**
+     * Sticky offsets are derived from measured column widths, so they go stale whenever a
+     * sticky column changes size after it was last rendered — for example when cell content
+     * is projected into the slots after the table has rendered, when webfonts load, or when
+     * the available width changes.
+     */
+    private _handleStickyColumnResize;
     updated(changedProperties: Map<string, unknown>): void;
     render(): any;
     /**

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _expandedLoadingDelay, _expandedFullSlotKeys, _pendingExpandedFullSlotRefresh, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _getControlledColumnSort, getControlledColumnSort_fn, _loadData, loadData_fn, _queueExpandedFullSlotRefresh, queueExpandedFullSlotRefresh_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _refreshExpandedFullSlotKeys, refreshExpandedFullSlotKeys_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _expandedLoadingDelay, _expandedFullSlotKeys, _pendingExpandedFullSlotRefresh, _appliedStickyOffsets, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _getControlledColumnSort, getControlledColumnSort_fn, _loadData, loadData_fn, _queueExpandedFullSlotRefresh, queueExpandedFullSlotRefresh_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _refreshExpandedFullSlotKeys, refreshExpandedFullSlotKeys_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -18,6 +18,7 @@ import { GdsElement } from "../../gds-element.js";
 import { watchMediaQuery } from "../../utils/decorators/index.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { observeLightDOM } from "../../utils/decorators/observe-light-dom.js";
+import { resizeObserver } from "../../utils/decorators/resize-observer.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
 import { watch } from "../../utils/decorators/watch.js";
 import { forSpaceTokensAndCustomValues } from "../../utils/helpers/index.js";
@@ -249,6 +250,7 @@ let GdsTable = class extends withSizeXProps(
     __privateAdd(this, _expandedLoadingDelay, 100);
     __privateAdd(this, _expandedFullSlotKeys, /* @__PURE__ */ new Set());
     __privateAdd(this, _pendingExpandedFullSlotRefresh, false);
+    __privateAdd(this, _appliedStickyOffsets, null);
   }
   _handleMobile(matches) {
     this._isMobile = matches;
@@ -296,8 +298,12 @@ let GdsTable = class extends withSizeXProps(
   _handleLightDOMSlotsChange() {
     __privateMethod(this, _queueExpandedFullSlotRefresh, queueExpandedFullSlotRefresh_fn).call(this);
   }
+  _handleStickyColumnResize() {
+    __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
+  }
   updated(changedProperties) {
     super.updated(changedProperties);
+    __privateSet(this, _appliedStickyOffsets, null);
     __privateMethod(this, _updateStickyOffsets, updateStickyOffsets_fn).call(this);
   }
   render() {
@@ -414,6 +420,7 @@ _expandedLoadingExitDuration = new WeakMap();
 _expandedLoadingDelay = new WeakMap();
 _expandedFullSlotKeys = new WeakMap();
 _pendingExpandedFullSlotRefresh = new WeakMap();
+_appliedStickyOffsets = new WeakMap();
 _hasSelection = new WeakSet();
 hasSelection_get = function() {
   return this._selected.size > 0;
@@ -617,28 +624,30 @@ updateStickyOffsets_fn = function() {
   const checkboxTh = root.querySelector("thead th.checkbox-cell");
   if (!leftHeaders.length && !rightHeaders.length)
     return;
-  root.querySelectorAll("[data-col-key]").forEach((el) => {
-    el.style.left = "";
-    el.style.right = "";
-  });
+  const offsets = [];
   let leftAccum = (expanderTh?.offsetWidth ?? 0) + (checkboxTh?.offsetWidth ?? 0);
   for (const th of leftHeaders) {
-    const key = th.dataset.colKey;
-    const offset = `${leftAccum}px`;
-    th.style.left = offset;
+    offsets.push({ th, side: "left", offset: `${leftAccum}px` });
     leftAccum += th.offsetWidth;
-    if (key) {
-      root.querySelectorAll(`[data-col-key="${key}"]`).forEach((el) => el.style.left = offset);
-    }
   }
   let rightAccum = 0;
   for (const th of [...rightHeaders].reverse()) {
-    const key = th.dataset.colKey;
-    const offset = `${rightAccum}px`;
-    th.style.right = offset;
+    offsets.push({ th, side: "right", offset: `${rightAccum}px` });
     rightAccum += th.offsetWidth;
+  }
+  const appliedOffsets = offsets.map(({ th, side, offset }) => `${side}:${th.dataset.colKey}:${offset}`).join("|");
+  if (appliedOffsets === __privateGet(this, _appliedStickyOffsets))
+    return;
+  __privateSet(this, _appliedStickyOffsets, appliedOffsets);
+  root.querySelectorAll("[data-col-key]").forEach((el) => {
+    el.style.left = "";
+    el.style.right = "";
+  });
+  for (const { th, side, offset } of offsets) {
+    const key = th.dataset.colKey;
+    th.style[side] = offset;
     if (key) {
-      root.querySelectorAll(`[data-col-key="${key}"]`).forEach((el) => el.style.right = offset);
+      root.querySelectorAll(`[data-col-key="${key}"]`).forEach((el) => el.style[side] = offset);
     }
   }
 };
@@ -1840,11 +1849,11 @@ initializeScrollTracking_fn = function() {
     __privateMethod(this, _updateHorizontalScrollState, updateHorizontalScrollState_fn).call(this, dataContainer);
   };
   dataContainer.addEventListener("scroll", updateScrollState);
-  const resizeObserver = new ResizeObserver(() => updateScrollState());
-  resizeObserver.observe(dataContainer);
+  const resizeObserver2 = new ResizeObserver(() => updateScrollState());
+  resizeObserver2.observe(dataContainer);
   const innerTable = dataContainer.querySelector("table");
   if (innerTable)
-    resizeObserver.observe(innerTable);
+    resizeObserver2.observe(innerTable);
   updateScrollState();
 };
 _updateVerticalScrollState = new WeakSet();
@@ -2027,6 +2036,11 @@ __decorateClass([
     attributeOldValue: true
   })
 ], GdsTable.prototype, "_handleLightDOMSlotsChange", 1);
+__decorateClass([
+  resizeObserver({
+    selector: "thead th.sticky-left, thead th.sticky-right, thead th.expander-cell, thead th.checkbox-cell"
+  })
+], GdsTable.prototype, "_handleStickyColumnResize", 1);
 GdsTable = __decorateClass([
   localized(),
   gdsCustomElement("gds-table", {