@adobe-commerce/elsie 1.1.0-alpha8 → 1.1.0-beta1

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/package.json

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

package/src/components/CartItem/CartItem.tsx

@@ -340,15 +340,15 @@ export const CartItem: FunctionComponent<CartItemProps> = ({
           )}
         </div>
 
+        {/* Actions */}
         {actions && (
           <div className={classes(['dropin-cart-item__actions'])}>
-            {/* Actions */}
-            {actions && (
+            {
               <VComponent
                 node={actions}
                 className={classes(['dropin-cart-item__buttons'])}
               />
-            )}
+            }
           </div>
         )}
 

package/src/docs/slots.mdx

@@ -32,6 +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).
 
+### 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" slotTag="span">
+  Inline content
+</Slot>
+
+// Render with an anchor wrapper
+<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

@@ -7,7 +7,7 @@
  * accompanying it. 
  *******************************************************************/
 
-import { cloneElement, ComponentChildren, RefObject, VNode } from 'preact';
+import { cloneElement, ComponentChildren, RefObject, VNode, createElement } from 'preact';
 import {
   StateUpdater,
   useContext,
@@ -42,7 +42,7 @@ interface PrivateContext<T> {
   _registerMethod: (
     cb: (next: T & DefaultSlotContext<T>, state: State) => void
   ) => void;
-  _htmlElementToVNode: (element: HTMLElement) => VNode;
+  _htmlElementToVNode: (element: HTMLElement, tag: keyof HTMLElementTagNameMap) => VNode;
 }
 
 interface DefaultSlotContext<T> extends PrivateContext<T> {
@@ -69,13 +69,14 @@ export type SlotMethod<P = any> = (
 ) => void;
 
 // Slot Hook
-export function useSlot<K, V extends HTMLDivElement>(
+export function useSlot<K, V extends HTMLElement>(
   name: string,
   // @ts-ignore
   context: Context<K> = {},
   callback?: SlotProps<K>,
   children?: ComponentChildren,
-  render?: Function
+  render?: Function,
+  contentTag: keyof HTMLElementTagNameMap = 'div'
 ): [RefObject<V>, Record<string, any>] {
   const slotsQueue = useContext(SlotQueueContext);
 
@@ -146,15 +147,17 @@ export function useSlot<K, V extends HTMLDivElement>(
   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;
@@ -351,11 +354,14 @@ export function useSlot<K, V extends HTMLDivElement>(
 
 // Slot Component
 interface SlotPropsComponent<T>
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'slot'> {
+  extends Omit<HTMLAttributes<HTMLElement>, 'slot'> {
   name: string;
   slot?: SlotProps<T>;
   context?: Context<T>;
   render?: (props: Record<string, any>) => VNode | VNode[];
+  slotTag?: keyof HTMLElementTagNameMap; // The tag for the slot wrapper itself
+  contentTag?: keyof HTMLElementTagNameMap; // The tag for dynamically inserted content
+  children?: ComponentChildren;
 }
 
 export function Slot<T>({
@@ -364,16 +370,19 @@ export function Slot<T>({
   slot,
   children,
   render,
+  slotTag = 'div',
+  contentTag = 'div',
   ...props
 }: Readonly<SlotPropsComponent<T>>) {
   const slotsQueue = useContext(SlotQueueContext);
 
-  const [elementRef, slotProps] = useSlot<T, HTMLDivElement>(
+  const [elementRef, slotProps] = useSlot<T, HTMLElement>(
     name,
     context,
     slot,
     children,
-    render
+    render,
+    contentTag
   );
 
   useMemo(() => {
@@ -388,10 +397,14 @@ export function Slot<T>({
     }
   }, [name, slotsQueue]);
 
-  return (
-    <div {...props} ref={elementRef} data-slot={name}>
-      {slotProps.children}
-    </div>
+  return createElement(
+    slotTag,
+    {
+      ...props,
+      ref: elementRef,
+      'data-slot': name,
+    },
+    slotProps.children
   );
 }