@sebgroup/green-core 2.23.0 → 2.24.0

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/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;

package/custom-elements.json

@@ -11180,7 +11180,7 @@
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` @layer base, reset; @layer base { #calendar-button::part(_button) { outline-offset: -1px; } .spinners { display: flex; align-items: center; justify-content: flex-start; inline-size: 12ch; gap: var(--gds-sys-space-5xs); font: var(--gds-sys-text-detail-regular-m); } :host([size='small']) .spinners { font: var(--gds-sys-text-detail-regular-s); } .spinner { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; box-sizing: border-box; outline: none; padding-block: var(--gds-sys-space-4xs); text-transform: uppercase; line-height: 1; text-align: center; padding: var(--gds-sys-space-4xs); margin: calc(-1 * var(--gds-sys-space-4xs)); border-radius: var(--gds-sys-radius-3xs); &:focus-visible { background-color: var(--gds-sys-color-l3-neutral-01); color: var(--gds-sys-color-content-inversed); } } } `"
+          "default": "css` @layer base, reset; @layer base { #calendar-button::part(_button) { outline-offset: -1px; } .spinners { display: flex; align-items: center; justify-content: flex-start; inline-size: 12ch; gap: var(--gds-sys-space-5xs); font: var(--gds-sys-text-detail-regular-m); } :host([size='small']) .spinners { font: var(--gds-sys-text-detail-regular-s); } .spinner { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; box-sizing: border-box; outline: none; padding-block: var(--gds-sys-space-4xs); text-transform: uppercase; line-height: 1; text-align: center; padding: var(--gds-sys-space-4xs); margin: calc(-1 * var(--gds-sys-space-4xs)); border-radius: var(--gds-sys-radius-3xs); &:focus { background-color: var(--gds-sys-color-l3-neutral-01); color: var(--gds-sys-color-content-inversed); } } } `"
         }
       ],
       "exports": [
@@ -27054,6 +27054,16 @@
               "description": "Enables first and last button",
               "attribute": "jump"
             },
+            {
+              "kind": "field",
+              "name": "hideOptions",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide options",
+              "attribute": "hide-options"
+            },
             {
               "kind": "field",
               "name": "density",
@@ -27510,6 +27520,15 @@
               "description": "Enables first and last button",
               "fieldName": "jump"
             },
+            {
+              "name": "hide-options",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hide options",
+              "fieldName": "hideOptions"
+            },
             {
               "name": "density",
               "type": {
@@ -27594,7 +27613,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { page: 1, rows: 10, total: 2000, options: [5, 10, 20, 50, 100], }, render: (args) => { const handlePageChange = (e: CustomEvent) => { args.page = e.detail.page document.querySelector('[data-page]')!.innerHTML = String(args.page) document .querySelector('[data-pagination]')! .setAttribute('page', String(args.page)) } const handleRowsChange = (e: CustomEvent) => { args.rows = e.detail.rows args.page = 1 document.querySelector('[data-rows]')!.innerHTML = String(args.rows) document.querySelector('[data-page]')!.innerHTML = '1' document.querySelector('[data-pagination]')!.setAttribute('page', '1') document .querySelector('[data-pagination]')! .setAttribute('rows', String(args.rows)) } return html` <gds-flex flex-direction=\"column\" gap=\"2xl\"> <gds-card variant=\"secondary\" flex-direction=\"row\" gap=\"4xl\"> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Page:</gds-text> <gds-text data-page>${args.page}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Rows:</gds-text> <gds-text data-rows>${args.rows}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Total:</gds-text> <gds-text>${args.total}</gds-text> </gds-flex> </gds-card> <gds-pagination data-pagination page=\"${args.page}\" rows=\"${args.rows}\" .total=${args.total} .options=${args.options} @gds-page-change=${handlePageChange} @gds-rows-change=${handleRowsChange} ></gds-pagination> </gds-flex> ` }, }"
+          "default": "{ args: { page: 1, rows: 10, total: 2000, options: [5, 10, 20, 50, 100], hideOptions: false, }, render: (args) => { const handlePageChange = (e: CustomEvent) => { args.page = e.detail.page document.querySelector('[data-page]')!.innerHTML = String(args.page) document .querySelector('[data-pagination]')! .setAttribute('page', String(args.page)) } const handleRowsChange = (e: CustomEvent) => { args.rows = e.detail.rows args.page = 1 document.querySelector('[data-rows]')!.innerHTML = String(args.rows) document.querySelector('[data-page]')!.innerHTML = '1' document.querySelector('[data-pagination]')!.setAttribute('page', '1') document .querySelector('[data-pagination]')! .setAttribute('rows', String(args.rows)) } return html` <gds-flex flex-direction=\"column\" gap=\"2xl\"> <gds-card variant=\"secondary\" flex-direction=\"row\" gap=\"4xl\"> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Page:</gds-text> <gds-text data-page>${args.page}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Rows:</gds-text> <gds-text data-rows>${args.rows}</gds-text> </gds-flex> <gds-flex gap=\"s\"> <gds-text tag=\"strong\">Total:</gds-text> <gds-text>${args.total}</gds-text> </gds-flex> </gds-card> <gds-pagination data-pagination page=\"${args.page}\" rows=\"${args.rows}\" .total=${args.total} .options=${args.options} ?hide-options=\"${args.hideOptions}\" @gds-page-change=${handlePageChange} @gds-rows-change=${handleRowsChange} ></gds-pagination> </gds-flex> ` }, }"
         }
       ],
       "exports": [
@@ -32626,6 +32645,35 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The main headline text displayed at the top of the table.",
+              "attribute": "headline"
+            },
+            {
+              "kind": "field",
+              "name": "headlineTag",
+              "type": {
+                "text": "string"
+              },
+              "default": "'h2'",
+              "description": "The HTML tag to use for the headline (e.g., 'h1', 'h2', etc.).",
+              "attribute": "headline-tag",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "summary",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A brief description or summary displayed below the headline.",
+              "attribute": "summary"
+            },
             {
               "kind": "field",
               "name": "options",
@@ -33024,6 +33072,31 @@
             }
           ],
           "attributes": [
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "The main headline text displayed at the top of the table.",
+              "fieldName": "headline"
+            },
+            {
+              "name": "headline-tag",
+              "type": {
+                "text": "string"
+              },
+              "default": "'h2'",
+              "description": "The HTML tag to use for the headline (e.g., 'h1', 'h2', etc.).",
+              "fieldName": "headlineTag"
+            },
+            {
+              "name": "summary",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "A brief description or summary displayed below the headline.",
+              "fieldName": "summary"
+            },
             {
               "name": "options",
               "type": {
@@ -33217,7 +33290,7 @@
           "type": {
             "text": "array"
           },
-          "default": "[ GdsButton, GdsCard, GdsImg, GdsContextMenu, GdsMenuItem, GdsDropdown, GdsInput, GdsPagination, GdsText, GdsBadge, GdsLink, GdsFlex, IconCopy, IconCrossSmall, IconMinusSmall, IconMagnifyingGlass, IconSort, IconSortDown, IconSortUp, IconDotGridOneHorizontal, ]"
+          "default": "[ GdsButton, GdsCard, GdsDivider, GdsImg, GdsContextMenu, GdsMenuItem, GdsDropdown, GdsInput, GdsPagination, GdsText, GdsBadge, GdsLink, GdsFlex, IconCopy, IconCrossSmall, IconMinusSmall, IconMagnifyingGlass, IconSort, IconSortDown, IconSortUp, IconDotGridOneHorizontal, ]"
         }
       ],
       "exports": [
@@ -33387,6 +33460,14 @@
           },
           "default": "{ args: { columns: Feedback.Columns, actions: Feedback.MultipleActions, data: Feedback.Data, }, parameters: { docs: { description: { story: ` The \\`actions\\` property defines row interactions shown as the last cell of each row. Supports all cell types (button, link, context-menu, badge, etc.) and can contain multiple actions. Column content justification can be controlled via the \\`justify\\` property. `, }, }, }, render: (args) => html` <gds-table plain .rows=${2} .page=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" > <template name=\"actions-activate\"> <gds-icon-pin></gds-icon-pin> </template> <template name=\"actions-delete\"> <gds-icon-cross-small></gds-icon-cross-small> </template> </gds-table> <br /> <br /> <br /> <gds-table plain .rows=${2} .page=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${Feedback.ActionContextMenu}\" > </gds-table> <br /> <br /> <br /> <gds-table plain .rows=${2} .page=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${Feedback.ActionLink}\" > </gds-table> `, }"
         },
