@adobe-commerce/elsie 1.5.0-beta3 → 1.5.0-beta4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.5.0-beta3",
+  "version": "1.5.0-beta4",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/Button/Button.tsx

@@ -25,6 +25,8 @@ export interface ButtonProps
   active?: boolean;
   activeChildren?: ComponentChildren;
   activeIcon?: VNode<HTMLAttributes<SVGSVGElement>>;
+  href?: string;
+  type?: 'button' | 'submit' | 'reset';
 }
 
 export const Button: FunctionComponent<ButtonProps> = ({

package/src/components/Incrementer/Incrementer.css

@@ -19,6 +19,12 @@
   opacity: 1;
 }
 
+.dropin-incrementer__content--no-buttons {
+  grid-template-columns: max-content;
+  width: fit-content;
+  margin-inline: auto;
+}
+
 .dropin-incrementer__content--disabled {
   background: var(--color-neutral-300);
   border-radius: var(--shape-border-radius-1);

package/src/components/Incrementer/Incrementer.stories.tsx

@@ -79,6 +79,10 @@ const meta: Meta<IncrementerProps> = {
       description: 'Maximum length of the input field',
       type: 'number',
     },
+    showButtons: {
+      description: 'Show increase/decrease buttons',
+      control: 'boolean',
+    },
   },
 };
 
@@ -170,3 +174,17 @@ export const WithError = {
     await expect(error).toHaveTextContent('Maximum quantity is 100');
   },
 };
+
+export const WithoutButtons: Story = {
+  args: {
+    size: 'medium',
+    onValue: action('onValue'),
+    name: 'incrementerField',
+    value: '1',
+    min: 1,
+    max: 100,
+    disabled: false,
+    'aria-label': 'Quantity',
+    showButtons: false,
+  },
+};

package/src/components/Incrementer/Incrementer.tsx

@@ -28,6 +28,7 @@ export interface IncrementerProps
   max?: number;
   disabled?: boolean;
   maxLength?: number;
+  showButtons?: boolean;
 }
 
 export const Incrementer: FunctionComponent<IncrementerProps> = ({
@@ -42,6 +43,7 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
   onValue,
   onUpdateError,
   size = 'medium',
+  showButtons = true,
   ...props
 }) => {
   const [currentValue, setCurrentValue] = useState<number>(Number(value));
@@ -99,41 +101,44 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         className={classes([
           'dropin-incrementer__content',
           `dropin-incrementer__content--${size}`,
+          ['dropin-incrementer__content--no-buttons', !showButtons],
           [`dropin-incrementer__content--error`, isInvalid],
           [`dropin-incrementer__content--success`, success],
           [`dropin-incrementer__content--disabled`, disabled],
         ])}
       >
         {/* Minus Button */}
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__decrease-button',
-                [`dropin-incrementer__decrease-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue - 1)}
-              disabled={disabled || currentValue < minValue + 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Minus}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__down"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__decrease-button',
+                  [`dropin-incrementer__decrease-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue - 1)}
+                disabled={disabled || currentValue < minValue + 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.decreaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Minus}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__down"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
 
         {/* Input Field */}
         <input
@@ -157,36 +162,38 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
           {...props}
         />
 
