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

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/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,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) { } */