@sebgroup/green-core 2.36.0 → 2.37.1

package/custom-elements.json

@@ -28730,7 +28730,7 @@
         {
           "kind": "variable",
           "name": "style",
-          "default": "css` @layer tokens, core, a11y, disabled, variants, sizes, sets; @layer tokens { :host { --_gap: var(--gds-sys-space-xs); --_padding-inline: var(--gds-sys-space-m); --_padding-block: var(--gds-sys-space-xs); --_color-bg: transparent; --_color-text: var(--gds-sys-color-content-neutral-01); --_color-border: transparent; --_font-size: 1rem; --_font-weight: 400; --_line-height: 1.25; display: inline-block; isolation: isolate; max-width: 100%; height: 100%; } } @layer core { .button { align-items: center; background-color: var(--_color-bg); border-bottom-width: 2px; border-style: none; border-color: var(--_color-border); border-bottom-style: solid; box-sizing: border-box; color-scheme: dark light; color: var(--_color-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--_font-size); font-weight: var(--_font-weight); gap: var(--_gap); height: 100%; inline-size: 100%; justify-content: space-between; justify-items: center; line-height: var(--_line-height); outline-color: transparent; outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); position: relative; transition-property: color, border-color; transition: all var(--gds-sys-motion-duration-fastest); &:focus-visible { border-color: transparent; border-radius: 6px; outline-color: currentColor; overflow: visible; } &:hover, &.selected:hover, &:active { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-05) ); --_color-border: var(--gds-sys-color-border-interactive); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-strong); } slot:not([name]) { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .compact { display: flex; flex-direction: column; --_padding-inline: var(--gds-sys-space-s); --_gap: 1px; font-size: 0.875rem; height: 56px; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } } a { text-decoration: none; } } :disabled { border-color: var(--_color-bg); color: var(--gds-sys-color-content-disabled-01); pointer-events: none; } @layer a11y { @media (prefers-reduced-motion: reduce) { .button { transition: none; } } } `"
+          "default": "css` @layer tokens, core, a11y, disabled, variants, sizes, sets; @layer tokens { :host { --_gap: var(--gds-sys-space-xs); --_padding-inline: var(--gds-sys-space-m); --_padding-block: var(--gds-sys-space-xs); --_color-bg: transparent; --_color-text: var(--gds-sys-color-content-neutral-01); --_color-border: transparent; --_font-size: 1rem; --_font-weight: 400; --_line-height: 1.25; display: inline-block; isolation: isolate; max-width: 100%; height: 100%; } } @layer core { .button { align-items: center; background-color: var(--_color-bg); border-bottom-width: 2px; border-style: none; border-color: var(--_color-border); border-bottom-style: solid; box-sizing: border-box; color-scheme: dark light; color: var(--_color-text); cursor: pointer; display: inline-flex; font-family: inherit; font-size: var(--_font-size); font-weight: var(--_font-weight); gap: var(--_gap); height: 100%; inline-size: 100%; justify-content: space-between; justify-items: center; line-height: var(--_line-height); outline-color: transparent; outline-offset: -2px; outline-style: solid; outline-width: 2px; padding-block: var(--_padding-block); padding-inline: var(--_padding-inline); position: relative; transition-property: color, border-color; transition: all var(--gds-sys-motion-duration-fastest); &:focus-visible { border-color: transparent; border-radius: 6px; outline-color: currentColor; overflow: visible; } &:hover, &.selected:hover, &:active { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-05) ); --_color-border: var(--gds-sys-color-border-interactive); } &.selected { background-color: color-mix( in srgb, transparent, var(--gds-sys-color-state-neutral-06) ); --_color-border: var(--gds-sys-color-border-strong); } slot:not([name]) { display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .compact { display: flex; flex-direction: column; --_padding-inline: var(--gds-sys-space-s); --_gap: 1px; font-size: 0.875rem; height: 56px; justify-content: center; & > slot[name] { order: 0; } & > slot:not([name]) { order: 1; } @media (max-width: 576px) { font: var(--gds-sys-text-detail-book-xs); --_padding-inline: var(--gds-sys-space-xs); } } a { text-decoration: none; } } :disabled { border-color: var(--_color-bg); color: var(--gds-sys-color-content-disabled-01); pointer-events: none; } @layer a11y { @media (prefers-reduced-motion: reduce) { .button { transition: none; } } } `"
         }
       ],
       "exports": [
@@ -34484,6 +34484,10 @@
               "description": "Content displayed at the end of the table header (before settings).",
               "name": "`header-trail`"
             },
+            {
+              "description": "Content displayed in the table footer area (before pagination).",
+              "name": "`footer`"
+            },
             {
               "description": "Custom error state content when data loading fails.",
               "name": "`error`"
@@ -34684,6 +34688,15 @@
               "description": "Disables data caching mechanism.",
               "attribute": "nocache"
             },
+            {
+              "kind": "field",
+              "name": "tfoot",
+              "type": {
+                "text": "Types.Tfoot | undefined"
+              },
+              "description": "Configures a table footer row (`<tfoot>`) at the bottom of the table.\nThe footer row provides slot insertion points for each visible column,\nletting consumers render any aggregation (sum, average, count, etc.).\n\nUse `tfoot.label` to optionally show a label in the first cell (omitted by default).\nUse `tfoot.sticky` to pin the footer to the bottom of the scroll area.\n\nSlot naming convention: `tfoot:{columnKey}`\n\nAccepts: `{ label?: string, sticky?: boolean }` or omit to disable.",
+              "attribute": "tfoot"
+            },
             {
               "kind": "field",
               "name": "dataLoadKey",
@@ -35113,6 +35126,14 @@
               "description": "Disables data caching mechanism.",
               "fieldName": "nocache"
             },
