@adobe-commerce/elsie 1.5.1-alpha003 → 1.5.1-alpha2861

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

package/src/components/Picker/Picker.tsx

@@ -8,12 +8,13 @@
  *******************************************************************/
 
 import { Icon } from '@adobe-commerce/elsie/components';
-import '@adobe-commerce/elsie/components/Picker/Picker.css';
 import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { classes } from '@adobe-commerce/elsie/lib';
 import { FunctionComponent, VNode } from 'preact';
 import { HTMLAttributes, useEffect, useState } from 'preact/compat';
 
+import '@adobe-commerce/elsie/components/Picker/Picker.css';
+
 type PickerValue = string | null;
 
 export interface PickerOption {
@@ -68,9 +69,10 @@ export const Picker: FunctionComponent<PickerProps> = ({
   defaultOption,
   icon,
   className,
+  id,
   ...props
 }) => {
-  const id = props?.id || name || `dropin-picker-${Math.random().toString(36)}`;
+  const uniqueId = id ?? name ?? `dropin-picker-${Math.random().toString(36)}`;
   const isRequired = !!props?.required;
 
   // find the first option that is not disabled
@@ -154,7 +156,7 @@ export const Picker: FunctionComponent<PickerProps> = ({
       )}
 
       <select
-        id={id}
+        id={uniqueId}
         className={classes([
           'dropin-picker__select',
           `dropin-picker__select--${variant}`,

package/src/components/ProductItemCard/ProductItemCard.css

@@ -23,16 +23,14 @@
 }
 
 .dropin-product-item-card__image-container {
-  overflow: visible;
+  overflow: hidden;
   width: 100%;
   height: auto;
 }
 
 .dropin-product-item-card__image img {
-  display: block;
   width: 100%;
   max-height: 375px;
-  border-radius: var(--border-radius-xsmall, 4px);
 }
 
 .dropin-product-item-card__content {
@@ -76,42 +74,6 @@
   width: 100%;
 }
 
-.dropin-product-item-card__image a:focus {
-  outline: 1px solid var(--color-neutral-400);
-  outline-offset: 1px;
-}
-
-.dropin-product-item-card__image {
-  display: inline-block;
-  border-radius: var(--border-radius-xsmall, 4px);
-  outline: none;
-}
-
-.dropin-product-item-card__image:focus-visible {
-  outline: 2px solid var(--color-interactive-focus, #005fcc);
-  outline-offset: 2px;
-  z-index: 2;
-}
-
-.dropin-product-item-card__image-container {
-  overflow: visible;
-  width: 100%;
-  height: auto;
-}
-
-.dropin-product-item-card__image-link {
-  display: block;
-  border-radius: var(--border-radius-xsmall, 4px);
-  outline: none;
-}
-
-.dropin-product-item-card__image-link:focus-visible {
-  outline: 3px solid var(--color-interactive-focus, #333333);
-  outline-offset: 3px;
-  position: relative;
-  z-index: 1;
-}
-
 /* Medium (portrait tablets and large phones, 768px and up) */
 /* @media only screen and (min-width: 768px) { } */
 

package/src/components/ProductItemCard/ProductItemCard.stories.tsx

@@ -47,15 +47,13 @@ const meta: Meta<ProductItemCardProps> = {
       options: ['DefaultImage', 'Empty'],
       mapping: {
         DefaultImage: (
-          <a href="#" className="dropin-product-item-card__image-link">
-            <Image
-              src="https://picsum.photos/300/375"
-              width="300"
-              height="375"
-              alt="Product Image"
-              loading="lazy"
-            />
-          </a>
+          <Image
+            src="https://picsum.photos/300/375"
+            width="300"
+            height="375"
+            alt="Product Image"
+            loading="lazy"
+          />
         ),
         Empty: null,
       },
@@ -255,7 +253,6 @@ export const Default: Story = {
     sku: 'DefaultSku' as any,
     swatches: 'DefaultSwatches' as any,
     actionButton: 'DefaultButton' as any,
-    imageHref: '#',
   },
 };
 

package/src/components/ProductItemCard/ProductItemCard.tsx

@@ -22,8 +22,6 @@ export interface ProductItemCardProps
   actionButton?: VNode;
   swatches?: VNode;
   initialized?: boolean;
-  imageHref?: string;
-  imageLinkLabel?: string;
 }
 
 export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
@@ -35,8 +33,6 @@ export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
   actionButton,
   swatches,
   initialized = false,
-  imageHref,
-  imageLinkLabel,
   ...props
 }) => {
   if (!initialized) {
@@ -49,23 +45,10 @@ export const ProductItemCard: FunctionComponent<ProductItemCardProps> = ({
     >
       <div className="dropin-product-item-card__image-container">
         {image && (
-          imageHref ? (
-            <a
-              href={imageHref}
-              className="dropin-product-item-card__image-link"
-              aria-label={imageLinkLabel}
-            >
-              <VComponent
-                node={image}
-                className={classes(['dropin-product-item-card__image'])}
-              />
-            </a>
-          ) : (
-            <VComponent
-              node={image}
-              className={classes(['dropin-product-item-card__image'])}
-            />
-          )
+          <VComponent
+            node={image}
+            className={classes(['dropin-product-item-card__image'])}
+          />
         )}
       </div>
       <div className="dropin-product-item-card__content">

package/src/components/Table/Table.css

@@ -0,0 +1,110 @@
+/********************************************************************
+ *  Copyright 2025 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-table {
+    container-type: inline-size;
+    overflow-x: auto;
+    font: var(--type-body-1-default-font);
+    letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-table__table {
+    border-collapse: collapse; 
+    width: 100%;
+}
+
+.dropin-table__caption {
+    font: var(--type-details-caption-1-font);
+    letter-spacing: var(--type-details-caption-1-letter-spacing);
+    text-align: left;
+    margin-bottom: var(--spacing-small);
+    caption-side: top;
+}
+
+.dropin-table__header__cell {
+    font: var(--type-body-1-strong-font);
+    letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+
+.dropin-table__header__cell,
+.dropin-table__body__cell {
+    padding: var(--spacing-xsmall);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.dropin-table__header__cell--sortable {
+    cursor: pointer;
+}
+
+.dropin-table__header__row {
+    border-bottom: 2px solid var(--color-neutral-400);
+}
+
+.dropin-table__body__row {
+    border-bottom: 1px solid var(--color-neutral-400);
+}
+
+.dropin-table__header__sort-button {
+    margin-left: var(--spacing-xsmall);
+    vertical-align: middle;
+}
+
+.dropin-table__row-details {
+    display: none;
+}
+
+.dropin-table__row-details--expanded {
+    display: table-row;
+}
+
+.dropin-table__row-details__cell {
+    padding: var(--spacing-small);
+    background-color: var(--color-neutral-100);
+    border-top: 1px solid var(--color-neutral-300);
+    border-bottom: 1px solid var(--color-neutral-400);
+}
+
+/* Container query for mobile layout */
+@container (max-width: 600px) {
+    /* Mobile layout Stacked */
+    .dropin-table--mobile-layout-stacked .dropin-table__header {
+        display: none;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell {
+        display: block;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell::before {
+        content: attr(data-label);
+        font-weight: bold;
+        display: block;
+        margin-bottom: var(--spacing-xxsmall);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell {
+        display: block;
+        padding: var(--spacing-small);
+    }
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */