@sebgroup/green-core 3.29.0 → 3.31.0

package/components/calendar/calendar.component.js

@@ -27,6 +27,7 @@ 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 { gdsGetLocale } from "../../utils/localization/localization.js";
 import CalendarStyles from "./calendar.styles.js";
 import { renderMonthGridView } from "./functions.js";
 let GdsCalendar = class extends GdsElement {
@@ -79,6 +80,7 @@ let GdsCalendar = class extends GdsElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-calendar");
+    this._currentLocale = gdsGetLocale();
     this.addEventListener("keydown", __privateMethod(this, _GdsCalendar_instances, handleKeyDown_fn));
     window.addEventListener("lit-localize-status", (e) => {
       if (e.detail.status === "ready")

package/components/coachmark/coachmark.component.js

@@ -43,7 +43,9 @@ let GdsCoachmark = class extends GdsElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    document.addEventListener("click", () => {
+    document.addEventListener("click", (event) => {
+      const clickedOtherCoachmark = event.composedPath().some((node) => node instanceof GdsCoachmark && node !== this);
+      if (clickedOtherCoachmark) return;
       setTimeout(() => {
         __privateMethod(this, _GdsCoachmark_instances, updateCoachmarks_fn).call(this);
         __privateMethod(this, _GdsCoachmark_instances, closeCoachMark_fn).call(this);

package/components/datepicker/datepicker.component.js

@@ -29,6 +29,7 @@ import {
   dateConverter
 } from "../../utils/helpers/attribute-converters.js";
 import { dateHasChanged } from "../../utils/helpers/has-changed.js";
+import { gdsGetLocale } from "../../utils/localization/localization.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -280,6 +281,14 @@ let Datepicker = class extends GdsFormControlElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-datepicker");
+    this._currentLocale = gdsGetLocale();
+    if (!this.value) {
+      __privateSet(this, _spinnerState, {
+        year: __privateMethod(this, _Datepicker_instances, getLocalizedPlaceholder_fn).call(this, "year"),
+        month: __privateMethod(this, _Datepicker_instances, getLocalizedPlaceholder_fn).call(this, "month"),
+        day: __privateMethod(this, _Datepicker_instances, getLocalizedPlaceholder_fn).call(this, "day")
+      });
+    }
     window.addEventListener("lit-localize-status", (e) => {
       if (e.detail.status === "ready") {
         this._currentLocale = e.detail.readyLocale;

package/components/dropdown/dropdown.component.js

@@ -309,20 +309,18 @@ let Dropdown = class extends GdsFormControlElement {
    */
   get displayValue() {
     if (this.value === void 0) {
-      return this.placeholder?.innerText || "";
+      return this.placeholder?.textContent?.trim() || "";
     }
     let displayValue;
     if (Array.isArray(this.value)) {
       displayValue = this.value.slice(0, 5).reduce(
-        (acc, cur) => acc + this.options.find((v) => this.compareWith(v.value, cur))?.innerText + ", ",
+        (acc, cur) => acc + this.options.find((v) => this.compareWith(v.value, cur))?.textContent?.trim() + ", ",
         ""
       ).slice(0, -2).replace(/(.{25})(.*)/, "$1...");
     } else {
-      displayValue = this.options.find(
-        (v) => this.compareWith(v.value, this.value)
-      )?.innerText;
+      displayValue = this.options.find((v) => this.compareWith(v.value, this.value))?.textContent?.trim();
     }
-    return displayValue || this.placeholder?.innerText || "";
+    return displayValue || this.placeholder?.textContent?.trim() || "";
   }
   /**
    * Moves focus to this element.

package/components/index.d.ts

@@ -48,4 +48,5 @@ export * from './tabs';
 export * from './table';
 export * from './textarea';
 export * from './theme';
+export * from './tooltip';
 export * from './video';

package/components/index.js

@@ -48,4 +48,5 @@ export * from "./tabs/index.js";
 export * from "./table/index.js";
 export * from "./textarea/index.js";
 export * from "./theme/index.js";
+export * from "./tooltip/index.js";
 export * from "./video/index.js";

package/components/popover/popover.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.H2T4A5YY.js";
-var _GdsPopover_instances, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _clickOutsideTarget, registerClickOutside_fn, unregisterClickOutside_fn, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, registerTriggerEvents_fn, unregisterTriggerEvents_fn, setupTriggerAttributes_fn, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside, _handlePageScroll;
+var _GdsPopover_instances, handleTriggerSlotChange_fn, _autoPositionCleanupFn, _isMobileViewport, _backdropEl, _clickOutsideTarget, _hideVirtKbAfterGesture, cancelPendingVirtKbHide_fn, registerClickOutside_fn, unregisterClickOutside_fn, _handleCancel, _dispatchUiStateEvent, _handleCloseButton, registerTriggerEvents_fn, unregisterTriggerEvents_fn, setupTriggerAttributes_fn, registerAutoPositioning_fn, _handleTriggerKeyDown, _handleTriggerClick, _focusFirstSlottedChild, _handleClickOutside, _handlePageScroll;
 import { localized, msg } from "@lit/localize";
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -67,6 +67,9 @@ let GdsPopover = class extends GdsElement {
     // The node the click outside listener is currently attached to. Kept so that removal always
     // targets the same node it was added to, even if the resolved target would differ by then.
     __privateAdd(this, _clickOutsideTarget);
+    __privateAdd(this, _hideVirtKbAfterGesture, () => {
+      this._isVirtKbVisible = false;
+    });
     __privateAdd(this, _handleCancel, () => {
       if (__privateGet(this, _dispatchUiStateEvent).call(this, "cancel")) this.open = false;
     });
@@ -165,9 +168,15 @@ let GdsPopover = class extends GdsElement {
       const t = e.target;
       if (t === this) return;
       if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") {
+        __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
         this._isVirtKbVisible = true;
       } else {
-        this._isVirtKbVisible = false;
+        __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
+        window.addEventListener(
+          "pointerup",
+          __privateGet(this, _hideVirtKbAfterGesture),
+          { once: true }
+        );
       }
     });
     this.addEventListener("blurin", (_) => {
@@ -178,6 +187,7 @@ let GdsPopover = class extends GdsElement {
     super.disconnectedCallback();
     __privateMethod(this, _GdsPopover_instances, unregisterTriggerEvents_fn).call(this);
     __privateMethod(this, _GdsPopover_instances, unregisterClickOutside_fn).call(this);
+    __privateMethod(this, _GdsPopover_instances, cancelPendingVirtKbHide_fn).call(this);
     window.removeEventListener("scroll", __privateGet(this, _handlePageScroll));
   }
   render() {
@@ -270,6 +280,10 @@ _autoPositionCleanupFn = new WeakMap();
 _isMobileViewport = new WeakMap();
 _backdropEl = new WeakMap();
 _clickOutsideTarget = new WeakMap();
+_hideVirtKbAfterGesture = new WeakMap();
+cancelPendingVirtKbHide_fn = function() {
+  window.removeEventListener("pointerup", __privateGet(this, _hideVirtKbAfterGesture));
+};
 registerClickOutside_fn = function() {
   if (!this.open || !this.isConnected) return;
   __privateMethod(this, _GdsPopover_instances, unregisterClickOutside_fn).call(this);

package/components/progress/progress.component.js

@@ -14,6 +14,7 @@ import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
 import { styleExpressionProperty } from "../../utils/decorators/style-expression-property.js";
+import { gdsGetLocale } from "../../utils/localization/localization.js";
 import {
   withLayoutChildProps,
   withMarginProps,
@@ -42,6 +43,7 @@ let Progress = class extends GdsElement {
   }
   connectedCallback() {
     super.connectedCallback();
+    this._currentLocale = gdsGetLocale();
     window.addEventListener("lit-localize-status", __privateGet(this, _handleLocaleStatus));
   }
   disconnectedCallback() {

package/components/table/table.component.js

@@ -236,7 +236,7 @@ isExpandableEnabled_get = function() {
   return !__privateGet(this, _GdsTable_instances, isResponsiveStacked_get) && __privateGet(this, _GdsTable_instances, expandableIndices_get).length > 0;
 };
 isSelectableEnabled_get = function() {
-  return this.selectable && !__privateGet(this, _GdsTable_instances, isResponsiveStacked_get);
+  return this.selectable;
 };
 Density_get = function() {
   return Types.DENSITY_CONFIG[this.density];
@@ -835,16 +835,22 @@ renderExpandableCell_fn = function(row, index) {
       </td>
     `;
 };
-renderSelectableCell_fn = function(index) {
+renderSelectableCell_fn = function(row, index) {
   if (!__privateGet(this, _GdsTable_instances, isSelectableEnabled_get)) return null;
-  const selectRowLabel = `${msg("Select row")} ${index + 1}`;
+  const selectRowLabel = row.selectLabel || `${msg("Select row")} ${index + 1}`;
+  const isMobile = this._isMobile && this.responsive;
+  const inputId = `select-row-${index}`;
   return html`
       <td class="checkbox-cell">
+        ${isMobile ? html`<label class="column-label" aria-hidden="true" for=${inputId}
+              >${selectRowLabel}</label
+            >` : null}
         <div class="cell-center" role="presentation">
           ${__privateMethod(this, _GdsTable_instances, renderCheckbox_fn).call(this, {
     checked: this._selected.has(index),
     indeterminate: false,
     ariaLabel: selectRowLabel,
+    inputId,
     onToggle: () => __privateMethod(this, _GdsTable_instances, handleRowSelect_fn).call(this, index, {
       detail: { checked: !this._selected.has(index) }
     })
@@ -1031,7 +1037,7 @@ renderTableRow_fn = function(row, index) {
       >
         ${[
     __privateMethod(this, _GdsTable_instances, renderExpandableCell_fn).call(this, row, index),
-    __privateMethod(this, _GdsTable_instances, renderSelectableCell_fn).call(this, index),
+    __privateMethod(this, _GdsTable_instances, renderSelectableCell_fn).call(this, row, index),
     __privateMethod(this, _GdsTable_instances, renderRowCells_fn).call(this, row, index)
   ]}
       </tr>
@@ -1047,7 +1053,8 @@ renderCheckbox_fn = function({
   disabled = false,
   ariaLabel,
   onToggle,
-  skip = false
+  skip = false,
+  inputId
 }) {
   if (skip) return null;
   const toggle = (e) => {
@@ -1062,6 +1069,16 @@ renderCheckbox_fn = function({
     }
   };
   return html`
+      <input
+        id=${ifDefined(inputId)}
+        type="checkbox"
+        class="visually-hidden-checkbox"
+        .checked=${checked}
+        .indeterminate=${indeterminate}
+        ?disabled=${disabled}
+        aria-hidden="true"
+        @change=${toggle}
+      />
       <div
         class="rbcb-wrapper"
         role="checkbox"
@@ -1070,15 +1087,6 @@ renderCheckbox_fn = function({
         @click=${toggle}
         @keydown=${onKey}
       >
-        <input
-          type="checkbox"
-          class="visually-hidden-checkbox"
-          .checked=${checked}
-          .indeterminate=${indeterminate}
-          ?disabled=${disabled}
-          aria-hidden="true"
-          @change=${toggle}
-        />
         ${Table.Checkbox({
     checked,
     indeterminate,
@@ -1146,7 +1154,8 @@ renderTableBody_fn = function() {
         this._expanding.has(index),
         this._completingExpansion.has(index),
         this._expandedRowsCache.get(index),
-        this._expandedFullContentResolved.has(index)
+        this._expandedFullContentResolved.has(index),
+        __privateGet(this, _GdsTable_instances, isResponsiveStacked_get)
       ],
       () => __privateMethod(this, _GdsTable_instances, renderTableRow_fn).call(this, row, index)
     )

package/components/table/table.stories.data.js

@@ -16,7 +16,9 @@ const defineSlots = (row) => ({
   account: Slot(row.account, ["main"]),
   login: Slot(row.lastLogin, ["main"]),
   download: Slot(row.download ?? "#", ["main"]),
-  actions: Slot(void 0, ["main"])
+  actions: Slot(void 0, ["main"]),
+  // Demonstrates the per-row `selectLabel` override, derived from the row's own name.
+  selectLabel: `Select ${String(row.name).split(" ")[0]}`
 });
 let usersRawCache = null;
 let usersRawPromise = null;
@@ -604,7 +606,9 @@ const financeRows = financeBaseRows.map((row) => ({
   available: Slot(row.available, ["available-value", "available-currency"]),
   status: Slot(row.status, ["status"]),
   accountNumberDisplay: Slot(row.accountNumber, ["main"]),
-  actions: Slot(void 0, ["main"])
+  actions: Slot(void 0, ["main"]),
+  // Demonstrates the per-row `selectLabel` override, derived from the row's own account name.
+  selectLabel: `Select: ${row.account}`
 }));
 const financeExpandableData = async (request) => {
   let data = [...financeRows];

package/components/table/table.styles.js

@@ -349,6 +349,12 @@ const TableStyles = css`
     height: 100%;
   }
 
+  /* The input sits beside the wrapper (not inside) so label clicks don't toggle twice. */
+  .visually-hidden-checkbox:focus-visible + .rbcb-wrapper .rbcb__perimeter {
+    outline-width: var(--gds-sys-space-4xs);
+    scale: 1;
+  }
+
   /* Expanded */
 
   .expander-cell {
@@ -784,11 +790,13 @@ const TableStyles = css`
     .responsive tbody tr {
       display: flex;
       flex-direction: column;
-      padding: var(--table-cell-padding-x);
       border: var(--gds-sys-space-5xs) solid
         var(--gds-sys-color-border-neutral-02);
       border-radius: var(--gds-sys-space-s);
       margin: 0;
+      /* No card padding: each cell carries its own, so a sticky cell's
+         divider/background can reach the card edge without negative margins. */
+      overflow: hidden;
     }
 
     .responsive tbody tr:hover,
@@ -807,7 +815,6 @@ const TableStyles = css`
       display: flex;
       justify-content: flex-start;
       align-items: center;
-      padding: var(--gds-sys-space-xs) 0;
       border: none;
     }
 
@@ -815,8 +822,63 @@ const TableStyles = css`
     .responsive td.checkbox-cell {
       width: auto;
       max-width: none;
-      padding-top: 0;
-      padding-bottom: var(--gds-sys-space-xs);
+    }
+
+    .responsive td.sticky-left,
+    .responsive td.sticky-right {
+      position: static;
+      z-index: auto;
+    }
+
+    /* Leading cells sit above the rest of the card; the divider goes under
+       whichever is the outermost one (mirrors the desktop sticky divider
+       logic), with margin to compensate for the card's own padding being
+       removed. */
+    .responsive.is-selectable:not(.has-sticky-left) td.checkbox-cell,
+    .responsive.is-expandable:not(.is-selectable):not(.has-sticky-left)
+      td.expander-cell,
+    .responsive.has-sticky-left td.sticky-left-last {
+      border-bottom: var(--gds-sys-space-5xs) solid
+        var(--gds-sys-color-border-neutral-02);
+      margin-bottom: var(--table-cell-padding-x);
+    }
+
+    /* Trailing sticky-right cells (e.g. actions) sit below the rest of the card. */
+    .responsive.has-sticky-right td.sticky-right {
+      border-top: var(--gds-sys-space-5xs) solid
+        var(--gds-sys-color-border-neutral-02);
+      margin-top: var(--table-cell-padding-x);
+    }
+
+    /* Whole cell gets the header-matching highlight on mobile, not just the control. */
+    .responsive td.checkbox-cell {
+      margin: var(--gds-sys-space-2xs);
+      background: var(--_table-header-bg);
+      border-radius: var(--gds-sys-radius-s);
+    }
+
+    /* Reset width so the label's flex: 1 pushes the checkbox flush right. */
+    .responsive td.checkbox-cell .cell-center {
+      width: auto;
+      flex: 0 0 auto;
+    }
+
+    /* Cells stack into a card, not a row, so the desktop hover/selected
+       edge-rounding (first/last column) doesn't apply here. */
+    .responsive tbody tr:hover td:first-child,
+    .responsive tbody tr:hover td:last-child,
+    .responsive tbody tr.selected td:first-child,
+    .responsive tbody tr.selected td:last-child,
+    .responsive.striped tbody tr td:first-child,
+    .responsive.striped tbody tr td:last-child {
+      border-radius: 0;
+    }
+
+    /* The checkbox-cell keeps its own fixed pill radius regardless of hover/selected state. */
+    .responsive tbody tr:hover td.checkbox-cell,
+    .responsive tbody tr.selected td.checkbox-cell,
+    .responsive.striped tbody tr td.checkbox-cell {
+      border-radius: var(--gds-sys-radius-s);
     }
 
     .responsive .expand-toggle {
@@ -847,6 +909,23 @@ const TableStyles = css`
     }
   }
 
+  /* Narrow screens: stack label above content, except the select column.
+     Wrap (not column-direction) so multi-slot content (e.g. value + currency
+     badge) stays on one line together, after the full-width label forces a break. */
+  @media (max-width: 400px) {
+    .responsive td:not(.checkbox-cell) .cell-content {
+      flex-wrap: wrap;
+      align-items: center;
+      row-gap: var(--gds-sys-space-4xs);
+      column-gap: var(--gds-sys-space-s);
+    }
+
+    .responsive td:not(.checkbox-cell) .column-label {
+      flex: initial;
+      width: 100%;
+    }
+  }
+
   /* Medium screens: input and dropdown side by side */
   @media (max-width: 760px) and (min-width: 480px) {
     .header {

package/components/table/table.types.d.ts

@@ -55,6 +55,8 @@ export type RowMeta<T extends Record<string, unknown> = Record<string, unknown>>
     expandLabel?: string;
     /** Optional per-row label for expanded state toggle action. */
     collapseLabel?: string;
+    /** Optional per-row label for the row-selection checkbox, replacing the default "Select row N". */
+    selectLabel?: string;
     /**
      * Async readiness signal for slotted full-width expanded content.
      * Called when the row is expanded. The table shows a loading skeleton

package/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './tooltip';

package/components/tooltip/index.js

@@ -0,0 +1 @@
+export * from "./tooltip.js";

package/components/tooltip/tooltip.component.d.ts

@@ -0,0 +1,52 @@
+import { Placement } from '@floating-ui/dom';
+import { GdsElement } from '../../gds-element';
+export type TooltipUIStateChangeReason = 'show' | 'close' | 'cancel';
+/**
+ * @element gds-tooltip
+ *
+ * A tooltip shows short, supplementary text about an element on hover or keyboard focus.
+ *
+ * Point the tooltip at its trigger with the `for` attribute, using the id of the trigger element.
+ * The tooltip is linked to the trigger through `aria-describedby`, so it does not replace the
+ * accessible name of the trigger. An icon-only button still needs its own label.
+ *
+ * Use a popover instead when the content is interactive or needs to stay open.
+ *
+ * @event gds-ui-state - Fired when the tooltip is about to open or close. Can be cancelled to prevent the state change. The `detail` object contains the `open` boolean for the resulting state, and the `reason` string, which is one of `show`, `close` or `cancel`.
+ *
+ * @slot - The tooltip text.
+ *
+ * @status beta
+ */
+export declare class GdsTooltip extends GdsElement {
+    #private;
+    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Whether the tooltip is visible.
+     */
+    open: boolean;
+    /**
+     * The id of the trigger element. The id is resolved in the same document or shadow root as the tooltip.
+     */
+    for?: string;
+    /**
+     * The preferred placement of the tooltip relative to the trigger. The tooltip flips and shifts
+     * automatically when there is not enough space.
+     * Accepts any of the placements supported by Floating UI.
+     */
+    placement: Placement;
+    /**
+     * Delay in milliseconds before the tooltip opens on hover. Keyboard focus opens it without delay,
+     * and so does hovering another trigger right after a tooltip was shown.
+     */
+    delay: number;
+    private _side?;
+    private _multiline;
+    private _elContainer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): any;
+    private _handleForChange;
+    private _handleOpenChange;
+    private _handlePlacementChange;
+}