@birdycom/omniaui 0.11.1 → 0.12.0

package/dist/oc-theme.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.11.1. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.0. Do not edit. */
 /* Semantic theme tokens: every color is light-dark() of an Omnia palette token (oc-colors.css). */
 /* Same source as the desktop export: npx omniacss tokens --format json|dtcg|python */
 :root {

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

@@ -19,7 +19,7 @@
 .oc-fact-list--stacked dd { text-align: start; }
 
 /* Values in the accent color. */
-.oc-fact-list--accent dd { color: var(--oc-accent-from); }
+.oc-fact-list--accent dd { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); }
 
 /* Very narrow containers: wrap instead of squeezing label and value together. */
 .oc-fact-list > div { flex-wrap: wrap; }

package/dist/parts/site-link-arrow.css

@@ -20,7 +20,7 @@
 .oc-link-arrow--external:is(:hover, :focus-visible)::after { translate: 3px -3px; }
 
 /* Colors: accent of the element, or muted text that turns to the foreground color on hover. */
-.oc-link-arrow--accent { color: var(--oc-accent-from); }
+.oc-link-arrow--accent { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); }
 .oc-link-arrow--muted { color: var(--oc-muted-foreground); font-weight: 500; transition: color 0.2s; }
 .oc-link-arrow--muted:hover { color: var(--oc-foreground); }
 

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

@@ -47,7 +47,7 @@
 }
 .oc-next-teaser__tagline::after {
   content: "→";
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   transition: translate 0.25s var(--oc-ease-out);
 }
 
@@ -55,7 +55,7 @@
 .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);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   transition: translate 0.25s var(--oc-ease-out);
 }
 

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

@@ -58,7 +58,7 @@
 .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);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   box-shadow: none;
 }
 

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

@@ -50,6 +50,8 @@
   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));
+  /* The hover zoom grows down and sideways (clipped by the frame), never up over the title bar. */
+  transform-origin: 50% 0;
   transition: scale 0.5s var(--oc-ease-out);
 }
 
@@ -66,7 +68,7 @@
   padding: 0.2rem 0.6rem;
   border-radius: 999px;
   background: color-mix(in oklch, var(--oc-accent-from) 14%, transparent);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: 0.75rem;
   font-weight: 600;
 }
@@ -87,7 +89,7 @@
   gap: 0.4rem;
   margin-block-start: auto;
   padding-block-start: 0.6rem;
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: 0.9rem;
   font-weight: 600;
 }

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

@@ -32,7 +32,7 @@
   display: inline-grid;
   place-items: center;
   inline-size: 1.1em;
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
 .oc-stack-list__icon > :is(img, svg) { inline-size: 100%; block-size: auto; }
 

package/dist/parts/site-timeline.css

@@ -24,7 +24,7 @@
 /* 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);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-family: var(--oc-font-mono);
   font-size: 0.85rem;
 }

package/dist/showcase.css

@@ -4,7 +4,8 @@
         fact/tag/check lists -> site header -> site footer -> reveal on scroll */
 /* Showcase components — modern site/marketing building blocks, pure CSS (no JavaScript).
    Colors: Omnia palette tokens only (OKLCH), via the theme tokens of components.css.
-   Accent per element: --oc-accent-from / --oc-accent-to (or an .oc-accent--* preset). */
+   Accent per element: --oc-accent-from / --oc-accent-to (or an .oc-accent--* preset).
+   Accent as text color: in dark mode lifted to at least OKLCH L 0.72, so a dark custom accent stays readable. */
 
 :root {
   --oc-accent-from: var(--oc-brand-1);
@@ -47,7 +48,9 @@
 .oc-btn--pill { border-radius: 999px; }
 .oc-btn--gradient {
   border-radius: 999px;
-  background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to));
+  /* border-box: the gradient also runs under the transparent 1px border of .oc-btn; from the padding box it would
+     repeat in that border and show a thin stripe of the other end's color on both sides. */
+  background: linear-gradient(100deg, var(--oc-accent-from), var(--oc-accent-to)) border-box;
   color: var(--color-white-50);
   box-shadow: 0 10px 30px -10px var(--oc-accent-to);
   transition: transform 0.2s var(--oc-ease-out), box-shadow 0.2s;