+        {
+          "kind": "variable",
+          "name": "Headline",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { columns: Users.Columns, data: Users.Data, headline: 'User Management', headlineTag: 'h2', summary: 'Overview of all users in the system', }, parameters: { docs: { description: { story: ` When the \\`headline\\` and \\`summary\\` properties are set, they will be displayed at the top of the table. You can change the \\`headline-tag\\` to any valid heading tag (e.g., 'h1-h5') to customize the semantic structure without altering the appearance. `, }, }, }, render: (args) => html` <gds-table headline=\"${args.headline}\" headline-tag=\"${args.headlineTag}\" summary=\"${args.summary}\" .columns=\"${args.columns}\" .data=\"${args.data}\" > <template name=\"email-copy\"> <gds-icon-copy></gds-icon-copy> </template> <template name=\"download-image\"> <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </template> </gds-table> `, }"
+        },
         {
           "kind": "variable",
           "name": "Plain",
@@ -33409,7 +33490,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { columns: Users.Columns, data: Users.Data, density: 'compact', }, parameters: { docs: { description: { story: ` The \\`density\\` property allows customizing the table's visual spacing with these options: - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability `, }, }, }, render: (args) => html` <gds-table .density=\"${args.density}\" .columns=\"${args.columns}\" .data=\"${args.data}\" > <template name=\"email-copy\"> <gds-icon-copy></gds-icon-copy> </template> <template name=\"download-image\"> <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </template> </gds-table> `, }"
+          "default": "{ args: { columns: Users.Columns, data: Users.Data, density: 'compact', headline: 'User Management', summary: 'Overview of all users in the system', }, parameters: { docs: { description: { story: ` The \\`density\\` property allows customizing the table's visual spacing with these options: - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability `, }, }, }, render: (args) => html` <gds-table headline=\"${args.headline}\" summary=\"${args.summary}\" searchable settings .density=\"${args.density}\" .columns=\"${args.columns}\" .data=\"${args.data}\" > <template name=\"email-copy\"> <gds-icon-copy></gds-icon-copy> </template> <template name=\"download-image\"> <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </template> </gds-table> `, }"
         },
         {
           "kind": "variable",
@@ -33525,6 +33606,14 @@
             "module": "src/components/table/table.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "Headline",
+          "declaration": {
+            "name": "Headline",
+            "module": "src/components/table/table.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Plain",
@@ -33598,7 +33687,7 @@
         {
           "kind": "variable",
           "name": "TableStyles",
-          "default": "css` /* Host & Container */ :host { display: block; font: var(--gds-sys-text-detail-book-s); color: var(--gds-sys-color-content-neutral-01); text-align: left; --_table-height: 80vh; --_table-border-width: var(--gds-sys-space-5xs); --_table-border-color: var(--gds-sys-color-border-subtle-01); } /* Density Modes */ /* Compact density */ .table.compact { --table-cell-padding-y: var(--gds-sys-space-xs); --table-cell-padding-x: var(--gds-sys-space-s); --table-header-padding-y: var(--gds-sys-space-xs); --table-header-padding-x: var(--gds-sys-space-s); --table-row-min-height: var(--gds-sys-space-xl); --table-font-size: var(--gds-sys-text-detail-book-xs); --table-gap: var(--gds-sys-space-m); --table-border-spacing: 0 var(--gds-sys-space-5xs); --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs); } /* Comfortable default */ .table.comfortable { --table-cell-padding-y: var(--gds-sys-space-s); --table-cell-padding-x: var(--gds-sys-space-m); --table-header-padding-y: var(--gds-sys-space-s); --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-border-spacing: 0 var(--gds-sys-space-4xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs); } /* Spacious density */ .table.spacious { --table-cell-padding-y: var(--gds-sys-space-l); --table-cell-padding-x: var(--gds-sys-space-l); --table-header-padding-y: var(--gds-sys-space-l); --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-border-spacing: 0 var(--gds-sys-space-3xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs); } /* Secondary and Tertiary */ .data.variant-secondary, .data.variant-tertiary { --_table-header-bg: var(--gds-sys-color-l2-neutral-01); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: var(--gds-sys-color-l2-neutral-01); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Primary variant */ .data.variant-primary { --_table-header-bg: var(--gds-sys-color-l2-neutral-02); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: color-mix( in srgb, var(--gds-sys-color-l3-neutral-02), var(--gds-sys-color-state-neutral-01) ); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Apply density variables */ .table { display: flex; flex-direction: column; gap: var(--table-gap); font: var(--table-font-size); width: 100%; } /* Container that enables horizontal scroll */ .data { width: 100%; overflow-x: auto; overflow-y: auto; max-height: var(--_table-height); box-sizing: border-box; padding: var(--table-data-padding); position: relative; border-radius: var(--gds-sys-radius-m); } .data:focus { outline: none; } .table-card { outline-color: transparent; outline-offset: var(--gds-sys-space-4xs); outline-style: solid; outline-width: var(--gds-sys-space-4xs); } .table-card:has(.data:focus-visible) { outline-color: var(--gds-sys-color-content-neutral-01); } .table-card:has(.data:focus-within:not(:focus-visible)) { outline-color: transparent; } table { width: max-content; min-width: 100%; table-layout: auto; border: none; border-collapse: separate; border-spacing: var(--table-border-spacing); } tbody td { font-weight: normal; padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); } thead tr th:first-child, tbody tr:hover td:first-child, tbody tr.selected td:first-child, .striped tbody tr td:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } thead tr th:last-child, tbody tr:hover td:last-child, tbody tr.selected td:last-child, .striped tbody tr td:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } /* Table Header */ thead tr th { padding-block: var(--gds-sys-space-3xs); background: var(--_table-header-bg); } thead th.sortable { cursor: pointer; user-select: none; } /* Column header content layout */ .column-header { display: flex; align-items: center; position: relative; justify-content: space-between; min-height: var(--gds-sys-space-l); gap: var(--table-gap); padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x); border-radius: var(--gds-sys-radius-xs); transition: all var(--gds-sys-motion-duration-fast); } th.sortable .column-header:hover { background-color: var(--_table-header-hover); } th.sortable:active .column-header { background-color: var(--_table-header-active); } .column-label { font-weight: var(--gds-sys-text-weight-book); } .sort-icon { display: flex; align-items: center; justify-content: center; transition-property: opacity; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); opacity: 0; } @media (hover: hover) and (min-width: 768px) { thead th.sortable:hover:not(.sorted) .sort-icon { opacity: 0.8; } } thead th.sorted .sort-icon { opacity: 1; } /* Table Body */ tbody tr td { border-top-style: solid; border-top-width: var(--_table-border-width); border-top-color: var(--_table-border-color); } tbody tr.loading { opacity: 0.3; pointer-events: none; } tbody tr.loading:not(:first-child) td { border-color: var(--gds-sys-color-border-subtle-02); } /* Row Selection */ .checkbox-cell { min-width: var(--gds-sys-space-l); width: var(--gds-sys-space-l); max-width: var(--gds-sys-space-l); padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } tbody tr:hover td, tbody tr.selected td, tbody tr:first-child td { border-color: transparent; } tbody tr:hover + tr td, tbody tr.selected + tr td { border-color: transparent; } tbody tr.selected:last-child td { border-bottom-color: transparent; } tbody tr.selected { background-color: var(--gds-sys-color-l3-neutral-02); } @media (hover: hover) and (min-width: 768px) { tbody tr.selected:hover { background-color: var(--_table-row-selected-hover); } tbody tr:hover:not(.selected) { background-color: var(--_table-row-hover); } } tbody tr:hover, tbody tr:hover + tr { border-color: transparent; } /* 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); } .striped tbody tr td { border-color: transparent; } /* Header & Footer Layout */ .header { display: flex; justify-content: space-between; transition-property: opacity, translate; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); @starting-style { opacity: 0; translate: 0 -2px; } } /* Shared layout for header and footer sections */ .header .lead, .header .trail { display: flex; align-items: center; gap: calc(var(--table-gap) * 0.8); width: max-content; } /* Cell Content & Alignment */ .cell-content { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; } /* Wrapping utilities */ td.wrap .cell-content { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } td.wrap { max-width: var(--cell-width); } /* Justify utilities */ .justify-start .cell-content { text-align: left; justify-content: start; } .justify-center .cell-content { text-align: center; justify-content: center; } .justify-space-between .cell-content { text-align: left; justify-content: space-between; } .justify-end .cell-content { text-align: right; justify-content: flex-end; } .sortable.justify-end .column-header { flex-direction: row-reverse; } th.actions { padding-inline: 0; } th.actions.justify-end .column-header { justify-content: flex-end; } /* Align utilities */ td { height: 100%; } .align-start { vertical-align: top; } .align-end { vertical-align: bottom; } .align-center { vertical-align: middle; } .align-start .cell-content { align-items: start; } .align-center .cell-content { align-items: center; } .align-stretch .cell-content { align-items: stretch; } .align-end .cell-content { align-items: end; } /* Responsive Design */ @media (max-width: 760px) { .responsive.data { display: contents; } .responsive thead { position: sticky; top: var(--gds-sys-space-s); z-index: 2; border-radius: var(--gds-sys-radius-s); } .responsive thead { display: none; } .responsive tbody { display: flex; flex-direction: column; gap: var(--table-gap); } .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-subtle-01); border-radius: var(--gds-sys-space-s); margin: 0; } .responsive tbody tr:hover, .responsive tbody tr:hover + tr { border-color: var(--gds-sys-color-border-subtle-01); } .responsive tr.selected { border-color: transparent; } .responsive td { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding: var(--gds-sys-space-xs) 0; border: none; } .responsive td .column-label { text-align: left; margin-right: auto; } .responsive td .cell-content { flex: 1; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ /* Medium screens: side by side layout */ @media (max-width: 760px) and (min-width: 480px) { .header { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'input dropdown' 'lead trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Small screens: fully stacked */ @media (max-width: 479px) { .header { display: grid; grid-template-columns: 1fr; grid-template-areas: 'input' 'dropdown' 'lead' 'trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Skeleton Loading State */ .skeleton { display: inline-block; background: linear-gradient( 90deg, var(--gds-sys-color-l3-neutral-01) 25%, var(--gds-sys-color-l2-neutral-01) 50%, var(--gds-sys-color-l3-neutral-01) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--gds-sys-space-max); opacity: 0.1; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton elements */ .skeleton-text { height: 14px; width: 80%; min-width: 60px; } .skeleton-checkbox { height: 18px; width: 18px; border-radius: var(--gds-sys-radius-3xs); } .skeleton-action { height: 24px; width: 24px; border-radius: var(--gds-sys-radius-max); } /* Skeleton row styling */ .skeleton-row { opacity: 1; pointer-events: none; } .skeleton-row td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } /* Different skeleton text widths for more natural look */ .skeleton-row:nth-child(odd) .skeleton-text { width: 70%; } .skeleton-row:nth-child(3n) .skeleton-text { width: 90%; } .skeleton-row:nth-child(4n) .skeleton-text { width: 60%; } /* Visually hidden */ .visually-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Scroll driven animation */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { tbody tr { animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-direction: normal, reverse; animation-timeline: view(block); animation-range: entry -40px, exit -40px; } @keyframes ROW_ANIMATION_VERTICAL { 0% { opacity: 0; filter: blur(12px); translate: 0 12px; } } thead { position: sticky; top: 4px; z-index: 10; transition: box-shadow 200ms ease; border-radius: var(--gds-sys-radius-s); will-change: transform; } thead { background-color: var(--gds-sys-color-l1-neutral-01); } .data.scrolled thead { box-shadow: var(--gds-sys-shadow-l-01), var(--gds-sys-shadow-l-02), inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01); backdrop-filter: blur(8px); background: color-mix( in srgb, var(--gds-sys-color-l2-neutral-01), transparent 30% ); } @media (prefers-reduced-transparency: no-preference) { .data.scrolled thead tr th { background: transparent; } } /* Horizontal scroll */ @property --_start-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @property --_end-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @keyframes scroll-fade { 0% { --_start-fade: 0; } 10%, 100% { --_start-fade: var(--gds-sys-space-4xl); } 0%, 90% { --_end-fade: var(--gds-sys-space-4xl); } 100% { --_end-fade: 0; } } .data { overflow-x: auto; mask: linear-gradient( to right, #0000, #ffff var(--_start-fade) calc(100% - var(--_end-fade)), #0000 ); animation: scroll-fade; animation-timeline: --scroll-fade; scroll-timeline: --scroll-fade x; } } } @media (max-width: 760px) { .responsive, .responsive tbody tr { animation: none; } } @supports not (animation-timeline: scroll()) { tbody tr { will-change: opacity, filter, translate; transition: all 242ms cubic-bezier(0.22, 0.61, 0.36, 1); @starting-style { opacity: 0; filter: blur(20px); translate: 0 10px; } } } /* Scrollbar */ .data { --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02); --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02); --_scrollbar-width: var(--gds-sys-space-2xs); } @supports (scrollbar-width: auto) { .data { scrollbar-color: var(--_scrollbar-color-thumb) transparent; scrollbar-width: var(--_scrollbar-width); } } @supports selector(::-webkit-scrollbar) { .data::-webkit-scrollbar { width: var(--_scrollbar-width); height: var(--_scrollbar-width); } .data::-webkit-scrollbar-track { background: transparent; } .data::-webkit-scrollbar-thumb { background: var(--_scrollbar-color-thumb); border-radius: var(--gds-sys-radius-max); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { tbody tr, tbody td .cell-content, thead th .column-header, .sort-icon, .column-header, .header { transition: none; animation: none; } } `"
+          "default": "css` /* Host & Container */ :host { display: block; font: var(--gds-sys-text-detail-book-s); color: var(--gds-sys-color-content-neutral-01); text-align: left; --_table-height: 80vh; --_table-border-width: var(--gds-sys-space-5xs); --_table-border-color: var(--gds-sys-color-border-subtle-01); } /* Density Modes */ /* Compact density */ .table.compact { --table-cell-padding-y: var(--gds-sys-space-xs); --table-cell-padding-x: var(--gds-sys-space-s); --table-header-padding-y: var(--gds-sys-space-xs); --table-header-padding-x: var(--gds-sys-space-s); --table-row-min-height: var(--gds-sys-space-xl); --table-font-size: var(--gds-sys-text-detail-book-xs); --table-gap: var(--gds-sys-space-m); --table-border-spacing: 0 var(--gds-sys-space-5xs); --table-data-padding: var(--gds-sys-space-5xs) var(--gds-sys-space-4xs); } /* Comfortable default */ .table.comfortable { --table-cell-padding-y: var(--gds-sys-space-s); --table-cell-padding-x: var(--gds-sys-space-m); --table-header-padding-y: var(--gds-sys-space-s); --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-l); --table-border-spacing: 0 var(--gds-sys-space-4xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-2xs); } /* Spacious density */ .table.spacious { --table-cell-padding-y: var(--gds-sys-space-l); --table-cell-padding-x: var(--gds-sys-space-l); --table-header-padding-y: var(--gds-sys-space-l); --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-xl); --table-border-spacing: 0 var(--gds-sys-space-3xs); --table-data-padding: var(--gds-sys-space-3xs) var(--gds-sys-space-xs); } /* Secondary and Tertiary */ .data.variant-secondary, .data.variant-tertiary { --_table-header-bg: var(--gds-sys-color-l2-neutral-01); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: var(--gds-sys-color-l2-neutral-01); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Primary variant */ .data.variant-primary { --_table-header-bg: var(--gds-sys-color-l2-neutral-02); --_table-header-hover: var(--gds-sys-color-l3-neutral-02); --_table-header-active: var(--gds-sys-color-l3-neutral-03); --_table-row-hover: color-mix( in srgb, var(--gds-sys-color-l3-neutral-02), var(--gds-sys-color-state-neutral-01) ); --_table-row-selected-hover: var(--gds-sys-color-l3-neutral-03); --_table-row-striped: var(--gds-sys-color-l2-neutral-01); } /* Apply density variables */ .table { display: flex; flex-direction: column; gap: var(--table-gap); font: var(--table-font-size); width: 100%; } /* Container that enables horizontal scroll */ .data { width: 100%; overflow-x: auto; overflow-y: auto; max-height: var(--_table-height); box-sizing: border-box; padding: var(--table-data-padding); position: relative; border-radius: var(--gds-sys-radius-m); } .data:focus { outline: none; } .table-card { outline-color: transparent; outline-offset: var(--gds-sys-space-4xs); outline-style: solid; outline-width: var(--gds-sys-space-4xs); } .table-card:has(.data:focus-visible) { outline-color: var(--gds-sys-color-content-neutral-01); } .table-card:has(.data:focus-within:not(:focus-visible)) { outline-color: transparent; } table { width: max-content; min-width: 100%; table-layout: auto; border: none; border-collapse: separate; border-spacing: var(--table-border-spacing); } tbody td { font-weight: normal; padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); } thead tr th:first-child, tbody tr:hover td:first-child, tbody tr.selected td:first-child, .striped tbody tr td:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } thead tr th:last-child, tbody tr:hover td:last-child, tbody tr.selected td:last-child, .striped tbody tr td:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } /* Table Header */ thead tr th { padding-block: var(--gds-sys-space-3xs); background: var(--_table-header-bg); } thead th.sortable { cursor: pointer; user-select: none; } /* Column header content layout */ .column-header { display: flex; align-items: center; position: relative; justify-content: space-between; min-height: var(--gds-sys-space-l); gap: var(--table-gap); padding: calc(var(--table-cell-padding-y) / 2) var(--table-cell-padding-x); border-radius: var(--gds-sys-radius-xs); transition: all var(--gds-sys-motion-duration-fast); } th.sortable .column-header:hover { background-color: var(--_table-header-hover); } th.sortable:active .column-header { background-color: var(--_table-header-active); } .column-label { font-weight: var(--gds-sys-text-weight-book); } .sort-icon { display: flex; align-items: center; justify-content: center; transition-property: opacity; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); opacity: 0; } @media (hover: hover) and (min-width: 768px) { thead th.sortable:hover:not(.sorted) .sort-icon { opacity: 0.8; } } thead th.sorted .sort-icon { opacity: 1; } /* Table Body */ tbody tr td { border-top-style: solid; border-top-width: var(--_table-border-width); border-top-color: var(--_table-border-color); } tbody tr.loading { opacity: 0.3; pointer-events: none; } tbody tr.loading:not(:first-child) td { border-color: var(--gds-sys-color-border-subtle-02); } /* Row Selection */ .checkbox-cell { min-width: var(--gds-sys-space-l); width: var(--gds-sys-space-l); max-width: var(--gds-sys-space-l); padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } tbody tr:hover td, tbody tr.selected td, tbody tr:first-child td { border-color: transparent; } tbody tr:hover + tr td, tbody tr.selected + tr td { border-color: transparent; } tbody tr.selected:last-child td { border-bottom-color: transparent; } tbody tr.selected { background-color: var(--gds-sys-color-l3-neutral-02); } @media (hover: hover) and (min-width: 768px) { tbody tr.selected:hover { background-color: var(--_table-row-selected-hover); } tbody tr:hover:not(.selected) { background-color: var(--_table-row-hover); } } tbody tr:hover, tbody tr:hover + tr { border-color: transparent; } /* Striped */ .striped tbody tr:not(.selected, :hover):nth-child(even) td { background-color: var(--_table-row-striped); } .striped tbody tr td { border-color: transparent; } /* Header & Footer Layout */ .header { display: flex; justify-content: space-between; transition-property: opacity, translate; transition-duration: var(--gds-sys-motion-duration-fast); transition-timing-function: var(--gds-sys-motion-easing-ease); @starting-style { opacity: 0; translate: 0 -2px; } } /* Shared layout for header and footer sections */ .header .lead, .header .trail { display: flex; align-items: center; gap: calc(var(--table-gap) * 0.8); width: max-content; } /* Cell Content & Alignment */ .cell-content { width: 100%; height: 100%; display: flex; align-items: center; gap: 10px; } /* Wrapping utilities */ td.wrap .cell-content { white-space: normal; word-wrap: break-word; overflow-wrap: break-word; } td.wrap { max-width: var(--cell-width); } /* Justify utilities */ .justify-start .cell-content { text-align: left; justify-content: start; } .justify-center .cell-content { text-align: center; justify-content: center; } .justify-space-between .cell-content { text-align: left; justify-content: space-between; } .justify-end .cell-content { text-align: right; justify-content: flex-end; } .sortable.justify-end .column-header { flex-direction: row-reverse; } th.actions { padding-inline: 0; } th.actions.justify-end .column-header { justify-content: flex-end; } /* Align utilities */ td { height: 100%; } .align-start { vertical-align: top; } .align-end { vertical-align: bottom; } .align-center { vertical-align: middle; } .align-start .cell-content { align-items: start; } .align-center .cell-content { align-items: center; } .align-stretch .cell-content { align-items: stretch; } .align-end .cell-content { align-items: end; } /* Responsive Design */ @media (max-width: 760px) { .responsive.data { display: contents; } .responsive thead { position: sticky; top: var(--gds-sys-space-s); z-index: 2; border-radius: var(--gds-sys-radius-s); } .responsive thead { display: none; } .responsive tbody { display: flex; flex-direction: column; gap: var(--table-gap); } .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-subtle-01); border-radius: var(--gds-sys-space-s); margin: 0; } .responsive tbody tr:hover, .responsive tbody tr:hover + tr { border-color: var(--gds-sys-color-border-subtle-01); } .responsive tr.selected { border-color: transparent; } .responsive td { width: 100%; max-width: 100%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; padding: var(--gds-sys-space-xs) 0; border: none; } .responsive td .column-label { text-align: left; margin-right: auto; } .responsive td .cell-content { flex: 1; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ /* Medium screens: side by side layout */ @media (max-width: 760px) and (min-width: 480px) { .header { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'input dropdown' 'lead trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Small screens: fully stacked */ @media (max-width: 479px) { .header { display: grid; grid-template-columns: 1fr; grid-template-areas: 'input' 'dropdown' 'lead' 'trail'; gap: calc(var(--table-gap) / 2); } .header .lead [gds-element='gds-input'] { grid-area: input; } .header .trail [gds-element='gds-dropdown'] { grid-area: dropdown; } .header .lead ::slotted(*:not([gds-element='gds-input'])) { grid-area: lead; } .header .trail ::slotted(*:not([gds-element='gds-dropdown'])) { grid-area: trail; } .header .lead, .header .trail { display: contents; } } /* Skeleton Loading State */ .skeleton { display: inline-block; background: linear-gradient( 90deg, var(--gds-sys-color-l3-neutral-01) 25%, var(--gds-sys-color-l2-neutral-01) 50%, var(--gds-sys-color-l3-neutral-01) 75% ); background-size: 200% 100%; animation: skeleton-shimmer 1.5s ease-in-out infinite; border-radius: var(--gds-sys-space-max); opacity: 0.1; } @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Skeleton elements */ .skeleton-text { height: 14px; width: 80%; min-width: 60px; } .skeleton-checkbox { height: 18px; width: 18px; border-radius: var(--gds-sys-radius-3xs); } .skeleton-action { height: 24px; width: 24px; border-radius: var(--gds-sys-radius-max); } /* Skeleton row styling */ .skeleton-row { opacity: 1; pointer-events: none; } .skeleton-row td { padding: var(--table-cell-padding-y) var(--table-cell-padding-x); } /* Different skeleton text widths for more natural look */ .skeleton-row:nth-child(odd) .skeleton-text { width: 70%; } .skeleton-row:nth-child(3n) .skeleton-text { width: 90%; } .skeleton-row:nth-child(4n) .skeleton-text { width: 60%; } /* Visually hidden */ .visually-hidden { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } /* Scroll driven animation */ @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { tbody tr { animation-name: ROW_ANIMATION_VERTICAL, ROW_ANIMATION_VERTICAL; animation-fill-mode: both; animation-timing-function: ease-in-out; animation-direction: normal, reverse; animation-timeline: view(block); animation-range: entry -40px, exit -40px; } @keyframes ROW_ANIMATION_VERTICAL { 0% { opacity: 0; filter: blur(12px); translate: 0 12px; } } thead { position: sticky; top: 4px; z-index: 10; transition: box-shadow 200ms ease; border-radius: var(--gds-sys-radius-s); will-change: transform; } thead { background-color: var(--gds-sys-color-l1-neutral-01); } .data.scrolled thead { box-shadow: var(--gds-sys-shadow-l-01), var(--gds-sys-shadow-l-02), inset 0 -4px 6px var(--gds-sys-color-l1-neutral-01); backdrop-filter: blur(8px); background: color-mix( in srgb, var(--gds-sys-color-l2-neutral-01), transparent 30% ); } @media (prefers-reduced-transparency: no-preference) { .data.scrolled thead tr th { background: transparent; } } /* Horizontal scroll */ @property --_start-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @property --_end-fade { syntax: '<length>'; inherits: false; initial-value: 0; } @keyframes scroll-fade { 0% { --_start-fade: 0; } 10%, 100% { --_start-fade: var(--gds-sys-space-4xl); } 0%, 90% { --_end-fade: var(--gds-sys-space-4xl); } 100% { --_end-fade: 0; } } .data { overflow-x: auto; mask: linear-gradient( to right, #0000, #ffff var(--_start-fade) calc(100% - var(--_end-fade)), #0000 ); animation: scroll-fade; animation-timeline: --scroll-fade; scroll-timeline: --scroll-fade x; } } } @media (max-width: 760px) { .responsive, .responsive tbody tr { animation: none; } } @supports not (animation-timeline: scroll()) { tbody tr { will-change: opacity, filter, translate; transition: all 242ms cubic-bezier(0.22, 0.61, 0.36, 1); @starting-style { opacity: 0; filter: blur(20px); translate: 0 10px; } } } /* Scrollbar */ .data { --_scrollbar-color-thumb: var(--gds-sys-color-content-neutral-02); --_scrollbar-color-track: var(--gds-sys-color-l3-neutral-02); --_scrollbar-width: var(--gds-sys-space-2xs); } @supports (scrollbar-width: auto) { .data { scrollbar-color: var(--_scrollbar-color-thumb) transparent; scrollbar-width: var(--_scrollbar-width); } } @supports selector(::-webkit-scrollbar) { .data::-webkit-scrollbar { width: var(--_scrollbar-width); height: var(--_scrollbar-width); } .data::-webkit-scrollbar-track { background: transparent; } .data::-webkit-scrollbar-thumb { background: var(--_scrollbar-color-thumb); border-radius: var(--gds-sys-radius-max); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { tbody tr, tbody td .cell-content, thead th .column-header, .sort-icon, .column-header, .header { transition: none; animation: none; } } `"
         }
       ],
       "exports": [
@@ -224664,7 +224753,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/index.ts",
+      "path": "src/components/sensitive/number/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -224672,19 +224761,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/date/sensitive-date"
+            "module": "src/components/sensitive/number/sensitive-number"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.component.ts",
+      "path": "src/components/sensitive/number/sensitive-number.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "members": [
             {
               "kind": "field",
@@ -224693,33 +224782,31 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive number.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "formattedValue",
               "type": {
-                "text": "Date | string | undefined"
+                "text": "string"
               },
-              "description": "The date value to be formatted, either Date or ISO string.",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedText",
+                "module": "src/components/formatted-text/formatted-text.ts"
               }
             },
             {
               "kind": "field",
-              "name": "format",
+              "name": "value",
               "type": {
-                "text": "DateTimeFormat"
+                "text": "number | string | undefined"
               },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "attribute": "format",
+              "description": "The numerical value to display.",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -224728,23 +224815,37 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for date formatting.",
+              "description": "The locale used for number formatting.",
               "attribute": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "formattedValue",
+              "name": "currency",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "readonly": true,
+              "description": "The currency used when formatting numbers.",
+              "attribute": "currency",
               "inheritedFrom": {
-                "name": "GdsFormattedText",
-                "module": "src/components/formatted-text/formatted-text.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "decimals",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The number of decimal places to display.",
+              "attribute": "decimals",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -225722,32 +225823,56 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive date.",
+              "description": "When true, hides the sensitive number.",
               "fieldName": "hide"
             },
             {
-              "name": "format",
+              "name": "locale",
               "type": {
-                "text": "DateTimeFormat"
+                "text": "string | undefined"
               },
-              "default": "'dateOnlyNumbers'",
-              "description": "Specifies the date format.",
-              "fieldName": "format",
+              "description": "The locale used for number formatting.",
+              "fieldName": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
-              "name": "locale",
+              "name": "currency",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for date formatting.",
-              "fieldName": "locale",
+              "description": "The currency used when formatting numbers.",
+              "fieldName": "currency",
               "inheritedFrom": {
-                "name": "GdsFormattedDate",
-                "module": "src/components/formatted-text/date/formatted-date.component.ts"
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "name": "decimals",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "The number of decimal places to display.",
+              "fieldName": "decimals",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+              }
+            },
+            {
+              "name": "format",
+              "type": {
+                "text": "NumberFormats"
+              },
+              "default": "'decimalsAndThousands'",
+              "description": "Specifies the number format.",
+              "fieldName": "format",
+              "inheritedFrom": {
+                "name": "GdsFormattedNumber",
+                "module": "src/components/formatted-text/number/formatted-number.component.ts"
               }
             },
             {
@@ -225791,10 +225916,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedDate",
-            "module": "/src/components/formatted-text/date/formatted-date.component"
+            "name": "GdsFormattedNumber",
+            "module": "/src/components/formatted-text/number/formatted-number.component"
           },
-          "tagName": "gds-sensitive-date",
+          "tagName": "gds-sensitive-number",
           "customElement": true,
           "events": [
             {
@@ -225833,17 +225958,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.component.ts"
+            "name": "GdsSensitiveNumber",
+            "module": "src/components/sensitive/number/sensitive-number.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
+      "path": "src/components/sensitive/number/sensitive-number.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -225851,8 +225976,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Number', component: 'gds-sensitive-number', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-number'), format: { control: { type: 'select' }, options: Object.keys(numberFormats), }, currency: { type: 'string', }, decimals: { type: 'number', }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/number)\n\nGdsSensitiveNumber displays a formatted number and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -225860,7 +225985,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-number .hide=${args.hide} .value=${args.value} .locale=${args.locale} .currency=${args.currency} .decimals=${args.decimals} ></gds-sensitive-number>`, }"
         }
       ],
       "exports": [
@@ -225869,7 +225994,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
           }
         },
         {
@@ -225877,29 +226002,29 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/sensitive-date.ts",
+      "path": "src/components/sensitive/number/sensitive-number.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveDate",
+          "name": "GdsSensitiveNumber",
           "declaration": {
-            "name": "GdsSensitiveDate",
-            "module": "src/components/sensitive/date/sensitive-date.ts"
+            "name": "GdsSensitiveNumber",
+            "module": "src/components/sensitive/number/sensitive-number.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/index.ts",
+      "path": "src/components/sensitive/date/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -225907,19 +226032,19 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/components/sensitive/number/sensitive-number"
+            "module": "src/components/sensitive/date/sensitive-date"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.component.ts",
+      "path": "src/components/sensitive/date/sensitive-date.component.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "members": [
             {
               "kind": "field",
@@ -225928,31 +226053,33 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive number.",
+              "description": "When true, hides the sensitive date.",
               "attribute": "hide"
             },
             {
               "kind": "field",
-              "name": "formattedValue",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "Date | string | undefined"
               },
-              "readonly": true,
+              "description": "The date value to be formatted, either Date or ISO string.",
               "inheritedFrom": {
-                "name": "GdsFormattedText",
-                "module": "src/components/formatted-text/formatted-text.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "format",
               "type": {
-                "text": "number | string | undefined"
+                "text": "DateTimeFormat"
               },
-              "description": "The numerical value to display.",
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "attribute": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -225961,37 +226088,23 @@
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The locale used for number formatting.",
+              "description": "The locale used for date formatting.",
               "attribute": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "currency",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "The currency used when formatting numbers.",
-              "attribute": "currency",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
               "kind": "field",
-              "name": "decimals",
+              "name": "formattedValue",
               "type": {
-                "text": "number | undefined"
+                "text": "string"
               },
-              "description": "The number of decimal places to display.",
-              "attribute": "decimals",
+              "readonly": true,
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedText",
+                "module": "src/components/formatted-text/formatted-text.ts"
               }
             },
             {
@@ -226969,56 +227082,32 @@
                 "text": "boolean"
               },
               "default": "false",
-              "description": "When true, hides the sensitive number.",
+              "description": "When true, hides the sensitive date.",
               "fieldName": "hide"
             },
             {
-              "name": "locale",
+              "name": "format",
               "type": {
-                "text": "string | undefined"
+                "text": "DateTimeFormat"
               },
-              "description": "The locale used for number formatting.",
-              "fieldName": "locale",
+              "default": "'dateOnlyNumbers'",
+              "description": "Specifies the date format.",
+              "fieldName": "format",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
-              "name": "currency",
+              "name": "locale",
               "type": {
                 "text": "string | undefined"
               },
-              "description": "The currency used when formatting numbers.",
-              "fieldName": "currency",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "name": "decimals",
-              "type": {
-                "text": "number | undefined"
-              },
-              "description": "The number of decimal places to display.",
-              "fieldName": "decimals",
-              "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
-              }
-            },
-            {
-              "name": "format",
-              "type": {
-                "text": "NumberFormats"
-              },
-              "default": "'decimalsAndThousands'",
-              "description": "Specifies the number format.",
-              "fieldName": "format",
+              "description": "The locale used for date formatting.",
+              "fieldName": "locale",
               "inheritedFrom": {
-                "name": "GdsFormattedNumber",
-                "module": "src/components/formatted-text/number/formatted-number.component.ts"
+                "name": "GdsFormattedDate",
+                "module": "src/components/formatted-text/date/formatted-date.component.ts"
               }
             },
             {
@@ -227062,10 +227151,10 @@
             }
           ],
           "superclass": {
-            "name": "GdsFormattedNumber",
-            "module": "/src/components/formatted-text/number/formatted-number.component"
+            "name": "GdsFormattedDate",
+            "module": "/src/components/formatted-text/date/formatted-date.component"
           },
