@adobe-commerce/elsie 1.6.0-alpha999 → 1.6.0-beta2

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/Pagination/Pagination.css

@@ -64,7 +64,8 @@
   align-items: center;
 }
 
-.dropin-pagination_list-item button {
+.dropin-pagination_list-item button,
+.dropin-pagination_list-item a {
   cursor: pointer;
   margin: 0;
   padding: 0;
@@ -72,24 +73,32 @@
   border: none;
   font: var(--type-details-caption-1-font);
   letter-spacing: var(--type-details-caption-1-letter-spacing);
+  text-decoration: none;
 }
 
-.dropin-pagination_list-item--active button {
+.dropin-pagination_list-item--active button,
+.dropin-pagination_list-item--active a {
   cursor: default;
 }
 
 .dropin-pagination_list-item--active button:disabled,
 .dropin-pagination_list-item--ellipsis button,
+.dropin-pagination_list-item--ellipsis a,
 .dropin-pagination-arrow--backward:disabled,
-.dropin-pagination-arrow--forward:disabled {
+.dropin-pagination-arrow--forward:disabled,
+.dropin-pagination-arrow--disabled {
   cursor: default;
+  opacity: 0.5;
+  pointer-events: none;
 }
 
-.dropin-pagination button:not(:disabled) {
+.dropin-pagination button:not(:disabled),
+.dropin-pagination a:not([aria-disabled="true"]) {
   color: var(--color-neutral-800);
 }
 
-.dropin-pagination button {
+.dropin-pagination button,
+.dropin-pagination a {
   appearance: none;
   -webkit-appearance: none;
 }

package/src/components/Pagination/Pagination.stories.tsx

@@ -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.
  *******************************************************************/
 
 // https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
@@ -16,6 +16,8 @@ import {
 } from '@adobe-commerce/elsie/components/Pagination';
 import { expect, userEvent, within } from '@storybook/test';
 import { useState } from 'preact/hooks';
+import { action } from '@storybook/addon-actions';
+
 
 /**
  *  A component that divides large content sets into multiple pages, allowing users to navigate through the data with controls like "Next," "Previous," or page numbers, enhancing performance and usability by limiting the number of items displayed per page.
@@ -40,6 +42,10 @@ const meta: Meta<PaginationProps> = {
       description:
         'Called when the page number is changed, and it takes the resulting page number.',
     },
+    routePage: {
+      description:
+        'Optional function that generates hrefs for each page. When provided, pagination will render anchor tags instead of buttons, enabling proper SEO and link behavior.',
+    },
   },
 };
 
@@ -115,3 +121,26 @@ export const LongPagination: Story = {
     );
   },
 };
+
+export const WithAnchors: Story = {
+  name: 'As anchor tags',
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 10;
+
+    const handlePageChange = (newPage: number, e?: Event) => {
+      e?.preventDefault();
+      setCurrentPage(newPage);
+      action('pageChanged')(newPage, e);
+    };
+
+    return (
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        onChange={handlePageChange}
+        routePage={(page) => `?page=${page}`}
+      />
+    );
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -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 { FunctionComponent } from 'preact';
@@ -14,12 +14,14 @@ import { ChevronDown } from '@adobe-commerce/elsie/icons';
 import { Icon } from '@adobe-commerce/elsie/components/Icon';
 import { useText } from '@adobe-commerce/elsie/i18n';
 import '@adobe-commerce/elsie/components/Pagination/Pagination.css';
+import { PaginationButton } from './PaginationButton';
 
 export interface PaginationProps {
   className?: string;
   currentPage?: number;
   totalPages?: number;
-  onChange?: (currentPage: number) => void;
+  onChange?: (currentPage: number, e?: Event) => void;
+  routePage?: (page: number) => string;
 }
 
 export type PaginationList = {
@@ -32,6 +34,7 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
   totalPages = 10,
   currentPage = 1,
   onChange,
+  routePage,
   className,
   ...props
 }) => {
@@ -40,22 +43,22 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
     forwardButton: 'Dropin.Pagination.forwardButton.ariaLabel',
   });
 
-  const handleForward = useCallback(() => {
+  const handleForward = useCallback((e?: Event) => {
     const nextPage = Math.min(currentPage + 1, totalPages);
 
-    onChange?.(nextPage);
+    onChange?.(nextPage, e);
   }, [currentPage, onChange, totalPages]);
 
-  const handleBackward = useCallback(() => {
+  const handleBackward = useCallback((e?: Event) => {
     const prevPage = Math.max(currentPage - 1, 1);
 
-    onChange?.(prevPage);
+    onChange?.(prevPage, e);
   }, [currentPage, onChange]);
 
   const handleSetPage = useCallback(
-    (currentPage: number | string) => {
+    (currentPage: number | string, e?: Event) => {
       if (isNumber(currentPage)) {
-        onChange?.(currentPage as number);
+        onChange?.(currentPage as number, e);
       }
     },
     [onChange]
@@ -97,19 +100,20 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
 
   return (
     <div {...props} className={classes(['dropin-pagination', className])}>
-      <button
-        type="button"
+      <PaginationButton
         data-testid="prev-button"
         aria-label={translations.backwardButton}
         disabled={currentPage === 1}
-        onClick={handleBackward}
+        onClick={(e: Event) => handleBackward(e)}
+        href={routePage?.(currentPage) ?? undefined}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--backward',
+          ['dropin-pagination-arrow--disabled', currentPage === 1],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </button>
+      </PaginationButton>
       <ul className="dropin-pagination_list">
         {(paginationList as PaginationList[]).map((item, index) => (
           <li
@@ -121,29 +125,31 @@ export const Pagination: FunctionComponent<PaginationProps> = ({
               [`dropin-pagination_list-item--active`, item.isActive],
             ])}
           >
-            <button
-              type="button"
+            <PaginationButton
               data-testid={`set-page-button-${item.page}`}
-              onClick={() => handleSetPage(item.page)}
+              onClick={(e: Event) => handleSetPage(item.page, e)}
+              href={routePage?.(item.page as number) ?? undefined}
+
             >
               {item.label}
-            </button>
+            </PaginationButton>
           </li>
         ))}
       </ul>
-      <button
-        type="button"
+      <PaginationButton
         data-testid="next-button"
         aria-label={translations.forwardButton}
         disabled={currentPage === totalPages}
-        onClick={handleForward}
+        onClick={(e: Event) => handleForward(e)}
+        href={routePage?.(currentPage) ?? undefined}
         className={classes([
           'dropin-pagination-arrow',
           'dropin-pagination-arrow--forward',
+          ['dropin-pagination-arrow--disabled', currentPage === totalPages],
         ])}
       >
         <Icon size="24" source={ChevronDown} />
-      </button>
+      </PaginationButton>
     </div>
   );
 };

package/src/components/Pagination/PaginationButton.tsx

@@ -0,0 +1,46 @@
+/********************************************************************
+ *  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.
+ *******************************************************************/
+
+import { FunctionComponent, JSX } from 'preact';
+
+type BaseProps = {
+  href?: string;
+  type?: 'button';
+  disabled?: boolean;
+};
+
+export type PaginationButtonProps = BaseProps &
+  (
+    | Omit<JSX.HTMLAttributes<HTMLAnchorElement>, 'type'>
+    | Omit<JSX.HTMLAttributes<HTMLButtonElement>, 'href'>
+  );
+
+export const PaginationButton: FunctionComponent<PaginationButtonProps> = (
+  props
+) => {
+  if (props.href) {
+    
+    const { href, disabled, ...anchorProps } = props;
+    return (
+      <a
+        href={href}
+        aria-disabled={disabled}
+        {...(anchorProps as JSX.HTMLAttributes<HTMLAnchorElement>)}
+      />
+    );
+  }
+  
+  const { type = 'button', ...buttonProps } = props;
+  return (
+    <button
+      type={type}
+      {...(buttonProps as JSX.HTMLAttributes<HTMLButtonElement>)}
+    />
+  );
+};

package/src/components/Price/Price.tsx

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

package/src/components/Table/Table.css

@@ -0,0 +1,183 @@
+/********************************************************************
+ *  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: var(--shape-border-width-1) solid var(--color-neutral-400);
+    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 {
+    color: var(--color-neutral-800);
+    text-align: left;
+    white-space: nowrap;
+}
+
+.dropin-table__header__cell--sortable {
+    cursor: pointer;
+}
+
+.dropin-table__header__row {
+    border-bottom: var(--shape-border-width-1) solid var(--color-neutral-400);
+}
+
+.dropin-table__header__row th {
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+.dropin-table__body__row:nth-child(even) {
+    background-color: var(--color-neutral-100);
+}
+
+.dropin-table__body__row.dropin-table__body__row--expanded {
+    background-color: var(--color-neutral-200);
+}
+
+.dropin-table__body__cell {
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+.dropin-table__header__sort-button {
+    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) var(--spacing-medium);
+    background-color: var(--color-neutral-200);
+}
+
+.dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+    margin: 0;
+}
+
+.dropin-table__row-details__cell h1,
+.dropin-table__row-details__cell h2,
+.dropin-table__row-details__cell h3,
+.dropin-table__row-details__cell h4,
+.dropin-table__row-details__cell h5,
+.dropin-table__row-details__cell h6 {
+    font: var(--type-body-1-strong-font);
+    letter-spacing: var(--type-body-1-strong-letter-spacing);
+    margin: 0;
+}
+
+.dropin-table__row-details__cell p,
+.dropin-table__row-details__cell span {
+    font: var(--type-body-1-default-font);
+    letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+/* Container query for mobile layout */
+@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__row {
+        padding: var(--spacing-medium);
+        display: block;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell {
+        display: block;
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
+        padding: var(--spacing-xsmall) 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:first-child {
+        padding-top: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell:last-child {
+        padding-bottom: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__body__cell::before {
+        content: attr(data-label);
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
+        display: block;
+        margin-bottom: var(--spacing-xxsmall);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell {
+        display: block;
+        padding: var(--spacing-medium);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell > *:first-child {
+        border-top: var(--shape-border-width-1) solid var(--color-neutral-400);
+        padding-top: var(--spacing-medium);
+        margin-top: calc(var(--spacing-medium) * -1);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details--expanded .dropin-table__row-details__cell > *:last-child {
+        margin: 0;
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h1,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h2,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h3,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h4,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h5,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell h6 {
+        font: var(--type-body-2-strong-font);
+        letter-spacing: var(--type-body-2-strong-letter-spacing);
+    }
+
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell p,
+    .dropin-table--mobile-layout-stacked .dropin-table__row-details__cell span {
+        font: var(--type-body-2-default-font);
+        letter-spacing: var(--type-body-2-default-letter-spacing);
+    }
+}
+
+/* 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) { } */