@veluai/velu 0.2.13 → 0.2.15

package/runtime/velu-ui/components/page-feedback.css

@@ -1,241 +1,241 @@
-/* PageFeedback — "Was this page helpful?" row. All values are tokens;
-   light/dark via [data-theme]. Row layout (flex/gap/wrap) is the
-   <Cluster> primitive; this file owns only typography + the buttons. */
-
-.velu-feedback__question {
-  font-size: var(--f-h6);
-  color: var(--text-color);
-}
-
-.velu-feedback__btn {
-  position: relative; /* anchor for the heart burst */
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  padding-block: var(--s-3);
-  padding-inline: var(--s-1);
-  background: transparent;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  color: var(--text-color);
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  line-height: var(--lh-h6);
-  cursor: pointer;
-  transition:
-    border-color 0.12s ease,
-    background 0.12s ease,
-    color 0.12s ease;
-}
-.velu-feedback__btn svg {
-  flex: none;
-  /* Resting icon matches the label (full-contrast text color), not the
-     muted grey — accent is reserved for hover / chosen. */
-  color: var(--text-color);
-}
-.velu-feedback__btn:hover {
-  border-color: var(--accent-color);
-}
-.velu-feedback__btn:hover svg {
-  color: var(--accent-color);
-}
-
-/* The currently-picked button — accent border + tint, accent icon.
-   The vote stays changeable: clicking the other button moves it here. */
-.velu-feedback__btn--chosen {
-  border-color: var(--accent-color);
-  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-  color: var(--accent-color);
-}
-.velu-feedback__btn--chosen svg {
-  color: var(--accent-color);
-}
-
-.velu-feedback__thanks {
-  font-size: var(--f-h6);
-  color: var(--muted-color);
-}
-
-/* ── "No" improvement form ──────────────────────────────────────────── */
-/* Vertical rhythm is the <Stack> primitive; this owns only the chrome. */
-.velu-feedback__form {
-  padding-block-start: var(--s0);
-  border-block-start: var(--border-width) solid var(--border-color);
-}
-.velu-feedback__form-title {
-  margin: 0;
-  font-size: var(--f-h4);
-  line-height: var(--lh-h4);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-
-/* Reason radio rows — native <input> visually hidden, circle drawn by
-   the adjacent mark span (so :checked can style it). */
-.velu-feedback__radio {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: var(--s-1);
-  cursor: pointer;
-}
-.velu-feedback__radio input {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inline-size: var(--icon-size-lg);
-  block-size: var(--icon-size-lg);
-  margin: 0;
-  opacity: 0;
-  cursor: pointer;
-}
-.velu-feedback__radio-mark {
-  position: relative;
-  flex: none;
-  inline-size: var(--icon-size-lg);
-  block-size: var(--icon-size-lg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 50%;
-  transition: border-color 0.12s ease;
-}
-.velu-feedback__radio input:checked + .velu-feedback__radio-mark {
-  border-color: var(--accent-color);
-}
-.velu-feedback__radio input:checked + .velu-feedback__radio-mark::after {
-  content: '';
-  position: absolute;
-  inset: 22%;
-  background: var(--accent-color);
-  border-radius: 50%;
-}
-.velu-feedback__radio input:focus-visible + .velu-feedback__radio-mark {
-  outline: var(--border-width) solid var(--accent-color);
-  outline-offset: 2px;
-}
-.velu-feedback__radio:hover .velu-feedback__radio-mark {
-  border-color: var(--accent-color);
-}
-.velu-feedback__radio-label {
-  font-size: var(--f-body);
-  color: var(--text-color);
-}
-
-/* Optional free-text detail */
-.velu-feedback__detail {
-  inline-size: 100%;
-  box-sizing: border-box;
-  padding: var(--s-1);
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  resize: vertical;
-  font: inherit;
-  font-size: var(--f-h6);
-  line-height: var(--lh-body);
-  color: var(--text-color);
-}
-.velu-feedback__detail::placeholder {
-  color: var(--muted-color);
-}
-.velu-feedback__detail:focus-visible {
-  outline: none;
-  border-color: var(--accent-color);
-}
-
-/* Cancel / Submit actions */
-.velu-feedback__action {
-  padding-block: var(--s-2);
-  padding-inline: var(--s0);
-  border-radius: var(--radius-md);
-  font: inherit;
-  font-size: var(--f-h6);
-  font-weight: var(--weight-medium);
-  cursor: pointer;
-  transition: border-color 0.12s ease, background 0.12s ease;
-}
-.velu-feedback__action--cancel {
-  background: transparent;
-  border: var(--border-width) solid var(--border-color);
-  color: var(--text-color);
-}
-.velu-feedback__action--cancel:hover {
-  border-color: var(--accent-color);
-}
-.velu-feedback__action--submit {
-  background: var(--accent-color);
-  border: var(--border-width) solid var(--accent-color);
-  color: #fff;
-}
-.velu-feedback__action--submit:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
-}
-
-/* ── Submitted confirmation — sits below the divider line ───────────── */
-.velu-feedback__sent {
-  padding-block-start: var(--s0);
-  border-block-start: var(--border-width) solid var(--border-color);
-}
-.velu-feedback__sent-title {
-  font-size: var(--f-body);
-  font-weight: var(--weight-medium);
-  color: var(--text-color);
-}
-.velu-feedback__sent-note {
-  font-size: var(--f-h6);
-  color: var(--muted-color);
-}
-
-/* ── Heart burst (on "Yes") ─────────────────────────────────────────── */
-/* Zero-size anchor pinned to the top-center of the Yes button; hearts
-   are absolutely positioned relative to it and fan out from (0,0). */
-.velu-feedback__hearts {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 50%;
-  inline-size: 0;
-  block-size: 0;
-  pointer-events: none;
-}
-.velu-feedback__heart {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  inline-size: var(--s-1);
-  block-size: var(--s-1);
-  /* --hb-tx / --hb-ty / --hb-rot are set per-heart inline. */
-  animation: velu-feedback-hearts 0.8s ease-out forwards;
-}
-.velu-feedback__heart path {
-  fill: currentColor;
-}
-/* Festive shades, all derived from the brand accent. */
-.velu-feedback__heart--0 {
-  color: var(--accent-color);
-}
-.velu-feedback__heart--1 {
-  color: color-mix(in srgb, var(--accent-color) 60%, #fff);
-}
-.velu-feedback__heart--2 {
-  color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color));
-}
-.velu-feedback__heart--3 {
-  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
-}
-@keyframes velu-feedback-hearts {
-  0% {
-    transform: translate(-50%, 0) rotate(0deg) scale(0.6);
-    opacity: 1;
-  }
-  100% {
-    transform: translate(calc(-50% + var(--hb-tx)), var(--hb-ty))
-      rotate(var(--hb-rot)) scale(1);
-    opacity: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .velu-feedback__hearts {
-    display: none;
-  }
-}
+/* PageFeedback — "Was this page helpful?" row. All values are tokens;
+   light/dark via [data-theme]. Row layout (flex/gap/wrap) is the
+   <Cluster> primitive; this file owns only typography + the buttons. */
+
+.velu-feedback__question {
+  font-size: var(--f-h6);
+  color: var(--text-color);
+}
+
+.velu-feedback__btn {
+  position: relative; /* anchor for the heart burst */
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  padding-block: var(--s-3);
+  padding-inline: var(--s-1);
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  color: var(--text-color);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  line-height: var(--lh-h6);
+  cursor: pointer;
+  transition:
+    border-color 0.12s ease,
+    background 0.12s ease,
+    color 0.12s ease;
+}
+.velu-feedback__btn svg {
+  flex: none;
+  /* Resting icon matches the label (full-contrast text color), not the
+     muted grey — accent is reserved for hover / chosen. */
+  color: var(--text-color);
+}
+.velu-feedback__btn:hover {
+  border-color: var(--accent-color);
+}
+.velu-feedback__btn:hover svg {
+  color: var(--accent-color);
+}
+
+/* The currently-picked button — accent border + tint, accent icon.
+   The vote stays changeable: clicking the other button moves it here. */
+.velu-feedback__btn--chosen {
+  border-color: var(--accent-color);
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  color: var(--accent-color);
+}
+.velu-feedback__btn--chosen svg {
+  color: var(--accent-color);
+}
+
+.velu-feedback__thanks {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+}
+
+/* ── "No" improvement form ──────────────────────────────────────────── */
+/* Vertical rhythm is the <Stack> primitive; this owns only the chrome. */
+.velu-feedback__form {
+  padding-block-start: var(--s0);
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-feedback__form-title {
+  margin: 0;
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+
+/* Reason radio rows — native <input> visually hidden, circle drawn by
+   the adjacent mark span (so :checked can style it). */
+.velu-feedback__radio {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--s-1);
+  cursor: pointer;
+}
+.velu-feedback__radio input {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.velu-feedback__radio-mark {
+  position: relative;
+  flex: none;
+  inline-size: var(--icon-size-lg);
+  block-size: var(--icon-size-lg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 50%;
+  transition: border-color 0.12s ease;
+}
+.velu-feedback__radio input:checked + .velu-feedback__radio-mark {
+  border-color: var(--accent-color);
+}
+.velu-feedback__radio input:checked + .velu-feedback__radio-mark::after {
+  content: '';
+  position: absolute;
+  inset: 22%;
+  background: var(--accent-color);
+  border-radius: 50%;
+}
+.velu-feedback__radio input:focus-visible + .velu-feedback__radio-mark {
+  outline: var(--border-width) solid var(--accent-color);
+  outline-offset: 2px;
+}
+.velu-feedback__radio:hover .velu-feedback__radio-mark {
+  border-color: var(--accent-color);
+}
+.velu-feedback__radio-label {
+  font-size: var(--f-body);
+  color: var(--text-color);
+}
+
+/* Optional free-text detail */
+.velu-feedback__detail {
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--s-1);
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  resize: vertical;
+  font: inherit;
+  font-size: var(--f-h6);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-feedback__detail::placeholder {
+  color: var(--muted-color);
+}
+.velu-feedback__detail:focus-visible {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+/* Cancel / Submit actions */
+.velu-feedback__action {
+  padding-block: var(--s-2);
+  padding-inline: var(--s0);
+  border-radius: var(--radius-md);
+  font: inherit;
+  font-size: var(--f-h6);
+  font-weight: var(--weight-medium);
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+.velu-feedback__action--cancel {
+  background: transparent;
+  border: var(--border-width) solid var(--border-color);
+  color: var(--text-color);
+}
+.velu-feedback__action--cancel:hover {
+  border-color: var(--accent-color);
+}
+.velu-feedback__action--submit {
+  background: var(--accent-color);
+  border: var(--border-width) solid var(--accent-color);
+  color: #fff;
+}
+.velu-feedback__action--submit:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+
+/* ── Submitted confirmation — sits below the divider line ───────────── */
+.velu-feedback__sent {
+  padding-block-start: var(--s0);
+  border-block-start: var(--border-width) solid var(--border-color);
+}
+.velu-feedback__sent-title {
+  font-size: var(--f-body);
+  font-weight: var(--weight-medium);
+  color: var(--text-color);
+}
+.velu-feedback__sent-note {
+  font-size: var(--f-h6);
+  color: var(--muted-color);
+}
+
+/* ── Heart burst (on "Yes") ─────────────────────────────────────────── */
+/* Zero-size anchor pinned to the top-center of the Yes button; hearts
+   are absolutely positioned relative to it and fan out from (0,0). */
+.velu-feedback__hearts {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 50%;
+  inline-size: 0;
+  block-size: 0;
+  pointer-events: none;
+}
+.velu-feedback__heart {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  inline-size: var(--s-1);
+  block-size: var(--s-1);
+  /* --hb-tx / --hb-ty / --hb-rot are set per-heart inline. */
+  animation: velu-feedback-hearts 0.8s ease-out forwards;
+}
+.velu-feedback__heart path {
+  fill: currentColor;
+}
+/* Festive shades, all derived from the brand accent. */
+.velu-feedback__heart--0 {
+  color: var(--accent-color);
+}
+.velu-feedback__heart--1 {
+  color: color-mix(in srgb, var(--accent-color) 60%, #fff);
+}
+.velu-feedback__heart--2 {
+  color: color-mix(in srgb, var(--accent-color) 55%, var(--text-color));
+}
+.velu-feedback__heart--3 {
+  color: color-mix(in srgb, var(--accent-color) 82%, #fff);
+}
+@keyframes velu-feedback-hearts {
+  0% {
+    transform: translate(-50%, 0) rotate(0deg) scale(0.6);
+    opacity: 1;
+  }
+  100% {
+    transform: translate(calc(-50% + var(--hb-tx)), var(--hb-ty))
+      rotate(var(--hb-rot)) scale(1);
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .velu-feedback__hearts {
+    display: none;
+  }
+}