@veluai/velu 0.2.13 → 0.2.15

package/runtime/velu-ui/components/ask-bar.css

@@ -1,94 +1,94 @@
-/* AskBar — "ask a question" input card. All values are tokens;
-   light/dark via [data-theme]. The component itself only owns the
-   card visuals — the CONSUMER places it (the docs page pins it to the
-   bottom of the scrolling article so content scrolls behind it). */
-
-/* Hidden at mobile widths — too crowded on a 375px column, and the
-   header's Ask AI icon already opens the same chatbot. */
-@container docs (max-width: 640px) {
-  .velu-ask-bar {
-    display: none;
-  }
-}
-
-.velu-ask-bar {
-  /* `relative` establishes the containing block for the absolute send
-     button. Actual page placement (absolute / sticky / fixed) is set
-     by the consumer. */
-  position: relative;
-  z-index: 20;
-  background: var(--page-bg);
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  /* Soft lift so it reads as floating above the scrolling article. */
-  box-shadow:
-    0 var(--s-1) var(--s1) color-mix(in srgb, #000 14%, transparent),
-    0 0 var(--s0) color-mix(in srgb, #000 6%, transparent);
-  transition:
-    border-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-/* Cursor in the input → accent border + accent glow ring. */
-.velu-ask-bar:focus-within {
-  border-color: var(--accent-color);
-  box-shadow:
-    0 0 0 var(--border-width) var(--accent-color),
-    0 0 var(--s1) color-mix(in srgb, var(--accent-color) 40%, transparent);
-}
-
-/* Multi-line input. padding-inline-end clears the send button so typed
-   text never runs under it. */
-.velu-ask-bar__input {
-  display: block;
-  inline-size: 100%;
-  box-sizing: border-box;
-  padding: var(--s0);
-  padding-inline-end: calc(var(--s0) + 2.5em);
-  border: 0;
-  background: transparent;
-  resize: none;
-  font: inherit;
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-  color: var(--text-color);
-}
-.velu-ask-bar__input:focus {
-  outline: none;
-}
-.velu-ask-bar__input::placeholder {
-  color: var(--muted-color);
-}
-
-/* Circular accent send button, pinned to the bottom-inline-end corner. */
-.velu-ask-bar__send {
-  position: absolute;
-  inset-block-end: var(--s-1);
-  inset-inline-end: var(--s-1);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: 2.5em;
-  block-size: 2.5em;
-  padding: 0;
-  border: 0;
-  border-radius: 50%;
-  background: var(--accent-color);
-  color: #fff;
-  cursor: pointer;
-}
-.velu-ask-bar__send:hover {
-  background: color-mix(in srgb, var(--accent-color) 88%, #000);
-}
-.velu-ask-bar__send:focus-visible {
-  outline: var(--border-width) solid var(--text-color);
-  outline-offset: 2px;
-}
-/* Disabled (input empty) — a dimmed accent (still in the brand
-   palette) so the button reads as "not yet ready" rather than a
-   different control entirely. No pointer events / hover affordance. */
-.velu-ask-bar__send:disabled {
-  background: color-mix(in srgb, var(--accent-color) 35%, transparent);
-  cursor: not-allowed;
-  pointer-events: none;
-}
+/* AskBar — "ask a question" input card. All values are tokens;
+   light/dark via [data-theme]. The component itself only owns the
+   card visuals — the CONSUMER places it (the docs page pins it to the
+   bottom of the scrolling article so content scrolls behind it). */
+
+/* Hidden at mobile widths — too crowded on a 375px column, and the
+   header's Ask AI icon already opens the same chatbot. */
+@container docs (max-width: 640px) {
+  .velu-ask-bar {
+    display: none;
+  }
+}
+
+.velu-ask-bar {
+  /* `relative` establishes the containing block for the absolute send
+     button. Actual page placement (absolute / sticky / fixed) is set
+     by the consumer. */
+  position: relative;
+  z-index: 20;
+  background: var(--page-bg);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  /* Soft lift so it reads as floating above the scrolling article. */
+  box-shadow:
+    0 var(--s-1) var(--s1) color-mix(in srgb, #000 14%, transparent),
+    0 0 var(--s0) color-mix(in srgb, #000 6%, transparent);
+  transition:
+    border-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+/* Cursor in the input → accent border + accent glow ring. */
+.velu-ask-bar:focus-within {
+  border-color: var(--accent-color);
+  box-shadow:
+    0 0 0 var(--border-width) var(--accent-color),
+    0 0 var(--s1) color-mix(in srgb, var(--accent-color) 40%, transparent);
+}
+
+/* Multi-line input. padding-inline-end clears the send button so typed
+   text never runs under it. */
+.velu-ask-bar__input {
+  display: block;
+  inline-size: 100%;
+  box-sizing: border-box;
+  padding: var(--s0);
+  padding-inline-end: calc(var(--s0) + 2.5em);
+  border: 0;
+  background: transparent;
+  resize: none;
+  font: inherit;
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+  color: var(--text-color);
+}
+.velu-ask-bar__input:focus {
+  outline: none;
+}
+.velu-ask-bar__input::placeholder {
+  color: var(--muted-color);
+}
+
+/* Circular accent send button, pinned to the bottom-inline-end corner. */
+.velu-ask-bar__send {
+  position: absolute;
+  inset-block-end: var(--s-1);
+  inset-inline-end: var(--s-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 2.5em;
+  block-size: 2.5em;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: #fff;
+  cursor: pointer;
+}
+.velu-ask-bar__send:hover {
+  background: color-mix(in srgb, var(--accent-color) 88%, #000);
+}
+.velu-ask-bar__send:focus-visible {
+  outline: var(--border-width) solid var(--text-color);
+  outline-offset: 2px;
+}
+/* Disabled (input empty) — a dimmed accent (still in the brand
+   palette) so the button reads as "not yet ready" rather than a
+   different control entirely. No pointer events / hover affordance. */
+.velu-ask-bar__send:disabled {
+  background: color-mix(in srgb, var(--accent-color) 35%, transparent);
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/runtime/velu-ui/components/card.css

@@ -1,105 +1,105 @@
-/* Card — all values tokens; light/dark via [data-theme]. Selectors required
-   (cta hover, image clip, group grid) so this has CSS. Namespaced. */
-
-.velu-card {
-  display: flex;
-  flex-direction: column;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--radius-md);
-  overflow: hidden; /* clips the image to the rounded corners */
-  background: var(--page-bg);
-  color: var(--text-color);
-  text-decoration: none;
-}
-
-/* CTA card: the whole card is the click target (stretched-link pattern —
-   the CTA stays the single real <a>; a ::after overlay makes the entire
-   card clickable, valid + accessible, no JS). Hover highlights border+CTA. */
-.velu-card--cta {
-  position: relative;
-  cursor: pointer;
-  transition: border-color 0.15s ease;
-}
-.velu-card--cta .velu-card__cta::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-}
-.velu-card--cta:hover {
-  border-color: var(--accent-color);
-}
-.velu-card--cta:hover .velu-card__cta {
-  color: var(--accent-color);
-}
-
-.velu-card__body {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-2);
-  padding: var(--s0) var(--s3);
-}
-.velu-card--horizontal .velu-card__body {
-  flex-direction: row;
-  align-items: center; /* icon vertically centered against the content */
-  gap: var(--s0);
-}
-.velu-card__content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--s-2);
-  min-width: 0;
-}
-
-.velu-card__icon {
-  display: inline-flex;
-  flex: none;
-  align-items: center;
-  inline-size: var(--f-h2);
-  block-size: var(--f-h2);
-  color: var(--accent-color);
-  font-size: var(--f-h2);
-}
-.velu-card__title {
-  font-size: var(--f-h4);
-  line-height: var(--lh-h4);
-  font-weight: 500;
-}
-.velu-card__text {
-  font-size: var(--f-body);
-  line-height: var(--lh-body);
-}
-.velu-card__cta {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--s-3);
-  margin-block-start: var(--s-2);
-  font-weight: 500;
-  color: var(--text-color);
-  text-decoration: none;
-  cursor: pointer;
-  width: fit-content; /* only the link itself is the click target */
-  transition: color 0.15s ease;
-}
-.velu-card__cta:hover {
-  color: var(--accent-color);
-}
-.velu-card__cta-icon {
-  display: inline-flex;
-  flex: none;
-}
-
-.velu-card__media {
-  display: block;
-}
-.velu-card__media img {
-  display: block;
-  inline-size: 100%;
-  block-size: auto;
-  object-fit: cover;
-}
-
-/* CardGroup layout is the Switcher primitive (composed in Card.jsx). Its
-   threshold is computed count-aware in Card.jsx so the row flips to a full
-   vertical stack the moment any one card would fall below --card-min — true
-   Switcher behaviour (all-or-nothing), not multi-row wrap. No rule needed
-   here; Switcher owns row↔column + gap via switcher.css. */
+/* Card — all values tokens; light/dark via [data-theme]. Selectors required
+   (cta hover, image clip, group grid) so this has CSS. Namespaced. */
+
+.velu-card {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden; /* clips the image to the rounded corners */
+  background: var(--page-bg);
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+/* CTA card: the whole card is the click target (stretched-link pattern —
+   the CTA stays the single real <a>; a ::after overlay makes the entire
+   card clickable, valid + accessible, no JS). Hover highlights border+CTA. */
+.velu-card--cta {
+  position: relative;
+  cursor: pointer;
+  transition: border-color 0.15s ease;
+}
+.velu-card--cta .velu-card__cta::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.velu-card--cta:hover {
+  border-color: var(--accent-color);
+}
+.velu-card--cta:hover .velu-card__cta {
+  color: var(--accent-color);
+}
+
+.velu-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  padding: var(--s0) var(--s3);
+}
+.velu-card--horizontal .velu-card__body {
+  flex-direction: row;
+  align-items: center; /* icon vertically centered against the content */
+  gap: var(--s0);
+}
+.velu-card__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-2);
+  min-width: 0;
+}
+
+.velu-card__icon {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  inline-size: var(--f-h2);
+  block-size: var(--f-h2);
+  color: var(--accent-color);
+  font-size: var(--f-h2);
+}
+.velu-card__title {
+  font-size: var(--f-h4);
+  line-height: var(--lh-h4);
+  font-weight: 500;
+}
+.velu-card__text {
+  font-size: var(--f-body);
+  line-height: var(--lh-body);
+}
+.velu-card__cta {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-3);
+  margin-block-start: var(--s-2);
+  font-weight: 500;
+  color: var(--text-color);
+  text-decoration: none;
+  cursor: pointer;
+  width: fit-content; /* only the link itself is the click target */
+  transition: color 0.15s ease;
+}
+.velu-card__cta:hover {
+  color: var(--accent-color);
+}
+.velu-card__cta-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.velu-card__media {
+  display: block;
+}
+.velu-card__media img {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+  object-fit: cover;
+}
+
+/* CardGroup layout is the Switcher primitive (composed in Card.jsx). Its
+   threshold is computed count-aware in Card.jsx so the row flips to a full
+   vertical stack the moment any one card would fall below --card-min — true
+   Switcher behaviour (all-or-nothing), not multi-row wrap. No rule needed
+   here; Switcher owns row↔column + gap via switcher.css. */