@birdycom/omniaui 0.0.0-stage → 0.11.1

package/dist/parts/site-marquee.css

@@ -0,0 +1,34 @@
+/* File: packages/ui/src/parts/site-marquee.css
+   Map: pause on focus -> direction / speed modifiers -> plain items -> no fade -> reduced motion
+   Marquee component. The base .oc-marquee (endless track, pause on hover) lives in showcase.css.
+   This part only ADDS modifiers and a reduced-motion fallback that shows every item without movement. */
+
+/* Keyboard users: pause too when a link inside the strip has focus. */
+.oc-marquee:focus-within .oc-marquee__track { animation-play-state: paused; }
+
+/* Scroll the other way (nice for a second row). */
+.oc-marquee--reverse .oc-marquee__track { animation-direction: reverse; }
+
+/* Speed presets. You can also set --oc-marquee-duration yourself. */
+.oc-marquee--slow { --oc-marquee-duration: 70s; }
+.oc-marquee--fast { --oc-marquee-duration: 20s; }
+
+/* Plain items: no pill, just text (logo or name strips). */
+.oc-marquee--plain .oc-marquee__item {
+  padding-inline: 0.5rem;
+  border-color: transparent;
+  background: none;
+  font-family: inherit;
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+
+/* No soft fade at both edges. */
+.oc-marquee--no-fade { mask-image: none; }
+
+/* Reduced motion: no animation (showcase.css), no fade, the items wrap and the duplicates hide. */
+@media (prefers-reduced-motion: reduce) {
+  .oc-marquee { mask-image: none; }
+  .oc-marquee__track { flex-wrap: wrap; inline-size: auto; }
+  .oc-marquee__item[aria-hidden="true"] { display: none; }
+}

package/dist/parts/site-next-teaser.css

@@ -0,0 +1,75 @@
+/* File: packages/ui/src/parts/site-next-teaser.css
+   Map: card -> label -> name (+ mark) -> tagline with arrow -> previous variant -> hover -> reduced motion
+   Next teaser: a "Next product / Next project" card at the end of a detail page.
+   Accent: --oc-accent-from, or an .oc-accent--* preset on the card. */
+
+.oc-next-teaser {
+  display: grid;
+  gap: 0.45rem;
+  padding: 2rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg);
+  background:
+    radial-gradient(28rem circle at 100% 0%, color-mix(in oklch, var(--oc-accent-from) 12%, transparent), transparent 60%),
+    var(--oc-surface);
+  color: var(--oc-foreground);
+  text-decoration: none;
+  transition: transform 0.3s var(--oc-ease-out), border-color 0.3s;
+}
+
+/* Small uppercase label ("Next product"). */
+.oc-next-teaser__label {
+  color: var(--oc-muted-foreground);
+  font-size: 0.78rem;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+/* Name with an optional product mark in front. */
+.oc-next-teaser__name {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0;
+  font-size: clamp(1.4rem, 3vw, 1.85rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+/* Tagline + arrow that moves on hover. */
+.oc-next-teaser__tagline {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin: 0;
+  color: var(--oc-muted-foreground);
+}
+.oc-next-teaser__tagline::after {
+  content: "→";
+  color: var(--oc-accent-from);
+  transition: translate 0.25s var(--oc-ease-out);
+}
+
+/* Previous: the arrow points left and sits before the tagline. */
+.oc-next-teaser--prev .oc-next-teaser__tagline::after { content: none; }
+.oc-next-teaser--prev .oc-next-teaser__tagline::before {
+  content: "←";
+  color: var(--oc-accent-from);
+  transition: translate 0.25s var(--oc-ease-out);
+}
+
+/* Hover / focus */
+.oc-next-teaser:is(a):hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent);
+}
+.oc-next-teaser:hover .oc-next-teaser__tagline::after { translate: 4px 0; }
+.oc-next-teaser--prev:hover .oc-next-teaser__tagline::before { translate: -4px 0; }
+.oc-next-teaser:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-next-teaser,
+  .oc-next-teaser__tagline::after,
+  .oc-next-teaser__tagline::before { transition: none; }
+}

package/dist/parts/site-price-card.css