@@ -173,7 +176,7 @@
   background:
     linear-gradient(135deg, oklch(from var(--oc-accent-from) l c h / 0.3), oklch(from var(--oc-accent-to) l c h / 0.18)),
     var(--oc-card);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
   font-size: calc(var(--oc-tile-size) * 0.45);
   line-height: 1;
 }
@@ -213,7 +216,7 @@
 }
 .oc-product-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-block-end: 0.75rem; }
 .oc-product-card__name { margin: 0; font-size: 1.45rem; font-weight: 700; letter-spacing: -0.02em; }
-.oc-product-card__tagline { margin: 0; color: var(--oc-accent-from); font-weight: 600; font-size: 0.95rem; }
+.oc-product-card__tagline { margin: 0; color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-weight: 600; font-size: 0.95rem; }
 .oc-product-card__summary { margin: 0; color: var(--oc-muted-foreground); font-size: 0.95rem; flex-grow: 1; }
 .oc-product-card__more { display: inline-flex; align-items: center; gap: 0.4rem; margin-block-start: 0.75rem; font-weight: 600; font-size: 0.92rem; }
 .oc-product-card__more::after { content: "→"; transition: translate 0.25s var(--oc-ease-out); }
@@ -235,18 +238,23 @@
 .oc-pill--accent {
   border-color: oklch(from var(--oc-accent-from) l c h / 0.45);
   background: oklch(from var(--oc-accent-from) l c h / 0.14);
-  color: var(--oc-accent-from);
+  color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h));
 }
+/* Pulse: the ring starts at --oc-status-dot-pulse-alpha of the accent and grows to --oc-status-dot-pulse-size.
+   --strong starts at the full accent with a wider ring. */
 .oc-status-dot {
+  --oc-status-dot-pulse-alpha: 0.6;
+  --oc-status-dot-pulse-size: 8px;
   inline-size: 0.5rem;
   aspect-ratio: 1;
   border-radius: 50%;
   background: var(--oc-accent-from);
   animation: oc-pulse 2s infinite;
 }
+.oc-status-dot--strong { --oc-status-dot-pulse-alpha: 1; --oc-status-dot-pulse-size: 10px; }
 @keyframes oc-pulse {
-  0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / 0.6); }
-  70%, 100% { box-shadow: 0 0 0 8px transparent; }
+  0% { box-shadow: 0 0 0 0 oklch(from var(--oc-accent-from) l c h / var(--oc-status-dot-pulse-alpha)); }
+  70%, 100% { box-shadow: 0 0 0 var(--oc-status-dot-pulse-size) transparent; }
 }
 
 /* Stat strip: big numbers in a bordered row (pairs with .oc-counter for counting up) */
@@ -277,7 +285,7 @@
     var(--oc-card);
 }
 .oc-spotlight__title { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0.5rem; font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.1; }
-.oc-spotlight__tagline { color: var(--oc-accent-from); font-size: 1.2rem; font-weight: 600; }
+.oc-spotlight__tagline { color: light-dark(var(--oc-accent-from), oklch(from var(--oc-accent-from) max(l, 0.72) c h)); font-size: 1.2rem; font-weight: 600; }
 .oc-spotlight__modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
 .oc-spotlight__modules > li { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem; border: 1px solid var(--oc-border); border-radius: var(--oc-radius-md); background: var(--oc-surface); font-size: 0.95rem; }
 
