@wix/web5-core 1.57.2 → 1.58.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wix/web5-core",
   "license": "MIT",
-  "version": "1.57.2",
+  "version": "1.58.0",
   "author": {
     "name": "tsachis",
     "email": "tsachis@wix.com"
@@ -100,5 +100,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "c19ba30cc8400a60ff3be572992049864c8af86efeeeea72c0f4341c"
+  "falconPackageHash": "13170d1c2ae66823381f08daccc041ed2f0aeb0065eaea2486efa25d"
 }

package/src/components/ui/SearchSection.css

@@ -152,15 +152,20 @@
   flex-direction: column-reverse;
 }
 
+/* Chips stack vertically above the pill, left-aligned to it, and share the
+   pill's width so the two edges line up as it expands on focus. */
 .web5-prompt-shell__chips {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  justify-content: flex-start;
   gap: var(--pi-chip-gap);
   margin: 0 auto;
   width: 100%;
-  max-width: 835px;
+  max-width: var(--pi-content-max-w);
   overflow: hidden;
+  /* `max-width` omitted for the same reason as `.web5-prompt-search__inner`. */
   transition: transform var(--pi-transition-medium),
     opacity var(--pi-transition-medium), max-height var(--pi-transition-medium);
   pointer-events: auto;
@@ -169,10 +174,45 @@
 .web5-prompt-shell__chips--visible {
   transform: translateY(0);
   opacity: 1;
-  max-height: 8rem;
+  max-height: 260px;
   overflow: visible;
 }
 
+/* Each chip rises into place, the one nearest the pill first. */
+@keyframes web5-prompt-chip-float-up {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.web5-prompt-shell__chips--visible .web5-prompt-chip {
+  animation: web5-prompt-chip-float-up 400ms cubic-bezier(0.22, 0.61, 0.36, 1)
+    both;
+}
+
+.web5-prompt-shell__chips--visible .web5-prompt-chip:nth-child(1) {
+  animation-delay: 400ms;
+}
+
+.web5-prompt-shell__chips--visible .web5-prompt-chip:nth-child(2) {
+  animation-delay: 300ms;
+}
+
+.web5-prompt-shell__chips--visible .web5-prompt-chip:nth-child(n + 3) {
+  animation-delay: 200ms;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .web5-prompt-shell__chips--visible .web5-prompt-chip {
+    animation: none;
+  }
+}
+
 .web5-prompt-shell__chips--hidden {
   transform: translateY(1rem);
   opacity: 0;
@@ -189,6 +229,7 @@
   border: 1px solid var(--pi-chip-border, transparent);
   border-radius: var(--pi-chip-radius);
   background: var(--pi-chip-bg);
+  backdrop-filter: blur(var(--pi-chip-blur));
   box-shadow: var(--pi-chip-shadow);
   color: var(--pi-chip-text);
   font-family: var(--pi-field-font-family);
@@ -209,7 +250,7 @@
 /* Inset ring so the focus indicator isn't clipped by the chips container's overflow: hidden */
 .web5-prompt-chip:focus-visible {
   outline: none;
-  box-shadow: inset 0 0 0 2px rgba(128, 0, 177, 0.8), var(--pi-chip-shadow);
+  box-shadow: inset 0 0 0 2px var(--pi-chip-focus-ring), var(--pi-chip-shadow);
 }
 
 .web5-prompt-search {
@@ -220,12 +261,26 @@
 
 .web5-prompt-search__inner {
   position: relative;
-  width: min(100%, var(--pi-content-max-w));
+  /* `width: 100%` + a plain-length `max-width`, not `width: min(100%, …)`:
+     Chrome cannot interpolate between two min() values, which would freeze the
+     focus transition below at 0 progress. */
+  width: 100%;
+  max-width: var(--pi-content-max-w);
   min-width: min(100%, var(--pi-content-min-w));
   margin-inline: auto;
+  /* `max-width` is deliberately NOT transitioned: with a transition declared on
+     it, Chrome never runs the swap and the pill stays pinned at the idle width
+     (verified against the seed widget, which shares this rule shape). The widen
+     is therefore instant rather than the mock's 250ms ease. */
   pointer-events: auto;
 }
 
+/* Focus widens the pill (and the chip column above it) from the idle width. */
+.web5-prompt-shell--focused .web5-prompt-search__inner,
+.web5-prompt-shell--focused .web5-prompt-shell__chips {
+  max-width: var(--pi-content-max-w-focused);
+}
+
 .web5-prompt-field-wrap {
   position: relative;
   display: flex;
@@ -243,6 +298,7 @@
   border: var(--pi-field-border-width) solid var(--pi-field-border);
   border-radius: var(--pi-field-radius-pill);
   background: var(--pi-field-bg);
+  backdrop-filter: blur(var(--pi-field-blur));
   box-shadow: var(--pi-field-shadow);
   transition: min-height var(--pi-transition-medium),
     border-radius var(--pi-transition-medium),
@@ -264,7 +320,8 @@
   min-width: 0;
   min-height: var(--pi-field-line-height);
   max-height: calc(var(--pi-field-max-h) - var(--pi-field-line-height));
-  padding: 0 56px 0 0;
+  /* Clear the absolutely-positioned submit button. */
+  padding: 0 calc(var(--pi-submit-size) + 8px) 0 0;
   border: 0;
   outline: none;
   background: transparent;
@@ -481,12 +538,12 @@
     font-size: max(16px, var(--pi-field-font-size));
   }
 
+  /* Keeps the chip fill: `--pi-chip-text` is light, so a transparent chip on
+     the white mobile panel would be unreadable. */
   .web5-prompt-chip {
     width: 100%;
     justify-content: flex-start;
     padding: 10px 18px;
-    background: transparent;
-    box-shadow: none;
     font-size: 16px;
     line-height: 20px;
     white-space: normal;

package/src/styles/prompt-input-tokens.css

@@ -56,53 +56,60 @@
   );
   --pi-home-entry-panel-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   --pi-home-entry-panel-blur: 20px;
-  --pi-content-max-w: 651px;
+  /* Idle pill width; widens to `--pi-content-max-w-focused` while the field
+     (or a chip) holds focus. */
+  --pi-content-max-w: 320px;
+  --pi-content-max-w-focused: 550px;
   --pi-content-min-w: 250px;
   --pi-stack-gap: 15px;
-  --pi-chip-gap: 10px;
+  --pi-chip-gap: 6px;
   --pi-chip-mobile-gap: 0;
   --pi-chip-mobile-overflow-y: scroll;
-  --pi-field-min-h: 56px;
-  --pi-field-max-h: 227px;
-  --pi-field-border-width: 1px;
+  --pi-field-min-h: 48px;
+  --pi-field-max-h: 200px;
+  --pi-field-border-width: 0;
   --pi-home-entry-field-radius: 10px;
-  --pi-field-radius-pill: 80px;
-  --pi-field-radius-multiline: 25px;
-  --pi-field-border: #8000b1;
-  --pi-field-bg: #ffffff;
-  --pi-field-padding-top: 12px;
-  --pi-field-padding-right: 12px;
-  --pi-field-padding-bottom: 12px;
-  --pi-field-padding-left: 24px;
-  --pi-field-padding-top-multiline: 20px;
+  --pi-field-radius-pill: 24px;
+  --pi-field-radius-multiline: 24px;
+  --pi-field-border: transparent;
+  --pi-field-bg: rgba(255, 255, 255, 0.9);
+  /* Frosted pill: the host page shows through the translucent `--pi-field-bg`. */
+  --pi-field-blur: 10px;
+  --pi-field-padding-top: 13px;
+  --pi-field-padding-right: 10px;
+  --pi-field-padding-bottom: 13px;
+  --pi-field-padding-left: 26px;
+  --pi-field-padding-top-multiline: 16px;
   --pi-field-text: #2b2b2b;
-  --pi-field-placeholder: #52575b;
+  --pi-field-placeholder: #6c6f74;
   --pi-field-caret: #2b2b2b;
   --pi-field-font-family: Poppins, ui-sans-serif, sans-serif, system-ui;
-  --pi-field-font-size: 15px;
-  --pi-field-line-height: 32px;
-  --pi-field-line-height-multiline: 24px;
-  --pi-field-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
-    0 2px 4px -2px rgba(0, 0, 0, 0.1);
-  --pi-chip-padding-y: 10px;
-  --pi-chip-padding-x: 18px;
-  --pi-chip-radius: 5px;
+  --pi-field-font-size: 14px;
+  --pi-field-line-height: 21px;
+  --pi-field-line-height-multiline: 21px;
+  --pi-field-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.05),
+    0 1px 3px 0 rgba(9, 14, 21, 0.2), 0 6px 14px 0 rgba(0, 0, 0, 0.24);
+  --pi-chip-padding-y: 8px;
+  --pi-chip-padding-x: 16px;
+  --pi-chip-radius: 20px;
   --pi-chip-border: transparent;
-  --pi-chip-bg: #ffffff;
-  --pi-chip-text: #2b2b2b;
+  --pi-chip-bg: rgba(42, 42, 42, 0.5);
+  --pi-chip-text: #ffffff;
+  --pi-chip-blur: 100px;
   --pi-chip-font-size: 14px;
-  --pi-chip-line-height: 14px;
-  --pi-chip-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.1),
-    0 2px 4px 0 rgba(0, 0, 0, 0.1);
-  --pi-chip-hover-bg: #f6f6f6;
+  --pi-chip-line-height: 20px;
+  --pi-chip-shadow: 0 1px 2px 0 rgba(9, 14, 21, 0.2);
+  --pi-chip-hover-bg: rgba(42, 42, 42, 0.58);
   --pi-chip-hover-transform: translateY(-1px);
-  --pi-submit-size: 34px;
-  --pi-submit-radius: 80px;
-  --pi-submit-bg: #e5e5e5;
-  --pi-submit-fg: #909090;
+  /* Chips sit on a dark translucent fill — the ring has to read light. */
+  --pi-chip-focus-ring: rgba(255, 255, 255, 0.9);
+  --pi-submit-size: 32px;
+  --pi-submit-radius: 999px;
+  --pi-submit-bg: rgba(43, 43, 43, 0.1);
+  --pi-submit-fg: #6c6f74;
   --pi-submit-active-bg: #2b2b2b;
   --pi-submit-active-fg: #ffffff;
-  --pi-submit-bottom: 12px;
+  --pi-submit-bottom: 8px;
   --pi-submit-icon-size: 16px;
   --pi-collapsed-btn-min-h: 48px;
   --pi-collapsed-btn-padding-y: 12px;