@adobe-commerce/elsie 1.5.0-alpha200 → 1.5.0-alpha3000

package/bin/builders/serve/index.js

@@ -4,7 +4,9 @@ const path = require('path');
 module.exports = async function generateResourceBuilder({ argv }) {
   const { build, preview } = await import('vite');
 
-  const configFile = argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
+  const configFile =
+    argv?.config ??
+    path.resolve(...[__dirname, '..', '..', '..', 'config', 'vite.mjs']);
 
   let built = false;
 

package/config/vite.mjs

@@ -2,9 +2,9 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { glob } from 'glob';
@@ -25,7 +25,12 @@ import banner from 'vite-plugin-banner';
 const env = loadEnv('', process.cwd());
 
 // Load Elsie Config
-const elsieConfig = await import(path.resolve(process.cwd(), './.elsie.js')).then((m) => m.default);
+const elsieConfigPath = path.resolve(process.cwd(), './.elsie.js');
+// Convert Windows paths to file:// URLs for ES module imports
+const elsieConfigUrl = elsieConfigPath.startsWith('file://')
+  ? elsieConfigPath
+  : `file://${elsieConfigPath.replace(/\\/g, '/')}`;
+const elsieConfig = await import(elsieConfigUrl).then((m) => m.default);
 
 // Read package.json using createRequire (compatible with Node 20 and 22)
 const require = createRequire(import.meta.url);
@@ -293,19 +298,19 @@ export default {
       generateBundle(options, bundle) {
         for (const fileName in bundle) {
           const chunk = bundle[fileName];
-          
+
           // Process both .map files and JS/TS files with sourcemaps
-          if ((chunk.type === 'asset' && fileName.endsWith('.map')) || 
+          if ((chunk.type === 'asset' && fileName.endsWith('.map')) ||
               (chunk.type === 'chunk' && chunk.map)) {
             try {
               // Get the sourcemap object - either from the asset source or the chunk's map
               const map = chunk.type === 'asset' ? JSON.parse(chunk.source) : chunk.map;
-              
+
               if (map.sources) {
                 map.sources = map.sources.map((input) => {
                   return input.replace(/(?:\.\.?\/)+src\//, `/${packageJSON.name}/src/`);
                 });
-                
+
                 // Update the sourcemap in the appropriate place
                 if (chunk.type === 'asset') {
                   chunk.source = JSON.stringify(map);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-alpha200",
+  "version": "1.5.0-alpha3000",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,8 +27,8 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.1",
-    "@adobe-commerce/fetch-graphql": "~1.1.0",
-    "@adobe-commerce/recaptcha": "~1.0.1",
+    "@adobe-commerce/fetch-graphql": "1.2.0-beta1",
+    "@adobe-commerce/recaptcha": "1.0.2-beta1",
     "@adobe-commerce/storefront-design": "~1.0.0",
     "@dropins/build-tools": "~1.0.1",
     "preact": "~10.22.1",

package/src/components/Table/Table.css

@@ -0,0 +1,110 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-table {
+    container-type: inline-size;
+    overflow-x: auto;
+    font: var(--type-body-1-default-font);
+    letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-table__table {
+    border-collapse: collapse; 
+    width: 100%;
+}
+
+.dropin-table__caption {
+    font: var(--type-details-caption-1-font);
+    letter-spacing: var(--type-details-caption-1-letter-spacing);
+    text-align: left;
+    margin-bottom: var(--spacing-small);
+    caption-side: top;
+}
+
+.dropin-table__header__cell {
+    font: var(--type-body-1-strong-font);
+    letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+
+.dropin-table__header__cell,
+.dropin-table__body__cell {
+    padding: var(--spacing-xsmall);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.dropin-table__header__cell--sortable {
+    cursor: pointer;
+}
+
+.dropin-table__header__row {
+    border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.dropin-table__body__row {
+    border-bottom: 1px solid var(--color-neutral-400);
+}
+
+.dropin-table__header__sort-button {
+    margin-left: var(--spacing-xsmall);
+    vertical-align: middle;
+}
+
+.dropin-table__row-details {
+    display: none;
+}
+
+.dropin-table__row-details--expanded {
+    display: table-row;
+}
+
+.dropin-table__row-details__cell {
+    padding: var(--spacing-small);
+    background-color: var(--color-neutral-100);
+    border-top: 1px solid var(--color-neutral-300);
+    border-bottom: 1px solid var(--color-neutral-400);
+}
+
+/* Container query for mobile layout */
+@container (max-width: 600px) {
+    /* Mobile layout Stacked */
+    .dropin-table--mobile-layout-stacked .dropin-table__header {
+        display: none;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell {
+        display: block;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell::before {
+        content: attr(data-label);
+        font-weight: bold;
+        display: block;
+        margin-bottom: var(--spacing-xxsmall);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell {
+        display: block;
+        padding: var(--spacing-small);
+    }
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

package/src/components/Table/Table.stories.tsx

@@ -0,0 +1,648 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { useState } from 'preact/hooks';
+import { Table as TableComponent, TableProps } from '@adobe-commerce/elsie/components/Table';
+
+/**
+ * Use the `Table` component to render data in a structured table.
+ * 
+ * ## Column Structure
+ * Each column in the `columns` array defines a table column with:
+ * - **`key`**: Unique identifier that matches the property names in `rowData` objects
+ * - **`label`**: Display text shown in the column header
+ * - **`sortBy`**: Optional sorting state (`true` for sortable but neutral, `'asc'` for ascending, `'desc'` for descending)
+ * 
+ * ## Row Data Structure
+ * Each object in the `rowData` array represents a table row where:
+ * - **Keys** must match the `key` values from the `columns` array
+ * - **Values** can be:
+ *   - **Strings**: Plain text content
+ *   - **Numbers**: Numeric values (automatically converted to strings for display)
+ *   - **VNode**: Preact `VNode` for complex content (buttons, icons, formatted text, etc.)
+ * 
+ * ## Mobile Layout & Container Queries
+ * The table uses **container queries** instead of media queries for responsive behavior:
+ * - **`mobileLayout`**: Optional prop that controls mobile behavior
+ *   - `'none'` (default): No special mobile layout
+ *   - `'stacked'`: Stacks cells vertically when container width ≤ 600px
+ * - **Container Query Breakpoint**: 600px - triggers when the table's container becomes narrow
+ * - **`data-label`**: Automatically added to cells for accessibility in stacked layout
+ * - **Responsive Behavior**: Table adapts to its container width, not viewport width
+ * 
+ * ## All props
+ * The table below shows all the props for the `Table` component.
+ */
+
+const meta: Meta<TableProps> = {
+  title: 'Components/Table',
+  component: TableComponent,
+  parameters: {
+    layout: 'padded',
+  },
+  argTypes: {
+    columns: {
+      description: 'Array of column definitions for the table. Each column defines the structure and behavior of a table column.',
+      table: {
+        type: { summary: 'Column[]' },
+      },
+      control: 'object',
+    },
+    rowData: {
+      description: 'Array of data objects to display in table rows. Each object represents a table row where keys match column keys and values contain the cell content.',
+      table: {
+        type: { summary: 'RowData[]' },
+      },
+      control: 'object',
+    },
+    mobileLayout: {
+      description: 'Controls responsive layout behavior using container queries. When set to "stacked", cells stack vertically when the table container width ≤ 600px. The `data-label` attribute is automatically added to cells for accessibility.',
+      table: {
+        type: { summary: 'none | stacked' },
+      },
+      control: 'select',
+      options: ['none', 'stacked'],
+      mapping: {
+        none: 'none',
+        stacked: 'stacked',
+      },
+    },
+    caption: {
+      description: 'Optional table caption that provides context and description. Displays above the table and is announced by screen readers.',
+      table: {
+        type: { summary: 'string' },
+      },
+      control: 'text',
+    },
+    onSortChange: {
+      description: 'Callback function triggered when column sorting changes.',
+      table: {
+        type: { summary: '(columnKey: string, direction: Sortable) => void' },
+      },
+      action: 'onSortChange',
+    },
+    expandedRows: {
+      description: 'Set of row indices that are currently expanded. Used to control which rows are shown in expanded state. Row details will only render for rows that have `_rowDetails` content and are included in this set.',
+      table: {
+        type: { summary: 'Set<number>' },
+      },
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<TableProps>;
+
+// Wrapper component to manage sorting state
+const TableWithState = (args: TableProps) => {
+  const [columns, setColumns] = useState(args.columns);
+
+  const handleSortChange = (columnKey: string, direction: 'asc' | 'desc' | true) => {
+    // call Action onSortChange
+    args.onSortChange?.(columnKey, direction);
+
+    // Update column sort states
+    setColumns(prevColumns =>
+      prevColumns.map(col => {
+        if (col.key === columnKey) {
+          return { ...col, sortBy: direction };
+        } else if (col.sortBy === 'asc' || col.sortBy === 'desc') {
+          return { ...col, sortBy: true }; // Reset other sorted columns to neutral
+        }
+        return col;
+      })
+    );
+  };
+
+  return (
+    <TableComponent
+      {...args}
+      columns={columns}
+      onSortChange={handleSortChange}
+    />
+  );
+};
+
+/**
+ * Simple table.
+ * Demonstrates basic table structure with string and number content types.
+ * 
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'age', label: 'Age' }     
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ * />
+ * ```
+ */
+export const Table: Story = {
+  args: {
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'age', label: 'Age' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
+    ],
+  },
+};
+
+/**
+ * Table where all columns are sortable. Demonstrates the three-state sorting cycle: `true` → `'asc'` → `'desc'` → `true`.
+ * Shows how multiple columns can be sortable simultaneously, with only one active sort at a time.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name', sortBy: true },  
+ *     { key: 'email', label: 'Email', sortBy: true },
+ *     { key: 'age', label: 'Age', sortBy: true }    
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ *   onSortChange={(columnKey, direction) => handleSort(columnKey, direction)}
+ * />
+ * ```
+ */
+export const AllSortable: Story = {
+  render: TableWithState,
+  args: {
+    columns: [
+      { key: 'name', label: 'Name', sortBy: true },
+      { key: 'email', label: 'Email', sortBy: true },
+      { key: 'age', label: 'Age', sortBy: true },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John', email: 'john@example.com', age: 20, actions: <button>Edit</button> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <button>Edit</button> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <button>Edit</button> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <button>Edit</button> },
+      { name: 'Jack', email: 'jack@example.com', age: 24, actions: <button>Edit</button> },
+    ],
+  },
+};
+
+/**
+ * Wide table with 10 columns to demonstrate horizontal scrolling and container query behavior.
+ * This table will show how the container query responds when the table becomes too wide for its container.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'id', label: 'ID' },
+ *     { key: 'name', label: 'Full Name' },
+ *     { key: 'email', label: 'Email Address' },
+ *     { key: 'phone', label: 'Phone Number' },
+ *     { key: 'department', label: 'Department' },
+ *     { key: 'position', label: 'Position' },
+ *     { key: 'salary', label: 'Salary' },
+ *     { key: 'startDate', label: 'Start Date' },
+ *     { key: 'status', label: 'Status' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { id: 1, name: 'John Doe', email: 'john@company.com', phone: '+1-555-0123', department: 'Engineering', position: 'Senior Developer', salary: '$95,000', startDate: '2022-01-15', status: 'Active', actions: <button>Edit</button> }
+ *   ]}
+ * />
+ * ```
+ */
+export const WideTable: Story = {
+  args: {
+    columns: [
+      { key: 'id', label: 'ID' },
+      { key: 'name', label: 'Full Name' },
+      { key: 'email', label: 'Email Address' },
+      { key: 'phone', label: 'Phone Number' },
+      { key: 'department', label: 'Department' },
+      { key: 'position', label: 'Position' },
+      { key: 'salary', label: 'Salary' },
+      { key: 'startDate', label: 'Start Date' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { 
+        id: 1, 
+        name: 'John Doe', 
+        email: 'john.doe@company.com', 
+        phone: '+1-555-0123', 
+        department: 'Engineering', 
+        position: 'Senior Developer', 
+        salary: '$95,000', 
+        startDate: '2022-01-15', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 2, 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        phone: '+1-555-0124', 
+        department: 'Marketing', 
+        position: 'Marketing Manager', 
+        salary: '$78,000', 
+        startDate: '2021-06-20', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 3, 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        phone: '+1-555-0125', 
+        department: 'Sales', 
+        position: 'Sales Director', 
+        salary: '$110,000', 
+        startDate: '2020-03-10', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 4, 
+        name: 'Alice Brown', 
+        email: 'alice.brown@company.com', 
+        phone: '+1-555-0126', 
+        department: 'HR', 
+        position: 'HR Specialist', 
+        salary: '$65,000', 
+        startDate: '2023-02-28', 
+        status: 'Pending', 
+        actions: <button>Edit</button> 
+      },
+      { 
+        id: 5, 
+        name: 'Charlie Wilson', 
+        email: 'charlie.wilson@company.com', 
+        phone: '+1-555-0127', 
+        department: 'Finance', 
+        position: 'Financial Analyst', 
+        salary: '$72,000', 
+        startDate: '2022-09-12', 
+        status: 'Active', 
+        actions: <button>Edit</button> 
+      },
+    ],
+  },
+};
+
+/**
+ * Table demonstrating complex VNode content in cells with multi-line text and interactive elements.
+ * This shows how the table handles rich content including buttons, badges, and formatted text.
+ * 
+ * ```tsx
+ * <Table
+ *   columns={[
+ *     { key: 'user', label: 'User Info' },
+ *     { key: 'description', label: 'Description' },
+ *     { key: 'status', label: 'Status' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { 
+ *       user: <div><strong>John Doe</strong><br/>john@example.com<br/>Senior Developer</div>,
+ *       description: <div>Lead developer for the<br/>e-commerce platform<br/>with 5+ years experience</div>,
+ *       status: <span style="background: green; color: white; padding: 2px 8px; border-radius: 4px;">Active</span>,
+ *       actions: <div><button>Edit</button><br/><button>Delete</button><br/><button>View</button></div>
+ *     }
+ *   ]}
+ * />
+ * ```
+ */
+export const ComplexCells: Story = {
+  args: {
+    columns: [
+      { key: 'user', label: 'User Info' },
+      { key: 'description', label: 'Description' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { 
+        user: (
+          <div>
+            <strong>John Doe</strong><br/>
+            john.doe@company.com<br/>
+            <em>Senior Developer</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Lead developer for the<br/>
+            e-commerce platform<br/>
+            <small>with 5+ years experience</small>
+          </div>
+        ),
+        status: (
+          <span style={{ 
+            background: '#22c55e', 
+            color: 'white', 
+            padding: '2px 8px', 
+            borderRadius: '4px',
+            fontSize: '12px',
+            fontWeight: 'bold'
+          }}>
+            Active
+          </span>
+        ),
+        actions: (
+          <div>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Delete</button>
+            <button style={{ display: 'block' }}>View</button>
+          </div>
+        ),
+      },
+      { 
+        user: (
+          <div>
+            <strong>Jane Smith</strong><br/>
+            jane.smith@company.com<br/>
+            <em>Product Manager</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Manages product roadmap<br/>
+            and feature planning<br/>
+            <small>3+ years in product</small>
+          </div>
+        ),
+        status: (
+          <span style={{ 
+            background: '#f59e0b', 
+            color: 'white', 
+            padding: '2px 8px', 
+            borderRadius: '4px',
+            fontSize: '12px',
+            fontWeight: 'bold'
+          }}>
+            Pending
+          </span>
+        ),
+        actions: (
+          <div>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Approve</button>
+            <button style={{ display: 'block' }}>Reject</button>
+          </div>
+        ),
+      },
+      { 
+        user: (
+          <div>
+            <strong>Bob Johnson</strong><br/>
+            bob.johnson@company.com<br/>
+            <em>UX Designer</em>
+          </div>
+        ),
+        description: (
+          <div>
+            Designs user interfaces<br/>
+            and user experiences<br/>
+            <small>Expert in Figma & Sketch</small>
+          </div>
+        ),
+        status: (
+          <span style={{ 
+            background: '#ef4444', 
+            color: 'white', 
+            padding: '2px 8px', 
+            borderRadius: '4px',
+            fontSize: '12px',
+            fontWeight: 'bold'
+          }}>
+            Inactive
+          </span>
+        ),
+        actions: (
+          <div>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Edit</button>
+            <button style={{ marginBottom: '4px', display: 'block' }}>Activate</button>
+            <button style={{ display: 'block' }}>Archive</button>
+          </div>
+        ),
+      },
+    ],
+  },
+};
+
+/**
+ * Table with stacked mobile layout that uses container queries. 
+ * This demonstrates how the table adapts to its container width rather than viewport width.
+ * The table will stack vertically when its container becomes narrow (≤600px).
+ * 
+ * **Container Query Behavior**: Uses `mobileLayout="stacked"` to enable responsive stacking.
+ * When the container width ≤ 600px:
+ * - Headers are hidden (`display: none`)
+ * - Cells stack vertically (`display: block`)
+ * - Column labels appear as `data-label` attributes before each cell value
+ * - Perfect for mobile views, sidebars, or constrained layouts
+ * 
+ * ```tsx
+ * <Table
+ *   mobileLayout="stacked"
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'age', label: 'Age' }    
+ *   ]}
+ *   rowData={[
+ *     { name: 'John', email: 'john@example.com', age: 20 },
+ *     { name: 'Jane', email: 'jane@example.com', age: 21 }
+ *   ]}
+ * />
+ * ```
+ */
+export const StackedMobileLayout: Story = {
+  args: {
+    mobileLayout: 'stacked',
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'age', label: 'Age' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [
+      { name: 'John Doe', email: 'john.doe@example.com', age: 28, status: 'Active', actions: <button>Edit</button> },
+      { name: 'Jane Smith', email: 'jane.smith@example.com', age: 32, status: 'Inactive', actions: <button>Edit</button> },
+      { name: 'Bob Johnson', email: 'bob.johnson@example.com', age: 45, status: 'Active', actions: <button>Edit</button> },
+      { name: 'Alice Brown', email: 'alice.brown@example.com', age: 29, status: 'Pending', actions: <button>Edit</button> },
+    ],
+  },
+};
+
+
+/**
+ * Table with programmatically controlled expandable rows.
+ * Row expansion is controlled by buttons or other interactive elements within the column content.
+ * Developers must manage the `expandedRows` state themselves.
+ * 
+ * **Features**:
+ * - Row details only render when both `_rowDetails` exists and row index is in `expandedRows`
+ * - Row details span the full width of the table
+ * - Supports any VNode content in the `_rowDetails` property
+ * 
+ * ```tsx
+ * const [expandedRows, setExpandedRows] = useState(new Set());
+ * 
+ * const toggleRow = (rowIndex: number) => {
+ *   setExpandedRows(prev => {
+ *     const newSet = new Set(prev);
+ *     if (newSet.has(rowIndex)) {
+ *       newSet.delete(rowIndex);
+ *     } else {
+ *       newSet.add(rowIndex);
+ *     }
+ *     return newSet;
+ *   });
+ * };
+ * 
+ * <Table
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'actions', label: 'Actions' }
+ *   ]}
+ *   rowData={[
+ *     { 
+ *       name: 'John', 
+ *       email: 'john@example.com', 
+ *       actions: <button onClick={() => toggleRow(0)}>Toggle Details</button>,
+ *       _rowDetails: <div>Additional information...</div>
+ *     }
+ *   ]}
+ *   expandedRows={expandedRows}
+ * />
+ * ```
+ */
+export const RowDetails: Story = {
+  render: (args) => {
+    const [expandedRows, setExpandedRows] = useState(new Set<number>());
+
+    const toggleRow = (rowIndex: number) => {
+      setExpandedRows(prev => {
+        const newSet = new Set(prev);
+        if (newSet.has(rowIndex)) {
+          newSet.delete(rowIndex);
+        } else {
+          newSet.add(rowIndex);
+        }
+        return newSet;
+      });
+    };
+
+    const rowData = [
+      { 
+        name: 'John Doe', 
+        email: 'john.doe@company.com', 
+        status: 'Active', 
+        actions: (
+          <button onClick={() => toggleRow(0)}>
+            {expandedRows.has(0) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Employee Details</h3>
+            <p><strong>Department:</strong> Engineering</p>
+            <p><strong>Position:</strong> Senior Developer</p>
+            <p><strong>Start Date:</strong> January 15, 2022</p>
+            <p><strong>Notes:</strong> Excellent performance, leads the frontend team.</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px' }}>Update Details</button>
+              <button>View Full Profile</button>
+            </div>
+          </div>
+        )
+      },
+      { 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        status: 'Pending', 
+        actions: (
+          <button onClick={() => toggleRow(1)}>
+            {expandedRows.has(1) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Pending Approval</h3>
+            <p><strong>Department:</strong> Marketing</p>
+            <p><strong>Position:</strong> Marketing Manager</p>
+            <p><strong>Application Date:</strong> December 1, 2024</p>
+            <p><strong>Status:</strong> Awaiting HR approval</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px', backgroundColor: '#22c55e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Approve</button>
+              <button style={{ backgroundColor: '#ef4444', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Reject</button>
+            </div>
+          </div>
+        )
+      },
+      { 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        status: 'Inactive', 
+        actions: (
+          <button onClick={() => toggleRow(2)}>
+            {expandedRows.has(2) ? 'Hide' : 'Show'}
+          </button>
+        ),
+        _rowDetails: (
+          <div>
+            <h3>Account Information</h3>
+            <p><strong>Department:</strong> Sales</p>
+            <p><strong>Position:</strong> Sales Director</p>
+            <p><strong>Last Active:</strong> November 20, 2024</p>
+            <p><strong>Reason:</strong> On extended leave</p>
+            <div style={{ marginTop: '12px' }}>
+              <button style={{ marginRight: '8px' }}>Reactivate Account</button>
+              <button>Contact Employee</button>
+            </div>
+          </div>
+        )
+      },
+    ];
+
+    return (
+      <TableComponent
+        {...args}
+        columns={[
+          { key: 'name', label: 'Name' },
+          { key: 'email', label: 'Email' },
+          { key: 'status', label: 'Status' },
+          { key: 'actions', label: 'Actions' },
+        ]}
+        rowData={rowData}
+        expandedRows={expandedRows}
+      />
+    );
+  },
+};
+
+

package/src/components/Table/Table.tsx

@@ -0,0 +1,175 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { FunctionComponent, VNode, Fragment } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import { Icon, Button } from '@adobe-commerce/elsie/components';
+import { useText } from '@adobe-commerce/elsie/i18n';
+
+import '@adobe-commerce/elsie/components/Table/Table.css';
+
+type Sortable = 'asc' | 'desc' | true;
+
+type Column = {
+  key: string;
+  label: string;
+  sortBy?: Sortable;
+};
+
+type RowData = {
+  [key: string]: VNode | string | number | undefined;
+  _rowDetails?: VNode | string; // Special property for expandable row content
+};
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  columns: Column[];
+  rowData: RowData[];
+  mobileLayout?: 'stacked' | 'none';
+  caption?: string;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
+  expandedRows?: Set<number>;
+}
+
+export const Table: FunctionComponent<TableProps> = ({
+  className,
+  children,
+  columns = [],
+  rowData = [],
+  mobileLayout = 'none',
+  caption,
+  onSortChange,
+  expandedRows = new Set(),
+  ...props
+}) => {
+  const translations = useText({
+    ariaSortAscending: 'Dropin.Table.ariaSortAscending',
+    ariaSortDescending: 'Dropin.Table.ariaSortDescending',
+    sortedAscending: 'Dropin.Table.sortedAscending',
+    sortedDescending: 'Dropin.Table.sortedDescending',
+    sortBy: 'Dropin.Table.sortBy',
+  });
+
+  const handleSort = (column: Column) => {
+    if (!onSortChange) return;
+
+    // Determine next sort direction
+    let nextDirection: Sortable;
+    if (column.sortBy === true) {
+      nextDirection = 'asc';
+    } else if (column.sortBy === 'asc') {
+      nextDirection = 'desc';
+    } else {
+      nextDirection = true;
+    }
+
+    onSortChange(column.key, nextDirection);
+  };
+
+  const getSortButton = (column: Column) => {
+    if (column.sortBy === undefined) return null;
+
+    let iconSource: string;
+    let ariaLabel: string;
+
+    if (column.sortBy === 'asc') {
+      iconSource = 'ChevronUp';
+      ariaLabel = translations.sortedAscending.replace('{label}', column.label);
+    } else if (column.sortBy === 'desc') {
+      iconSource = 'ChevronDown';
+      ariaLabel = translations.sortedDescending.replace('{label}', column.label);
+    } else {
+      iconSource = 'Sort';
+      ariaLabel = translations.sortBy.replace('{label}', column.label);
+    }
+
+    return (
+      <Button
+        variant="tertiary"
+        size="medium"
+        className="dropin-table__header__sort-button"
+        icon={<Icon source={iconSource} />}
+        aria-label={ariaLabel}
+        onClick={() => handleSort(column)}
+      />
+    );
+  };
+
+  return (
+    <div className={classes(['dropin-table', `dropin-table--mobile-layout-${mobileLayout}`, className])}>
+      <table {...props} className="dropin-table__table">
+        {caption && <caption className="dropin-table__caption">{caption}</caption>}
+        <thead className="dropin-table__header">
+          <tr className="dropin-table__header__row">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                className={classes([
+                  'dropin-table__header__cell',
+                  ['dropin-table__header__cell--sorted', column.sortBy === 'asc' || column.sortBy === 'desc'],
+                  ['dropin-table__header__cell--sortable', column.sortBy !== undefined]
+                ])}
+                role="columnheader"
+              >
+                {column.label}
+                {getSortButton(column)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="dropin-table__body">
+          {rowData.map((row, rowIndex) => {
+            const hasDetails = row._rowDetails !== undefined;
+            const isExpanded = expandedRows.has(rowIndex);
+            
+            return (
+              <Fragment key={rowIndex}>
+                <tr className="dropin-table__body__row">
+                  {columns.map((column) => {
+                    const cell = row[column.key];
+
+                    if (typeof cell === 'string' || typeof cell === 'number') {
+                      return (
+                        <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                          {cell}
+                        </td>
+                      );
+                    }
+
+                    return (
+                      <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+                        <VComponent node={cell!} />
+                      </td>
+                    );
+                  })}
+                </tr>
+                {hasDetails && isExpanded && (
+                  <tr 
+                    key={`${rowIndex}-details`} 
+                    className="dropin-table__row-details dropin-table__row-details--expanded"
+                    id={`row-${rowIndex}-details`}
+                  >
+                    <td 
+                      className="dropin-table__row-details__cell" 
+                      colSpan={columns.length}
+                      role="region"
+                      aria-labelledby={`row-${rowIndex}-details`}
+                    >
+                      {typeof row._rowDetails === 'string' ? row._rowDetails : <VComponent node={row._rowDetails!} />}
+                    </td>
+                  </tr>
+                )}
+              </Fragment>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};

package/src/components/Table/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+  
+export * from '@adobe-commerce/elsie/components/Table/Table';
+export { Table as default } from '@adobe-commerce/elsie/components/Table/Table';

package/src/components/index.ts

@@ -49,3 +49,4 @@ export * from '@adobe-commerce/elsie/components/ContentGrid';
 export * from '@adobe-commerce/elsie/components/Pagination';
 export * from '@adobe-commerce/elsie/components/ProductItemCard';
 export * from '@adobe-commerce/elsie/components/InputFile';
+export * from '@adobe-commerce/elsie/components/Table';

package/src/docs/slots.mdx

@@ -32,6 +32,12 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
+### lazy
+
+Controls whether the slot should be loaded immediately or deferred for later initialization. `boolean` (optional).
+
+When `lazy={false}`, the slot is initialized as soon as the container mounts. When `lazy={true}`, the slot can be initialized later on when it is needed. This is useful for performance optimization, especially when the slot's content is not immediately required.
+
 ### slotTag
 
 The HTML tag to use for the slot's wrapper element. This allows you to change the wrapper element from the default `div` to any valid HTML tag (e.g., 'span', 'p', 'a', etc.). When using specific tags like 'a', you can also provide their respective HTML attributes (e.g., 'href', 'target', etc.).
@@ -71,7 +77,7 @@ Example:
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.
 
-The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots. 
+The slot property, which is implemented as a promise function, provides developers with the flexibility to dynamically generate and manipulate content within slots.
 However, it's important to note that this promise is render-blocking, meaning that the component will not render until the promise is resolved.
 
 ### context

package/src/i18n/en_US.json

@@ -141,6 +141,13 @@
     },
     "InputDate": {
       "picker": "Select a date"
+    },
+    "Table": {
+      "ariaSortAscending": "ascending",
+      "ariaSortDescending": "descending",
+      "sortedAscending": "Sort {label} ascending",
+      "sortedDescending": "Sort {label} descending",
+      "sortBy": "Sort by {label}"
     }
   }
 }

package/src/lib/slot.tsx

@@ -2,30 +2,35 @@
  *  Copyright 2024 Adobe
  *  All Rights Reserved.
  *
- * NOTICE:  Adobe permits you to use, modify, and distribute this 
- * file in accordance with the terms of the Adobe license agreement 
- * accompanying it. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
-import { cloneElement, ComponentChildren, RefObject, VNode, createElement } from 'preact';
+import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
+import {
+  cloneElement,
+  ComponentChildren,
+  createElement,
+  RefObject,
+  VNode,
+} from 'preact';
+import { HTMLAttributes } from 'preact/compat';
 import {
   StateUpdater,
+  useCallback,
   useContext,
-  useState,
-  useRef,
   useEffect,
   useMemo,
-  useCallback,
+  useRef,
+  useState,
 } from 'preact/hooks';
-import { IntlContext, Lang } from '@adobe-commerce/elsie/i18n';
-import { HTMLAttributes } from 'preact/compat';
 import { SlotQueueContext } from './render';
 
 import '@adobe-commerce/elsie/components/UIProvider/debugger.css';
 
 type MutateElement = (elem: HTMLElement) => void;
 
-
 interface State {
   get: (key: string) => void;
   set: (key: string, value: any) => void;
@@ -149,18 +154,21 @@ export function useSlot<K, V extends HTMLElement>(
   // @ts-ignore
   context._registerMethod = _registerMethod;
 
-  const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return createElement(
-      contentTag,
-      {
-        'data-slot-html-element': elem.tagName.toLowerCase(),
-        ref: (refElem: HTMLElement | null): void => {
-          refElem?.appendChild(elem);
-        }
-      },
-      null
-    );
-  }, [contentTag]);
+  const _htmlElementToVNode = useCallback(
+    (elem: HTMLElement) => {
+      return createElement(
+        contentTag,
+        {
+          'data-slot-html-element': elem.tagName.toLowerCase(),
+          ref: (refElem: HTMLElement | null): void => {
+            refElem?.appendChild(elem);
+          },
+        },
+        null
+      );
+    },
+    [contentTag]
+  );
 
   // @ts-ignore
   context._htmlElementToVNode = _htmlElementToVNode;
@@ -322,7 +330,10 @@ export function useSlot<K, V extends HTMLElement>(
       status.current = 'loading';
 
       log(`🟩 "${name}" Slot Initialized`);
-      await callback(context as K & DefaultSlotContext<K>, elementRef.current as HTMLDivElement | null);
+      await callback(
+        context as K & DefaultSlotContext<K>,
+        elementRef.current as HTMLDivElement | null
+      );
     } catch (error) {
       console.error(`Error in "${callback.name}" Slot callback`, error);
     } finally {
@@ -336,7 +347,7 @@ export function useSlot<K, V extends HTMLElement>(
   // Initialization
   useEffect(() => {
     handleLifeCycleInit().finally(() => {
-      if (slotsQueue) {
+      if (slotsQueue && slotsQueue.value.has(name)) {
         slotsQueue.value.delete(name);
         slotsQueue.value = new Set(slotsQueue.value);
       }
@@ -359,6 +370,7 @@ export function useSlot<K, V extends HTMLElement>(
 interface SlotPropsComponent<T>
   extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
   name: string;
+  lazy?: boolean;
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
@@ -371,6 +383,7 @@ interface SlotPropsComponent<T>
 
 export function Slot<T>({
   name,
+  lazy = false,
   context,
   slot,
   children,
@@ -400,11 +413,11 @@ export function Slot<T>({
     }
 
     // add slot to queue
-    if (slotsQueue) {
+    if (slotsQueue && lazy === false) {
       slotsQueue.value.add(name);
       slotsQueue.value = new Set(slotsQueue.value);
     }
-  }, [name, slotsQueue]);
+  }, [name, lazy, slotsQueue]);
 
   return createElement(
     slotTag,