@adobe-commerce/elsie 1.0.1-alpha04151330 → 1.1.0-alpha2345

package/__mocks__/svg.js

@@ -7,4 +7,5 @@
  * accompanying it. 
  *******************************************************************/
 
-export * from '../src/icons';
+const SVGComponent = 'svg';
+export default SVGComponent;

package/bin/builders/build/index.js

@@ -3,8 +3,7 @@ const path = require('path');
 module.exports = async function generateResourceBuilder({ argv }) {
   const { build } = await import('vite');
 
-  const configFile =
-    argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
+  const configFile = argv?.config ?? path.resolve(__dirname, '../../../config/vite.mjs');
 
   const outDir = argv?.outDir ?? 'dist';
 

package/bin/builders/generate/api/index.js

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 const path = require('path');
 const fs = require('fs');
 const writeFile = require('../../../lib/write-file');

package/bin/builders/generate/api/templates/function.js

@@ -1,9 +1,18 @@
 const { stripIndent } = require('common-tags');
 
 module.exports = ({ basename }) => {
-  return `${stripIndent`      
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${stripIndent`      
       export const ${basename} = () => { 
         return 'Howdy!';
       } 
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/api/templates/index.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ basename, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     export * from '${importPath}/${basename}';
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/api/templates/story.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ pathname, basename, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     import { Meta } from '@storybook/blocks';
 
     <Meta title="API/${pathname}" />
@@ -19,5 +28,5 @@ module.exports = ({ pathname, basename, importPath = '.' }) => {
     \`\`\`ts
     ${basename}();
     \`\`\`
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/api/templates/unit-test.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, basename, pathname, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
         import { ${basename} } from '${importPath}';
 
         describe('${name}/api/${pathname}', () => {
@@ -11,5 +20,5 @@ module.exports = ({ name, basename, pathname, importPath = '.' }) => {
             expect(value).toEqual('Howdy!');
           });
         });
-    `}\n`;
+`}\n`;
 };

package/bin/builders/generate/component/index.js

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 const path = require('path');
 const fs = require('fs');
 const writeFile = require('../../../lib/write-file');

package/bin/builders/generate/component/templates/Component.js

@@ -5,7 +5,16 @@ module.exports = ({ basename, importPath = '.', skipCSS, cssPrefix }) => {
   const _name = hyphenatedName(basename);
 
   if (skipCSS)
-    return `${stripIndent`
+    return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${stripIndent`
       import { FunctionComponent } from 'preact';
       import { HTMLAttributes } from 'preact/compat';
 
@@ -18,9 +27,18 @@ module.exports = ({ basename, importPath = '.', skipCSS, cssPrefix }) => {
           </div>
         );
       };    
-  `}\n`;
+`}\n`;
 
-  return `${stripIndent`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${stripIndent`
       import { FunctionComponent } from 'preact';
       import { HTMLAttributes } from 'preact/compat';
       import { classes } from '@adobe-commerce/elsie/lib';
@@ -39,5 +57,5 @@ module.exports = ({ basename, importPath = '.', skipCSS, cssPrefix }) => {
           </div>
         );
       };    
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/component/templates/css.js

@@ -4,7 +4,16 @@ const { hyphenatedName } = require('../../../../lib/string');
 module.exports = ({ basename, cssPrefix }) => {
   const _name = hyphenatedName(basename);
 
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
       /* https://cssguidelin.es/#bem-like-naming */
 
       /* .${cssPrefix}${_name} { } */
@@ -20,5 +29,5 @@ module.exports = ({ basename, cssPrefix }) => {
       
       /* XXlarge (large laptops and desktops, 1920px and up) */
       /* @media only screen and (min-width: 1920px) { } */
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/component/templates/index.js

@@ -1,8 +1,17 @@
 const { source } = require('common-tags');
 
 module.exports = ({ basename, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     export * from '${importPath}/${basename}';
     export { ${basename} as default } from '${importPath}/${basename}';
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/component/templates/stories.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, pathname, basename, group, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
     import type { Meta, StoryObj } from '@storybook/preact';
     import { ${basename} as component, ${basename}Props } from '${importPath}';
@@ -42,5 +51,5 @@ module.exports = ({ name, pathname, basename, group, importPath = '.' }) => {
         children: "👋 Hello from your new ${basename} story!",
       },
     };
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/component/templates/unit-test.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, basename, pathname, group, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
         /** https://preactjs.com/guide/v10/preact-testing-library/ */
 
         import { render } from '@adobe-commerce/elsie/lib/tests';
@@ -15,5 +24,5 @@ module.exports = ({ name, basename, pathname, group, importPath = '.' }) => {
             expect(!!container).toEqual(true);
           });
         });
-    `}\n`;
+`}\n`;
 };

package/bin/builders/generate/config/index.js

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 const path = require('path');
 const fs = require('fs/promises');
 const m = require('../../../lib/log-message');

package/bin/builders/generate/config/templates/elsie.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, importPath }) =>
-  `${source`
+`/********************************************************************
+ *  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. 
+ *******************************************************************/
+
+${source`
     module.exports = {
       name: '${name}',
       api: {

package/bin/builders/generate/container/index.js

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 const path = require('path');
 const fs = require('fs');
 const writeFile = require('../../../lib/write-file');

package/bin/builders/generate/container/templates/Component.js

@@ -1,7 +1,16 @@
 const { stripIndent } = require('common-tags');
 
 module.exports = ({ basename }) => {
-  return `${stripIndent`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${stripIndent`
     import { HTMLAttributes } from 'preact/compat';
     import { Container } from '@adobe-commerce/elsie/lib';
 
@@ -14,5 +23,5 @@ module.exports = ({ basename }) => {
         </div>
       );
     };    
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/container/templates/index.js

@@ -1,8 +1,17 @@
 const { source } = require('common-tags');
 
 module.exports = ({ basename, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     export * from '${importPath}/${basename}';
     export { ${basename} as default } from '${importPath}/${basename}';
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/container/templates/stories.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ pathname, basename, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
     // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
     import type { Meta, StoryObj } from '@storybook/preact';
     import { ${basename} as component, ${basename}Props } from '${importPath}';
@@ -30,5 +39,5 @@ module.exports = ({ pathname, basename, importPath = '.' }) => {
         children: "👋 Howdy, I'm Howdy!",
       },
     };
-  `}\n`;
+`}\n`;
 };

package/bin/builders/generate/container/templates/unit-test.js

@@ -1,7 +1,16 @@
 const { source } = require('common-tags');
 
 module.exports = ({ name, basename, pathname, importPath = '.' }) => {
-  return `${source`
+  return `/********************************************************************
+ *  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. 
+ *******************************************************************/
+  
+${source`
         /** https://preactjs.com/guide/v10/preact-testing-library/ */
 
         import { render } from '@adobe-commerce/elsie/lib/tests';
@@ -15,5 +24,5 @@ module.exports = ({ name, basename, pathname, importPath = '.' }) => {
             expect(!!container).toEqual(true);
           });
         });