+            {
+              "name": "tfoot",
+              "type": {
+                "text": "Types.Tfoot | undefined"
+              },
+              "description": "Configures a table footer row (`<tfoot>`) at the bottom of the table.\nThe footer row provides slot insertion points for each visible column,\nletting consumers render any aggregation (sum, average, count, etc.).\n\nUse `tfoot.label` to optionally show a label in the first cell (omitted by default).\nUse `tfoot.sticky` to pin the footer to the bottom of the scroll area.\n\nSlot naming convention: `tfoot:{columnKey}`\n\nAccepts: `{ label?: string, sticky?: boolean }` or omit to disable.",
+              "fieldName": "tfoot"
+            },
             {
               "name": "dataLoadKey",
               "type": {
@@ -35246,7 +35267,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ Columns: [ { key: 'id', label: 'ID', sortable: false, }, { key: 'name', label: 'Name', sortable: true, }, { key: 'email', label: 'Email', sortable: true, justify: 'space-between', }, { key: 'role', label: 'Role', sortable: true, visible: false, }, { key: 'status', label: 'Status', sortable: true, }, { key: 'department', label: 'Department', sortable: true, }, { key: 'amount', label: 'Amount', sortable: true, justify: 'end', }, { key: 'account', label: 'Account', sortable: true, }, { key: 'login', label: 'Last Login', sortable: true, }, { key: 'download', label: 'Download', }, ] as TableColumn[], Actions: { label: 'Actions', justify: 'end', } as TableActions, Data: userDataProvider, /** * Generates slot content for the given rows (current page). * Creates per-row slot elements using `columnKey:rowKey:slotId` convention. * * Used with Lit's `render()` to update table light DOM on each data load: * ```ts * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)} * ``` */ SlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any) => html` <!-- name: avatar --> <gds-img src=\"${row.avatarUrl ?? '#'}\" alt=\"${String(row.name)}\" slot=\"name:${row.id}:avatar\" width=\"xl\" height=\"xl\" ></gds-img> <!-- email: copy button --> <gds-button slot=\"email:${row.id}:copy-button\" rank=\"tertiary\" size=\"small\" > <gds-icon-copy></gds-icon-copy> </gds-button> <!-- status: badge --> <gds-badge slot=\"status:${row.id}:status\" variant=\"${String(row.status) === 'Active' ? 'positive' : 'negative'}\" size=\"small\" > ${String(row.status)} </gds-badge> <!-- amount: formatted number --> <gds-formatted-number slot=\"amount:${row.id}:amount\" .value=${row.amount} ></gds-formatted-number> <!-- amount: currency --> <gds-badge slot=\"amount:${row.id}:currency\" size=\"small\"> SEK </gds-badge> <!-- account: formatted account --> <gds-formatted-account slot=\"account:${row.id}:main\" account=\"${row.account}\" format=\"seb-account\" ></gds-formatted-account> <!-- login: formatted date --> <gds-formatted-date slot=\"login:${row.id}:main\" .value=\"${String(row.login)}\" locale=\"sv-SE\" format=\"dateLong\" ></gds-formatted-date> <!-- download: link with icon --> <gds-link slot=\"download:${row.id}:main\" href=\"${row.download ?? '#'}\" text-decoration=\"underline\" download > Download file <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </gds-link> <!-- actions: context menu --> <gds-context-menu slot=\"actions:${row.id}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit ${String(row.name)}</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, }"
+          "default": "{ Columns: [ { key: 'id', label: 'ID', sortable: false, }, { key: 'name', label: 'Name', sortable: true, }, { key: 'email', label: 'Email', sortable: true, justify: 'space-between', }, { key: 'role', label: 'Role', sortable: true, visible: false, }, { key: 'status', label: 'Status', sortable: true, }, { key: 'department', label: 'Department', sortable: true, }, { key: 'amount', label: 'Amount', sortable: true, justify: 'end', }, { key: 'account', label: 'Account', sortable: true, }, { key: 'login', label: 'Last Login', sortable: true, }, { key: 'download', label: 'Download', }, ] as TableColumn[], Actions: { label: 'Actions', justify: 'end', } as TableActions, Tfoot: { label: 'Totals', sticky: true, } as TableTfoot, Data: userDataProvider, /** * Generates slot content for the given rows (current page). * Creates per-row slot elements using `columnKey:rowKey:slotId` convention. * * Used with Lit's `render()` to update table light DOM on each data load: * ```ts * @gds-table-data-loaded=${(e) => render(Users.SlotContent(e.detail.rows), table)} * ``` */ SlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any) => html` <!-- name: avatar --> <gds-img src=\"${row.avatarUrl ?? '#'}\" alt=\"${String(row.name)}\" slot=\"name:${row.id}:avatar\" width=\"xl\" height=\"xl\" ></gds-img> <!-- email: copy button --> <gds-button slot=\"email:${row.id}:copy-button\" rank=\"tertiary\" size=\"small\" > <gds-icon-copy></gds-icon-copy> </gds-button> <!-- status: badge --> <gds-badge slot=\"status:${row.id}:status\" variant=\"${String(row.status) === 'Active' ? 'positive' : 'negative'}\" size=\"small\" > ${String(row.status)} </gds-badge> <!-- amount: formatted number --> <gds-formatted-number slot=\"amount:${row.id}:amount\" .value=${row.amount} ></gds-formatted-number> <!-- amount: currency --> <gds-badge slot=\"amount:${row.id}:currency\" size=\"small\"> SEK </gds-badge> <!-- account: formatted account --> <gds-formatted-account slot=\"account:${row.id}:main\" account=\"${row.account}\" format=\"seb-account\" ></gds-formatted-account> <!-- login: formatted date --> <gds-formatted-date slot=\"login:${row.id}:main\" .value=\"${String(row.login)}\" locale=\"sv-SE\" format=\"dateLong\" ></gds-formatted-date> <!-- download: link with icon --> <gds-link slot=\"download:${row.id}:main\" href=\"${row.download ?? '#'}\" text-decoration=\"underline\" download > Download file <gds-icon-cloud-download slot=\"trail\"></gds-icon-cloud-download> </gds-link> <!-- actions: context menu --> <gds-context-menu slot=\"actions:${row.id}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit ${String(row.name)}</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, /** * Generates tfoot slot content for the footer row. * Receives all rows on the page and computes aggregations. * * Slot naming: `tfoot:{columnKey}` */ TfootSlotContent: (rows: any[]): TemplateResult => { const totalAmount = rows.reduce( (sum, row) => sum + (Number(row.amount) || 0), 0, ) const activeCount = rows.filter( (row) => String(row.status) === 'Active', ).length const activeRate = Math.round((activeCount / rows.length) * 100) const departments = new Set(rows.map((row) => row.department)).size return html` <!-- tfoot: name row count --> <span slot=\"tfoot:name\">${rows.length} Users</span> <!-- tfoot: status active rate --> <gds-badge slot=\"tfoot:status\" variant=\"${activeRate >= 70 ? 'positive' : activeRate >= 40 ? 'warning' : 'negative'}\" size=\"small\" > ${activeRate}% active </gds-badge> <!-- tfoot: department count --> <gds-badge slot=\"tfoot:department\" variant=\"information\" size=\"small\"> ${departments} depts </gds-badge> <!-- tfoot: amount sum --> <gds-flex slot=\"tfoot:amount\" gap=\"s\" align-items=\"center\"> <gds-formatted-number .value=${totalAmount}></gds-formatted-number> <gds-badge size=\"small\">SEK</gds-badge> </gds-flex> ` }, }"
         },
         {
           "kind": "variable",
@@ -35262,7 +35283,7 @@
           "type": {
             "text": "object"
           },
-          "default": "{ Columns: [ { key: 'task', label: 'Task', align: 'center' }, { key: 'assignee', label: 'Assignee', align: 'center' }, { key: 'priority', label: 'Priority', align: 'center', width: '100px' }, ] as TableColumn[], MultipleActions: { label: 'Actions', align: 'center', justify: 'start', width: '150px', } as TableActions, MultipleActionsSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"positive\" > <gds-icon-circle-check size=\"m\"></gds-icon-circle-check> </gds-button> <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"negative\" > <gds-icon-cross-small size=\"m\"></gds-icon-cross-small> </gds-button> `, )} ` }, ActionLink: { label: 'Actions', align: 'center', justify: 'end', width: '150px', } as TableActions, ActionLinkSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" size=\"small\" rank=\"secondary\" > View details </gds-button> `, )} ` }, ActionContextMenu: { label: 'Actions', align: 'center', justify: 'end', width: '150px', } as TableActions, ActionContextMenuSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-context-menu slot=\"actions:${row.id ?? i + 1}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit</gds-menu-item> <gds-menu-item>Archive</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, Data: actionsDataProvider, }"
+          "default": "{ Columns: [ { key: 'task', label: 'Task', align: 'center' }, { key: 'assignee', label: 'Assignee', align: 'center' }, { key: 'priority', label: 'Priority', align: 'center', width: '100px' }, ] as TableColumn[], MultipleActions: { label: 'Actions', align: 'center', justify: 'start', // width: '150px', sticky: true, } as TableActions, MultipleActionsSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"positive\" > <gds-icon-circle-check size=\"m\"></gds-icon-circle-check> </gds-button> <gds-button slot=\"actions:${row.id ?? i + 1}:main\" rank=\"secondary\" size=\"small\" variant=\"negative\" > <gds-icon-cross-small size=\"m\"></gds-icon-cross-small> </gds-button> `, )} ` }, ActionLink: { label: 'Actions', align: 'center', justify: 'end', // width: '150px', sticky: true, } as TableActions, ActionLinkSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-button slot=\"actions:${row.id ?? i + 1}:main\" size=\"small\" rank=\"secondary\" > View details </gds-button> `, )} ` }, ActionContextMenu: { label: 'Actions', align: 'center', justify: 'end', // width: '150px', sticky: true, } as TableActions, ActionContextMenuSlotContent: (rows: any[]): TemplateResult => { return html` ${rows.map( (row: any, i: number) => html` <gds-context-menu slot=\"actions:${row.id ?? i + 1}:main\"> <gds-button slot=\"trigger\" rank=\"tertiary\" size=\"small\"> <gds-icon-dot-grid-one-horizontal></gds-icon-dot-grid-one-horizontal> </gds-button> <gds-menu-item>Edit</gds-menu-item> <gds-menu-item>Archive</gds-menu-item> <gds-menu-item>Delete</gds-menu-item> </gds-context-menu> `, )} ` }, Data: actionsDataProvider, }"
         }
       ],
       "exports": [
@@ -35366,7 +35387,15 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { columns: ActionsData.Columns, actions: ActionsData.MultipleActions, data: ActionsData.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. When passed as an object \\`{ label, align, justify }\\`, it configures the actions column header and cell layout. The actual action content is provided through named slots using the \\`actions:rowKey:main\\` convention. `, }, }, }, render: (args) => { const multiRef = createRef<any>() const ctxRef = createRef<any>() const linkRef = createRef<any>() return html` <gds-table ${ref(multiRef)} plain headline=\"Multiple Actions\" summary=\"Multiple interactive elements in a single actions cell.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = multiRef.value if (table) render(ActionsData.MultipleActionsSlotContent(e.detail.rows), table) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(ctxRef)} plain headline=\"Context Menu\" summary=\"Actions grouped inside a context menu trigger.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionContextMenu}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = ctxRef.value if (table) render( ActionsData.ActionContextMenuSlotContent(e.detail.rows), table, ) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(linkRef)} plain headline=\"Link Action\" summary=\"Single button element as a row action.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionLink}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = linkRef.value if (table) render(ActionsData.ActionLinkSlotContent(e.detail.rows), table) }} > </gds-table> ` }, }"
+          "default": "{ args: { columns: ActionsData.Columns, actions: ActionsData.MultipleActions, data: ActionsData.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. When passed as an object \\`{ label, align, justify, sticky }\\`, it configures the actions column header and cell layout. The actual action content is provided through named slots using the \\`actions:rowKey:main\\` convention. #### Sticky Actions Set \\`sticky: true\\` on the actions configuration to pin the actions column to the right edge of the table during horizontal scrolling. This ensures action buttons remain accessible even when the table content overflows horizontally. `, }, }, }, render: (args) => { const multiRef = createRef<any>() const ctxRef = createRef<any>() const linkRef = createRef<any>() return html` <gds-table ${ref(multiRef)} plain headline=\"Multiple Actions\" summary=\"Multiple interactive elements in a single actions cell.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = multiRef.value if (table) render(ActionsData.MultipleActionsSlotContent(e.detail.rows), table) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(ctxRef)} plain headline=\"Context Menu\" summary=\"Actions grouped inside a context menu trigger.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionContextMenu}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = ctxRef.value if (table) render( ActionsData.ActionContextMenuSlotContent(e.detail.rows), table, ) }} > </gds-table> <br /> <br /> <br /> <gds-table ${ref(linkRef)} plain headline=\"Link Action\" summary=\"Single button element as a row action.\" .rows=${2} .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${ActionsData.ActionLink}\" @gds-table-data-loaded=${(e: CustomEvent) => { const table = linkRef.value if (table) render(ActionsData.ActionLinkSlotContent(e.detail.rows), table) }} > </gds-table> ` }, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Tfoot",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { columns: Users.Columns, actions: Users.Actions, density: 'comfortable', variant: 'secondary', data: Users.Data, tfoot: Users.Tfoot, selectable: true, searchable: true, searchLabel: 'Search users', settings: true, plain: false, height: '80vh', responsive: false, nocache: false, striped: false, }, parameters: { docs: { description: { story: ` The \\`tfoot\\` property adds a \\`<tfoot>\\` footer row at the bottom of the table for displaying aggregated values (sums, averages, counts, etc.). The footer row is fully slot-based, the table provides insertion points for each visible column and you decide what to render (formatted numbers, badges, text, or nothing). When a \\`label\\` is provided, the first cell renders as a \\`<th scope=\"row\">\\` for proper accessibility semantics. #### Configuration \\`\\`\\`typescript const tfoot = { label: 'Total', // Label shown in the first cell (renders as <th scope=\"row\">) sticky: true, // Pin to the bottom of the scroll area } \\`\\`\\` #### Slot Convention Table footer slots use the naming pattern \\`tfoot:{columnKey}\\`: \\`\\`\\`html <gds-formatted-number slot=\"tfoot:amount\" .value=\\${sum}></gds-formatted-number> <gds-badge slot=\"tfoot:status\" size=\"small\">\\${count} active</gds-badge> \\`\\`\\` Compute your aggregation in the \\`gds-table-data-loaded\\` handler and render slot content into the table. When \\`sticky: true\\`, the footer stays pinned to the bottom of the scroll area combined with the sticky header, this creates a fixed frame around the scrollable data. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render( html`${Users.SlotContent(e.detail.rows)} ${Users.TfootSlotContent(e.detail.rows)}`, table, ) } return html` <gds-table ${ref(tableRef)} density=\"${args.density}\" variant=\"${args.variant}\" search-label=\"${args.searchLabel}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" ?plain=\"${args.plain}\" ?responsive=\"${args.responsive}\" ?nocache=\"${args.nocache}\" ?striped=\"${args.striped}\" ?selectable=\"${args.selectable}\" height=\"${args.height}\" .columns=\"${args.columns}\" .data=\"${args.data}\" .actions=\"${args.actions}\" .tfoot=\"${args.tfoot}\" rows=\"50\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
         },
         {
           "kind": "variable",
@@ -35398,7 +35427,7 @@
           "type": {
             "text": "Story"
           },
-          "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 controls the table's visual spacing and affects the table's **built-in UI** (search input, column settings dropdown, pagination). - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability > **Slot content sizing** — The density mode does **not** automatically resize components you provide via slots. When using a specific density, size your slotted components accordingly. For example, use \\`size=\"small\"\\` on badges and buttons in \\`compact\\` or \\`comfortable\\` mode, and \\`size=\"medium\"\\` in \\`spacious\\` mode to maintain visual consistency. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} headline=\"${args.headline}\" summary=\"${args.summary}\" searchable settings .density=\"${args.density}\" .columns=\"${args.columns}\" .data=\"${args.data}\" @gds-table-data-loaded=${handleDataLoaded} > </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 controls the table's visual spacing and affects the table's **built-in UI** (search input, column settings dropdown, pagination). - **\\`comfortable\\`** (Default) · Standard spacing for balanced readability - **\\`compact\\`** · Reduced spacing to maximize information density - **\\`spacious\\`** · Increased spacing for enhanced readability > **Slot content sizing** The density mode does **not** automatically resize components you provide via slots. When using a specific density, size your slotted components accordingly. For example, use \\`size=\"small\"\\` on badges and buttons in \\`compact\\` or \\`comfortable\\` mode, and \\`size=\"medium\"\\` in \\`spacious\\` mode to maintain visual consistency. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} headline=\"${args.headline}\" summary=\"${args.summary}\" searchable settings .density=\"${args.density}\" .columns=\"${args.columns}\" .data=\"${args.data}\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
         },
         {
           "kind": "variable",
@@ -35422,7 +35451,7 @@
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` Use slots to add custom controls to the table header and footer areas. - **header-lead**: Add filtering/sorting controls at the start of the header. - **header-trail**: Add actions (e.g., export buttons) at the end of the header. > Avoid overloading slots to maintain clarity. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"4\" settings searchable @gds-table-data-loaded=${handleDataLoaded} > <gds-dropdown size=\"small\" slot=\"header-lead\" plain searchable> <span slot=\"trigger\">Sorting</span> <gds-option value=\"by-name\">Sort by Name</gds-option> <gds-option value=\"by-status\">Sort by Status</gds-option> </gds-dropdown> <gds-button slot=\"header-trail\" rank=\"secondary\" size=\"small\"> Export </gds-button> </gds-table> ` }, }"
+          "default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` Use slots to add custom controls to the table header, footer, and content areas. - **header-lead**: Add filtering/sorting controls at the start of the header. - **header-trail**: Add actions (e.g., export buttons) at the end of the header. - **footer**: Replace the default pagination footer with custom content. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"4\" settings searchable @gds-table-data-loaded=${handleDataLoaded} > <gds-dropdown size=\"small\" slot=\"header-lead\" plain searchable> <span slot=\"trigger\">Sorting</span> <gds-option value=\"by-name\">Sort by Name</gds-option> <gds-option value=\"by-status\">Sort by Status</gds-option> </gds-dropdown> <gds-button slot=\"header-trail\" rank=\"secondary\" size=\"small\"> Export </gds-button> </gds-table> ` }, }"
         },
         {
           "kind": "variable",
@@ -35434,11 +35463,11 @@
         },
         {
           "kind": "variable",
-          "name": "DynamicContent",
+          "name": "SlotComposition",
           "type": {
             "text": "Story"
           },
-          "default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` The table uses **slot composition** to render rich cell content. Instead of built-in cell types, you control what renders in each cell through standard web component slots. **How it works:** 1. Wrap cell values with \\`Slot(value, ['slotId'])\\` during row normalization 2. Listen for the \\`gds-table-data-loaded\\` event 3. Render elements with \\`slot=\"columnKey:rowKey:slotId\"\\` into the table's light DOM The \\`value\\` parameter is used for sorting and search. The \\`slots\\` array defines the cell layout order — use \\`'value'\\` to render the plain text inline alongside slotted components. \\`\\`\\` Slot(row.email, ['value', 'copy-button']) → renders text + <slot name=\"email:rowKey:copy-button\"> \\`\\`\\` > See the **Developer Guide** for full details on slot naming, framework integration, and migration from the old cell types. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"4\" plain @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
+          "default": "{ args: { columns: Users.Columns, data: Users.Data, headline: 'User Management', summary: 'Overview of all users in the system', selectable: true, searchable: true, settings: true, density: 'comfortable', }, parameters: { docs: { description: { story: ` Slot composition lets you render custom components inside table cells using standard web component slots. Each row needs a **unique key** for slot naming set via the \\`key\\` parameter in \\`Slot()\\`, or it falls back to \\`row.id\\`, then the row index. #### 1. Compose data with \\`Slot()\\` \\`\\`\\`ts // With explicit unique key (value, slots, key) const data = users.map(row => ({ ...row, name: Slot(row.name, ['avatar', 'value'], row.accountId), email: Slot(row.email, ['value', 'copy-button'], row.accountId), status: Slot(row.status, ['status'], row.accountId), })) // Without key - falls back to row.id, then row index const data = users.map(row => ({ ...row, name: Slot(row.name, ['avatar', 'value']), email: Slot(row.email, ['value', 'copy-button']), status: Slot(row.status, ['status']), })) \\`\\`\\` The arguments are positional: \\`Slot(value, slots, key)\\` or \\`Slot(value, key, slots)\\`. The **value** is used for sorting/search, **slots** is an ordered array of slot ids (include \\`'value'\\` to render the plain text alongside your components), and **key** is an optional \\`string | number\\` used as a stable row identifier. #### 2. Render slot content on data load \\`\\`\\`ts @gds-table-data-loaded=\\${(e) => { render(slotContent(e.detail.rows), tableEl) }} \\`\\`\\` #### 3. Slot naming convention The slot name follows the pattern \\`columnKey:rowKey:slotId\\`. \\`\\`\\`html <!-- When key is set to row.accountId (e.g. \"ACC-1042\") --> <gds-badge slot=\"status:ACC-1042:status\" variant=\"positive\">Active</gds-badge> <gds-button slot=\"email:ACC-1042:copy-button\" rank=\"tertiary\" size=\"small\"> <gds-icon-copy></gds-icon-copy> </gds-button> <!-- When no key is set and row.id is 42 --> <gds-badge slot=\"status:42:status\" variant=\"positive\">Active</gds-badge> <gds-button slot=\"email:42:copy-button\" rank=\"tertiary\" size=\"small\"> <gds-icon-copy></gds-icon-copy> </gds-button> <!-- When no key and no row.id - falls back to row index (1-based) --> <gds-badge slot=\"status:1:status\" variant=\"positive\">Active</gds-badge> \\`\\`\\` Only the current page's slot content is rendered - previous elements are replaced on page change. > See the **Developer Guide** for full details on framework integration and the \\`Slot()\\` API. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" .headline=\"${args.headline}\" .summary=\"${args.summary}\" ?selectable=\"${args.selectable}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" density=\"${args.density}\" responsive rows=\"5\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
         },
         {
           "kind": "variable",
@@ -35447,14 +35476,6 @@
             "text": "Story"
           },
           "default": "{ args: { columns: Users.Columns, data: Users.Data, }, parameters: { docs: { description: { story: ` The table component dispatches events for various user interactions. **Pagination Events** - **gds-page-change**: Fired when the active page changes. Detail: \\`{ page: number }\\` - **gds-rows-change**: Fired when the rows per page value changes. Detail: \\`{ rows: number }\\` **Sorting Events** - **gds-sort-change**: Fired when sorting changes. Detail: \\`{ sortColumn: string, sortDirection: 'asc' | 'desc' }\\` **Data Events** - **gds-table-data-loaded**: Fired when data is successfully loaded - **gds-table-data-error**: Fired when data loading fails - **gds-table-selection**: Fired when row selection changes This example demonstrates listening to pagination and sorting events and displaying the current state. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const state = { currentPage: 1, currentRows: 10, sortColumn: '', sortDirection: 'asc', } const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } const handlePageChange = (e: CustomEvent) => { console.log('🔔 Page change event:', e.detail) state.currentPage = e.detail.page const pageEl = document.querySelector('#page-status') if (pageEl) { pageEl.textContent = `Page: ${state.currentPage}` } } const handleRowsChange = (e: CustomEvent) => { console.log('🔔 Rows change event:', e.detail) state.currentRows = e.detail.rows const rowsEl = document.querySelector('#rows-status') if (rowsEl) { rowsEl.textContent = `Rows: ${state.currentRows}` } } const handleSortChange = (e: CustomEvent) => { console.log('🔔 Sort change event:', e.detail) state.sortColumn = e.detail.sortColumn state.sortDirection = e.detail.sortDirection const sortEl = document.querySelector('#sort-status') if (sortEl) { sortEl.textContent = `${state.sortColumn} (${state.sortDirection})` } } return html` <gds-flex flex-direction=\"column\" gap=\"l\"> <gds-flex flex-direction=\"column\" gap=\"m\"> <gds-card variant=\"secondary\" padding=\"m\" border-radius=\"m\"> <gds-flex flex-direction=\"column\" gap=\"s\"> <gds-text font=\"heading-s\">Event Monitor</gds-text> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Open your browser console (F12) to see event logs </gds-text> <gds-flex gap=\"m\"> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Current Page </gds-text> <gds-text id=\"page-status\" font=\"body-regular-m\" color=\"primary\" > Page: ${state.currentPage} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Rows Per Page </gds-text> <gds-text id=\"rows-status\" font=\"body-regular-m\" color=\"primary\" > Rows: ${state.currentRows} </gds-text> </gds-flex> <gds-flex flex-direction=\"column\" gap=\"xs\" flex=\"1\"> <gds-text font=\"detail-book-s\" color=\"neutral-01\"> Sort Column </gds-text> <gds-text id=\"sort-status\" font=\"body-regular-m\" color=\"primary\" > ${state.sortColumn ? `${state.sortColumn} (${state.sortDirection})` : 'None'} </gds-text> </gds-flex> </gds-flex> </gds-flex> </gds-card> </gds-flex> <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" rows=\"5\" selectable searchable settings @gds-table-data-loaded=${handleDataLoaded} @gds-page-change=${(e: CustomEvent) => handlePageChange(e)} @gds-rows-change=${(e: CustomEvent) => handleRowsChange(e)} @gds-sort-change=${(e: CustomEvent) => handleSortChange(e)} > </gds-table> </gds-flex> ` }, }"
-        },
-        {
-          "kind": "variable",
-          "name": "SlotComposition",
-          "type": {
-            "text": "Story"
-          },
-          "default": "{ args: { columns: Users.Columns, data: Users.Data, headline: 'User Management', summary: 'Overview of all users in the system', selectable: true, searchable: true, settings: true, density: 'comfortable', }, parameters: { docs: { description: { story: ` Demonstrates dynamic slot composition for data-driven content injection into table cells. **Pattern:** Generate slots using \\`columnKey:rowKey:slotId\\` naming convention. Slot content is generated from \\`Users.SlotContent(rows)\\` which receives the current page's rows from the \\`gds-table-data-loaded\\` event and creates per-row elements (avatars, copy icons, download icons). Only the current page's slot content is rendered — when pages change, previous slot elements are replaced with new ones for the visible rows. `, }, }, }, render: (args) => { const tableRef = createRef<any>() const handleDataLoaded = (e: CustomEvent) => { const table = tableRef.value if (table) render(Users.SlotContent(e.detail.rows), table) } return html` <gds-table ${ref(tableRef)} .columns=\"${args.columns}\" .data=\"${args.data}\" .headline=\"${args.headline}\" .summary=\"${args.summary}\" ?selectable=\"${args.selectable}\" ?searchable=\"${args.searchable}\" ?settings=\"${args.settings}\" density=\"${args.density}\" responsive rows=\"5\" @gds-table-data-loaded=${handleDataLoaded} > </gds-table> ` }, }"
         }
       ],
       "exports": [
@@ -35530,6 +35551,14 @@
             "module": "src/components/table/table.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "Tfoot",
+          "declaration": {
+            "name": "Tfoot",
+            "module": "src/components/table/table.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Headline",
@@ -35596,9 +35625,9 @@
         },
         {
           "kind": "js",
-          "name": "DynamicContent",
+          "name": "SlotComposition",
           "declaration": {
-            "name": "DynamicContent",
+            "name": "SlotComposition",
             "module": "src/components/table/table.stories.ts"
           }
         },
@@ -35609,14 +35638,6 @@
             "name": "Events",
             "module": "src/components/table/table.stories.ts"
           }