@@ -352,9 +360,14 @@
 }
 @media (max-width: 860px) {
   .oc-site-header__toggle { display: block; }
+  /* The author rule display:flex above beats the UA rule that hides a closed popover. */
+  .oc-site-header__nav[popover]:not(:popover-open) { display: none; }
   .oc-site-header__nav[popover]:popover-open {
     position: fixed;
     inset: 4.5rem 0 auto;
+    /* The UA popover style sizes to fit-content; let inset span the full width. */
+    inline-size: auto;
+    block-size: auto;
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/manifest.json

@@ -1103,6 +1103,14 @@
       "requires": [
         "@birdycom/omniaui"
       ]
+    },
+    {
+      "name": "carousel-loop",
+      "file": "snippets/carousel-loop.html",
+      "description": "Looping carousel: after the last slide the next button goes back to the first",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "OmniaUI components: CSS-first UI built on native HTML (dialog, popover, details) with light-dark() theming — no JavaScript required. Includes the omniaui CLI (add/list).",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,7 @@
     "./showcase.css": "./dist/showcase.css",
     "./snippets/*": "./snippets/*",
     "./data-table.js": "./dist/data-table.js",
+    "./carousel.js": "./dist/carousel.js",
     "./manifest.json": "./manifest.json",
     "./package.json": "./package.json"
   },
@@ -56,7 +57,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.11.1"
+    "@birdycom/omniacss": "^0.12.0"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {

package/snippets/carousel-loop.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: carousel-loop - Looping carousel: after the last slide the next button goes back to the first. Needs @birdycom/omniaui CSS and @birdycom/omniaui/carousel.js.
+     Class API: .oc-carousel--loop on the carousel, with .oc-carousel-prev / .oc-carousel-next buttons.
+     Script: import { initCarousels } from "@birdycom/omniaui/carousel.js"; initCarousels();
+     Without the script the buttons stay hidden and the CSS arrows (which stop at the ends) remain. -->
+<div class="oc-carousel oc-carousel--loop">
+  <div class="oc-carousel-viewport" id="loop-carousel" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Highlights">
+    <div class="oc-carousel-item" id="loop-slide-1" role="group" aria-roledescription="slide" aria-label="1 of 4">Slide 1</div>
+    <div class="oc-carousel-item" id="loop-slide-2" role="group" aria-roledescription="slide" aria-label="2 of 4">Slide 2</div>
+    <div class="oc-carousel-item" id="loop-slide-3" role="group" aria-roledescription="slide" aria-label="3 of 4">Slide 3</div>
+    <div class="oc-carousel-item" id="loop-slide-4" role="group" aria-roledescription="slide" aria-label="4 of 4">Slide 4</div>
+  </div>
+  <button class="oc-carousel-prev" type="button" aria-controls="loop-carousel" aria-label="Previous slide">&larr;</button>
+  <button class="oc-carousel-next" type="button" aria-controls="loop-carousel" aria-label="Next slide">&rarr;</button>
+  <nav class="oc-carousel-dots" aria-label="Choose a slide">
+    <a class="oc-carousel-dot" href="#loop-slide-1" aria-label="Slide 1"></a>
+    <a class="oc-carousel-dot" href="#loop-slide-2" aria-label="Slide 2"></a>
+    <a class="oc-carousel-dot" href="#loop-slide-3" aria-label="Slide 3"></a>
+    <a class="oc-carousel-dot" href="#loop-slide-4" aria-label="Slide 4"></a>
+  </nav>
+</div>

package/snippets/lightbox.html

@@ -47,4 +47,17 @@ document.addEventListener("command", (e) => {
   const id = e.source?.dataset.ocLightboxSlide;
   if (id) requestAnimationFrame(() => document.getElementById(id)?.scrollIntoView({ behavior: "instant", block: "nearest", inline: "center" }));
 }, true);
+// Optional: prev / next scroll without putting #slide in the address and the history (without this script they
+// are plain links), and closing removes a slide hash of this viewer from the address.
+document.addEventListener("click", (e) => {
+  const nav = e.target.closest?.("dialog.oc-lightbox a.oc-lightbox__nav");
+  const slide = nav && document.getElementById(decodeURIComponent(nav.hash.slice(1)));
+  if (!slide) return;
+  e.preventDefault();
+  slide.scrollIntoView({ behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "instant" : "smooth", block: "nearest", inline: "center" });
+});
+document.addEventListener("close", (e) => {
+  const slide = e.target.matches?.("dialog.oc-lightbox") && location.hash && document.getElementById(decodeURIComponent(location.hash.slice(1)));
+  if (slide && e.target.contains(slide)) history.replaceState(history.state, "", location.pathname + location.search);
+}, true);
 </script>