@birdycom/omniaui 0.11.2 → 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.2. 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-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);
 }
 

package/dist/showcase.css

@@ -48,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;
@@ -238,16 +240,21 @@
   background: oklch(from var(--oc-accent-from) l c h / 0.14);
   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) */

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.2",
+  "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.2"
+    "@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>