-        },
-        {
-          "kind": "js",
-          "name": "SlotComposition",
-          "declaration": {
-            "name": "SlotComposition",
-            "module": "src/components/table/table.stories.ts"
-          }
         }
       ]
     },
@@ -35627,7 +35648,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-s); --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, th.wrap { 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; } .justify-end:not(.sortable) .column-header { 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 table { max-width: 100%; } .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; flex: 1; min-width: 0; } .responsive td .cell-content { justify-content: flex-start; flex: 1; width: 100%; gap: var(--gds-sys-space-s); } .responsive td .cell-wrapped-content { flex: 1; justify-content: flex-end; text-align: right; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ @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 - screen reader only without layout impact */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; height: 0px; width: 0px; } /* 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-s); --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); --table-data-padding-x: 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); --table-data-padding-x: 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); --table-data-padding-x: 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); --_table-card-bg: var(--gds-sys-color-l1-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); --_table-card-bg: 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, th.wrap { 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; } .justify-end:not(.sortable) .column-header { 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; } /* Sticky actions column */ th.actions.sticky, td.actions-cell.sticky { position: sticky; right: calc(-1 * var(--table-data-padding-x, 0px)); z-index: 1; width: max-content; padding-right: calc( var(--table-cell-padding-x) + var(--table-data-padding-x, 0px) ); } th.actions.sticky { z-index: 2; background: var(--_table-header-bg); } th.actions.sticky .column-header { justify-content: flex-end; } td.actions-cell.sticky { background: var(--_table-card-bg); } td.actions-cell.sticky .cell-content { justify-content: flex-end; position: relative; } /* Left gradient fade on sticky action cells */ td.actions-cell.sticky::before { content: ''; position: absolute; inset-block: 0; right: 100%; width: var(--gds-sys-space-4xl); pointer-events: none; background: linear-gradient(to right, transparent, var(--_table-card-bg)); } th.actions.sticky::before { content: ''; position: absolute; inset-block: 0; right: 100%; width: var(--gds-sys-space-4xl); pointer-events: none; background: linear-gradient(to right, transparent, var(--_table-header-bg)); } /* Sticky action inherits row hover/selected/striped backgrounds */ tbody tr:hover td.actions-cell.sticky { background: var(--_table-row-hover); } tbody tr:hover td.actions-cell.sticky::before { background: linear-gradient(to right, transparent, var(--_table-row-hover)); } tbody tr.selected td.actions-cell.sticky { background: var(--gds-sys-color-l3-neutral-02); } tbody tr.selected td.actions-cell.sticky::before { background: linear-gradient( to right, transparent, var(--gds-sys-color-l3-neutral-02) ); } .striped tbody tr:not(.selected, :hover):nth-child(even) td.actions-cell.sticky { background: var(--_table-row-striped); } .striped tbody tr:not(.selected, :hover):nth-child(even) td.actions-cell.sticky::before { background: linear-gradient( to right, transparent, var(--_table-row-striped) ); } /* Table Footer Row */ tfoot.tablefoot tr td, tfoot.tablefoot tr th[scope='row'] { padding-block: var(--table-cell-padding-y); padding-inline: var(--table-cell-padding-x); background: var(--_table-header-bg); font-weight: normal; border-top: var(--_table-border-width) solid var(--_table-border-color); } tfoot.tablefoot tr th[scope='row'] { font-weight: var(--gds-sys-text-weight-book); } tfoot.tablefoot tr td:first-child, tfoot.tablefoot tr th:first-child { border-top-left-radius: var(--gds-sys-radius-s); border-bottom-left-radius: var(--gds-sys-radius-s); } tfoot.tablefoot tr td:last-child, tfoot.tablefoot tr th:last-child { border-top-right-radius: var(--gds-sys-radius-s); border-bottom-right-radius: var(--gds-sys-radius-s); } .tablefoot-label { font-weight: var(--gds-sys-text-weight-book); white-space: nowrap; } tfoot.tablefoot.sticky { position: sticky; bottom: 0; z-index: 10; will-change: transform; } /* When sticky tablefoot: move padding from .data to table, keep tfoot edge-to-edge */ .data:has(tfoot.tablefoot.sticky) { padding: 0; } .data:has(tfoot.tablefoot.sticky) table { padding-top: var(--table-data-padding-x); padding-inline: var(--table-data-padding-x); } tfoot.tablefoot.sticky tr td, tfoot.tablefoot.sticky tr th[scope='row'] { border-radius: 0; background: var(--_table-card-bg); border-top: var(--_table-border-width) solid var(--_table-border-color); } /* 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 table { max-width: 100%; } .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; flex: 1; min-width: 0; } .responsive td .cell-content { justify-content: flex-start; flex: 1; width: 100%; gap: var(--gds-sys-space-s); } .responsive td .cell-wrapped-content { flex: 1; justify-content: flex-end; text-align: right; } .responsive tr:hover, .responsive tr td:hover { background: none; } } /* Medium screens: input and dropdown side by side */ @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 - screen reader only without layout impact */ .visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; height: 0px; width: 0px; } /* 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; } } /* Sticky table footer */ tfoot.tablefoot.sticky { background-color: var(--_table-card-bg); } tfoot.tablefoot.sticky tr td, tfoot.tablefoot.sticky tr th[scope='row'] { background: var(--_table-card-bg); } /* 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: 0px; --_end-fade: var(--gds-sys-space-4xl); } 1% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: var(--gds-sys-space-4xl); } 99% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: var(--gds-sys-space-4xl); } 100% { --_start-fade: var(--gds-sys-space-4xl); --_end-fade: 0px; } } .data { overflow-x: auto; mask: linear-gradient( to right, #0000, #ffff var(--_start-fade) calc(100% - var(--_end-fade)), #0000 ); animation: scroll-fade both linear; animation-timeline: scroll(self inline); } /* When sticky actions are present, remove the right fade.*/ .data:has(td.actions-cell.sticky) { mask: linear-gradient( to right, #0000, #ffff var(--_start-fade), #ffff 100% ); } } } @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": [
@@ -35667,7 +35688,7 @@
             "text": "{\n  compact: {\n    input: 'small',\n    dropdown: 'small',\n  },\n  comfortable: {\n    input: 'small',\n    dropdown: 'small',\n  },\n  spacious: {\n    input: 'large',\n    dropdown: 'medium',\n  },\n}"
           },
           "default": "{ compact: { input: 'small', dropdown: 'small', }, comfortable: { input: 'small', dropdown: 'small', }, spacious: { input: 'large', dropdown: 'medium', }, }",
-          "description": "Internal density configuration for the table's built-in UI controls\n(search input, column settings dropdown). Does not affect user-provided\nslot content — size your own components to match the chosen density."
+          "description": "Internal density configuration for the table's built-in UI controls\n(search input, column settings dropdown). Does not affect user-provided\nslot content size your own components to match the chosen density."
         },
         {
           "kind": "function",
@@ -43266,7 +43287,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/sensitive-date/index.js"
+            "module": "src/generated/react/sensitive-account/index.js"
           }
         },
         {
@@ -43274,7 +43295,7 @@
           "name": "*",
           "declaration": {
             "name": "*",
-            "module": "src/generated/react/sensitive-account/index.js"
+            "module": "src/generated/react/sensitive-date/index.js"
           }
         },
         {
@@ -233529,7 +233550,7 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/sensitive/date/index.ts",
+      "path": "src/components/sensitive/number/index.ts",
       "declarations": [],
       "exports": [
         {
@@ -233537,19 +233558,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",
@@ -233558,33 +233579,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"
               }
             },
             {
@@ -233593,23 +233612,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"
               }
             },
             {
@@ -234587,32 +234620,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"
               }
             },
             {
@@ -234656,10 +234713,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": [
             {
@@ -234698,17 +234755,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",
@@ -234716,8 +234773,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",
@@ -234725,7 +234782,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": [
@@ -234734,7 +234791,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
+            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
           }
         },
         {
@@ -234742,29 +234799,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": [
         {
@@ -234772,19 +234829,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",
@@ -234793,31 +234850,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"
               }
             },
             {
@@ -234826,37 +234885,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"
               }
             },
             {
@@ -235834,56 +235879,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"
               }
             },
             {
@@ -235927,10 +235948,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": [
             {
@@ -235969,17 +235990,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",
@@ -235987,8 +236008,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",
@@ -235996,7 +236017,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": [
@@ -236005,7 +236026,7 @@
           "name": "default",
           "declaration": {
             "name": "meta",
-            "module": "src/components/sensitive/number/sensitive-number.stories.ts"
+            "module": "src/components/sensitive/date/sensitive-date.stories.ts"
           }
         },
         {
@@ -236013,22 +236034,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"
           }
         }
       ]