-    `}\n`;
+`}\n`;
 };

package/bin/builders/generate/index.js

@@ -1,3 +1,12 @@
+/********************************************************************
+ *  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. 
+ *******************************************************************/
+
 const path = require('path');
 const { toPascalCase, toCamelCase } = require('../../lib/string');
 const m = require('../../lib/log-message');

package/bin/builders/lint/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('eslint "*/**/*.{ts,tsx}"');
+  return cli('eslint "*/**/*.{ts,tsx}"');
 };

package/bin/builders/storybook/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('storybook dev -h localhost -p 6006 --disable-telemetry --quiet');
+  return cli('storybook dev -h localhost -p 6006 --disable-telemetry --quiet');
 };

package/bin/builders/test/index.js

@@ -1,5 +1,5 @@
 const cli = require('../../lib/cli');
 
 module.exports = function generateResourceBuilder() {
-  cli('jest');
+  return cli('jest');
 };

package/bin/lib/cli.js

@@ -4,5 +4,20 @@ module.exports = function cli(command) {
   let cmd = command;
   const argvs = process.argv.slice(3).join(' ');
   if (argvs) cmd += ` ${argvs}`;
-  return spawn(cmd, { shell: true, stdio: 'inherit' });
+  
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, { shell: true, stdio: 'inherit' });
+    
+    child.on('close', (code) => {
+      if (code !== 0) {
+        reject(new Error(`Command failed with exit code ${code}`));
+      } else {
+        resolve(child);
+      }
+    });
+    
+    child.on('error', (err) => {
+      reject(err);
+    });
+  });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.0.1-alpha04151330",
+  "version": "1.1.0-alpha2345",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -15,7 +15,7 @@
     "dev": "concurrently 'yarn storybook' 'yarn serve'",
     "storybook": "elsie storybook",
     "serve": "elsie serve --config vite.config.mjs",
-    "lint": "elsie lint --max-warnings=0",
+    "lint": "elsie lint",
     "test": "elsie test",
     "test:ci": "jest --config jest.config.js --passWithNoTests --coverage",
     "build": "elsie build --config vite.config.mjs",

package/src/components/Header/Header.tsx

