@sonic-equipment/ui 162.0.0 → 164.0.0

package/dist/styles.css

@@ -259,6 +259,9 @@
       100% no-repeat exclude,
     linear-gradient(0deg, #000, #000);
 }
+:root {
+  scrollbar-gutter: stable;
+}
 
 .address-info-display-module-CbRth {
   font: inherit;
@@ -1464,6 +1467,9 @@
         opacity: 1;
         visibility: visible;
       }
+.input-module-2woJR .input-module-zjVxG input[type='password']::-ms-reveal {
+        display: none;
+      }
 
 .number-field-module-xawWc .number-field-module-A1nvE {
     display: flex;
@@ -1948,7 +1954,7 @@
 }
   }
 
-.list-module-7-DFP {
+.icon-list-module-tWkJY {
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -1957,13 +1963,13 @@
   list-style: none;
 }
 
-.list-module-YMLVY .list-module-wTIOA {
+.icon-list-module-3BzE4 .icon-list-module-9-620 {
     display: block;
     width: 24px;
     height: 24px;
   }
 
-.list-module-YMLVY {
+.icon-list-module-3BzE4 {
 
   display: flex;
   align-items: center;
@@ -2612,7 +2618,7 @@
       aspect-ratio: 1 / 1;
       background-color: var(--color-brand-light-gray);
       content: '';
-      inset: 0;
+      inset: var(--space-2);
     }
 
   @media (width >= 768px) {
@@ -2655,15 +2661,24 @@
   display: flex;
   align-items: center;
   color: var(--color-status-available);
+  font-size: var(--font-size-14);
   gap: var(--space-4);
   grid-column: span 2;
-  line-height: 1.5;
+  line-height: 1.25;
 }
 
   .delivery-time-module-fEWEl p {
     margin: 0;
   }
 
+  .delivery-time-module-fEWEl p a {
+      color: inherit;
+    }
+
+  .delivery-time-module-fEWEl .delivery-time-module-Ta7xm {
+    margin-block-start: -0.1em;
+  }
+
 /* Singular prices */
 .price-module-Qyyas {
   display: inline-grid;
@@ -2988,7 +3003,7 @@
       'image . sku price'
       'image . . price'
       'image . amount price'
-      'image . info price';
+      'image . info info';
     grid-template-columns:
       143px var(--space-8)
       1fr auto
@@ -5715,6 +5730,318 @@ button.swiper-pagination-bullet {
     height: 20px;
   }
 
+.menu-list-module-TloB9 {
+  --ml-font-size: var(--font-size-16);
+  --ml-font-weight: var(--font-weight-normal);
+  --ml-item-minimal-height: 48px;
+  --ml-item-inner-spacing: var(--space-12);
+  --ml-item-outer-spacing: var(--space-16);
+  --ml-icon-size: 16px;
+
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  color: currentcolor;
+  font-size: var(--ml-font-size);
+  grid-template: auto 1fr / 1fr;
+  grid-template-areas:
+    'back-button'
+    'scroll-area';
+}
+
+  /* TODO: scroll area row should stretch to avail height, but also enforce the scroll-area to scroll if overflowing */
+
+  .menu-list-module-TloB9.menu-list-module-xUg6i {
+    --ml-font-size: var(--font-size-18);
+    --ml-font-weight: var(--font-weight-bold);
+    --ml-button-hover-color: var(--color-white);
+    --ml-button-hover-bgcolor: var(--color-brand-red);
+    --ml-link-hover-color: var(--color-white);
+    --ml-link-hover-bgcolor: var(--color-brand-red);
+    --ml-selected-color: var(--color-white);
+    --ml-selected-bgcolor: var(--color-brand-red);
+  }
+
+  /* scroll area */
+
+  .menu-list-module-TloB9 .menu-list-module-x3D-V {
+    grid-area: scroll-area;
+    overflow-y: auto;
+    scrollbar-width: thin;
+  }
+
+  /* list */
+
+  .menu-list-module-TloB9 .menu-list-module-m3rpo {
+    display: grid;
+    padding: 0 0 1px;
+    margin: 0;
+    grid-template-columns: 1fr;
+    list-style: none;
+  }
+
+  .menu-list-module-TloB9 .menu-list-module-m3rpo > * {
+      margin-block: 0 -1px;
+    }
+
+/* menu list back button */
+
+.menu-list-module-eKDL9 {
+  all: unset;
+  display: flex;
+  align-items: center;
+  padding: var(--space-4) var(--ml-item-outer-spacing, var(--space-8));
+  background: var(--color-brand-light-gray);
+  cursor: pointer;
+  gap: var(--space-4);
+  grid-area: back-button;
+  inset-block-start: 0;
+  min-block-size: var(--ml-item-minimal-height, 0);
+}
+
+.menu-list-module-eKDL9:focus-visible {
+    box-shadow: inset var(--shadow-focus-outline);
+  }
+
+.menu-list-module-eKDL9 .menu-list-module-syyw9 {
+    block-size: var(--ml-icon-size);
+    inline-size: var(--ml-icon-size);
+  }
+
+/* menu list title */
+
+.menu-list-module-S08LI {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--space-8) var(--ml-item-outer-spacing, 0);
+  margin: 0 0 -2px;
+  background: var(--color-white);
+  color: var(--color-brand-dark-gray);
+  font-size: var(--text-heading-xxxs-size);
+  font-style: italic;
+  font-weight: var(--font-weight-black);
+  line-height: 1;
+  min-block-size: var(--ml-item-minimal-height, 0);
+  text-wrap: pretty;
+}
+
+.menu-list-module-S08LI [href] {
+    position: static;
+    display: flex;
+    align-items: center;
+    box-shadow: none;
+    color: var(--color-brand-dark-gray);
+  }
+
+.menu-list-module-S08LI [href]:hover {
+      color: var(--color-brand-red);
+    }
+
+.menu-list-module-S08LI [href] .menu-list-module-syyw9 {
+      flex-shrink: 0;
+      block-size: 1ex;
+      inline-size: 1ex;
+      margin-block-start: 0.1em;
+    }
+
+.menu-list-module-S08LI [href]::after {
+      position: absolute;
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
+.menu-list-module-S08LI:has(:focus-visible) {
+    z-index: 1;
+    box-shadow: inset var(--shadow-focus-outline);
+  }
+
+/* menu list item */
+
+.menu-list-module-4QhF4 {
+  --mli-button-hover-color: var(--ml-button-hover-color, currentcolor);
+  --mli-button-hover-bgcolor: var(
+    --ml-button-hover-bgcolor,
+    var(--color-brand-light-gray)
+  );
+  --mli-link-hover-color: var(--ml-link-hover-color, var(--color-brand-red));
+  --mli-link-hover-bgcolor: var(--ml-link-hover-bgcolor, transparent);
+  --mli-selected-color: var(--ml-selected-color, currentcolor);
+  --mli-selected-bgcolor: var(
+    --ml-selected-bgcolor,
+    var(--color-brand-light-gray)
+  );
+  --mli-inner-spacing: var(--ml-item-inner-spacing, var(--space-12));
+  --mli-outer-spacing: var(--ml-item-outer-spacing, var(--space-16));
+  --mli-image-size: 48px;
+  --mli-badge-size: 24px;
+  --mli-icon-size: var(--ml-icon-size, 16px);
+
+  position: relative;
+  z-index: 0;
+  display: grid;
+  align-items: center;
+  padding: var(--space-8) 0;
+  margin: 0;
+  grid-template:
+    minmax(var(--ml-item-minimal-height, 48px), min-content) / var(
+      --mli-outer-spacing
+    )
+    minmax(0, min-content) 1fr var(--mli-outer-spacing);
+  grid-template-areas: '. imagebadge label .';
+
+  /* children icon */
+}
+
+/* separator lines */
+
+.menu-list-module-4QhF4::before,
+  .menu-list-module-4QhF4::after {
+    position: absolute;
+    z-index: -2;
+    background: var(--color-brand-light-gray);
+    block-size: 1px;
+    content: '';
+    inset-inline: var(--mli-outer-spacing);
+  }
+
+.menu-list-module-4QhF4::before {
+    inset-block: 0 auto;
+  }
+
+.menu-list-module-4QhF4::after {
+    inset-block: auto 0;
+  }
+
+/* text label */
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo {
+    position: static;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+    color: currentcolor;
+    cursor: pointer;
+    font: inherit;
+    font-weight: var(--ml-font-weight, normal);
+    grid-area: label;
+    line-height: 1;
+    text-align: left;
+  }
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo::before {
+      position: absolute;
+      z-index: -1;
+      background: inherit;
+      content: '';
+      inset: 0;
+    }
+
+.menu-list-module-4QhF4 .menu-list-module-xFYyo::after {
+      position: absolute;
+      background: transparent;
+      content: '';
+      inset: 0;
+    }
+
+/* image */
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn {
+    position: relative;
+    z-index: 0;
+    aspect-ratio: 1;
+    grid-area: imagebadge;
+    inline-size: var(--mli-image-size);
+    margin-inline-end: var(--mli-inner-spacing);
+  }
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn [class*='image'] {
+      mix-blend-mode: multiply;
+    }
+
+.menu-list-module-4QhF4 .menu-list-module-ELekn::after {
+      position: absolute;
+      z-index: -1;
+      border-radius: 100%;
+      background-color: rgb(0 0 0 / 7%);
+      content: '';
+      inset: 2px;
+    }
+
+/* badge */
+
+.menu-list-module-4QhF4 .menu-list-module-4PbP- {
+    display: grid;
+    grid-area: imagebadge;
+    inline-size: var(--mli-badge-size);
+    margin-inline-end: var(--mli-inner-spacing);
+  }
+
+/* stylelint-disable-next-line no-descending-specificity */
+
+.menu-list-module-4QhF4 .menu-list-module-syyw9 {
+    aspect-ratio: 1;
+    block-size: var(--mli-icon-size);
+    grid-area: icon;
+    inline-size: var(--mli-icon-size);
+    justify-self: center;
+  }
+
+/* focus */
+
+.menu-list-module-4QhF4:has(:focus-visible) {
+    z-index: 2;
+  }
+
+.menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
+      box-shadow: inset var(--shadow-focus-outline);
+    }
+
+/* selected state */
+
+.menu-list-module-4QhF4.menu-list-module-hiMca {
+    z-index: 1;
+    color: var(--mli-selected-color);
+  }
+
+.menu-list-module-4QhF4.menu-list-module-hiMca .menu-list-module-xFYyo::before {
+      background: var(--mli-selected-bgcolor);
+    }
+
+/* no children */
+
+.menu-list-module-4QhF4:not(.menu-list-module-61uJb, .menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) {
+    z-index: 2;
+    color: var(--mli-link-hover-color);
+  }
+
+.menu-list-module-4QhF4:not(.menu-list-module-61uJb, .menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) .menu-list-module-xFYyo::before {
+      background: var(--mli-link-hover-bgcolor);
+    }
+
+/* has children */
+
+.menu-list-module-4QhF4.menu-list-module-61uJb {
+    grid-template-areas: '. imagebadge label icon';
+    grid-template-columns:
+      var(--mli-outer-spacing) minmax(0, min-content)
+      1fr calc(
+        var(--mli-inner-spacing) + var(--mli-icon-size) +
+          var(--mli-inner-spacing)
+      );
+  }
+
+.menu-list-module-4QhF4.menu-list-module-61uJb:not(.menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) {
+      z-index: 2;
+      color: var(--mli-button-hover-color);
+    }
+
+.menu-list-module-4QhF4.menu-list-module-61uJb:not(.menu-list-module-hiMca):has(.menu-list-module-xFYyo:hover) .menu-list-module-xFYyo::before {
+        background: var(--mli-button-hover-bgcolor);
+      }
+
 .orderline-list-module-v-FqO {
   container-type: inline-size;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonic-equipment/ui",
-  "version": "162.0.0",
+  "version": "164.0.0",
   "type": "module",
   "license": "MIT",
   "engines": {

package/dist/lists/ul/list.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from 'react';
-export interface ListProps {
-    children: ReactNode;
-}
-export declare function List({ children }: ListProps): import("react/jsx-runtime").JSX.Element;
-export interface ListItemProps {
-    icon?: ReactNode;
-    text: ReactNode;
-}
-export declare function ListItem({ icon, text }: ListItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/lists/ul/list.js

@@ -1,11 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import styles from './list.module.css.js';
-
-function List({ children }) {
-    return jsx("ul", { className: styles.list, children: children });
-}
-function ListItem({ icon, text }) {
-    return (jsxs("li", { className: styles['list-item'], children: [icon && jsx("span", { className: styles.icon, children: icon }), text] }));
-}
-
-export { List, ListItem };

package/dist/lists/ul/list.module.css.js

@@ -1,3 +0,0 @@
-var styles = {"list":"list-module-7-DFP","list-item":"list-module-YMLVY","icon":"list-module-wTIOA"};
-
-export { styles as default };

package/dist/shared/utils/date.test.d.ts

@@ -1 +0,0 @@
-export {};