@@ -236120,16 +236141,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/breadcrumb/index.ts",
+      "path": "src/generated/react/blur/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsBreadcrumb",
+          "name": "GdsBlur",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBreadcrumbClass>>\n  > & { ref?: React.Ref<GdsBreadcrumbClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBlurClass>>\n  > & { ref?: React.Ref<GdsBlurClass> }"
               }
             }
           ]
@@ -236138,26 +236159,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsBreadcrumb",
+          "name": "GdsBlur",
           "declaration": {
-            "name": "GdsBreadcrumb",
-            "module": "src/generated/react/breadcrumb/index.ts"
+            "name": "GdsBlur",
+            "module": "src/generated/react/blur/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/blur/index.ts",
+      "path": "src/generated/react/breadcrumb/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsBlur",
+          "name": "GdsBreadcrumb",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBlurClass>>\n  > & { ref?: React.Ref<GdsBlurClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsBreadcrumbClass>>\n  > & { ref?: React.Ref<GdsBreadcrumbClass> }"
               }
             }
           ]
@@ -236166,10 +236187,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsBlur",
+          "name": "GdsBreadcrumb",
           "declaration": {
-            "name": "GdsBlur",
-            "module": "src/generated/react/blur/index.ts"
+            "name": "GdsBreadcrumb",
+            "module": "src/generated/react/breadcrumb/index.ts"
           }
         }
       ]
