@adobe-commerce/elsie 1.4.1-alpha102 → 1.5.0-alpha007

package/bin/builders/gql/index.js

@@ -77,20 +77,24 @@ module.exports = async function generateResourceBuilder(yargs) {
                     alias: 's',
                     describe: 'Path to the source code containing GraphQL operations',
                     type: 'array',
-                    string: true,
                     demandOption: true,
                 })
+                .option('excluded', {
+                    alias: 'x',
+                    describe: 'Paths to exclude from validation',
+                    type: 'array',
+                    demandOption: false,
+                })
                 .option('endpoints', {
                     alias: 'e',
                     describe: 'Path to GraphQL endpoints',
                     type: 'array',
-                    string: true,
                     demandOption: true,
                 });
         },
         async (argv) => {
-            const { source, endpoints } = argv;
-            await validate(source, endpoints);
+            const { source, excluded, endpoints } = argv;
+            await validate(source, endpoints, excluded);
         },
     )
     .demandCommand(1, 1, 'choose a command: types, mocks or validate');

package/bin/builders/gql/validate.js

@@ -5,17 +5,20 @@ const parser = require('@babel/parser');
 const traverse = require('@babel/traverse');
 const { getIntrospectionQuery, buildClientSchema, parse, validate } = require('graphql');
 