-          "tagName": "gds-sensitive-number",
+          "tagName": "gds-sensitive-date",
           "customElement": true,
           "events": [
             {
@@ -227104,17 +227193,17 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveNumber",
-            "module": "src/components/sensitive/number/sensitive-number.component.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.component.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.stories.ts",
+      "path": "src/components/sensitive/date/sensitive-date.stories.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -227122,8 +227211,8 @@
           "type": {
             "text": "Meta"
           },
-          "default": "{ title: 'Components/Sensitive/Number', component: 'gds-sensitive-number', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-number'), format: { control: { type: 'select' }, options: Object.keys(numberFormats), }, currency: { type: 'string', }, decimals: { type: 'number', }, }, }",
-          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/number)\n\nGdsSensitiveNumber displays a formatted number and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
+          "default": "{ title: 'Components/Sensitive/Date', component: 'gds-sensitive-date', tags: ['autodocs'], argTypes: { ...argTablePropsFor('gds-sensitive-date'), format: { control: { type: 'select' }, options: Object.keys(dateTimeFormats), }, }, }",
+          "description": "[Source code](https://github.com/seb-oss/green/tree/main/libs/core/src/components/sensitive/date)\n\nGdsSensitiveDate displays a formatted date and optionally hides it using a blur effect\nwhen the 'hide' property is set to true."
         },
         {
           "kind": "variable",
@@ -227131,7 +227220,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-number .hide=${args.hide} .value=${args.value} .locale=${args.locale} .currency=${args.currency} .decimals=${args.decimals} ></gds-sensitive-number>`, }"
+          "default": "{ ...DefaultParams, render: (args) => html`<gds-sensitive-date .hide=${args.hide} .value=${args.value} .locale=${args.locale} .format=${args.format} ></gds-sensitive-date>`, }"
         }
       ],
       "exports": [
@@ -227140,7 +227229,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         },
         {
@@ -227148,22 +227237,22 @@
           "name": "Default",
           "declaration": {
             "name": "Default",
-            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/number/sensitive-number.ts",
+      "path": "src/components/sensitive/date/sensitive-date.ts",
       "declarations": [],
       "exports": [
         {
           "kind": "js",
-          "name": "GdsSensitiveNumber",
+          "name": "GdsSensitiveDate",
           "declaration": {
-            "name": "GdsSensitiveNumber",
-            "module": "src/components/sensitive/number/sensitive-number.ts"
+            "name": "GdsSensitiveDate",
+            "module": "src/components/sensitive/date/sensitive-date.ts"
           }
         }
       ]

package/gds-element.js

@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
     /**
      * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
      */
-    this.semanticVersion = "2.23.0";
+    this.semanticVersion = "2.24.0";
     this._isUsingTransitionalStyles = false;
     this._dynamicStylesController = new DynamicStylesController(this);
   }

package/generated/react/index.d.ts

@@ -385,8 +385,8 @@ export * from './icons/icon-zoom-out/index.js';
 export * from './radio-group/index.js';
 export * from './segment/index.js';
 export * from './sensitive-account/index.js';
-export * from './sensitive-date/index.js';
 export * from './sensitive-number/index.js';
+export * from './sensitive-date/index.js';
 export * from './option/index.js';
 export * from './menu-heading/index.js';
 export * from './menu-item/index.js';

package/generated/react/index.js

@@ -385,8 +385,8 @@ export * from "./icons/icon-zoom-out/index.js";
 export * from "./radio-group/index.js";
 export * from "./segment/index.js";
 export * from "./sensitive-account/index.js";
-export * from "./sensitive-date/index.js";
 export * from "./sensitive-number/index.js";
+export * from "./sensitive-date/index.js";
 export * from "./option/index.js";
 export * from "./menu-heading/index.js";
 export * from "./menu-item/index.js";

package/generated/react/pagination/index.d.ts

@@ -15,6 +15,7 @@ export declare const GdsPagination: {
         total?: number | undefined;
         options?: number[] | undefined;
         jump?: boolean | undefined;
+        hideOptions?: boolean | undefined;
         density?: "compact" | "comfortable" | "spacious" | undefined;
         label?: string | undefined;
         render?: (() => any) | undefined;

package/generated/react/table/index.d.ts

@@ -12,6 +12,9 @@ export declare const GdsTable: {
     (props: GdsTableProps & {
         ref?: React.Ref<GdsTableClass>;
     }): import("react").ReactElement<Omit<{
+        headline?: string | undefined;
+        headlineTag?: string | undefined;
+        summary?: string | undefined;
         options?: number[] | undefined;
         page?: number | undefined;
         rows?: number | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.QU3DSPNU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-8fe855";
+const VER_SUFFIX = "-fd52ed";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])