@@ -7,13 +7,13 @@
  * accompanying it. 
  *******************************************************************/
 
-import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { ComponentChildren, FunctionComponent, VNode, JSX } from 'preact';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import { Divider } from '@adobe-commerce/elsie/components';
 import '@adobe-commerce/elsie/components/Header/Header.css';
 
-export interface HeaderProps extends HTMLAttributes<HTMLDivElement> {
+export interface HeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
   title: string;
   size?: 'medium' | 'large';
   divider?: boolean;

package/src/components/ImageSwatch/ImageSwatch.css

@@ -33,6 +33,7 @@
   overflow: hidden;
 }
 
+.dropin-image-swatch__span img,
 .dropin-image-swatch__content {
   width: inherit;
   position: absolute;
@@ -121,10 +122,19 @@
 }
 
 .dropin-image-swatch__span--out-of-stock > .dropin-image-swatch__content,
+.dropin-image-swatch__span--out-of-stock img,
+.dropin-image-swatch__container
+  input[type='radio']:disabled
+  ~ .dropin-image-swatch__span
+  img,
 .dropin-image-swatch__container
   input[type='radio']:disabled
   ~ .dropin-image-swatch__span
   > .dropin-image-swatch__content,
+.dropin-image-swatch__container
+  input[type='checkbox']:disabled
+  ~ .dropin-image-swatch__span
+  img,
 .dropin-image-swatch__container
   input[type='checkbox']:disabled
   ~ .dropin-image-swatch__span

package/src/components/ImageSwatch/ImageSwatch.stories.tsx

@@ -260,11 +260,11 @@ export const MultiImageSwatch: Story = {
   ),
 };
 
