@adobe-commerce/elsie 1.6.0-alpha2 → 1.6.0-alpha23

package/package.json

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

package/src/components/Price/Price.tsx

@@ -2,14 +2,14 @@
  *  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 { FunctionComponent } from 'preact';
 import { HTMLAttributes, useMemo } from 'preact/compat';
-import { classes, getGlobalLocale } from '@adobe-commerce/elsie/lib';
+import { classes, getPriceFormatter } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/Price/Price.css';
 
 export interface PriceProps
@@ -39,43 +39,10 @@ export const Price: FunctionComponent<PriceProps> = ({
   size = 'small',
   ...props
 }) => {
-  // Determine the locale to use: prop locale > global locale > browser locale
-  const effectiveLocale = useMemo(() => {
-    if (locale) {
-      return locale;
-    }
-    const globalLocale = getGlobalLocale();
-    if (globalLocale) {
-      return globalLocale;
-    }
-    // Fallback to browser locale or default
-    return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
-  }, [locale]);
-
-  const formatter = useMemo(
-    () => {
-      const params: Intl.NumberFormatOptions = {
-        style: 'currency',
-        currency: currency || 'USD',
-        // These options are needed to round to whole numbers if that's what you want.
-        minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
-        maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
-        ...formatOptions,
-      }
-      try {
-        return new Intl.NumberFormat(effectiveLocale, params);
-      } catch (error) {
-        console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
-        return new Intl.NumberFormat('en-US', params);
-      }
-    },
-    [effectiveLocale, currency, formatOptions]
-  );
-
-  const formattedAmount = useMemo(
-    () => formatter.format(amount),
-    [amount, formatter]
-  );
+  const formattedAmount = useMemo(() => {
+    const formatter = getPriceFormatter({ currency, locale, formatOptions });
+    return formatter.format(amount);
+  }, [amount, currency, locale, formatOptions]);
 
   return (
     <span

package/src/components/Table/Table.css

@@ -17,6 +17,7 @@
 }
 
 .dropin-table__table {
+    border: var(--shape-border-width-1) solid var(--color-neutral-400);
     border-collapse: collapse; 
     width: 100%;
 }
@@ -34,9 +35,8 @@
     letter-spacing: var(--type-body-1-strong-letter-spacing);
 }
 
-.dropin-table__header__cell,
-.dropin-table__body__cell {
-    padding: var(--spacing-xsmall);
+.dropin-table__header__cell {
+    color: var(--color-neutral-800);
     text-align: left;
     white-space: nowrap;
 }
@@ -46,15 +46,26 @@
 }
 
 .dropin-table__header__row {
-    border-bottom: 2px solid var(--color-neutral-400);
+    border-bottom: var(--shape-border-width-1) solid var(--color-neutral-400);
+}
+
+.dropin-table__header__row th {
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+.dropin-table__body__row:nth-child(even) {
+    background-color: var(--color-neutral-100);
+}
+
+.dropin-table__body__row.dropin-table__body__row--expanded {
+    background-color: var(--color-neutral-200);
 }
 
-.dropin-table__body__row {
-    border-bottom: 1px solid var(--color-neutral-400);
+.dropin-table__body__cell {
+    padding: var(--spacing-small) var(--spacing-medium);
 }
 
 .dropin-table__header__sort-button {
-    margin-left: var(--spacing-xsmall);
     vertical-align: middle;
 }
 
@@ -67,10 +78,29 @@
 }
 
 .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);
+    padding: var(--spacing-small) var(--spacing-medium);
+    background-color: var(--color-neutral-200);
+}
+
+.dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+    margin: 0;
+}
+
+.dropin-table__row-details__cell h1,
+.dropin-table__row-details__cell h2,
+.dropin-table__row-details__cell h3,
+.dropin-table__row-details__cell h4,
+.dropin-table__row-details__cell h5,
+.dropin-table__row-details__cell h6 {
+    font: var(--type-body-1-strong-font);
+    letter-spacing: var(--type-body-1-strong-letter-spacing);
+    margin: 0;
+}
+
+.dropin-table__row-details__cell p,
+.dropin-table__row-details__cell span {
+    font: var(--type-body-1-default-font);
+    letter-spacing: var(--type-body-1-default-letter-spacing);
 }
 
 /* Container query for mobile layout */
@@ -80,20 +110,63 @@
         display: none;
     }
 