@@ -0,0 +1,91 @@
+/* File: packages/ui/src/parts/site-price-card.css
+   Map: card -> head + discount badge -> period toggle -> monthly / yearly price (:has) -> features -> featured
+   Price card: one plan with a monthly / yearly switch (radio inputs + :has(), no JavaScript).
+   The toggle is the segmented component; give every card its own radio name. */
+
+.oc-price-card {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1.75rem;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg);
+  background: var(--oc-card);
+  color: var(--oc-foreground);
+}
+
+.oc-price-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
+.oc-price-card__name { margin: 0; font-size: 1.2rem; font-weight: 700; }
+.oc-price-card__desc { margin: 0; color: var(--oc-muted-foreground); font-size: 0.92rem; }
+
+/* Discount badge ("Save 20%"). It is dimmed while the monthly price shows. */
+.oc-price-card__discount {
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--oc-success) 16%, transparent);
+  color: var(--oc-success);
+  font-size: 0.75rem;
+  font-weight: 700;
+  white-space: nowrap;
+  transition: opacity 0.2s;
+}
+.oc-price-card:has(.oc-price-card__toggle input[value="monthly"]:checked) .oc-price-card__discount { opacity: 0.55; }
+
+.oc-price-card__toggle { align-self: flex-start; }
+
+/* Price rows: monthly shows by default, yearly when its radio is checked. */
+.oc-price-card__price {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.35rem;
+  margin: 0;
+}
+.oc-price-card__price--yearly { display: none; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--yearly { display: flex; }
+.oc-price-card:has(.oc-price-card__toggle input[value="yearly"]:checked) .oc-price-card__price--monthly { display: none; }
+
+.oc-price-card__amount { font-size: 2.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
+.oc-price-card__period { color: var(--oc-muted-foreground); font-size: 0.9rem; }
+/* Old price, struck through. */
+.oc-price-card__was { color: var(--oc-muted-foreground); font-size: 0.95rem; }
+.oc-price-card__note { flex-basis: 100%; color: var(--oc-muted-foreground); font-size: 0.8rem; }
+
+/* Features: a check for included, a cross + muted text for excluded. */
+.oc-price-card__features {
+  display: grid;
+  gap: 0.55rem;
+  flex-grow: 1;
+  align-content: start; /* the list grows to push the button down, its rows stay together */
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.92rem;
+}
+.oc-price-card__feature { display: flex; align-items: baseline; gap: 0.55rem; }
+.oc-price-card__feature::before { content: "✓"; flex-shrink: 0; color: var(--oc-success); font-weight: 700; }
+.oc-price-card__feature--excluded { color: var(--oc-muted-foreground); }
+.oc-price-card__feature--excluded::before { content: "✕"; color: var(--oc-muted-foreground); font-weight: 400; }
+
+.oc-price-card__cta { inline-size: 100%; }
+
+/* Featured plan: accent border + soft glow. The glow follows the pointer: the card you hover or tab into gets it,
+   and the featured card gives it up while another card in the same row is hovered. */
+.oc-price-card {
+  transition: border-color 0.25s var(--oc-ease-out), box-shadow 0.25s var(--oc-ease-out), translate 0.25s var(--oc-ease-out);
+}
+.oc-price-card--featured,
+.oc-price-card:hover,
+.oc-price-card:focus-within {
+  border-color: color-mix(in oklch, var(--oc-accent-from) 60%, transparent);
+  box-shadow: 0 24px 60px -30px var(--oc-accent-from);
+}
+.oc-price-card:hover { translate: 0 -2px; }
+:has(> .oc-price-card:hover) > .oc-price-card--featured:not(:hover, :focus-within) {
+  border-color: var(--oc-border);
+  box-shadow: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .oc-price-card { transition: none; }
+  .oc-price-card:hover { translate: none; }
+}

package/dist/parts/site-product-mark.css

@@ -0,0 +1,66 @@
+/* File: packages/ui/src/parts/site-product-mark.css
+   Map: base tile -> squircle (corner-shape) -> image / svg -> sizes -> soft variant -> glow
+   Product mark: a filled app-icon tile in the accent gradient (logo, glyph or SVG).
+   Accent: --oc-accent-from / --oc-accent-to, or an .oc-accent--* preset on the element. */
+
+.oc-product-mark {
+  --oc-mark-size: 3rem;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--oc-mark-size);
+  aspect-ratio: 1;
+  flex-shrink: 0;
+  /* Fallback shape: a rounded square close to an app icon. */
+  border-radius: 26%;
+  background: linear-gradient(135deg, var(--oc-accent-from), var(--oc-accent-to));
+  color: var(--color-white-50);
+  font-size: calc(var(--oc-mark-size) * 0.45);
+  line-height: 1;
+  /* Light edge on top + a soft drop shadow in the accent color. */
+  box-shadow:
+    inset 0 1px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
+    0 10px 24px -12px var(--oc-accent-to);
+  overflow: hidden;
+}
+
+/* Real squircle where the browser supports corner-shape (a larger radius looks right with it). */
+@supports (corner-shape: squircle) {
+  .oc-product-mark {
+    border-radius: 50%;
+    corner-shape: squircle;
+  }
+}
+
+/* Logo image or inline SVG inside the tile. */
+.oc-product-mark > :is(img, svg) {
+  inline-size: 58%;
+  block-size: 58%;
+  object-fit: contain;
+}
+/* Full-bleed image (the logo already is a tile). */
+.oc-product-mark--cover > img {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* Sizes */
+.oc-product-mark--sm { --oc-mark-size: 2.25rem; }
+.oc-product-mark--lg { --oc-mark-size: 4rem; }
+.oc-product-mark--xl {
+  --oc-mark-size: clamp(6rem, 18vw, 10rem);
+  box-shadow:
+    inset 0 2px 0 color-mix(in oklch, var(--color-white-50) 35%, transparent),
+    0 0 80px -20px var(--oc-accent-from);
+}
+
+/* Soft variant: tinted background, accent glyph (quieter, for lists). */
+.oc-product-mark--soft {
+  border: 1px solid color-mix(in oklch, var(--oc-accent-from) 40%, transparent);
+  background: color-mix(in oklch, var(--oc-accent-from) 16%, var(--oc-card));
+  color: var(--oc-accent-from);
+  box-shadow: none;
+}
+
+/* Extra glow (hero visuals). */
+.oc-product-mark--glow { box-shadow: 0 0 48px -8px var(--oc-accent-from); }

package/dist/parts/site-project-card.css

@@ -0,0 +1,111 @@
+/* File: packages/ui/src/parts/site-project-card.css
+   Map: card -> preview frame (bar + dots + shot) -> body (type / name / meta / more) -> hover -> reduced motion
+   Project card: portfolio item with a browser-like preview. Self-contained: it does not use other frame classes.
+   Accent: --oc-accent-from / --oc-accent-to, or an .oc-accent--* preset on the card. */
+
+.oc-project-card {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--oc-border);
+  border-radius: var(--oc-radius-lg);
+  background: var(--oc-surface);
+  color: var(--oc-foreground);
+  text-decoration: none;
+  overflow: hidden;
+  transition: transform 0.35s var(--oc-ease-out), border-color 0.35s;
+}
+
+/* Preview: a small window with a title bar and a screenshot (or a gradient placeholder). */
+.oc-project-card__frame {
+  display: block;
+  margin: 1rem 1rem 0;
+  border: 1px solid var(--oc-border-strong);
+  border-radius: var(--oc-radius-md);
+  background: var(--oc-card);
+  overflow: hidden;
+  box-shadow: 0 24px 48px -28px color-mix(in oklch, var(--oc-accent-to) 60%, transparent);
+}
+.oc-project-card__bar {
+  display: flex;
+  gap: 0.35rem;
+  padding: 0.5rem 0.7rem;
+  border-block-end: 1px solid var(--oc-border);
+  background: var(--oc-surface-strong);
+}
+.oc-project-card__bar > i {
+  inline-size: 0.55rem;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--oc-border-strong);
+}
+.oc-project-card__bar > i:first-child { background: var(--oc-accent-from); }
+
+/* Screenshot area. Without an <img> it shows an accent gradient placeholder. */
+.oc-project-card__shot {
+  display: block;
+  inline-size: 100%;
+  aspect-ratio: 16 / 10;
+  object-fit: cover;
+  object-position: top;
+  background:
+    radial-gradient(circle at 80% 20%, color-mix(in oklch, var(--color-white-50) 30%, transparent), transparent 45%),
+    linear-gradient(135deg, var(--oc-accent-from), var(--oc-accent-to));
+  transition: scale 0.5s var(--oc-ease-out);
+}
+
+/* Text below the preview. */
+.oc-project-card__body {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 0.35rem;
+  padding: 1.1rem 1.25rem 1.3rem;
+}
+.oc-project-card__type {
+  align-self: flex-start;
+  padding: 0.2rem 0.6rem;
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--oc-accent-from) 14%, transparent);
+  color: var(--oc-accent-from);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.oc-project-card__name {
+  margin: 0.25rem 0 0;
+  font-size: 1.25rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.oc-project-card__meta {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.9rem;
+}
+.oc-project-card__more {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-block-start: auto;
+  padding-block-start: 0.6rem;
+  color: var(--oc-accent-from);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+.oc-project-card__more::after { content: "→"; transition: translate 0.25s var(--oc-ease-out); }
+
+/* Hover / focus: lift, accent border, zoom the shot a little, move the arrow. */
+.oc-project-card:is(a, [tabindex]):hover {
+  transform: translateY(-4px);
+  border-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent);
+}
+.oc-project-card:hover .oc-project-card__shot { scale: 1.03; }
+.oc-project-card:hover .oc-project-card__more::after { translate: 4px 0; }
+.oc-project-card:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
+
+/* Flat: no frame margin, the preview runs edge to edge. */
+.oc-project-card--flat .oc-project-card__frame { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-project-card,
+  .oc-project-card__shot { transition: none; }
+}

package/dist/parts/site-prose.css

@@ -0,0 +1,124 @@
+/* File: packages/ui/src/parts/site-prose.css | Map: container (measure, rhythm) -> headings -> paragraphs + lead -> links + inline
+   (strong, code, kbd, mark) -> lists (markers, nesting) -> blockquote -> code block -> table -> figure + image + caption -> hr
+   -> sizes (--sm, --lg) -> full width
+   Prose: typography for long-form text from a CMS, blog or help page, where the HTML has no classes of its own.
+   Every rule is scoped with :where(), so a utility class on an element inside still wins. Spacing is in em, so --sm and --lg
+   scale the whole text. Based on the help and maintenance pages of the Korrekt app. */
+
+.oc-prose {
+  max-inline-size: 68ch;
+  color: var(--oc-foreground);
+  font-size: 1rem;
+  line-height: 1.7;
+  overflow-wrap: break-word;
+}
+.oc-prose :where(*) { margin-block: 0; }
+.oc-prose :where(* + *) { margin-block-start: 1.1em; }
+.oc-prose > :where(:first-child) { margin-block-start: 0; }
+
+/* ---- Headings ---- */
+.oc-prose :where(h1, h2, h3, h4) { color: var(--oc-foreground); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
+.oc-prose :where(h1) { font-size: 2.1em; letter-spacing: -0.02em; }
+.oc-prose :where(h2) { margin-block-start: 1.8em; font-size: 1.45em; }
+.oc-prose :where(h3) { margin-block-start: 1.6em; font-size: 1.2em; }
+.oc-prose :where(h4) { margin-block-start: 1.4em; font-size: 1em; }
+.oc-prose :where(h1, h2, h3, h4) + :where(*) { margin-block-start: 0.6em; }
+.oc-prose :where(h2, h3, h4) { scroll-margin-block-start: 5rem; }
+
+/* ---- Paragraphs ---- */
+.oc-prose :where(p) { text-wrap: pretty; }
+.oc-prose :where(.oc-prose-lead) { color: var(--oc-muted-foreground); font-size: 1.2em; line-height: 1.6; }
+
+/* ---- Links and inline elements ---- */
+.oc-prose :where(a) {
+  color: var(--oc-primary);
+  font-weight: 500;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklch, var(--oc-primary) 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+  transition: text-decoration-color var(--oc-transition-normal);
+}
+.oc-prose :where(a:hover) { text-decoration-color: currentColor; }
+.oc-prose :where(a:focus-visible) { outline: 2px solid var(--oc-ring); outline-offset: 2px; border-radius: 2px; }
+.oc-prose :where(strong, b) { font-weight: 650; }
+.oc-prose :where(:not(pre) > code) {
+  padding: 0.1em 0.35em;
+  border: 1px solid var(--oc-border);
+  border-radius: 0.3em;
+  background: var(--oc-muted);
+  font-size: 0.875em;
+}
+.oc-prose :where(kbd) {
+  padding: 0.05em 0.4em;
+  border: 1px solid var(--oc-border);
+  border-block-end-width: 2px;
+  border-radius: 0.3em;
+  background: var(--oc-card);
+  font-family: inherit;
+  font-size: 0.85em;
+}
+.oc-prose :where(mark) { padding: 0 0.15em; border-radius: 0.2em; background: color-mix(in oklch, var(--oc-warning) 28%, transparent); color: inherit; }
+.oc-prose :where(small) { color: var(--oc-muted-foreground); }
+
+/* ---- Lists ---- */
+.oc-prose :where(ul, ol) { padding-inline-start: 1.5em; }
+.oc-prose :where(ul) { list-style: disc; }
+.oc-prose :where(ol) { list-style: decimal; }
+.oc-prose :where(ul ul) { list-style: circle; }
+.oc-prose :where(li) { padding-inline-start: 0.3em; }
+.oc-prose :where(li + li, li > ul, li > ol) { margin-block-start: 0.4em; }
+.oc-prose :where(ul > li)::marker { color: var(--oc-muted-foreground); }
+.oc-prose :where(ol > li)::marker { color: var(--oc-muted-foreground); font-weight: 600; font-variant-numeric: tabular-nums; }
+.oc-prose :where(dt) { font-weight: 650; }
+.oc-prose :where(dd) { margin-block-start: 0.25em; padding-inline-start: 1.5em; color: var(--oc-muted-foreground); }
+
+/* ---- Blockquote ---- */
+.oc-prose :where(blockquote) {
+  padding: 0.2em 0 0.2em 1.1em;
+  border-inline-start: 3px solid var(--oc-primary);
+  color: var(--oc-foreground);
+  font-size: 1.08em;
+  font-style: italic;
+}
+.oc-prose :where(blockquote p + p) { margin-block-start: 0.6em; }
+.oc-prose :where(blockquote footer, blockquote cite) { display: block; margin-block-start: 0.6em; color: var(--oc-muted-foreground); font-size: 0.85em; font-style: normal; }
+
+/* ---- Code block ---- */
+.oc-prose :where(pre) {
+  padding: 0.9em 1.1em;
+  overflow-x: auto;
+  border: 1px solid var(--oc-border);
+  border-radius: calc(var(--oc-radius) + 2px);
+  background: var(--oc-muted);
+  font-size: 0.85em;
+  line-height: 1.6;
+  tab-size: 2;
+}
+.oc-prose :where(pre code) { padding: 0; border: 0; background: none; font-size: inherit; }
+
+/* ---- Table ---- */
+.oc-prose :where(table) { inline-size: 100%; border-collapse: collapse; font-size: 0.9em; line-height: 1.5; font-variant-numeric: tabular-nums; }
+.oc-prose :where(caption) { padding-block-end: 0.5em; color: var(--oc-muted-foreground); font-size: 0.9em; text-align: start; }
+.oc-prose :where(th, td) { padding: 0.55em 0.75em; border-block-end: 1px solid var(--oc-border); text-align: start; vertical-align: top; }
+.oc-prose :where(thead th) { border-block-end-width: 2px; color: var(--oc-foreground); font-weight: 650; }
+.oc-prose :where(tbody tr:hover) { background: var(--oc-surface); }
+
+/* ---- Figure, image, caption ---- */
+.oc-prose :where(img, video, .oc-media-art) { display: block; max-inline-size: 100%; block-size: auto; border-radius: calc(var(--oc-radius) + 2px); }
+.oc-prose :where(figure) { margin-inline: 0; }
+.oc-prose :where(figure > .oc-media-art) { aspect-ratio: 16 / 9; }
+.oc-prose :where(figcaption) { margin-block-start: 0.6em; color: var(--oc-muted-foreground); font-size: 0.85em; line-height: 1.5; text-align: center; }
+
+/* ---- Horizontal rule ---- */
+.oc-prose :where(hr) { margin-block: 2.2em; border: 0; border-block-start: 1px solid var(--oc-border); }
+.oc-prose :where(hr + *) { margin-block-start: 0; }
+
+/* ---- Sizes and width ---- */
+.oc-prose--sm { font-size: 0.875rem; line-height: 1.65; }
+.oc-prose--lg { font-size: 1.125rem; line-height: 1.75; }
+.oc-prose--full { max-inline-size: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .oc-prose :where(a) { transition: none; }
+}

package/dist/parts/site-stack-list.css

@@ -0,0 +1,48 @@
+/* File: packages/ui/src/parts/site-stack-list.css
+   Map: list -> pill item -> optional icon -> neutral / small modifiers
+   Stack list: technology pills (tech stack of a product or project).
+   Accent: --oc-accent-from, or an .oc-accent--* preset on the list. */
+
+.oc-stack-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* One technology as a pill, tinted with the accent color. */
+.oc-stack-list__item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid color-mix(in oklch, var(--oc-accent-from) 35%, transparent);
+  border-radius: 999px;
+  background: color-mix(in oklch, var(--oc-accent-from) 10%, transparent);
+  color: var(--oc-foreground);
+  font-family: var(--oc-font-mono);
+  font-size: 0.88rem;
+  white-space: nowrap;
+}
+
+/* Small glyph, emoji or SVG before the name. */
+.oc-stack-list__icon {
+  display: inline-grid;
+  place-items: center;
+  inline-size: 1.1em;
+  color: var(--oc-accent-from);
+}
+.oc-stack-list__icon > :is(img, svg) { inline-size: 100%; block-size: auto; }
+
+/* Neutral pills: border + surface instead of the accent tint. */
+.oc-stack-list--neutral .oc-stack-list__item {
+  border-color: var(--oc-border);
+  background: var(--oc-surface);
+  color: var(--oc-muted-foreground);
+}
+
+/* Smaller pills (cards, table cells). */
+.oc-stack-list--sm { gap: 0.4rem; }
+.oc-stack-list--sm .oc-stack-list__item { padding: 0.25rem 0.65rem; font-size: 0.78rem; }

package/dist/parts/site-timeline.css

@@ -0,0 +1,54 @@
+/* File: packages/ui/src/parts/site-timeline.css
+   Map: item + marker dot -> date / title / text -> current item -> size modifier
+   Timeline component. The base .oc-timeline (vertical line, <strong> + <span> rows) lives in showcase.css.
+   This part only ADDS elements and modifiers, so the simple showcase markup keeps working unchanged. */
+
+/* One entry. The dot sits on the vertical line of .oc-timeline (its padding-inline-start is 1.25rem). */
+.oc-timeline__item {
+  position: relative;
+  padding-block-end: 0.25rem;
+}
+.oc-timeline__item::before {
+  content: "";
+  position: absolute;
+  /* Center the 0.7rem dot on the 1px line: padding (1.25rem) + half the dot (0.35rem) + half the line. */
+  inset-inline-start: calc(-1.25rem - 0.35rem - 0.5px);
+  inset-block-start: 0.35rem;
+  inline-size: 0.7rem;
+  aspect-ratio: 1;
+  border: 2px solid var(--oc-accent-from);
+  border-radius: 50%;
+  background: var(--oc-background);
+}
+
+/* Date or year label (use a <time> element when it is a real date).
+   Scoped under .oc-timeline so it wins over the showcase rules ".oc-timeline span / strong". */
+.oc-timeline .oc-timeline__date {
+  color: var(--oc-accent-from);
+  font-family: var(--oc-font-mono);
+  font-size: 0.85rem;
+}
+.oc-timeline .oc-timeline__title {
+  margin: 0;
+  color: var(--oc-foreground);
+  font-size: 1.05rem;
+  font-weight: 600;
+}
+.oc-timeline .oc-timeline__text {
+  margin: 0;
+  color: var(--oc-muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.55;
+}
+
+/* Current / latest entry: filled dot with a soft ring in the accent color. */
+.oc-timeline__item--current::before {
+  background: var(--oc-accent-from);
+  box-shadow: 0 0 0 4px color-mix(in oklch, var(--oc-accent-from) 25%, transparent);
+}
+
+/* Larger spacing between entries (about pages, long histories). */
+.oc-timeline--lg { gap: 1.75rem; }
+
+/* Line in the accent color instead of the neutral border. */
+.oc-timeline--accent { border-inline-start-color: color-mix(in oklch, var(--oc-accent-from) 55%, transparent); }