@wix/web5-core 1.56.0 → 1.56.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wix/web5-core",
   "license": "MIT",
-  "version": "1.56.0",
+  "version": "1.56.1",
   "author": {
     "name": "tsachis",
     "email": "tsachis@wix.com"
@@ -14,7 +14,8 @@
     "dist/cjs",
     "dist/esm",
     "dist/types",
-    "src/styles"
+    "src/styles",
+    "src/components/**/*.css"
   ],
   "scripts": {
     "build": "yoshi-library build && node scripts/fix-esm-extensions.js",
@@ -99,5 +100,5 @@
   "wallaby": {
     "autoDetect": true
   },
-  "falconPackageHash": "85aa415503e1949c89b77d043271b71ca3bd64f50d7027e8d8b1e0c8"
+  "falconPackageHash": "ddcfd2461f54a7f6bce7c9799d570b3aa2f85da1923cca6e4afb6bb4"
 }

package/src/components/placement/PlacementResponseRenderer.css

@@ -0,0 +1,269 @@
+/* PlacementResponseRenderer — placement card chrome (DL #097 —
+   Figma 128:5251 framing / 128:5258 conversation).
+   Renders the streamed answer as a warm card with a FormAI eyebrow and a
+   gradient highlight ring (accent → transparent, top-left → bottom-right)
+   that holds while the answer streams, spins twice once it settles, and then
+   stays put. The conversation variant additionally shows the user's question
+   as a chip.
+   Re-skin via the `--w5-placement-*` tokens below.
+   The loading skeleton's styles live in `../ui/PlacementLoader.css`. */
+
+/* Outer host-page spacing — matches the loader's `--w5-placement-spacing` so
+   the gap to surrounding content doesn't change at swap time. */
+[data-w5-placement-renderer] {
+  margin-block: var(--w5-placement-spacing, 24px);
+}
+
+/* The loader→content swap is height-animated by the PlacementSmoothHeight
+   wrapper (`.w5-placement__body` below); this fade-in covers the paint swap
+   itself so the card doesn't pop in while the height glides. Plays once per
+   renderer mount (so again after each re-submit). */
+[data-w5-placement-renderer] {
+  animation: w5-placement-content-in 240ms ease-out both;
+}
+
+@keyframes w5-placement-content-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+[data-w5-placement-renderer].w5-placement {
+  box-sizing: border-box;
+  padding: var(--w5-placement-card-padding, 30px);
+  border-radius: var(--w5-placement-card-radius, 4px);
+  background: var(--w5-placement-card-bg, #f1f0ee);
+  /* Section components inside the answer use `bg-background`
+     (= var(--color-background), white), which would paint a white block over
+     the card. Re-point that token within the placement so those sections
+     inherit the card colour instead — one shared background across the whole
+     placement. Change --w5-placement-card-bg to re-theme card + sections. */
+  --color-background: var(--w5-placement-card-bg, #f1f0ee);
+  /* Reserve the border box so the conversation highlight ring (the
+     `::before` gradient below) doesn't shift layout when it fades in/out. */
+  border: 2px solid transparent;
+}
+
+/* Height smoothing for the whole placement slot: PlacementSmoothHeight
+   (mounted around the loader/content swap in embed-placement) measures the
+   current child (ResizeObserver) and sets an explicit `height` here, so the
+   loader→content swap and each streamed section appending animate instead
+   of snapping. Until the first measurement lands there's no inline height
+   and the box sizes naturally. */
+.w5-placement__body {
+  overflow: clip;
+  transition: height var(--w5-placement-grow-duration, 350ms) ease-out;
+}
+
+/* flow-root so children's top/bottom margins can't collapse out of the
+   measured inner box (they'd be clipped by the wrapper otherwise). */
+.w5-placement__body-inner {
+  display: flow-root;
+}
+
+/* Height clamp + "Show more" (DL #113) — Google-AI-Overview style. Opt-in via
+   the slot's `data-clamp` attribute; the renderer adds `--clamped` to the card
+   ROOT and caps it directly (no inner wrapper), so the answer sections stay
+   direct children of the placement root — clients lay them out with
+   `:has(> …)` direct-child grids (feature-com's search-overview two-column
+   layout) that a wrapper would break. The cap is also what
+   `PlacementSmoothHeight` then measures, so the slot animates to the capped
+   height rather than the full content. */
+.w5-placement--clamped {
+  position: relative;
+  max-height: var(--w5-placement-clamp-height, 220px);
+  overflow: hidden;
+}
+
+/* The variant highlight ring is a `::before` at `inset: -2px` (outside the
+   padding box) — `overflow: hidden` above would clip it to a stub. Drop it on
+   clamped cards; the clamp + fade is its own treatment. */
+.w5-placement--clamped::before {
+  content: none;
+}
+
+/* Fade the cut-off bottom edge to the card background (a wash, like Google —
+   not a mask that makes text vanish). Rendered only when the content overflows
+   (the renderer omits it otherwise), pinned to the bottom of the capped root. */
+.w5-placement__fade {
+  position: absolute;
+  inset-inline: 0;
+  bottom: 0;
+  height: var(--w5-placement-fade-height, 96px);
+  background: linear-gradient(
+    to bottom,
+    transparent,
+    var(--w5-placement-card-bg, #f1f0ee)
+  );
+  pointer-events: none;
+}
+
+/* "Show more" pill, pinned over the fade. Re-skins via the shared
+   `--w5-placement-*` tokens. */
+.w5-placement__show-more {
+  position: absolute;
+  bottom: 14px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 18px;
+  border-radius: 999px;
+  border: 1px solid var(--w5-placement-show-more-border, #d8d5cf);
+  background: var(--w5-placement-show-more-bg, #fff);
+  color: var(--w5-placement-show-more-color, #000);
+  font-size: 14px;
+  line-height: 15px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.w5-placement__show-more:hover {
+  background: var(--w5-placement-show-more-bg-hover, #f6f5f3);
+}
+
+.w5-placement__show-more:focus-visible {
+  outline: 2px solid var(--w5-placement-accent, #ef1b28);
+  outline-offset: 2px;
+}
+
+.w5-placement__show-more-icon {
+  flex: none;
+}
+
+.w5-placement__eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.w5-placement__eyebrow-icon {
+  flex: none;
+  color: var(--w5-placement-accent, #ef1b28);
+}
+
+.w5-placement__eyebrow-label {
+  font-size: 14px;
+  line-height: 15px;
+  font-weight: 500;
+  color: var(--w5-placement-eyebrow-color, #000);
+}
+
+/* The user's question (conversation variant). */
+.w5-placement__query {
+  display: inline-block;
+  margin: 0 0 20px;
+  padding: 7px 10px;
+  border-radius: 3px;
+  background: var(--w5-placement-query-bg, #e2dfd9);
+  font-size: 14px;
+  line-height: 15px;
+  color: var(--w5-placement-query-color, #000);
+}
+
+/* Placement highlight (conversation + informational): a gradient ring — fully
+   opaque accent at the top-left corner fading to transparent toward the
+   bottom-right. A solid `border-color` can't render a gradient, so the ring
+   is a masked pseudo-element: the gradient paints the whole box, and the
+   mask punches out the padding box so only the 2px border area remains.
+   The ring shows as soon as the placement starts to render, holds for the
+   whole streamed render (the `--streaming` modifier below); once the answer
+   settles the modifier drops and the animation plays — the gradient spins
+   two full counter-clockwise turns, then the ring stays in place. Replays
+   after each re-submit since the renderer remounts via the loader. */
+.w5-placement--conversation,
+.w5-placement--informational {
+  position: relative;
+}
+
+/* Registered so the gradient angle interpolates in the keyframes below.
+   Browsers without `@property` (Firefox < 128) apply custom-property
+   keyframes discretely — harmless here, since -585deg ≡ 135deg (mod 360°)
+   the jump is invisible and only the hold + fade-out remains. */
+@property --w5-placement-highlight-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 135deg;
+}
+
+.w5-placement--conversation::before,
+.w5-placement--informational::before {
+  content: '';
+  position: absolute;
+  /* Cover the reserved 2px transparent border (absolute positioning is
+     relative to the padding box, which excludes it). */
+  inset: -2px;
+  padding: 2px;
+  /* Outer radius of the card's border box: card radius + border width. */
+  border-radius: calc(var(--w5-placement-card-radius, 4px) + 2px);
+  background: linear-gradient(
+    var(--w5-placement-highlight-angle, 135deg),
+    var(--w5-placement-accent, #ef1b28),
+    transparent
+  );
+  /* Keep only the ring: padding-box ⊖ full box. */
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  /* ~9.4s default for the 2.5 counter-clockwise turns (same angular speed as
+     the original 2 turns in 7.5s); the ring then holds its final state
+     (`both` fill mode) and stays visible. */
+  animation: w5-placement-highlight
+    var(--w5-placement-highlight-duration, 9375ms) linear both;
+}
+
+/* Still streaming: hold the ring fully visible; the spin only starts
+   when this class is removed (answer settled) and the animation kicks in. */
+.w5-placement--conversation.w5-placement--streaming::before,
+.w5-placement--informational.w5-placement--streaming::before {
+  animation: none;
+  opacity: 1;
+}
+
+@keyframes w5-placement-highlight {
+  /* Two and a half counter-clockwise turns (135° → -765° ≡ 315°) at constant
+     speed, so the accent settles on the opposite side (bottom-right); the
+     ring stays fully visible throughout and after. */
+  0% {
+    --w5-placement-highlight-angle: 135deg;
+    opacity: 1;
+  }
+  100% {
+    --w5-placement-highlight-angle: -765deg;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* No spin — show the ring statically in its settled position
+     (accent at the bottom-right). */
+  .w5-placement--conversation::before,
+  .w5-placement--informational::before,
+  .w5-placement--conversation.w5-placement--streaming::before,
+  .w5-placement--informational.w5-placement--streaming::before {
+    animation: none;
+    opacity: 1;
+    --w5-placement-highlight-angle: 315deg;
+  }
+
+  .w5-placement__body {
+    transition: none;
+  }
+
+  [data-w5-placement-renderer] {
+    animation: none;
+  }
+}

package/src/components/ui/Disclaimer.css

@@ -0,0 +1,35 @@
+/* "AI can make mistakes. Learn more" footer. Mounted by the host app
+   alongside the FeedbackBar; clients can override the whole component via
+   the DisclaimerComponent UI slot.
+
+   Typography defaults mirror `.web5-feedback-bar` so a single client-side
+   override (`--web5-feedback-bar-color`) re-skins both together. The
+   disclaimer-specific vars stay as escape hatches when divergence is
+   needed. */
+
+.web5-disclaimer {
+  margin: 0;
+  font-size: var(
+    --web5-disclaimer-font-size,
+    var(--web5-feedback-bar-font-size, 13px)
+  );
+  font-weight: 400;
+  line-height: normal;
+  color: var(
+    --web5-disclaimer-color,
+    var(--web5-feedback-bar-color, var(--web5-feedback-label-color, #6b7280))
+  );
+  text-align: var(--web5-disclaimer-text-align, left);
+}
+
+.web5-disclaimer__link {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  cursor: pointer;
+}
+
+.web5-disclaimer__link:hover,
+.web5-disclaimer__link:focus-visible {
+  color: var(--web5-disclaimer-link-hover-color, inherit);
+}

package/src/components/ui/FeedbackBar.css

@@ -0,0 +1,267 @@
+/* "Was this helpful?" bar + popover. Mounted by the host app inside the
+   sections container; clients can override the whole component via the
+   FeedbackBarComponent UI slot. */
+
+.web5-feedback-bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 12px;
+  width: fit-content;
+  /* Negative top margin pulls the bar up into the previous section's bottom
+     padding so it visually sits inside that section's color band (matches
+     Figma — bar at the bottom of the NextSteps purple gradient) without
+     changing its DOM position. Tune via --web5-feedback-margin-top. */
+  margin: var(--web5-feedback-margin-top, -4rem) 0
+    var(--web5-feedback-margin-bottom, 1.5rem) 0;
+  font-size: var(--web5-feedback-bar-font-size, 13px);
+  font-weight: 400;
+  line-height: normal;
+  /* Bar-scoped label color falls back to the shared muted color so popover
+     elements (title-hint, close button) stay readable on white when Circana
+     re-skins the bar text to light. */
+  color: var(
+    --web5-feedback-bar-color,
+    var(--web5-feedback-label-color, #6b7280)
+  );
+}
+
+.web5-feedback-label {
+  margin: 0;
+}
+
+.web5-feedback-thumb {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 0;
+  background: transparent;
+  color: var(--web5-feedback-thumb-color, #2b2b2b);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+/* Hover tooltip — pill above the thumb. Scoped to bar thumbs only; the
+   popover header thumbs are sentiment switchers and don't need tooltips. */
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 16px;
+  background: var(--web5-feedback-tooltip-bg, #1f1f1f);
+  color: var(--web5-feedback-tooltip-color, #fff);
+  border-radius: 999px;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.12s;
+  z-index: 50;
+}
+
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]:hover::after,
+.web5-feedback-bar .web5-feedback-thumb[data-tooltip]:focus-visible::after {
+  opacity: 1;
+}
+
+.web5-feedback-thumb:hover {
+  background: var(--web5-feedback-thumb-hover-bg, rgba(0, 0, 0, 0.06));
+}
+
+.web5-feedback-thumb--active {
+  background: var(--web5-feedback-accent, #1a1422);
+  color: #fff;
+}
+
+.web5-feedback-thumb--active:hover {
+  background: var(--web5-feedback-accent-hover, #2a2236);
+}
+
+/* Bar-only overrides — the bar may sit on a colored band (e.g. NextSteps'
+   purple gradient) and need light icons/hover, while the popover thumbs
+   always sit on white and stay dark. Selector path stops at the bar's own
+   thumbs-row to avoid leaking into the popover header thumbs. */
+.web5-feedback-bar > .web5-feedback-thumbs-row > .web5-feedback-thumb {
+  color: var(
+    --web5-feedback-bar-thumb-color,
+    var(--web5-feedback-thumb-color, #2b2b2b)
+  );
+}
+
+.web5-feedback-bar > .web5-feedback-thumbs-row > .web5-feedback-thumb:hover {
+  background: var(
+    --web5-feedback-bar-thumb-hover-bg,
+    var(--web5-feedback-thumb-hover-bg, rgba(0, 0, 0, 0.06))
+  );
+}
+
+/* Dim the rest of the page while the popover is open. */
+.web5-feedback-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 65;
+  animation: web5-feedback-backdrop-in 0.18s ease both;
+}
+
+@keyframes web5-feedback-backdrop-in {
+  from {
+    opacity: 0;
+  }
+}
+
+/* Centered on the viewport rather than anchored to the bar — so the form
+   reads as a focused modal regardless of where the bar sits on the page. */
+.web5-feedback-popover {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(574px, 92vw);
+  z-index: 70;
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 14px;
+  padding: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  box-shadow: 0 24px 48px -12px rgba(20, 14, 32, 0.25),
+    0 8px 16px -8px rgba(20, 14, 32, 0.12);
+  animation: web5-feedback-pop-in 0.18s ease both;
+}
+
+@keyframes web5-feedback-pop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, calc(-50% + 8px));
+  }
+}
+
+.web5-feedback-head {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.web5-feedback-thumbs-row {
+  display: flex;
+  gap: 0;
+}
+
+.web5-feedback-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--web5-feedback-title-color, #2b2b2b);
+}
+
+.web5-feedback-title-hint {
+  font-weight: 400;
+  color: var(--web5-feedback-label-color, #6b7280);
+}
+
+.web5-feedback-close {
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: 0;
+  background: transparent;
+  color: var(--web5-feedback-label-color, #6b7280);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web5-feedback-close:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: var(--web5-feedback-title-color, #2b2b2b);
+}
+
+.web5-feedback-chips {
+  display: flex;
+  gap: 13px;
+  flex-wrap: wrap;
+}
+
+.web5-feedback-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 8px 15px;
+  height: 30px;
+  border-radius: 999px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #fff;
+  color: var(--web5-feedback-chip-color, #2b2b2b);
+  font-size: 13px;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    border-color 0.12s,
+    color 0.12s;
+}
+
+/* Hover: neutral fill, default border — no accent tint. */
+.web5-feedback-chip:hover {
+  background: var(--web5-feedback-chip-hover-bg, rgba(0, 0, 0, 0.04));
+}
+
+/* Selected: accent-colored border, subtle fill, default text color
+   (matches Figma — the chip label stays dark, only the outline changes). */
+.web5-feedback-chip.web5-feedback-chip--selected,
+.web5-feedback-chip.web5-feedback-chip--selected:hover {
+  background: var(--web5-feedback-chip-selected-bg, rgba(0, 0, 0, 0.04));
+  border-color: var(--web5-feedback-accent, #1a1422);
+}
+
+.web5-feedback-textarea {
+  width: 100%;
+  min-height: 100px;
+  padding: 15px;
+  border-radius: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: #fff;
+  font: 14px/1.4 inherit;
+  color: var(--web5-feedback-title-color, #2b2b2b);
+  resize: vertical;
+}
+
+.web5-feedback-textarea::placeholder {
+  color: var(--web5-feedback-placeholder-color, #7a838a);
+}
+
+.web5-feedback-submit {
+  width: 100%;
+  height: 38px;
+  border-radius: 999px;
+  border: 0;
+  background: var(--web5-feedback-accent, #1a1422);
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+.web5-feedback-submit:hover {
+  background: var(--web5-feedback-accent-hover, #2a2236);
+}
+
+.web5-feedback-submit:disabled {
+  background: var(--web5-feedback-accent-disabled, rgba(26, 20, 34, 0.45));
+  cursor: not-allowed;
+}

package/src/components/ui/PlacementLoader.css

@@ -0,0 +1,101 @@
+/* PlacementLoader — placement loading skeleton.
+   Rendered before the streamed response arrives. Client packages can re-skin
+   via the `--w5-placement-loader-*` tokens below without touching the markup.
+   Defaults mirror the canonical wireframe: a soft-bordered rounded container
+   with two stub text lines and a larger content block, all using a very
+   light accent-tinted skeleton wash.
+   The rendered placement's card chrome lives in
+   `../placement/PlacementResponseRenderer.css`. */
+
+/* Wrapper around the loader. Drives the entrance animation: the slot starts
+   empty, the wrapper expands from a 0-height grid row to its natural row,
+   smoothly pushing surrounding host content down instead of popping in. The
+   margin-block on either side gives breathing room from neighbouring blocks
+   on the host page and animates in alongside the height for a coherent
+   reveal. Clients can re-skin the spacing via `--w5-placement-spacing`.
+   The loader→content swap itself is height-animated by the
+   PlacementSmoothHeight wrapper (see `../placement/PlacementResponseRenderer.css`). */
+.w5-placement--loading {
+  display: grid;
+  grid-template-rows: 1fr;
+  margin-block: var(--w5-placement-spacing, 24px);
+  animation: w5-placement-loader-reveal 420ms ease-out both;
+}
+
+.w5-placement--loading > * {
+  min-height: 0;
+  overflow: hidden;
+}
+
+@keyframes w5-placement-loader-reveal {
+  from {
+    grid-template-rows: 0fr;
+    margin-block: 0;
+    opacity: 0;
+  }
+  to {
+    grid-template-rows: 1fr;
+    margin-block: var(--w5-placement-spacing, 24px);
+    opacity: 1;
+  }
+}
+
+.w5-placement-loader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w5-placement-loader-gap, 24px);
+  padding: var(--w5-placement-loader-padding, 20px 24px);
+  border: var(--w5-placement-loader-border, 1px solid rgb(226 232 240));
+  border-radius: var(--w5-placement-loader-radius, 12px);
+  background: var(--w5-placement-loader-bg, #fff);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.w5-placement-loader__lines {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w5-placement-loader-line-gap, 10px);
+}
+
+.w5-placement-loader__line,
+.w5-placement-loader__block {
+  display: block;
+  /* Very light tint of the placement accent (oklch(0.6 0.24 26.24)) —
+     same hue, lightness raised and chroma dropped for a skeleton wash. */
+  background: var(--w5-placement-loader-skeleton, oklch(0.95 0.04 26.24));
+  border-radius: var(--w5-placement-loader-skeleton-radius, 6px);
+  animation: w5-placement-loader-pulse 1.4s ease-in-out infinite;
+}
+
+.w5-placement-loader__line {
+  height: var(--w5-placement-loader-line-height, 14px);
+  width: 100%;
+}
+
+.w5-placement-loader__line--short {
+  width: var(--w5-placement-loader-line-short-width, 70%);
+}
+
+.w5-placement-loader__block {
+  height: var(--w5-placement-loader-block-height, 120px);
+  width: 100%;
+}
+
+@keyframes w5-placement-loader-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.55;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .w5-placement--loading,
+  .w5-placement-loader__line,
+  .w5-placement-loader__block {
+    animation: none;
+  }
+}