@sebgroup/green-core 2.23.0 → 2.24.0-rc.20260120115958844

package/components/datepicker/datepicker.component.js

@@ -15,6 +15,7 @@ import { repeat } from "lit/directives/repeat.js";
 import { until } from "lit/directives/until.js";
 import { when } from "lit/directives/when.js";
 import { isSameDay } from "date-fns";
+import lastDayOfMonth from "date-fns/lastDayOfMonth";
 import { GdsButton } from "../../components/button/button.component.js";
 import { GdsDropdown } from "../../components/dropdown/dropdown.component.js";
 import { GdsFlex } from "../../components/flex/flex.component.js";
@@ -192,11 +193,13 @@ let Datepicker = class extends GdsFormControlElement {
     });
     __privateAdd(this, _handleSpinnerChange, (val, name) => {
       __privateGet(this, _spinnerState)[name] = val;
-      const newDate = /* @__PURE__ */ new Date();
-      newDate.setFullYear(parseInt(__privateGet(this, _spinnerState).year));
-      newDate.setMonth(parseInt(__privateGet(this, _spinnerState).month) - 1);
-      newDate.setDate(parseInt(__privateGet(this, _spinnerState).day));
+      const newDate = /* @__PURE__ */ new Date("0000-01-01");
       newDate.setUTCHours(this.utcHours, 0, 0, 0);
+      newDate.setUTCFullYear(parseInt(__privateGet(this, _spinnerState).year));
+      newDate.setUTCMonth(parseInt(__privateGet(this, _spinnerState).month) - 1);
+      const lastOfMonth = lastDayOfMonth(newDate).getDate();
+      const setDay = lastOfMonth < parseInt(__privateGet(this, _spinnerState).day) ? lastOfMonth : parseInt(__privateGet(this, _spinnerState).day);
+      newDate.setUTCDate(isNaN(setDay) ? 1 : setDay);
       if (newDate.toString() === "Invalid Date") return;
       this.value = newDate;
       __privateMethod(this, _Datepicker_instances, dispatchChangeEvent_fn).call(this);

package/components/datepicker/datepicker.styles.js

@@ -37,7 +37,7 @@ const style = css`
       margin: calc(-1 * var(--gds-sys-space-4xs));
       border-radius: var(--gds-sys-radius-3xs);
 
-      &:focus-visible {
+      &:focus {
         background-color: var(--gds-sys-color-l3-neutral-01);
         color: var(--gds-sys-color-content-inversed);
       }

package/components/pagination/pagination.component.d.ts

@@ -63,6 +63,10 @@ export declare class GdsPagination extends GdsPagination_base {
      * Enables first and last button
      */
     jump: boolean;
+    /**
+     * Hide options
+     */
+    hideOptions: boolean;
     /**
      * Controls density mode on pagination
      * Accepts: `comfortable`, `compact`, `spacious`

package/components/pagination/pagination.component.js

@@ -77,6 +77,7 @@ let GdsPagination = class extends withMarginProps(
     this.total = 0;
     this.options = [5, 10, 25, 50];
     this.jump = false;
+    this.hideOptions = false;
     this.density = "comfortable";
     this.label = "";
     this._isMobile = false;
@@ -295,7 +296,7 @@ renderPageSizeOption_fn = function(size) {
     `;
 };
 renderPageSizeMenu_fn = function() {
-  if (this._isMobile) return null;
+  if (this._isMobile || this.hideOptions) return null;
   const rowsLabel = `${msg("Rows per page")}, ${this.rows} ${msg("selected")}`;
   return html`
       <gds-flex align-items="center" gap="s">
@@ -394,6 +395,13 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], GdsPagination.prototype, "jump", 2);
+__decorateClass([
+  property({
+    attribute: "hide-options",
+    type: Boolean,
+    reflect: false
+  })
+], GdsPagination.prototype, "hideOptions", 2);
 __decorateClass([
   property({ reflect: false })
 ], GdsPagination.prototype, "density", 2);

package/components/popover/popover.component.d.ts

@@ -58,6 +58,10 @@ export declare class GdsPopover extends GdsElement {
      * Whether to use a modal dialog in mobile viewport.
      */
     disableMobileStyles: boolean;
+    /**
+     * Whether to disable closing the popover when the page is scrolled.
+     */
+    disableScrollClose: boolean;
     /**
      * Whether the popover should autofocus the first slotted child when opened.
      */

package/components/popover/popover.component.js

@@ -43,6 +43,7 @@ let GdsPopover = class extends GdsElement {
     this.label = void 0;
     this.placement = "bottom-start";
     this.disableMobileStyles = false;
+    this.disableScrollClose = false;
     this.autofocus = false;
     this.calcMinWidth = (referenceEl) => `${referenceEl.offsetWidth}px`;
     this.calcMaxWidth = (_referenceEl) => `auto`;
@@ -117,7 +118,7 @@ let GdsPopover = class extends GdsElement {
       }
     });
     __privateAdd(this, _handlePageScroll, () => {
-      if (this.open && window.innerWidth > 767 && __privateGet(this, _dispatchUiStateEvent).call(this, "close")) {
+      if (this.open && !this.disableScrollClose && window.innerWidth > 767 && __privateGet(this, _dispatchUiStateEvent).call(this, "close")) {
         this.open = false;
       }
     });
@@ -353,6 +354,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean })
 ], GdsPopover.prototype, "disableMobileStyles", 2);
+__decorateClass([
+  property({ type: Boolean })
+], GdsPopover.prototype, "disableScrollClose", 2);
 __decorateClass([
   property({ type: Boolean })
 ], GdsPopover.prototype, "autofocus", 2);

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

@@ -19,6 +19,18 @@ import * as Types from './table.types';
 export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElement {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * The main headline text displayed at the top of the table.
+     */
+    headline?: string;
+    /**
+     * The HTML tag to use for the headline (e.g., 'h1', 'h2', etc.).
+     */
+    headlineTag: string;
+    /**
+     * A brief description or summary displayed below the headline.
+     */
+    summary?: string;
     /**
      * Configurable options for rows per page.
      * Accepts: number array (e.g., `[5, 10, 20, 50, 100]`)

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.QU3DSPNU.js";
-var _cache, _cacheDuration, _templateCache, _GdsTable_instances, Density_get, hasSelection_get, isAllSelected_get, isPartialSelection_get, getCacheKey_fn, isCacheValid_fn, loadData_fn, getSlotContent_fn, renderCell_fn, renderCellContent_fn, renderSortIcon_fn, hasHeaderContent_fn, renderHeaderControls_fn, renderColumnHeader_fn, renderActionsHeader_fn, renderSelectableHeader_fn, renderColumnHeaders_fn, renderTableHeader_fn, renderTableCell_fn, renderSelectableCell_fn, renderRowCells_fn, renderActionsCell_fn, renderTableRow_fn, renderCheckbox_fn, renderSkeletonCell_fn, renderSkeletonRow_fn, renderTableBody_fn, renderTable_fn, renderErrorState_fn, renderEmptyState_fn, renderFooter_fn, handleSearch_fn, handleSearchClear_fn, handleSort_fn, handlePageChange_fn, handlePageSizeChange_fn, handleColumnVisibility_fn, handleSelectAll_fn, handleRowSelect_fn, selectAllInternal_fn, clearSelectionInternal_fn, emitSelectionChange_fn, initializeScrollTracking_fn, updateVerticalScrollState_fn, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _templateCache, _GdsTable_instances, Density_get, hasSelection_get, isAllSelected_get, isPartialSelection_get, getCacheKey_fn, isCacheValid_fn, loadData_fn, getSlotContent_fn, renderCell_fn, renderCellContent_fn, renderSortIcon_fn, hasHeaderContent_fn, renderHeaderControls_fn, renderColumnHeader_fn, renderActionsHeader_fn, renderSelectableHeader_fn, renderColumnHeaders_fn, renderTableHeader_fn, renderTableCell_fn, renderSelectableCell_fn, renderRowCells_fn, renderActionsCell_fn, renderTableRow_fn, renderCheckbox_fn, renderSkeletonCell_fn, renderSkeletonRow_fn, renderTableBody_fn, renderTable_fn, renderErrorState_fn, renderEmptyState_fn, renderFooter_fn, renderHeadline_fn, handleSearch_fn, handleSearchClear_fn, handleSort_fn, handlePageChange_fn, handlePageSizeChange_fn, handleColumnVisibility_fn, handleSelectAll_fn, handleRowSelect_fn, selectAllInternal_fn, clearSelectionInternal_fn, emitSelectionChange_fn, initializeScrollTracking_fn, updateVerticalScrollState_fn, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -30,6 +30,7 @@ let GdsTable = class extends GdsElement {
     __privateAdd(this, _cache, {});
     __privateAdd(this, _cacheDuration, 5 * 60 * 1e3);
     __privateAdd(this, _templateCache, /* @__PURE__ */ new Map());
+    this.headlineTag = "h2";
     this.options = [5, 10, 20, 50, 100];
     this.page = 1;
     this.rows = 10;
@@ -91,6 +92,7 @@ let GdsTable = class extends GdsElement {
     return html`
       <div class="${classMap(classes)}">
         ${[
+      __privateMethod(this, _GdsTable_instances, renderHeadline_fn).call(this),
       __privateMethod(this, _GdsTable_instances, renderHeaderControls_fn).call(this),
       when(
         this._error,
@@ -742,7 +744,7 @@ renderTable_fn = function() {
     loading: this._loading,
     loaded: !this._loading && !this._loaded
   });
-  const caption = `${msg("Data table with")} ${this._total} ${msg("rows")}`;
+  const caption = `${this.summary}, ${msg("Data table with")} ${this._total} ${msg("rows")}`;
   return html`
       <gds-card
         variant="${this.variant}"
@@ -817,7 +819,7 @@ renderFooter_fn = function() {
   if (this.plain || this._total < 1) return null;
   const start = (this._view.page - 1) * this._view.rows + 1;
   const end = Math.min(this._view.page * this._view.rows, this._total);
-  const summaryString = `${start} - ${end} ${msg("of")} ${this._total}`;
+  const summaryString = `${start}\u2013${end} ${msg("of")} ${this._total}`;
   return html`
       <gds-pagination
         .page=${this._view.page}
@@ -833,6 +835,36 @@ renderFooter_fn = function() {
       </gds-pagination>
     `;
 };
+renderHeadline_fn = function() {
+  if (this.plain) return null;
+  if (this.headline || this.summary) {
+    return html`
+        <gds-flex flex-direction="column" gap="4xs">
+          <gds-text
+            tag="${this.headlineTag}"
+            font="heading-s"
+            text-wrap="balance"
+            max-width="80ch"
+          >
+            ${this.headline}
+          </gds-text>
+          <gds-text
+            tag="p"
+            font=${this.density === "compact" ? "body-regular-s" : "body-regular-m"}
+            text-wrap="balance"
+            max-width="80ch"
+          >
+            ${this.summary}
+          </gds-text>
+        </gds-flex>
+        ${when(
+      this.searchable || this.settings,
+      () => html`<gds-divider color="subtle-01"></gds-divider>`,
+      () => html``
+    )}
+      `;
+  }
+};
 handleSearch_fn = async function(e) {
   const input = e.target;
   this._view = {
@@ -988,6 +1020,19 @@ updateHorizontalScrollState_fn = function(container) {
   }
 };
 GdsTable.styles = Table.Styles;
+__decorateClass([
+  property()
+], GdsTable.prototype, "headline", 2);
+__decorateClass([
+  property({
+    attribute: "headline-tag",
+    type: String,
+    reflect: true
+  })
+], GdsTable.prototype, "headlineTag", 2);
+__decorateClass([
+  property()
+], GdsTable.prototype, "summary", 2);
 __decorateClass([
   property({ type: Array })
 ], GdsTable.prototype, "options", 2);

package/components/table/table.imports.d.ts

@@ -1,6 +1,6 @@
-import { GdsBadge, GdsButton, GdsContextMenu, GdsDropdown, GdsFlex, GdsImg, GdsInput, GdsLink, GdsMenuItem, IconCrossSmall } from '../../pure';
+import { GdsBadge, GdsButton, GdsContextMenu, GdsDivider, GdsDropdown, GdsFlex, GdsImg, GdsInput, GdsLink, GdsMenuItem, IconCrossSmall } from '../../pure';
 import { GdsPagination } from '../pagination/pagination.component';
 export { checkboxToggle as Checkbox } from '../../shared-styles/rbcb-toggle.template';
 export { accountsFormats as FormatAccount, dateTimeFormats as FormatDate, numberFormats as FormatNumber, } from '../formatted-text/formatters';
 export declare const Styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
-export declare const Dependencies: (typeof GdsMenuItem | typeof GdsButton | typeof IconCrossSmall | typeof GdsFlex | typeof GdsBadge | typeof GdsLink | typeof GdsContextMenu | typeof GdsDropdown | typeof GdsImg | typeof GdsPagination | typeof GdsInput)[];
+export declare const Dependencies: (typeof GdsMenuItem | typeof GdsButton | typeof IconCrossSmall | typeof GdsFlex | typeof GdsBadge | typeof GdsLink | typeof GdsContextMenu | typeof GdsDropdown | typeof GdsDivider | typeof GdsImg | typeof GdsPagination | typeof GdsInput)[];

package/components/table/table.imports.js

@@ -4,6 +4,7 @@ import {
   GdsButton,
   GdsCard,
   GdsContextMenu,
+  GdsDivider,
   GdsDropdown,
   GdsFlex,
   GdsImg,
@@ -34,6 +35,7 @@ const Styles = [tokens, checkboxStyles, TableStyles];
 const Dependencies = [
   GdsButton,
   GdsCard,
+  GdsDivider,
   GdsImg,
   GdsContextMenu,
   GdsMenuItem,

package/components/table/table.styles.js

@@ -34,7 +34,7 @@ const TableStyles = css`
     --table-header-padding-x: var(--gds-sys-space-m);
     --table-row-min-height: var(--gds-sys-space-4xl);
     --table-font-size: var(--gds-sys-text-detail-book-s);
-    --table-gap: var(--gds-sys-space-xl);
+    --table-gap: var(--gds-sys-space-l);
     --table-border-spacing: 0 var(--gds-sys-space-4xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs);
   }
@@ -47,7 +47,7 @@ const TableStyles = css`
     --table-header-padding-x: var(--gds-sys-space-l);
     --table-row-min-height: var(--gds-sys-space-5xl);
     --table-font-size: var(--gds-sys-text-detail-book-m);
-    --table-gap: var(--gds-sys-space-2xl);
+    --table-gap: var(--gds-sys-space-xl);
     --table-border-spacing: 0 var(--gds-sys-space-3xs);
     --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs);
   }
@@ -268,7 +268,6 @@ const TableStyles = css`
 
   /* Striped */
   .striped tbody tr:not(.selected, :hover):nth-child(even) td {
-    /*  background-color: var(--gds-sys-color-l2-neutral-01); */
     background-color: var(--_table-row-striped);
   }
 
@@ -277,6 +276,7 @@ const TableStyles = css`
   }
 
   /* Header & Footer Layout */
+
   .header {
     display: flex;
     justify-content: space-between;