@@ -236558,16 +236579,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/div/index.ts",
+      "path": "src/generated/react/divider/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
               }
             }
           ]
@@ -236576,26 +236597,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDiv",
+          "name": "GdsDivider",
           "declaration": {
-            "name": "GdsDiv",
-            "module": "src/generated/react/div/index.ts"
+            "name": "GdsDivider",
+            "module": "src/generated/react/divider/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/divider/index.ts",
+      "path": "src/generated/react/div/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "GdsDivider",
+          "name": "GdsDiv",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDividerClass>>\n  > & { ref?: React.Ref<GdsDividerClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<GdsDivClass>>\n  > & { ref?: React.Ref<GdsDivClass> }"
               }
             }
           ]
@@ -236604,10 +236625,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "GdsDivider",
+          "name": "GdsDiv",
           "declaration": {
-            "name": "GdsDivider",
-            "module": "src/generated/react/divider/index.ts"
+            "name": "GdsDiv",
+            "module": "src/generated/react/div/index.ts"
           }
         }
       ]
@@ -237821,16 +237842,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-bottom-top/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-box-left/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowBottomTop",
+          "name": "IconArrowBoxLeft",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBottomTopClass>>\n  > & { ref?: React.Ref<IconArrowBottomTopClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxLeftClass>>\n  > & { ref?: React.Ref<IconArrowBoxLeftClass> }"
               }
             }
           ]
