@wix/web5-core 1.56.0 → 1.57.0

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;
+  }
+}

package/src/components/ui/PromptEntryEmptyState.css

@@ -0,0 +1,172 @@
+.web5-empty-state {
+  width: 100%;
+  /* Subtract the host's fixed top-nav height (measured into this var by
+     inject-host-nav-offset.ts) so the centered empty state fills exactly the
+     space below the nav instead of a full viewport — which would overflow by
+     the nav height and add unnecessary vertical scroll. Falls back to 0px
+     (full 100dvh) when embedded without a pinned host nav. */
+  min-height: calc(100dvh - var(--web5-window-scroll-top-offset, 0px));
+  padding:
+    clamp(1.5rem, 4vw, 3rem)
+    clamp(1.5rem, 4vw, 3rem)
+    clamp(2rem, 5vw, 3rem);
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+}
+
+/* Decorative full-bleed layer behind the content (e.g. a hero image). */
+.web5-empty-state__bg {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.web5-empty-state__inner {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
+
+/* ── Hero (left-aligned) variant ── */
+.web5-empty-state--start .web5-empty-state__inner {
+  justify-content: flex-start;
+}
+
+.web5-empty-state--start .web5-empty-state__content {
+  align-items: flex-start;
+  text-align: left;
+  width: min(100%, var(--pi-empty-start-max-w, 38rem));
+}
+
+.web5-empty-state--start .web5-empty-state__copy {
+  align-items: flex-start;
+}
+
+.web5-empty-state--start .web5-empty-state__prompt {
+  width: 100%;
+}
+
+.web5-empty-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--pi-empty-stack-gap, 2rem);
+  width: min(100%, var(--pi-empty-max-w, 60rem));
+  text-align: center;
+}
+
+.web5-empty-state__copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.875rem;
+  max-width: min(100%, 42rem);
+}
+
+.web5-empty-state__eyebrow {
+  margin: 0;
+  color: var(--pi-empty-eyebrow-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.web5-empty-state__title {
+  margin: 0;
+  color: var(--pi-empty-title-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: clamp(2rem, 4vw, 2.625rem);
+  font-weight: 600;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  text-wrap: balance;
+}
+
+.web5-empty-state__description {
+  margin: 0;
+  color: var(--pi-empty-description-color, var(--pi-field-text));
+  font-family: var(--pi-field-font-family);
+  font-size: clamp(1rem, 1.3vw, 1.125rem);
+  line-height: 1.45;
+  text-wrap: pretty;
+}
+
+.web5-empty-state__prompt {
+  width: min(100%, 42.1875rem);
+}
+
+.web5-empty-state__prompt .web5-prompt-shell__panel {
+  padding-block: 0;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.web5-empty-state__prompt .web5-prompt-shell__stack {
+  gap: var(--pi-stack-gap);
+}
+
+.web5-empty-state__prompt .web5-prompt-search__inner {
+  width: min(100%, 42.1875rem);
+}
+
+.web5-empty-state__prompt .web5-prompt-field {
+  /* Start as a single line; the textarea auto-grows (SearchSection) up to the
+     input max-height (5 lines) below. */
+  min-height: var(--pi-field-min-h, 3.5rem);
+  align-items: center;
+  padding: 0.75rem 1.3125rem;
+  border-radius: var(--pi-home-entry-field-radius, var(--pi-field-radius-multiline));
+  background: var(--pi-field-bg);
+  box-shadow: var(--pi-field-shadow);
+}
+
+.web5-empty-state__prompt .web5-prompt-input {
+  min-height: 1.75rem;
+  /* Grow up to 5 lines (5 × 1.5rem line-height), then scroll. */
+  max-height: 7.5rem;
+  padding-right: 3.375rem;
+  color: #52575b;
+  font-size: 1rem;
+  line-height: 1.5rem;
+}
+
+.web5-empty-state__prompt .web5-prompt-input::placeholder {
+  color: var(--pi-field-placeholder);
+}
+
+.web5-empty-state__prompt .web5-prompt-actions {
+  top: auto;
+  right: 0.875rem;
+  bottom: 0.8125rem;
+  transform: none;
+}
+
+@media (max-width: 48rem) {
+  .web5-empty-state {
+    padding:
+      1.5rem
+      1.25rem
+      2rem;
+  }
+
+  .web5-empty-state__content {
+    gap: 1.5rem;
+  }
+
+  .web5-empty-state__copy {
+    max-width: 32rem;
+  }
+
+}