-async function walk(dir, collected = []) {
+async function walk(dir, excludedPaths = [], collected = []) {
+    if (excludedPaths.includes(dir)) return collected;
+
     const dirents = await fsPromises.readdir(dir, { withFileTypes: true });
 
     for (const d of dirents) {
         const full = path.resolve(dir, d.name);
 
         if (d.isDirectory()) {
-            // skip node_modules and “hidden” folders such as .git
+            if (excludedPaths.includes(full)) continue;
             if (d.name === 'node_modules' || d.name.startsWith('.')) continue;
-            await walk(full, collected);
+            await walk(full, excludedPaths, collected);
         } else if (/\.(c?m?js|ts|tsx)$/.test(d.name)) {
+            if (excludedPaths.includes(full)) continue;
             collected.push(full);
         }
     }
@@ -97,10 +100,10 @@ async function validateGqlOperations(endpoint, operation) {
     }
 }
 
-async function getAllOperations(directories) {
+async function getAllOperations(directories, excludedPaths = []) {
     let fullContent = '';
     for (const directory of directories) {
-        const files = await walk(path.resolve(directory));
+        const files = await walk(path.resolve(directory), excludedPaths.map(p => path.resolve(p)));
         for (const f of files) {
             const code = await fsPromises.readFile(f, 'utf8');
 
@@ -120,11 +123,9 @@ async function getAllOperations(directories) {
     return fullContent;
 }
 
-
-
-module.exports = async function main(sources, endpoints) {
+module.exports = async function main(sources, endpoints, excluded) {
     for (const endpoint of endpoints) {
-        const operations = await getAllOperations(sources);
+        const operations = await getAllOperations(sources, excluded);
         if (!operations) {
             console.error('No GraphQL operations found in the specified directories.');
             process.exitCode = 0;
@@ -132,4 +133,4 @@ module.exports = async function main(sources, endpoints) {
         }
         await validateGqlOperations(endpoint, operations);
     }
-}
+}

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.4.1-alpha102",
+  "version": "1.5.0-alpha007",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {

package/src/components/InputFile/InputFile.css

@@ -0,0 +1,49 @@
+/********************************************************************
+ *  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-input-file__input {
+    display: none;
+}
+
+.dropin-input-file__label {
+    border: 0 none;
+    cursor: pointer;
+    border-radius: var(--shape-border-radius-3);
+    padding: var(--spacing-xsmall) var(--spacing-medium);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: var(--color-brand-500);
+    color: var(--color-neutral-50);
+    font: var(--type-button-2-font);
+    letter-spacing: var(--type-button-2-letter-spacing);
+}
+
+.dropin-input-file__label:hover {
+    background-color: var(--color-button-hover);
+}
+
+.dropin-input-file__icon {
+    height: 24px;
+    margin-right: var(--spacing-xsmall);
+}
+
+/* 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/InputFile/InputFile.stories.tsx

@@ -0,0 +1,90 @@
+/********************************************************************
+ *  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 { InputFile, InputFileProps } from '@adobe-commerce/elsie/components/InputFile';
+import { action } from '@storybook/addon-actions';
+import { IconsList } from '@adobe-commerce/elsie/components/Icon/Icon.stories.helpers';
+
+/**
+ * Use InputFile to upload files.
+ */
+const meta: Meta<InputFileProps> = {
+  title: 'Components/InputFile',
+  component: InputFile,
+  argTypes: {
+    label: {
+      description: 'Label for the input file.',
+      type: 'string',
+    },
+    accept: {
+      description: 'Restrict selectable file types',
+      type: 'string',
+    },
+    multiple: {
+      description: 'Allow multiple files selection.',
+      type: { 
+        name: 'boolean', 
+        required: false 
+      },
+    },
+    id: {
+      description: 'id',
+      type: { 
+        required: false, 
+        name: 'string' 
+      },
+      control: 'text',
+    },
+    onChange: {
+      description: 'Handler for when the file selection changes.',
+      control: false,
+      table: {
+        type: { 
+          summary: 'function' 
+        },
+      },
+    },
+    icon: {
+      description: 'Optional icon.',
+      table: {
+        type: { summary: 'FunctionComponent' },
+      },
+      options: Object.keys(IconsList),
+      mapping: IconsList,
+      control: 'select',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<InputFileProps>;
+
+export const Default: Story = {
+  args: {
+    label: 'Upload File',
+    id: 'single-file-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    label: 'Upload Multiple Files',
+    id: 'multiple-files-input',
+    accept: ".pdf, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .txt, .csv, .jpg, .jpeg, .png, .gif, .bmp, .tiff, .ico, .webp",
+    multiple: true,
+    onChange: action('onChange'),
+    icon: 'none' as any,
+  },
+};

package/src/components/InputFile/InputFile.tsx

@@ -0,0 +1,59 @@
+/********************************************************************
+ *  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 } from 'preact';
+import { useId } from 'preact/hooks';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+import '@adobe-commerce/elsie/components/InputFile/InputFile.css';
+
+export interface InputFileProps extends Omit<HTMLAttributes<HTMLInputElement>, 'type' | 'icon'> {
+  accept?: string;
+  onChange?: (event: Event) => void;
+  label?: string;
+  multiple?: boolean;
+  icon?: VNode<HTMLAttributes<SVGSVGElement>>;
+}
+
+export const InputFile: FunctionComponent<InputFileProps> = ({
+  accept,
+  onChange,
+  label = 'Upload Document',
+  icon,
+  className,
+  multiple,
+  id: providedId,
+  ...props
+}) => {
+  
+  const generatedId = useId();
+  const id = providedId || generatedId;
+
+  const handleChange = (e: Event) => {
+    onChange?.(e);
+  };
+
+  return (
+    <div className={classes(['dropin-input-file', className])}>
+      <label htmlFor={id} className="dropin-input-file__label">
+        {icon && <span className="dropin-input-file__icon">{icon}</span>}
+        {label}
+      </label>
+      <input
+        id={id}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={handleChange}
+        className="dropin-input-file__input"
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/InputFile/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/InputFile/InputFile';
+export { InputFile as default } from '@adobe-commerce/elsie/components/InputFile/InputFile';

package/src/components/Table/Table.css

@@ -0,0 +1,90 @@
+/********************************************************************
+ *  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;
+}
+
+/* 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);
+    }
+}
+
+/* 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,492 @@
+/********************************************************************
+ *  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',
+    },
+  },
+};
+
+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: '' },
+    ],
+    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: '' },
+    ],
+    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> },
+    ],
+  },
+};
+

package/src/components/Table/Table.tsx

@@ -0,0 +1,149 @@
+/********************************************************************
+ *  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 } 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;
+};
+
+export interface TableProps extends HTMLAttributes<HTMLTableElement> {
+  columns: Column[];
+  rowData: RowData[];
+  mobileLayout?: 'stacked' | 'none';
+  caption?: string;
+  onSortChange?: (columnKey: string, direction: Sortable) => void;
+}
+
+export const Table: FunctionComponent<TableProps> = ({
+  className,
+  children,
+  columns = [],
+  rowData = [],
+  mobileLayout = 'none',
+  caption,
+  onSortChange,
+  ...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) => (
+            <tr key={rowIndex} 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>
+          ))}
+        </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

@@ -48,3 +48,5 @@ export * from '@adobe-commerce/elsie/components/Tag';
 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/API/render.mdx

@@ -121,5 +121,21 @@ button.addEventListener('click', () => {
 });
 ```
 
+### Unmounting components without instance access
+
+The `Render.unmount` static method provides a way to unmount components from the DOM when you don't have direct access to the component instance. 
+This is particularly useful in scenarios where components are rendered inside modals, dialogs, or other temporary containers that need to be cleaned up.
+
+#### Example
+
+```js
+// Close the dialog
+dialog.close();
+
+// Unmount any dropin containers rendered in the modal
+dialog.querySelectorAll('[data-dropin-container]').forEach(Render.unmount);
+```
+
+This approach ensures that all dropin components are properly cleaned up when their container elements are removed from the DOM, preventing memory leaks and maintaining application performance.
 </Unstyled>
 

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,