@@ -237839,26 +237860,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowBottomTop",
+          "name": "IconArrowBoxLeft",
           "declaration": {
-            "name": "IconArrowBottomTop",
-            "module": "src/generated/react/icons/icon-arrow-bottom-top/index.ts"
+            "name": "IconArrowBoxLeft",
+            "module": "src/generated/react/icons/icon-arrow-box-left/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-box-left/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-bottom-top/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowBoxLeft",
+          "name": "IconArrowBottomTop",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxLeftClass>>\n  > & { ref?: React.Ref<IconArrowBoxLeftClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBottomTopClass>>\n  > & { ref?: React.Ref<IconArrowBottomTopClass> }"
               }
             }
           ]
@@ -237867,26 +237888,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowBoxLeft",
+          "name": "IconArrowBottomTop",
           "declaration": {
-            "name": "IconArrowBoxLeft",
-            "module": "src/generated/react/icons/icon-arrow-box-left/index.ts"
+            "name": "IconArrowBottomTop",
+            "module": "src/generated/react/icons/icon-arrow-bottom-top/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-box-right/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowBoxRight",
+          "name": "IconArrowBoxLeftAlt",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxRightClass>>\n  > & { ref?: React.Ref<IconArrowBoxRightClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxLeftAltClass>>\n  > & { ref?: React.Ref<IconArrowBoxLeftAltClass> }"
               }
             }
           ]
