@usetheo/ui 0.1.0-next.0 → 0.1.0-next.1

package/dist/slide/themes/default.css

@@ -0,0 +1,256 @@
+/*
+ * Slide primitive — `default` theme.
+ *
+ * Inherit-first design (mirrors the Whiteboard SVG using `currentColor`):
+ * the slide's foreground and background come from the parent. The consumer's
+ * surface (Tailwind classes, `<ThemeProvider>`, dashboard chrome) decides
+ * light/dark — the theme just provides typography + relative tints derived
+ * from `currentColor` via `color-mix()`.
+ *
+ * Result: the slide automatically follows the host's color scheme without
+ * needing a `colorScheme` prop or `prefers-color-scheme` media query.
+ *
+ * All selectors are scoped to `.theo-slide[data-theo-slide-theme="default"]`
+ * so themes coexist on the same page without bleed.
+ */
+
+@import "./layouts.css";
+
+.theo-slide[data-theo-slide-theme="default"] {
+  --theo-slide-canvas-width: 1280px;
+  --theo-slide-canvas-height: 720px;
+  --theo-slide-padding: 64px;
+  --theo-slide-font-base: 28px;
+  --theo-slide-font-family: var(
+    --vf-font-family-sans,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif
+  );
+  --theo-slide-font-mono: var(--vf-font-family-mono, ui-monospace, "JetBrains Mono", monospace);
+
+  /* Derived tints — relative to the inherited `currentColor`. They lighten or
+     darken automatically depending on whether the parent's color is dark
+     (light surface) or light (dark surface). */
+  --theo-slide-color-muted: color-mix(in srgb, currentColor 60%, transparent);
+  --theo-slide-color-tint-strong: color-mix(in srgb, currentColor 12%, transparent);
+  --theo-slide-color-tint-weak: color-mix(in srgb, currentColor 6%, transparent);
+  --theo-slide-color-border: color-mix(in srgb, currentColor 20%, transparent);
+
+  color: inherit;
+  background: transparent;
+  font-family: var(--theo-slide-font-family);
+  font-size: var(--theo-slide-font-base);
+  line-height: 1.5;
+}
+
+.theo-slide[data-theo-slide-theme="default"] h1,
+.theo-slide[data-theo-slide-theme="default"] h2,
+.theo-slide[data-theo-slide-theme="default"] h3,
+.theo-slide[data-theo-slide-theme="default"] h4,
+.theo-slide[data-theo-slide-theme="default"] h5,
+.theo-slide[data-theo-slide-theme="default"] h6 {
+  color: inherit;
+  line-height: 1.2;
+  margin: 0 0 0.5em 0;
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="default"] h1 {
+  font-size: 1.8em;
+}
+.theo-slide[data-theo-slide-theme="default"] h2 {
+  font-size: 1.4em;
+}
+.theo-slide[data-theo-slide-theme="default"] h3 {
+  font-size: 1.2em;
+}
+.theo-slide[data-theo-slide-theme="default"] h4 {
+  font-size: 1.05em;
+}
+.theo-slide[data-theo-slide-theme="default"] h5 {
+  font-size: 1em;
+}
+.theo-slide[data-theo-slide-theme="default"] h6 {
+  font-size: 0.9em;
+  color: var(--theo-slide-color-muted);
+}
+
+.theo-slide[data-theo-slide-theme="default"] p {
+  margin: 0 0 0.75em 0;
+}
+
+.theo-slide[data-theo-slide-theme="default"] ul,
+.theo-slide[data-theo-slide-theme="default"] ol {
+  margin: 0 0 0.75em 0;
+  padding-left: 1.5em;
+}
+
+.theo-slide[data-theo-slide-theme="default"] li {
+  margin: 0.25em 0;
+}
+
+.theo-slide[data-theo-slide-theme="default"] blockquote {
+  margin: 0 0 0.75em 0;
+  padding: 0.25em 0.75em;
+  border-left: 4px solid var(--theo-slide-color-border);
+  color: var(--theo-slide-color-muted);
+}
+
+.theo-slide[data-theo-slide-theme="default"] a {
+  color: currentColor;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="default"] code {
+  font-family: var(--theo-slide-font-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.4em;
+  border-radius: 4px;
+  background: var(--theo-slide-color-tint-strong);
+  color: inherit;
+}
+
+.theo-slide[data-theo-slide-theme="default"] pre {
+  font-family: var(--theo-slide-font-mono);
+  background: var(--theo-slide-color-tint-strong);
+  color: inherit;
+  padding: 0.75em 1em;
+  border-radius: 8px;
+  overflow: auto;
+  font-size: 0.85em;
+}
+
+.theo-slide[data-theo-slide-theme="default"] pre code {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.theo-slide[data-theo-slide-theme="default"] hr {
+  border: none;
+  border-top: 1px solid var(--theo-slide-color-border);
+  margin: 1em 0;
+}
+
+.theo-slide[data-theo-slide-theme="default"] table {
+  border-collapse: collapse;
+  margin: 0 0 0.75em 0;
+}
+
+.theo-slide[data-theo-slide-theme="default"] th,
+.theo-slide[data-theo-slide-theme="default"] td {
+  border: 1px solid var(--theo-slide-color-border);
+  padding: 0.4em 0.75em;
+  text-align: left;
+}
+
+.theo-slide[data-theo-slide-theme="default"] thead th {
+  background: var(--theo-slide-color-tint-weak);
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="default"] tbody tr:nth-child(even) td {
+  background: var(--theo-slide-color-tint-weak);
+}
+
+.theo-slide[data-theo-slide-theme="default"] img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.theo-slide[data-theo-slide-theme="default"] em {
+  font-style: italic;
+}
+.theo-slide[data-theo-slide-theme="default"] strong {
+  font-weight: 600;
+}
+.theo-slide[data-theo-slide-theme="default"] del {
+  text-decoration: line-through;
+  color: var(--theo-slide-color-muted);
+}
+.theo-slide[data-theo-slide-theme="default"] kbd {
+  font-family: var(--theo-slide-font-mono);
+  font-size: 0.85em;
+  padding: 0.1em 0.4em;
+  border: 1px solid var(--theo-slide-color-border);
+  border-radius: 4px;
+  background: var(--theo-slide-color-tint-weak);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * GFM alerts — `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`,
+ *              `> [!WARNING]`, `> [!CAUTION]`
+ * Pre-processed in mdast (alerts.ts) → <aside class="theo-slide-alert"
+ * data-theo-slide-alert-type="…"> rich-content plan T1.2.
+ * ───────────────────────────────────────────────────────────────── */
+.theo-slide[data-theo-slide-theme="default"] aside.theo-slide-alert {
+  margin: 0 0 0.75em 0;
+  padding: 0.75em 1em;
+  border-left: 4px solid currentColor;
+  border-radius: 0.4em;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside.theo-slide-alert::before {
+  display: block;
+  margin-bottom: 0.35em;
+  font-weight: 600;
+  font-size: 0.9em;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.theo-slide[data-theo-slide-theme="default"] aside.theo-slide-alert > :first-child {
+  margin-top: 0;
+}
+.theo-slide[data-theo-slide-theme="default"] aside.theo-slide-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="note"] {
+  border-color: #3b82f6;
+  background: color-mix(in srgb, #3b82f6 10%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="note"]::before {
+  content: "ⓘ Note";
+  color: #3b82f6;
+}
+
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="tip"] {
+  border-color: #10b981;
+  background: color-mix(in srgb, #10b981 10%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="tip"]::before {
+  content: "✓ Tip";
+  color: #10b981;
+}
+
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="important"] {
+  border-color: #a855f7;
+  background: color-mix(in srgb, #a855f7 10%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="important"]::before {
+  content: "! Important";
+  color: #a855f7;
+}
+
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="warning"] {
+  border-color: #f59e0b;
+  background: color-mix(in srgb, #f59e0b 10%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="warning"]::before {
+  content: "⚠ Warning";
+  color: #f59e0b;
+}
+
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="caution"] {
+  border-color: #ef4444;
+  background: color-mix(in srgb, #ef4444 10%, transparent);
+}
+.theo-slide[data-theo-slide-theme="default"] aside[data-theo-slide-alert-type="caution"]::before {
+  content: "✗ Caution";
+  color: #ef4444;
+}

package/dist/slide/themes/layouts.css

@@ -0,0 +1,143 @@
+/*
+ * Slide layouts (rich-content plan T2.2).
+ *
+ * Selectors are scoped by `[data-theo-slide-layout]` on the outer `<section>`.
+ * Themes (`default`, `violet-forge`) @import this file so layouts work across
+ * the design system without duplication.
+ *
+ * Each layout uses CSS grid for placement. `default` is a no-op so existing
+ * slides remain pixel-identical. The 7 layouts cover the 80% case for tech
+ * presentations: title hero, dual columns, image-prose, code-output, chapter
+ * dividers. Custom layouts require consumer CSS overriding the data-attr
+ * selector.
+ */
+
+/* Default — vertical flow (no grid). Preserves existing slide rendering. */
+.theo-slide[data-theo-slide-layout="default"] {
+  /* no-op */
+}
+
+/* Title — centered hero. Used for cover slides and section dividers. */
+.theo-slide[data-theo-slide-layout="title"] {
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+.theo-slide[data-theo-slide-layout="title"] h1 {
+  font-size: 2.8em;
+  letter-spacing: -0.02em;
+}
+.theo-slide[data-theo-slide-layout="title"] h2 {
+  font-size: 1.6em;
+  font-weight: 500;
+  color: color-mix(in srgb, currentColor 70%, transparent);
+}
+
+/* Two-column — equal split. First child block goes left, rest stack right. */
+.theo-slide[data-theo-slide-layout="two-column"] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 32px;
+  align-items: start;
+}
+.theo-slide[data-theo-slide-layout="two-column"] > * {
+  min-width: 0;
+}
+
+/* Image-right — text left (1.5fr), image right (1fr). */
+.theo-slide[data-theo-slide-layout="image-right"] {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 32px;
+  align-items: center;
+}
+.theo-slide[data-theo-slide-layout="image-right"] img {
+  grid-column: 2;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  justify-self: end;
+}
+
+/* Image-left — mirror of image-right. */
+.theo-slide[data-theo-slide-layout="image-left"] {
+  display: grid;
+  grid-template-columns: 1fr 1.5fr;
+  gap: 32px;
+  align-items: center;
+}
+.theo-slide[data-theo-slide-layout="image-left"] img {
+  grid-column: 1;
+  grid-row: 1;
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+
+/* Code-output — code block left (slightly wider), prose right. */
+.theo-slide[data-theo-slide-layout="code-output"] {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 24px;
+  align-items: start;
+}
+.theo-slide[data-theo-slide-layout="code-output"] pre {
+  margin: 0;
+}
+
+/* Section — full-bleed chapter divider with tinted backdrop. */
+.theo-slide[data-theo-slide-layout="section"] {
+  display: grid;
+  place-items: center;
+  text-align: center;
+  background: color-mix(in srgb, currentColor 10%, transparent);
+}
+.theo-slide[data-theo-slide-layout="section"] h1 {
+  font-size: 3.6em;
+  letter-spacing: -0.03em;
+  margin: 0;
+}
+.theo-slide[data-theo-slide-layout="section"] p {
+  font-size: 1.1em;
+  color: color-mix(in srgb, currentColor 65%, transparent);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * Header / Footer / Pagination overlays (rich-content T5.1).
+ * Plain text divs absolute-positioned in the canvas. They don't push
+ * content; they sit ON TOP. Sized in slide units (28px base).
+ * ───────────────────────────────────────────────────────────────── */
+.theo-slide .theo-slide-header {
+  position: absolute;
+  top: 16px;
+  left: 32px;
+  right: 32px;
+  font-size: 0.6em;
+  opacity: 0.7;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.theo-slide .theo-slide-footer {
+  position: absolute;
+  bottom: 16px;
+  left: 32px;
+  right: 96px;
+  font-size: 0.6em;
+  opacity: 0.7;
+  text-align: center;
+  pointer-events: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.theo-slide .theo-slide-paginate {
+  position: absolute;
+  bottom: 16px;
+  right: 32px;
+  font-size: 0.55em;
+  opacity: 0.5;
+  font-variant-numeric: tabular-nums;
+  pointer-events: none;
+}

package/dist/slide/themes/violet-forge.css

@@ -0,0 +1,256 @@
+/*
+ * Slide primitive — `violet-forge` theme.
+ *
+ * Branded variant: same inherit-first foundation as the `default` theme, but
+ * with a Violet Forge accent (links, code backgrounds, blockquote bar)
+ * blended with `currentColor` via `color-mix()`. The brand hue stays
+ * recognizable across light and dark surfaces because the accent is mixed
+ * with the inherited foreground.
+ */
+
+@import "./layouts.css";
+
+.theo-slide[data-theo-slide-theme="violet-forge"] {
+  --theo-slide-canvas-width: 1280px;
+  --theo-slide-canvas-height: 720px;
+  --theo-slide-padding: 64px;
+  --theo-slide-font-base: 28px;
+  --theo-slide-font-family: var(
+    --vf-font-family-sans,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif
+  );
+  --theo-slide-font-mono: var(--vf-font-family-mono, ui-monospace, "JetBrains Mono", monospace);
+
+  /* Violet accent — the brand hue. Used for relative mixing so it adapts
+     to light/dark surfaces (mixed with `currentColor`). */
+  --theo-slide-accent: #7c3aed;
+
+  /* Derived tints — relative to inherited `currentColor` so they auto-flip
+     when the parent surface flips. */
+  --theo-slide-color-muted: color-mix(in srgb, currentColor 60%, transparent);
+  --theo-slide-color-tint-strong: color-mix(in srgb, var(--theo-slide-accent) 15%, transparent);
+  --theo-slide-color-tint-weak: color-mix(in srgb, var(--theo-slide-accent) 7%, transparent);
+  --theo-slide-color-border: color-mix(in srgb, var(--theo-slide-accent) 30%, transparent);
+  --theo-slide-color-link: color-mix(in srgb, var(--theo-slide-accent) 70%, currentColor);
+  --theo-slide-color-blockquote-bar: color-mix(in srgb, var(--theo-slide-accent) 60%, currentColor);
+
+  color: inherit;
+  background: transparent;
+  font-family: var(--theo-slide-font-family);
+  font-size: var(--theo-slide-font-base);
+  line-height: 1.5;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] h1,
+.theo-slide[data-theo-slide-theme="violet-forge"] h2,
+.theo-slide[data-theo-slide-theme="violet-forge"] h3,
+.theo-slide[data-theo-slide-theme="violet-forge"] h4,
+.theo-slide[data-theo-slide-theme="violet-forge"] h5,
+.theo-slide[data-theo-slide-theme="violet-forge"] h6 {
+  color: inherit;
+  line-height: 1.2;
+  margin: 0 0 0.5em 0;
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] h1 {
+  font-size: 1.8em;
+  letter-spacing: -0.02em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] h2 {
+  font-size: 1.4em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] h3 {
+  font-size: 1.2em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] h4 {
+  font-size: 1.05em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] h5 {
+  font-size: 1em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] h6 {
+  font-size: 0.9em;
+  color: var(--theo-slide-color-muted);
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] p {
+  margin: 0 0 0.75em 0;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] ul,
+.theo-slide[data-theo-slide-theme="violet-forge"] ol {
+  margin: 0 0 0.75em 0;
+  padding-left: 1.5em;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] li {
+  margin: 0.25em 0;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] blockquote {
+  margin: 0 0 0.75em 0;
+  padding: 0.25em 0.75em;
+  border-left: 4px solid var(--theo-slide-color-blockquote-bar);
+  color: var(--theo-slide-color-muted);
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] a {
+  color: var(--theo-slide-color-link);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] code {
+  font-family: var(--theo-slide-font-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.4em;
+  border-radius: 4px;
+  background: var(--theo-slide-color-tint-strong);
+  color: inherit;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] pre {
+  font-family: var(--theo-slide-font-mono);
+  background: var(--theo-slide-color-tint-strong);
+  color: inherit;
+  padding: 0.75em 1em;
+  border-radius: 8px;
+  overflow: auto;
+  font-size: 0.85em;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] pre code {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] hr {
+  border: none;
+  border-top: 1px solid var(--theo-slide-color-border);
+  margin: 1em 0;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] table {
+  border-collapse: collapse;
+  margin: 0 0 0.75em 0;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] th,
+.theo-slide[data-theo-slide-theme="violet-forge"] td {
+  border: 1px solid var(--theo-slide-color-border);
+  padding: 0.4em 0.75em;
+  text-align: left;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] thead th {
+  background: var(--theo-slide-color-tint-weak);
+  font-weight: 600;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] tbody tr:nth-child(even) td {
+  background: var(--theo-slide-color-tint-weak);
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] em {
+  font-style: italic;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] strong {
+  font-weight: 600;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] del {
+  text-decoration: line-through;
+  color: var(--theo-slide-color-muted);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] kbd {
+  font-family: var(--theo-slide-font-mono);
+  font-size: 0.85em;
+  padding: 0.1em 0.4em;
+  border: 1px solid var(--theo-slide-color-border);
+  border-radius: 4px;
+  background: var(--theo-slide-color-tint-weak);
+}
+
+/* ─────────────────────────────────────────────────────────────────
+ * GFM alerts (rich-content T1.2) — Violet Forge palette.
+ * Same structure as `default`; only the accent colors differ
+ * so callouts feel native to the design system.
+ * ───────────────────────────────────────────────────────────────── */
+.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert {
+  margin: 0 0 0.75em 0;
+  padding: 0.75em 1em;
+  border-left: 4px solid currentColor;
+  border-radius: 0.4em;
+  background: color-mix(in srgb, currentColor 8%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert::before {
+  display: block;
+  margin-bottom: 0.35em;
+  font-weight: 600;
+  font-size: 0.9em;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert > :first-child {
+  margin-top: 0;
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] aside.theo-slide-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="note"] {
+  border-color: #6366f1;
+  background: color-mix(in srgb, #6366f1 12%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="note"]::before {
+  content: "ⓘ Note";
+  color: #6366f1;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="tip"] {
+  border-color: #22d3ee;
+  background: color-mix(in srgb, #22d3ee 12%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="tip"]::before {
+  content: "✓ Tip";
+  color: #22d3ee;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="important"] {
+  border-color: #c084fc;
+  background: color-mix(in srgb, #c084fc 12%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"]
+  aside[data-theo-slide-alert-type="important"]::before {
+  content: "★ Important";
+  color: #c084fc;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="warning"] {
+  border-color: #facc15;
+  background: color-mix(in srgb, #facc15 12%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"]
+  aside[data-theo-slide-alert-type="warning"]::before {
+  content: "⚠ Warning";
+  color: #facc15;
+}
+
+.theo-slide[data-theo-slide-theme="violet-forge"] aside[data-theo-slide-alert-type="caution"] {
+  border-color: #f87171;
+  background: color-mix(in srgb, #f87171 12%, transparent);
+}
+.theo-slide[data-theo-slide-theme="violet-forge"]
+  aside[data-theo-slide-alert-type="caution"]::before {
+  content: "✗ Caution";
+  color: #f87171;
+}

package/dist/slide-deck/index.css

@@ -0,0 +1,52 @@
+/* src/components/composites/slide-deck/transitions.css */
+.theo-slide-deck-slide-frame {
+  --theo-slide-deck-transition-duration: 250ms;
+  position: absolute;
+  inset: 0;
+}
+.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=fade] > [data-theo-slide-deck-slide-state=incoming] {
+  animation: theo-slide-deck-fade-in var(--theo-slide-deck-transition-duration) ease-out;
+}
+@keyframes theo-slide-deck-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=slide][data-theo-slide-deck-direction=next] > [data-theo-slide-deck-slide-state=incoming] {
+  animation: theo-slide-deck-slide-in-right var(--theo-slide-deck-transition-duration) ease-out;
+}
+.theo-slide-deck-slide-frame[data-theo-slide-deck-transition=slide][data-theo-slide-deck-direction=prev] > [data-theo-slide-deck-slide-state=incoming] {
+  animation: theo-slide-deck-slide-in-left var(--theo-slide-deck-transition-duration) ease-out;
+}
+@keyframes theo-slide-deck-slide-in-right {
+  from {
+    transform: translateX(30%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@keyframes theo-slide-deck-slide-in-left {
+  from {
+    transform: translateX(-30%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .theo-slide-deck-slide-frame,
+  .theo-slide-deck-slide-frame * {
+    animation-duration: 0ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0ms !important;
+  }
+}
+/*# sourceMappingURL=index.css.map */