+    .dropin-table--mobile-layout-stacked .dropin-table__body__row {
+        padding: var(--spacing-medium);
+        display: block;
+    }
+
     .dropin-table--mobile-layout-stacked .dropin-table__body__cell {
         display: block;
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
+        padding: var(--spacing-xsmall) 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:first-child {
+        padding-top: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:last-child {
+        padding-bottom: 0;
     }
 
     .dropin-table--mobile-layout-stacked .dropin-table__body__cell::before {
         content: attr(data-label);
-        font-weight: bold;
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
         display: block;
         margin-bottom: var(--spacing-xxsmall);
     }
 
     .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell {
         display: block;
-        padding: var(--spacing-small);
+        padding: var(--spacing-medium);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell > *:first-child {
+        border-top: var(--shape-border-width-1) solid var(--color-neutral-400);
+        padding-top: var(--spacing-medium);
+        margin-top: calc(var(--spacing-medium) * -1);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+        margin: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h1,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h2,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h3,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h4,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h5,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h6 {
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell p,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell span {
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
     }
 }
 

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

@@ -11,6 +11,10 @@
 import type { Meta, StoryObj } from '@storybook/preact';
 import { useState } from 'preact/hooks';
 import { Table as TableComponent, TableProps } from '@adobe-commerce/elsie/components/Table';
+import { ActionButton } from '@adobe-commerce/elsie/components/ActionButton';
+import { ActionButtonGroup } from '@adobe-commerce/elsie/components/ActionButtonGroup';
+import { Pagination } from '@adobe-commerce/elsie/components/Pagination';
+import { Picker, type PickerOption } from '@adobe-commerce/elsie/components/Picker';
 
 /**
  * Use the `Table` component to render data in a structured table.
@@ -175,10 +179,10 @@ export const Table: Story = {
       { 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: 'John', email: 'john@example.com', age: 20, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -212,11 +216,11 @@ export const AllSortable: Story = {
       { 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> },
+      { name: 'John', email: 'john@example.com', age: 20, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane', email: 'jane@example.com', age: 21, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jim', email: 'jim@example.com', age: 22, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jill', email: 'jill@example.com', age: 23, actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jack', email: 'jack@example.com', age: 24, actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -240,7 +244,7 @@ export const AllSortable: Story = {
  *     { 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> }
+ *     { 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: <ActionButton>Edit</ActionButton> }
  *   ]}
  * />
  * ```
@@ -270,7 +274,7 @@ export const WideTable: Story = {
         salary: '$95,000', 
         startDate: '2022-01-15', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 2, 
@@ -282,7 +286,7 @@ export const WideTable: Story = {
         salary: '$78,000', 
         startDate: '2021-06-20', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 3, 
@@ -294,7 +298,7 @@ export const WideTable: Story = {
         salary: '$110,000', 
         startDate: '2020-03-10', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 4, 
@@ -306,7 +310,7 @@ export const WideTable: Story = {
         salary: '$65,000', 
         startDate: '2023-02-28', 
         status: 'Pending', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
       { 
         id: 5, 
@@ -318,7 +322,7 @@ export const WideTable: Story = {
         salary: '$72,000', 
         startDate: '2022-09-12', 
         status: 'Active', 
-        actions: <button>Edit</button> 
+        actions: <ActionButton>Edit</ActionButton> 
       },
     ],
   },
@@ -341,7 +345,7 @@ export const WideTable: Story = {
  *       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>
+ *       actions: <div><ActionButton>Edit</ActionButton><br/><ActionButton>Delete</ActionButton><br/><ActionButton>View</ActionButton></div>
  *     }
  *   ]}
  * />
@@ -375,11 +379,11 @@ export const ComplexCells: Story = {
           <span>Active</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Delete</button>
-            <button>View</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="delete">Delete</ActionButton>
+            <ActionButton value="view">View</ActionButton>
+          </ActionButtonGroup>
         ),
       },
       { 
@@ -401,11 +405,11 @@ export const ComplexCells: Story = {
           <span>Pending</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Approve</button>
-            <button>Reject</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="approve">Approve</ActionButton>
+            <ActionButton value="reject">Reject</ActionButton>
+          </ActionButtonGroup>
         ),
       },
       { 
@@ -427,11 +431,11 @@ export const ComplexCells: Story = {
           <span>Inactive</span>
         ),
         actions: (
-          <div>
-            <button>Edit</button>
-            <button>Activate</button>
-            <button>Archive</button>
-          </div>
+          <ActionButtonGroup>
+            <ActionButton value="edit">Edit</ActionButton>
+            <ActionButton value="activate">Activate</ActionButton>
+            <ActionButton value="archive">Archive</ActionButton>
+          </ActionButtonGroup>
         ),
       },
     ],
@@ -476,10 +480,10 @@ export const StackedMobileLayout: Story = {
       { 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> },
+      { name: 'John Doe', email: 'john.doe@example.com', age: 28, status: 'Active', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Jane Smith', email: 'jane.smith@example.com', age: 32, status: 'Inactive', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Bob Johnson', email: 'bob.johnson@example.com', age: 45, status: 'Active', actions: <ActionButton>Edit</ActionButton> },
+      { name: 'Alice Brown', email: 'alice.brown@example.com', age: 29, status: 'Pending', actions: <ActionButton>Edit</ActionButton> },
     ],
   },
 };
@@ -520,7 +524,7 @@ export const StackedMobileLayout: Story = {
  *     { 
  *       name: 'John', 
  *       email: 'john@example.com', 
- *       actions: <button onClick={() => toggleRow(0)}>Toggle Details</button>,
+ *       actions: <ActionButton onClick={() => toggleRow(0)}>Toggle Details</ActionButton>,
  *       _rowDetails: <div>Additional information...</div>
  *     }
  *   ]}
@@ -550,22 +554,22 @@ export const RowDetails: Story = {
         email: 'john.doe@company.com', 
         status: 'Active', 
         actions: (
-          <button onClick={() => toggleRow(0)}>
+          <ActionButton onClick={() => toggleRow(0)}>
             {expandedRows.has(0) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _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>
+              <ActionButton style={{ marginRight: '8px' }}>Update Details</ActionButton>
+              <ActionButton>View Full Profile</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
       { 
@@ -573,22 +577,22 @@ export const RowDetails: Story = {
         email: 'jane.smith@company.com', 
         status: 'Pending', 
         actions: (
-          <button onClick={() => toggleRow(1)}>
+          <ActionButton onClick={() => toggleRow(1)}>
             {expandedRows.has(1) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _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>
+              <ActionButton style={{ marginRight: '8px', backgroundColor: '#22c55e', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Approve</ActionButton>
+              <ActionButton style={{ backgroundColor: '#ef4444', color: 'white', border: 'none', padding: '6px 12px', borderRadius: '4px' }}>Reject</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
       { 
@@ -596,22 +600,22 @@ export const RowDetails: Story = {
         email: 'bob.johnson@company.com', 
         status: 'Inactive', 
         actions: (
-          <button onClick={() => toggleRow(2)}>
+          <ActionButton onClick={() => toggleRow(2)}>
             {expandedRows.has(2) ? 'Hide' : 'Show'}
-          </button>
+          </ActionButton>
         ),
         _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>
+              <ActionButton style={{ marginRight: '8px' }}>Reactivate Account</ActionButton>
+              <ActionButton>Contact Employee</ActionButton>
             </div>
-          </div>
+          </>
         )
       },
     ];
@@ -704,14 +708,17 @@ export const VNodeLabels: Story = {
             <strong>👤 User Name</strong>
           </span>
         ),
+        ariaLabel: 'User Name',
       },
       {
         key: 'email',
         label: <span style={{ color: '#0066cc' }}>📧 Email Address</span>,
+        ariaLabel: 'Email Address',
       },
       {
         key: 'role',
         label: <em style={{ color: '#666' }}>Role & Department</em>,
+        ariaLabel: 'Role & Department',
       },
       {
         key: 'status',
@@ -727,10 +734,12 @@ export const VNodeLabels: Story = {
             📊 Status
           </span>
         ),
+        ariaLabel: 'Status',
       },
       {
         key: 'actions',
         label: <span>⚙️ Actions</span>,
+        ariaLabel: 'Actions',
       },
     ],
     rowData: [
@@ -739,23 +748,277 @@ export const VNodeLabels: Story = {
         email: 'john.doe@company.com',
         role: 'Senior Developer',
         status: 'Active',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
       {
         name: 'Jane Smith',
         email: 'jane.smith@company.com',
         role: 'Product Manager',
         status: 'Active',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
       {
         name: 'Bob Johnson',
         email: 'bob.johnson@company.com',
         role: 'UX Designer',
         status: 'Inactive',
-        actions: <button>Edit</button>,
+        actions: <ActionButton>Edit</ActionButton>,
       },
     ],
   },
 };
 
+/**
+ * Table with pagination to navigate through multiple pages of data.
+ * This demonstrates how to integrate the Pagination component with the Table component.
+ * 
+ * **Features**:
+ * - Pagination controls below the table
+ * - Page state management with useState
+ * - Dynamic row data based on current page
+ * - Items per page configuration
+ * 
+ * ```tsx
+ * const [currentPage, setCurrentPage] = useState(1);
+ * const itemsPerPage = 5;
+ * const totalItems = 50;
+ * const totalPages = Math.ceil(totalItems / itemsPerPage);
+ * 
+ * const paginatedData = allData.slice(
+ *   (currentPage - 1) * itemsPerPage,
+ *   currentPage * itemsPerPage
+ * );
+ * 
+ * <div>
+ *   <Table
+ *     columns={columns}
+ *     rowData={paginatedData}
+ *   />
+ *   <Pagination
+ *     currentPage={currentPage}
+ *     totalPages={totalPages}
+ *     onChange={setCurrentPage}
+ *   />
+ * </div>
+ * ```
+ */
+export const WithPagination: Story = {
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(5);
+    
+    // Page size options
+    const pageSizeOptions: PickerOption[] = [
+      { value: '5', text: '5' },
+      { value: '10', text: '10' },
+      { value: '15', text: '15' },
+    ];
+    
+    // Generate sample data (287 items to match screenshot)
+    const allData = Array.from({ length: 287 }, (_, index) => ({
+      id: index + 1,
+      name: `User ${index + 1}`,
+      email: `user${index + 1}@example.com`,
+      department: ['Engineering', 'Marketing', 'Sales', 'HR', 'Finance'][index % 5],
+      status: ['Active', 'Inactive', 'Pending'][index % 3],
+      actions: <ActionButton>Edit</ActionButton>,
+    }));
+
+    const totalPages = Math.ceil(allData.length / pageSize);
+    
+    // Calculate item range
+    const startItem = (currentPage - 1) * pageSize + 1;
+    const endItem = Math.min(currentPage * pageSize, allData.length);
+    const totalItems = allData.length;
+    
+    // Get current page data
+    const paginatedData = allData.slice(
+      (currentPage - 1) * pageSize,
+      currentPage * pageSize
+    );
+
+    // Handle page size change
+    const handlePageSizeChange = (event: Event) => {
+      const target = event.target as HTMLSelectElement;
+      const newPageSize = Number(target.value);
+      setPageSize(newPageSize);
+      setCurrentPage(1); // Reset to first page when page size changes
+    };
+
+    return (
+      <div>
+        <TableComponent
+          {...args}
+          columns={[
+            { key: 'id', label: 'ID' },
+            { key: 'name', label: 'Name' },
+            { key: 'email', label: 'Email' },
+            { key: 'department', label: 'Department' },
+            { key: 'status', label: 'Status' },
+            { key: 'actions', label: 'Actions' },
+          ]}
+          rowData={paginatedData}
+        />
+        <div style={{ marginTop: 'var(--spacing-small)', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+          <span style={{ 
+            font: 'var(--type-body-1-default-font)',
+            letterSpacing: 'var(--type-body-1-default-letter-spacing)',
+            color: 'var(--color-neutral-800)'
+          }}>
+            Items {startItem} to {endItem} of {totalItems} total
+          </span>
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onChange={setCurrentPage}
+          />
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            gap: 'var(--spacing-xsmall)',
+            font: 'var(--type-body-1-default-font)',
+            letterSpacing: 'var(--type-body-1-default-letter-spacing)',
+            color: 'var(--color-neutral-800)'
+          }}>
+            <span>Show</span>
+            <Picker
+              variant="primary"
+              size="medium"
+              value={String(pageSize)}
+              options={pageSizeOptions}
+              handleSelect={handlePageSizeChange}
+              aria-label="Items per page"
+            />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+/**
+ * Table with expandable row details and stacked mobile layout.
+ * Combines the expandable rows feature with responsive mobile behavior using container queries.
+ * 
+ * **Features**:
+ * - Expandable rows with toggle buttons
+ * - Stacked mobile layout when container width ≤ 600px
+ * - Row details expand in both desktop and mobile views
+ * - Mobile view shows labels above each cell value
+ * 
+ * ```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
+ *   mobileLayout="stacked"
+ *   columns={columns}
+ *   rowData={rowDataWithDetails}
+ *   expandedRows={expandedRows}
+ * />
+ * ```
+ */
+export const ExpandableRowsWithMobileLayout: 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: (
+          <ActionButton onClick={() => toggleRow(0)}>
+            {expandedRows.has(0) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <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>
+          </>
+        )
+      },
+      { 
+        name: 'Jane Smith', 
+        email: 'jane.smith@company.com', 
+        status: 'Pending', 
+        actions: (
+          <ActionButton onClick={() => toggleRow(1)}>
+            {expandedRows.has(1) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <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>
+          </>
+        )
+      },
+      { 
+        name: 'Bob Johnson', 
+        email: 'bob.johnson@company.com', 
+        status: 'Inactive', 
+        actions: (
+          <ActionButton onClick={() => toggleRow(2)}>
+            {expandedRows.has(2) ? 'Hide' : 'Show'}
+          </ActionButton>
+        ),
+        _rowDetails: (
+          <>
+            <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>
+          </>
+        )
+      },
+    ];
+
+    return (
+      <TableComponent
+        {...args}
+        mobileLayout="stacked"
+        columns={[
+          { key: 'name', label: 'Name', ariaLabel: 'Name' },
+          { key: 'email', label: 'Email', ariaLabel: 'Email' },
+          { key: 'status', label: 'Status', ariaLabel: 'Status' },
+          { key: 'actions', label: 'Actions', ariaLabel: 'Actions' },
+        ]}
+        rowData={rowData}
+        expandedRows={expandedRows}
+      />
+    );
+  },
+};
+

package/src/components/Table/Table.tsx

@@ -97,7 +97,8 @@ export const Table: FunctionComponent<TableProps> = ({
       iconSource = 'ChevronDown';
       ariaLabel = translations.sortedDescending.replace('{label}', label);
     } else {
-      iconSource = 'Sort';
+      // Show chevron down when sortable but not sorted
+      iconSource = 'ChevronDown';
       ariaLabel = translations.sortBy.replace('{label}', label);
     }
 
@@ -138,7 +139,10 @@ export const Table: FunctionComponent<TableProps> = ({
 
       return (
         <Fragment key={rowIndex}>
-          <tr className="dropin-table__body__row">
+          <tr className={classes([
+            'dropin-table__body__row',
+            ['dropin-table__body__row--expanded', isExpanded && hasDetails],
+          ])}>
             {columns.map((column) => {
               const cell = row[column.key];
               const label = column.ariaLabel ?? column.label;

package/src/lib/get-price-formatter.ts

@@ -0,0 +1,69 @@
+/********************************************************************
+ *  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 { getGlobalLocale } from '@adobe-commerce/elsie/lib';
+
+export interface PriceFormatterOptions {
+  currency?: string | null;
+  locale?: string;
+  formatOptions?: Intl.NumberFormatOptions;
+}
+
+/**
+ * Determines the effective locale to use for price formatting
+ * Priority: prop locale > global locale > browser locale > default 'en-US'
+ */
+export function getEffectiveLocale(locale?: string): string {
+  if (locale) {
+    return locale;
+  }
+  const globalLocale = getGlobalLocale();
+  if (globalLocale) {
+    return globalLocale;
+  }
+  // Fallback to browser locale or default
+  return process.env.LOCALE && process.env.LOCALE !== 'undefined' ? process.env.LOCALE : 'en-US';
+}
+
+/**
+ * Gets an Intl.NumberFormat instance for price formatting
+ * Uses getEffectiveLocale internally to determine the best locale
+ *
+ * @example
+ * // Single price formatting
+ * const formatter = getPriceFormatter({ currency: 'USD', locale: 'en-US' });
+ * const price = formatter.format(10.99); // "$10.99"
+ *
+ * @example
+ * // Bulk price formatting (more efficient)
+ * const formatter = getPriceFormatter({ currency: 'EUR', locale: 'fr-FR' });
+ * const prices = [10.99, 25.50, 99.99].map(amount => formatter.format(amount));
+ */
+export function getPriceFormatter(
+  options: PriceFormatterOptions = {}
+): Intl.NumberFormat {
+  const { currency, locale, formatOptions = {} } = options;
+  const effectiveLocale = getEffectiveLocale(locale);
+
+  const params: Intl.NumberFormatOptions = {
+    style: 'currency',
+    currency: currency || 'USD',
+    // These options are needed to round to whole numbers if that's what you want.
+    minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
+    maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
+    ...formatOptions,
+  };
+
+  try {
+    return new Intl.NumberFormat(effectiveLocale, params);
+  } catch (error) {
+    console.error(`Error creating Intl.NumberFormat instance for locale ${effectiveLocale}. Falling back to en-US.`, error);
+    return new Intl.NumberFormat('en-US', params);
+  }
+}

package/src/lib/index.ts

@@ -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.
  *******************************************************************/
 
 export * from '@adobe-commerce/elsie/lib/form-values';
@@ -25,3 +25,4 @@ export * from '@adobe-commerce/elsie/lib/is-number';
 export * from '@adobe-commerce/elsie/lib/deviceUtils';
 export * from '@adobe-commerce/elsie/lib/get-path-value';
 export * from '@adobe-commerce/elsie/lib/get-cookie';
+export * from '@adobe-commerce/elsie/lib/get-price-formatter';