@@ -237895,26 +237916,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowBoxRight",
+          "name": "IconArrowBoxLeftAlt",
           "declaration": {
-            "name": "IconArrowBoxRight",
-            "module": "src/generated/react/icons/icon-arrow-box-right/index.ts"
+            "name": "IconArrowBoxLeftAlt",
+            "module": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts",
+      "path": "src/generated/react/icons/icon-arrow-box-right/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconArrowBoxLeftAlt",
+          "name": "IconArrowBoxRight",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxLeftAltClass>>\n  > & { ref?: React.Ref<IconArrowBoxLeftAltClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconArrowBoxRightClass>>\n  > & { ref?: React.Ref<IconArrowBoxRightClass> }"
               }
             }
           ]
@@ -237923,10 +237944,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconArrowBoxLeftAlt",
+          "name": "IconArrowBoxRight",
           "declaration": {
-            "name": "IconArrowBoxLeftAlt",
-            "module": "src/generated/react/icons/icon-arrow-box-left-alt/index.ts"
+            "name": "IconArrowBoxRight",
+            "module": "src/generated/react/icons/icon-arrow-box-right/index.ts"
           }
         }
       ]
@@ -239193,16 +239214,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-bankid/index.ts",
+      "path": "src/generated/react/icons/icon-brand-apple-music/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandBankid",
+          "name": "IconBrandAppleMusic",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandBankidClass>>\n  > & { ref?: React.Ref<IconBrandBankidClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandAppleMusicClass>>\n  > & { ref?: React.Ref<IconBrandAppleMusicClass> }"
               }
             }
           ]