-        <div
-          className={classes([
-            'dropin-incrementer__button-container',
-            [`dropin-incrementer__button-container--disabled`, disabled],
-          ])}
-        >
-          {/* Plus/Add button */}
-          <Localizer>
-            <button
-              type="button"
-              className={classes([
-                'dropin-incrementer__increase-button',
-                [`dropin-incrementer__increase-button--disabled`, disabled],
-              ])}
-              onClick={() => handleIncrementer(currentValue + 1)}
-              disabled={disabled || currentValue > maxValue - 1}
-              aria-label={
-                (<Text id="Dropin.Incrementer.increaseLabel" />) as any
-              }
-            >
-              <Icon
-                source={Add}
-                size="16"
-                stroke="1"
-                viewBox="4 2 20 20"
-                className="dropin-incrementer__add"
-              />
-            </button>
-          </Localizer>
-        </div>
+        {showButtons && (
+          <div
+            className={classes([
+              'dropin-incrementer__button-container',
+              [`dropin-incrementer__button-container--disabled`, disabled],
+            ])}
+          >
+            {/* Plus/Add button */}
+            <Localizer>
+              <button
+                type="button"
+                className={classes([
+                  'dropin-incrementer__increase-button',
+                  [`dropin-incrementer__increase-button--disabled`, disabled],
+                ])}
+                onClick={() => handleIncrementer(currentValue + 1)}
+                disabled={disabled || currentValue > maxValue - 1}
+                aria-label={
+                  (<Text id="Dropin.Incrementer.increaseLabel" />) as any
+                }
+              >
+                <Icon
+                  source={Add}
+                  size="16"
+                  stroke="1"
+                  viewBox="4 2 20 20"
+                  className="dropin-incrementer__add"
+                />
+              </button>
+            </Localizer>
+          </div>
+        )}
       </div>
       {isInvalid && (
         <p className="dropin-incrementer__content--error-message">

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,673 @@
+/********************************************************************
+ *  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',
+    },
+    loading: {
+      description: 'When true, renders skeleton rows instead of actual data. Useful for showing loading state while data is being fetched.',
+      table: {
+        type: { summary: 'boolean' },
+      },
+      control: 'boolean',
+    },
+    skeletonRowCount: {
+      description: 'Number of skeleton rows to render when loading is true. Defaults to 10 rows.',
+      table: {
+        type: { summary: 'number' },
+      },
+      control: 'number',
+    },
+  },
+};
+
+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>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>Active</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Delete</button>
+            <button>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>Pending</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Approve</button>
+            <button>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>Inactive</span>
+        ),
+        actions: (
+          <div>
+            <button>Edit</button>
+            <button>Activate</button>
+            <button>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}
+      />
+    );
+  },
+};
+
+/**
+ * Table in loading state with skeleton rows.
+ * Demonstrates how the table appears while data is being fetched.
+ * Each cell shows a skeleton placeholder that matches the table structure.
+ * 
+ * **Features**:
+ * - Shows skeleton rows instead of actual data when `loading` is true
+ * - Configurable number of skeleton rows via `skeletonRowCount` prop
+ * - Maintains table structure and column headers during loading
+ * - Each cell contains a single-line skeleton component
+ * 
+ * ```tsx
+ * <Table
+ *   loading={true}
+ *   skeletonRowCount={5}
+ *   columns={[
+ *     { key: 'name', label: 'Name' },  
+ *     { key: 'email', label: 'Email' },
+ *     { key: 'status', label: 'Status' }
+ *   ]}
+ *   rowData={[]} // Empty array when loading
+ * />
+ * ```
+ */
+export const LoadingState: Story = {
+  args: {
+    loading: true,
+    skeletonRowCount: 5,
+    columns: [
+      { key: 'name', label: 'Name' },
+      { key: 'email', label: 'Email' },
+      { key: 'status', label: 'Status' },
+      { key: 'actions', label: 'Actions' },
+    ],
+    rowData: [], // Empty when loading
+  },
+};
+
+

package/src/components/Table/Table.tsx

@@ -0,0 +1,208 @@
+/********************************************************************
+ *  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, Skeleton, SkeletonRow } 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 Omit<HTMLAttributes<HTMLTableElement>, 'loading'> {
+  columns: Column[];
+  rowData: RowData[];
+  mobileLayout?: 'stacked' | 'none';
+  caption?: string;
+  expandedRows?: Set<number>;
+  loading?: boolean;
+  skeletonRowCount?: number;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
+}
+
+export const Table: FunctionComponent<TableProps> = ({
+  className,
+  children,
+  columns = [],
+  rowData = [],
+  mobileLayout = 'none',
+  caption,
+  expandedRows = new Set(),
+  loading = false,
+  skeletonRowCount = 10,
+  onSortChange,
+  ...props
+}) => {
+  const translations = useText({
+    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 renderSortButton = (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)}
+      />
+    );
+  };
+
+  const renderSkeletonRows = () => {
+    return Array.from({ length: skeletonRowCount }, (_, rowIndex) => (
+      <tr key={`skeleton-${rowIndex}`} className="dropin-table__body__row">
+        {columns.map((column) => (
+          <td key={column.key} className="dropin-table__body__cell" data-label={column.label}>
+            <Skeleton>
+              <SkeletonRow variant="row" size="small" fullWidth />
+            </Skeleton>
+          </td>
+        ))}
+      </tr>
+    ));
+  };
+
+  const renderDataRows = () => {
+    return 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>
+      );
+    });
+  };
+
+  const getAriaSort = (column: Column): 'none' | 'ascending' | 'descending' | 'other' | undefined => {
+    if (column.sortBy === true) return 'none';
+    if (column.sortBy === 'asc') return 'ascending';
+    if (column.sortBy === 'desc') return 'descending';
+    return undefined;
+  };
+
+  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]
+                ])}
+                aria-sort={getAriaSort(column)}
+              >
+                {column.label}
+                {renderSortButton(column)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="dropin-table__body">
+          {loading ? (
+            // Render skeleton rows when loading
+            renderSkeletonRows()
+          ) : (
+            // Render actual data when not loading
+            renderDataRows()
+          )}
+        </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/ToggleButton/ToggleButton.css

@@ -34,7 +34,19 @@
   border: var(--shape-border-width-1) solid var(--color-neutral-800);
 }
 
-.dropin-toggle-button:has(input:focus-visible) {
+/* Disabled */
+.dropin-toggle-button__disabled .dropin-toggle-button__actionButton {
+  cursor: default;
+  background-color: var(--color-neutral-300);
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+}
+
+.dropin-toggle-button__disabled .dropin-toggle-button__content {
+  color: var(--color-neutral-500);
+  cursor: default;
+}
+
+.dropin-toggle-button:not(.dropin-toggle-button__disabled):has(input:focus-visible) {
   outline: 0 none;
   box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
   -webkit-box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -79,6 +79,15 @@ const meta: Meta<ToggleButtonProps> = {
         type: 'boolean',
       },
     },
+    disabled: {
+      description: 'Whether or not the Toggle button is disabled',
+      type: {
+        name: 'boolean',
+      },
+      control: {
+        type: 'boolean',
+      },
+    },
     onChange: {
       description: 'Function to be called when the Toggle button is clicked',
       type: {
@@ -103,11 +112,9 @@ export const ToggleButtonStory: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = document.querySelector(
-      '.dropin-toggle-button__content'
-    );
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).toHaveClass('dropin-toggle-button__selected');
     await expect(toggleButtonText).toHaveTextContent('Toggle Button label');
     await expect(toggleButtonInput).toBeChecked();
@@ -124,9 +131,9 @@ export const ToggleButtonNotSelected: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const toggleButton = document.querySelector('.dropin-toggle-button');
     const toggleButtonInput = await canvas.findByRole('radio');
-    const toggleButtonText = await canvas.findByText('Toggle Button label');
+    const toggleButton = toggleButtonInput.closest('.dropin-toggle-button');
+    const toggleButtonText = toggleButton?.querySelector('.dropin-toggle-button__content');
     await expect(toggleButton).not.toHaveClass(
       'dropin-toggle-button__selected'
     );

package/src/components/ToggleButton/ToggleButton.tsx

@@ -19,6 +19,7 @@ export interface ToggleButtonProps
   name: string;
   value: string;
   busy?: boolean;
+  disabled?: boolean;
   icon?:
     | VNode<HTMLAttributes<SVGSVGElement>>
     | VNode<HTMLAttributes<HTMLImageElement>>;
@@ -31,6 +32,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
   name,
   value,
   busy = false,
+  disabled = false,
   children,
   className,
   icon,
@@ -45,6 +47,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
         'dropin-toggle-button',
         className,
         ['dropin-toggle-button__selected', selected],
+        ['dropin-toggle-button__disabled', disabled],
       ])}
     >
       <label className="dropin-toggle-button__actionButton">
@@ -53,6 +56,7 @@ export const ToggleButton: FunctionComponent<ToggleButtonProps> = ({
           name={name}
           value={value}
           checked={selected}
+          disabled={disabled}
           onChange={() => onChange && onChange(value)}
           aria-label={name}
           busy={busy}

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/i18n/en_US.json

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