-export const CustomImageNodeSwatch: Story = {
+export const CustomImageNodeVNodeSwatch: Story = {
   args: {
     name: 'customImageSwatch',
     id: 'customImageSwatch1',
-    label: 'Custom Image Node Example',
+    label: 'Custom Image Node VNode Example',
     groupAriaLabel: 'Custom Image Swatches',
     value: 'customImageNode',
     src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`, // fallback, not used with imageNode
@@ -277,7 +277,7 @@ export const CustomImageNodeSwatch: Story = {
       <div style="position: relative; width: 100%; height: 100%;">
         <img
           src={`https://picsum.photos/${defaultWidth}/${defaultHeight}?grayscale`}
-          alt="Custom grayscale image"
+          alt="Custom grayscale image - VNode"
           style="width: 100%; height: 100%; object-fit: cover;"
         />
         <div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 0 0 8px 0;">
@@ -295,7 +295,56 @@ export const CustomImageNodeSwatch: Story = {
       'div[style*="position: relative"]'
     );
     const customImage = canvasElement.querySelector(
-      'img[alt="Custom grayscale image"]'
+      'img[alt="Custom grayscale image - VNode"]'
+    );
+    const customLabel = canvasElement.querySelector(
+      'span[style*="font-weight: bold"]'
+    );
+
+    expect(imageSwatch).toBeInTheDocument();
+    expect(customImageContainer).toBeInTheDocument();
+    expect(customImage).toBeInTheDocument();
+    expect(customLabel).toBeInTheDocument();
+    expect(customLabel?.textContent).toBe('Custom');
+  },
+};
+
+export const CustomImageNodeRenderFunctionSwatch: Story = {
+  args: {
+    name: 'customImageSwatch',
+    id: 'customImageSwatch2',
+    label: 'Custom Image Node Render Function Example',
+    groupAriaLabel: 'Custom Image Swatches',
+    value: 'customImageNode',
+    src: `https://picsum.photos/${defaultWidth}/${defaultHeight}`, // fallback, not used with imageNode
+    alt: 'Custom Image Node',
+    selected: false,
+    disabled: false,
+    outOfStock: false,
+    onValue: action('onValue'),
+    imageNode: () => (
+      <div style="position: relative; width: 100%; height: 100%;">
+        <img
+          src={`https://picsum.photos/${defaultWidth}/${defaultHeight}?grayscale`}
+          alt="Custom grayscale image - Render Function"
+          style="width: 100%; height: 100%; object-fit: cover;"
+        />
+        <div style="position: absolute; top: 0; left: 0; background: rgba(255,255,255,0.7); padding: 4px 8px; border-radius: 0 0 8px 0;">
+          <span style="font-size: 12px; font-weight: bold; color: #333;">
+            Custom
+          </span>
+        </div>
+      </div>
+    ),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const imageSwatch = await canvas.findByRole('radio');
+    const customImageContainer = canvasElement.querySelector(
+      'div[style*="position: relative"]'
+    );
+    const customImage = canvasElement.querySelector(
+      'img[alt="Custom grayscale image - Render Function"]'
     );
     const customLabel = canvasElement.querySelector(
       'span[style*="font-weight: bold"]'

package/src/components/ImageSwatch/ImageSwatch.tsx

@@ -8,11 +8,26 @@
  *******************************************************************/
 
 import { FunctionComponent, VNode } from 'preact';
-import { HTMLAttributes, useCallback } from 'preact/compat';
+import { HTMLAttributes, useCallback, JSX, useMemo } from 'preact/compat';
 import { classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/ImageSwatch/ImageSwatch.css';
-import { Image } from '@adobe-commerce/elsie/components/Image';
+import { Image, ImageProps } from '@adobe-commerce/elsie/components/Image';
 import { useText } from '@adobe-commerce/elsie/i18n';
+
+export interface ImageNodeRenderProps extends ImageProps {
+  imageSwatchContext: {
+    disabled?: boolean;
+    outOfStock?: boolean;
+    multi?: boolean;
+    selected?: boolean;
+    value?: string;
+    label?: string;
+    groupAriaLabel?: string;
+    name?: string;
+    id?: string;
+  };
+}
+
 export interface ImageSwatchProps
   extends Omit<HTMLAttributes<HTMLInputElement>, 'label'> {
   name?: string;
@@ -26,7 +41,7 @@ export interface ImageSwatchProps
   selected?: boolean;
   outOfStock?: boolean;
   multi?: boolean;
-  imageNode?: VNode;
+  imageNode?: VNode | ((props: ImageNodeRenderProps) => JSX.Element);
   onValue?: (value: any) => void;
   onUpdateError?: (error: Error) => void;
 }
@@ -80,6 +95,16 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
     return `${groupAriaLabel}: ${label} ${swatchLabel}`;
   };
 
+  const imageProps: ImageProps = useMemo(() => {
+    return {
+      src,
+      alt,
+      loading: 'lazy',
+      params: { width: 100, fit: 'bounds', crop: true },
+      onError: (e: any) => (e.target.style.display = 'none'),
+    };
+  }, [src, alt]);
+
   return (
     <label className={classes(['dropin-image-swatch__container', className])}>
       <input
@@ -107,14 +132,24 @@ export const ImageSwatch: FunctionComponent<ImageSwatchProps> = ({
           className,
         ])}
       >
-        {imageNode || (
+        {typeof imageNode === 'function' ? (
+          imageNode({
+            ...imageProps,
+            imageSwatchContext: {
+              disabled,
+              outOfStock,
+              selected,
+              value,
+              label,
+              groupAriaLabel,
+              name,
+              id,
+            },
+          })
+        ) : imageNode || (
           <Image
-            src={src}
+            {...imageProps}
             className={classes(['dropin-image-swatch__content'])}
-            params={{ width: 100, fit: 'bounds', crop: true }}
-            alt={alt}
-            loading={'lazy'}
-            onError={(e: any) => (e.target.style.display = 'none')}
           />
         )}
       </span>

package/src/components/Incrementer/Incrementer.tsx

@@ -8,7 +8,7 @@
  *******************************************************************/
 
 import { FunctionComponent } from 'preact';
-import { useState, useCallback } from 'preact/hooks';
+import { useState, useCallback, useEffect } from 'preact/hooks';
 import { HTMLAttributes } from 'preact/compat';
 import { classes, debounce } from '@adobe-commerce/elsie/lib';
 import { Add, Minus } from '@adobe-commerce/elsie/icons';
@@ -56,6 +56,15 @@ export const Incrementer: FunctionComponent<IncrementerProps> = ({
         ? 'Dropin.Incrementer.maxQuantityMessage'
         : 'Dropin.Incrementer.errorMessage';
 
+  // Add this effect to synchronize internal state with external value prop
+  useEffect(() => {
+    const propValue = Number(value);
+    if (propValue !== currentValue) {
+      setCurrentValue(propValue);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedOnValueHandler = useCallback(
     debounce(async (newValue: any) => {

package/src/components/Tag/Tag.stories.tsx

@@ -48,6 +48,7 @@ const Template: StoryObj<TagProps> = {
     <Tag {...args}>
       {/* This workaround allows children to be edited as plain text in Storybook */}
       {args.children && typeof args.children === 'string' ? (
+        // eslint-disable-next-line react/no-danger
         <span dangerouslySetInnerHTML={{ __html: args.children }} />
       ) : undefined}
     </Tag>

package/src/docs/slots.mdx

@@ -32,23 +32,41 @@ The `<Slot />` component is used to define a slot in a container. It receives a
 
 The name of the slot in _PascalCase_. `string` (required).
 
-### wrapperTag
+### 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.).
 
 Example:
 ```tsx
 // Render with a span wrapper
-<Slot name="MySlot" wrapperTag="span">
+<Slot name="MySlot" slotTag="span">
   Inline content
 </Slot>
 
 // Render with an anchor wrapper
-<Slot name="MySlot" wrapperTag="a" href="https://example.com" target="_blank">
+<Slot name="MySlot" slotTag="a" href="https://example.com" target="_blank">
   Link content
 </Slot>
 ```
 
+### contentTag
+
+The HTML tag to use for wrapping dynamically inserted content within the slot. This is separate from the slot's wrapper tag and allows you to control how dynamic content is structured. Defaults to 'div'.
+
+Example:
+```tsx
+<Slot
+  name="MySlot"
+  slotTag="article"    // The outer wrapper will be an article
+  contentTag="section" // Dynamic content will be wrapped in sections
+  slot={(ctx) => {
+    const elem = document.createElement('div');
+    elem.innerHTML = 'Dynamic content';
+    ctx.appendChild(elem); // This will be wrapped in a section tag
+  }}
+/>
+```
+
 ### slot (required)
 
 - `ctx`: An object representing the context of the slot, including methods for manipulating the slot's content.

package/src/lib/slot.tsx

@@ -25,6 +25,7 @@ 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;
@@ -42,7 +43,8 @@ interface PrivateContext<T> {
   _registerMethod: (
     cb: (next: T & DefaultSlotContext<T>, state: State) => void
   ) => void;
-  _htmlElementToVNode: (element: HTMLElement) => VNode;
+  // eslint-disable-next-line no-undef
+  _htmlElementToVNode: (element: HTMLElement, tag: keyof HTMLElementTagNameMap) => VNode;
 }
 
 interface DefaultSlotContext<T> extends PrivateContext<T> {
@@ -75,7 +77,9 @@ export function useSlot<K, V extends HTMLElement>(
   context: Context<K> = {},
   callback?: SlotProps<K>,
   children?: ComponentChildren,
-  render?: Function
+  render?: Function,
+  // eslint-disable-next-line no-undef
+  contentTag: keyof HTMLElementTagNameMap = 'div'
 ): [RefObject<V>, Record<string, any>] {
   const slotsQueue = useContext(SlotQueueContext);
 
@@ -146,15 +150,17 @@ export function useSlot<K, V extends HTMLElement>(
   context._registerMethod = _registerMethod;
 
   const _htmlElementToVNode = useCallback((elem: HTMLElement) => {
-    return (
-      <div
-        data-slot-html-element={elem.tagName.toLowerCase()}
-        ref={(refElem) => {
+    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;
@@ -316,7 +322,7 @@ export function useSlot<K, V extends HTMLElement>(
       status.current = 'loading';
 
       log(`🟩 "${name}" Slot Initialized`);
-      await callback(context as K & DefaultSlotContext<K>, elementRef.current);
+      await callback(context as K & DefaultSlotContext<K>, elementRef.current as HTMLDivElement | null);
     } catch (error) {
       console.error(`Error in "${callback.name}" Slot callback`, error);
     } finally {
@@ -356,7 +362,10 @@ interface SlotPropsComponent<T>
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
-  wrapperTag?: keyof HTMLElementTagNameMap;
+  // eslint-disable-next-line no-undef
+  slotTag?: keyof HTMLElementTagNameMap; // The tag for the slot wrapper itself
+  // eslint-disable-next-line no-undef
+  contentTag?: keyof HTMLElementTagNameMap; // The tag for dynamically inserted content
   children?: ComponentChildren;
 }
 
@@ -366,9 +375,14 @@ export function Slot<T>({
   slot,
   children,
   render,
-  wrapperTag = 'div',
+  slotTag = 'div',
+  contentTag = 'div',
   ...props
-}: Readonly<SlotPropsComponent<T>>) {
+}: Readonly<SlotPropsComponent<T>>): VNode<{
+  ref: RefObject<HTMLElement>;
+  'data-slot': string;
+  [key: string]: any;
+}> {
   const slotsQueue = useContext(SlotQueueContext);
 
   const [elementRef, slotProps] = useSlot<T, HTMLElement>(
@@ -376,7 +390,8 @@ export function Slot<T>({
     context,
     slot,
     children,
-    render
+    render,
+    contentTag
   );
 
   useMemo(() => {
@@ -392,7 +407,7 @@ export function Slot<T>({
   }, [name, slotsQueue]);
 
   return createElement(
-    wrapperTag,
+    slotTag,
     {
       ...props,
       ref: elementRef,