@@ -239211,26 +239232,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandBankid",
+          "name": "IconBrandAppleMusic",
           "declaration": {
-            "name": "IconBrandBankid",
-            "module": "src/generated/react/icons/icon-brand-bankid/index.ts"
+            "name": "IconBrandAppleMusic",
+            "module": "src/generated/react/icons/icon-brand-apple-music/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-apple-music/index.ts",
+      "path": "src/generated/react/icons/icon-brand-bankid/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandAppleMusic",
+          "name": "IconBrandBankid",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandAppleMusicClass>>\n  > & { ref?: React.Ref<IconBrandAppleMusicClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandBankidClass>>\n  > & { ref?: React.Ref<IconBrandBankidClass> }"
               }
             }
           ]
@@ -239239,10 +239260,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandAppleMusic",
+          "name": "IconBrandBankid",
           "declaration": {
-            "name": "IconBrandAppleMusic",
-            "module": "src/generated/react/icons/icon-brand-apple-music/index.ts"
+            "name": "IconBrandBankid",
+            "module": "src/generated/react/icons/icon-brand-bankid/index.ts"
           }
         }
       ]
@@ -239557,16 +239578,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-spotify/index.ts",
+      "path": "src/generated/react/icons/icon-brand-storybook/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandSpotify",
+          "name": "IconBrandStorybook",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandSpotifyClass>>\n  > & { ref?: React.Ref<IconBrandSpotifyClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandStorybookClass>>\n  > & { ref?: React.Ref<IconBrandStorybookClass> }"
               }
             }
           ]
@@ -239575,26 +239596,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandSpotify",
+          "name": "IconBrandStorybook",
           "declaration": {
-            "name": "IconBrandSpotify",
-            "module": "src/generated/react/icons/icon-brand-spotify/index.ts"
+            "name": "IconBrandStorybook",
+            "module": "src/generated/react/icons/icon-brand-storybook/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-brand-storybook/index.ts",
+      "path": "src/generated/react/icons/icon-brand-spotify/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconBrandStorybook",
+          "name": "IconBrandSpotify",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandStorybookClass>>\n  > & { ref?: React.Ref<IconBrandStorybookClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconBrandSpotifyClass>>\n  > & { ref?: React.Ref<IconBrandSpotifyClass> }"
               }
             }
           ]
@@ -239603,10 +239624,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconBrandStorybook",
+          "name": "IconBrandSpotify",
           "declaration": {
-            "name": "IconBrandStorybook",
-            "module": "src/generated/react/icons/icon-brand-storybook/index.ts"
+            "name": "IconBrandSpotify",
+            "module": "src/generated/react/icons/icon-brand-spotify/index.ts"
           }
         }
       ]
@@ -245241,16 +245262,16 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-safari/index.ts",
+      "path": "src/generated/react/icons/icon-school/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconSafari",
+          "name": "IconSchool",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSafariClass>>\n  > & { ref?: React.Ref<IconSafariClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSchoolClass>>\n  > & { ref?: React.Ref<IconSchoolClass> }"
               }
             }
           ]
@@ -245259,26 +245280,26 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconSafari",
+          "name": "IconSchool",
           "declaration": {
-            "name": "IconSafari",
-            "module": "src/generated/react/icons/icon-safari/index.ts"
+            "name": "IconSchool",
+            "module": "src/generated/react/icons/icon-school/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/generated/react/icons/icon-school/index.ts",
+      "path": "src/generated/react/icons/icon-safari/index.ts",
       "declarations": [
         {
           "kind": "function",
-          "name": "IconSchool",
+          "name": "IconSafari",
           "parameters": [
             {
               "name": "props",
               "type": {
-                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSchoolClass>>\n  > & { ref?: React.Ref<IconSchoolClass> }"
+                "text": "React.ComponentProps<\n    ReturnType<typeof getReactComponent<IconSafariClass>>\n  > & { ref?: React.Ref<IconSafariClass> }"
               }
             }
           ]
@@ -245287,10 +245308,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "IconSchool",
+          "name": "IconSafari",
           "declaration": {
-            "name": "IconSchool",
-            "module": "src/generated/react/icons/icon-school/index.ts"
+            "name": "IconSafari",
+            "module": "src/generated/react/icons/icon-safari/index.ts"
           }
         }
       ]