@sebgroup/green-core 3.29.0 → 3.30.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/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/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