@birdycom/omniaui 0.12.1 → 0.12.2

package/dist/oc-theme.css

@@ -1,4 +1,4 @@
-/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.1. Do not edit. */
+/* File: oc-theme.css — generated from tokens/semantic.json by @birdycom/omniacss 0.12.2. 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/media-live-frame.css

@@ -0,0 +1,38 @@
+/* File: packages/ui/src/parts/media-live-frame.css
+   Map: frame (virtual size -> ratio, container) -> content at the virtual size, scaled to the frame width -> static
+   Live frame: shows a page (an <iframe>, or a <video>/<img>) at a virtual size such as 1280x720 and scales it down to
+   the width of its box, so a live site looks like a screenshot that is still alive. Pure CSS: the scale is
+   tan(atan2(100cqi, <virtual width>)), which is the frame width divided by the virtual width. On .oc-browser-frame__view
+   or on its own. Set the size with --oc-live-w / --oc-live-h (unitless px, default 1280 x 720). */
+
+.oc-live-frame {
+  --oc-live-w: 1280;
+  --oc-live-h: 720;
+  position: relative;
+  display: block;
+  /* Always the full width of its column (also inside flex or grid centring), the height follows the ratio. */
+  inline-size: 100%;
+  overflow: hidden;
+  aspect-ratio: var(--oc-live-w) / var(--oc-live-h);
+  container-type: inline-size;
+  background: var(--oc-background);
+}
+/* .oc-live-frame__content: any element (a whole demo page) at the virtual size. The class inside :is() also makes this
+   rule as strong as the .oc-browser-frame__view rule, which comes earlier, so on the view slot this one wins. */
+.oc-live-frame > :is(iframe, video, img, object, .oc-live-frame__content) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  display: block;
+  inline-size: calc(var(--oc-live-w) * 1px);
+  max-inline-size: none;
+  block-size: calc(var(--oc-live-h) * 1px);
+  border: 0;
+  transform-origin: 0 0;
+  scale: tan(atan2(100cqi, calc(var(--oc-live-w) * 1px)));
+}
+/* Right-to-left pages: scale from the other corner. */
+.oc-live-frame:dir(rtl) > :is(iframe, video, img, object, .oc-live-frame__content) { transform-origin: 100% 0; }
+
+/* A picture of a page, not a page to use: clicks and scrolling pass the frame by. */
+.oc-live-frame--static > :is(iframe, video, img, object, .oc-live-frame__content) { pointer-events: none; }

package/dist/parts/media-watermark.css

@@ -0,0 +1,96 @@
+/* File: packages/ui/src/parts/media-watermark.css
+   Map: overlay (click-through, sized to its box) -> text -> straight -> tiled -> corner stamp -> tones -> print
+   Watermark: a light layer with large slanted text ("CONCEPT", "DRAFT", "SAMPLE") over an image, a card or a live
+   frame. Put .oc-watermark as the last child of a positioned box (the utility .relative, or any position) with the
+   text in a <span>. Clicks go through to what is underneath (pointer-events: none). The text scales with the box
+   (container query units). Tokens: --oc-watermark-color, -opacity, -angle, -size. Omnia tokens only. */
+
+.oc-watermark {
+  --oc-watermark-color: var(--oc-foreground);
+  --oc-watermark-opacity: 0.12;
+  --oc-watermark-angle: -18deg;
+  --oc-watermark-size: clamp(1.75rem, 14cqi, 12rem);
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  container-type: size;
+  border-radius: inherit;
+  pointer-events: none;
+  user-select: none;
+}
+.oc-watermark > span {
+  rotate: var(--oc-watermark-angle);
+  color: oklch(from var(--oc-watermark-color) l c h / var(--oc-watermark-opacity));
+  font-size: var(--oc-watermark-size);
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.25em;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/* A logo (<img>, or an inline <svg> logo) or an icon (inline <svg> with currentColor) instead of, or next to, text.
+   An <img> keeps its own colors at the watermark opacity; --mono turns it into a flat gray stamp. An inline <svg>
+   takes the watermark color, like the text. Size: --oc-watermark-mark (default 40% of the box width). */
+.oc-watermark > :is(img, svg) {
+  inline-size: var(--oc-watermark-mark, 40cqi);
+  max-block-size: 70cqb;
+  block-size: auto;
+  rotate: var(--oc-watermark-angle);
+}
+.oc-watermark > img { opacity: calc(var(--oc-watermark-opacity) * 1.5); }
+.oc-watermark > svg { color: oklch(from var(--oc-watermark-color) l c h / var(--oc-watermark-opacity)); }
+.oc-watermark--mono > img { filter: grayscale(1) contrast(0.6); }
+/* Logo or icon above a word: wrap both in one <span class="oc-watermark__stack">. */
+.oc-watermark__stack { display: grid; justify-items: center; gap: 0.3em; }
+.oc-watermark__stack > :is(img, svg) { inline-size: 0.9em; block-size: auto; }
+.oc-watermark__stack > img { opacity: calc(var(--oc-watermark-opacity) * 1.5); }
+
+/* Horizontal text instead of slanted. */
+.oc-watermark--straight { --oc-watermark-angle: 0deg; }
+
+/* Tiled: repeat the text in several spans; they fill the box in a slanted grid (for proofs and previews). */
+.oc-watermark--tile {
+  --oc-watermark-size: clamp(0.9rem, 4.5cqi, 2.25rem);
+  /* Columns in rem: container units here would measure the parent of the box, not the box. */
+  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
+  align-content: space-evenly;
+  inset: -25%;
+  rotate: var(--oc-watermark-angle);
+}
+.oc-watermark--tile > :is(span, img, svg) { rotate: none; justify-self: center; }
+.oc-watermark--tile > span { letter-spacing: 0.15em; }
+.oc-watermark--tile > :is(img, svg) { inline-size: 2.5rem; }
+/* Logos and icons are narrower than words: narrower columns, so the whole box fills up. */
+.oc-watermark--tile:has(> :is(img, svg)) { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
+
+/* A small stamp in a corner instead of across the middle: --corner (bottom right) or --corner-top (top right).
+   Two classes, so a tone (--primary …) changes its color but not its readable opacity. */
+.oc-watermark:is(.oc-watermark--corner, .oc-watermark--corner-top) {
+  --oc-watermark-angle: 0deg;
+  --oc-watermark-size: 0.75rem;
+  --oc-watermark-opacity: 0.75;
+  place-items: end;
+  padding: 0.75rem;
+}
+.oc-watermark--corner-top { place-items: start end; }
+.oc-watermark:is(.oc-watermark--corner, .oc-watermark--corner-top) > span {
+  padding: 0.25rem 0.6rem;
+  border: 1px solid oklch(from var(--oc-watermark-color) l c h / 0.35);
+  border-radius: var(--oc-radius, 0.375rem);
+  background: oklch(from var(--oc-background) l c h / 0.7);
+  letter-spacing: 0.12em;
+}
+
+/* Tones: light text for dark images, the brand color, or red for "not for use". */
+.oc-watermark--light { --oc-watermark-color: var(--color-white-100); --oc-watermark-opacity: 0.22; }
+.oc-watermark--primary { --oc-watermark-color: var(--oc-primary); --oc-watermark-opacity: 0.16; }
+.oc-watermark--destructive { --oc-watermark-color: var(--oc-destructive); --oc-watermark-opacity: 0.2; }
+
+/* Printed proofs keep the watermark, a little stronger so it survives the printer. */
+@media print {
+  .oc-watermark { --oc-watermark-opacity: 0.2; print-color-adjust: exact; }
+}

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

@@ -0,0 +1,54 @@
+/* File: packages/ui/src/parts/site-link-row.css
+   Map: row (wraps) -> link -> external icon (http links) -> GitHub mark (github.com links) -> tones -> sizes
+   Link row: a row of links under a feature or product card ("Marketplace", "Source", "Docs"). Links to another site get
+   an "opens elsewhere" arrow by themselves, links to github.com the GitHub mark instead; links on your own site get
+   no icon. The icons are CSS masks in the text color, so they follow the tone and light/dark mode. */
+
+.oc-link-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem 1rem;
+  margin: 0.9rem 0 0;
+  padding: 0;
+  list-style: none;
+  font-size: 0.9rem;
+}
+.oc-link-row a {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  border-radius: 4px;
+  color: var(--oc-primary);
+  font-weight: 600;
+  text-decoration: none;
+}
+.oc-link-row a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
+.oc-link-row a:focus-visible { outline: 2px solid var(--oc-ring); outline-offset: 3px; }
+
+/* Icons: one mask per kind, filled with the text color. */
+.oc-link-row a:is([href^="http://"], [href^="https://"])::after,
+.oc-link-row a[href*="github.com"]::before {
+  content: "";
+  flex: none;
+  inline-size: 0.9em;
+  aspect-ratio: 1;
+  background: currentColor;
+  mask: var(--oc-link-row-icon) center / contain no-repeat;
+}
+.oc-link-row a:is([href^="http://"], [href^="https://"])::after {
+  --oc-link-row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
+}
+.oc-link-row a[href*="github.com"]::before {
+  --oc-link-row-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .5a11.5 11.5 0 0 0-3.64 22.41c.58.1.79-.25.79-.56v-2c-3.2.7-3.88-1.37-3.88-1.37-.52-1.33-1.28-1.69-1.28-1.69-1.05-.71.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.17 1.18a11 11 0 0 1 5.77 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.11 3.05.74.81 1.19 1.83 1.19 3.09 0 4.42-2.7 5.39-5.26 5.68.41.36.78 1.06.78 2.14v3.17c0 .31.21.67.8.56A11.5 11.5 0 0 0 12 .5Z'/%3E%3C/svg%3E");
+}
+/* A GitHub link shows the GitHub mark instead of the arrow. */
+.oc-link-row a[href*="github.com"]::after { content: none; }
+
+/* Tones: the element's accent (with an .oc-accent--* class), or muted text that brightens on hover. */
+.oc-link-row--accent a { color: light-dark(var(--oc-accent-from, var(--oc-primary)), oklch(from var(--oc-accent-from, var(--oc-primary)) max(l, 0.72) c h)); }
+.oc-link-row--muted a { color: var(--oc-muted-foreground); font-weight: 500; }
+.oc-link-row--muted a:hover { color: var(--oc-foreground); }
+
+/* Sizes */
+.oc-link-row--sm { font-size: 0.8rem; gap: 0.3rem 0.8rem; }
+.oc-link-row--lg { font-size: 1rem; }

package/manifest.json

@@ -1111,6 +1111,30 @@
       "requires": [
         "@birdycom/omniaui"
       ]
+    },
+    {
+      "name": "watermark",
+      "file": "snippets/watermark.html",
+      "description": "Light slanted text such as CONCEPT or DRAFT over an image, a card or a live frame",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "live-frame",
+      "file": "snippets/live-frame.html",
+      "description": "A live page at a virtual size such as 1280x720, scaled down to the frame width without JavaScript",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
+    },
+    {
+      "name": "link-row",
+      "file": "snippets/link-row.html",
+      "description": "A row of links under a feature card, with an external icon and the GitHub mark by themselves",
+      "requires": [
+        "@birdycom/omniaui"
+      ]
     }
   ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@birdycom/omniaui",
-  "version": "0.12.1",
+  "version": "0.12.2",
   "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",
@@ -57,7 +57,7 @@
     "omniaui": "./bin/omniaui.mjs"
   },
   "peerDependencies": {
-    "@birdycom/omniacss": "^0.12.1"
+    "@birdycom/omniacss": "^0.12.2"
   },
   "peerDependenciesMeta": {
     "@birdycom/omniacss": {

package/snippets/link-row.html

@@ -0,0 +1,14 @@
+<!-- OmniaUI component: link-row - A row of links under a feature card, with an external icon and the GitHub mark by themselves. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/link-row.html | Map: ul.oc-link-row -> li > a (own site: no icon; other site: arrow; github.com: mark)
+     Class API (modifiers are extra classes on the same element):
+       .oc-link-row: wrapping row of links, primary color
+       Icons: by the href (http(s) links: arrow; github.com: GitHub mark; relative links: none)
+       Modifiers: --accent (element accent, with .oc-accent--*), --muted, --sm, --lg
+     Slots: the list items
+-->
+<ul class="oc-link-row">
+  <li><a href="/docs/editor">How it works</a></li>
+  <li><a href="https://marketplace.visualstudio.com/items?itemName=Birdycom.omniacss-intellisense" rel="noopener">VS Code Marketplace</a></li>
+  <li><a href="https://open-vsx.org/extension/Birdycom/omniacss-intellisense" rel="noopener">Open VSX</a></li>
+  <li><a href="https://github.com/Birdycom/OmniaCSS" rel="noopener">Source</a></li>
+</ul>

package/snippets/live-frame.html

@@ -0,0 +1,20 @@
+<!-- OmniaUI component: live-frame - A live page at a virtual size such as 1280x720, scaled down to the frame width without JavaScript. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/live-frame.html | Map: browser frame with a live view -> a live frame on its own (static, other size)
+     Class API (modifiers are extra classes on the same element):
+       .oc-live-frame: box with the ratio of the virtual size; its iframe / video / img / .oc-live-frame__content is laid out
+         at that size and scaled to the box width (pure CSS: tan(atan2(100cqi, width)))
+       Modifiers: --static (clicks and scrolling pass through: a picture of a page)
+       Tokens: --oc-live-w, --oc-live-h (unitless px, default 1280 x 720)
+       Also on .oc-browser-frame__view, the view slot of the browser frame.
+     Slots: the iframe (or other content). Give the iframe a title; scrolling="no" hides its scrollbar.
+-->
+<div class="oc-browser-frame">
+  <div class="oc-browser-frame__bar"><i></i><i></i><i></i><span class="oc-browser-frame__address">omniaui.eu</span></div>
+  <div class="oc-browser-frame__view oc-live-frame">
+    <iframe src="https://omniaui.eu/" title="OmniaUI home page" loading="lazy" scrolling="no"></iframe>
+  </div>
+</div>
+
+<div class="oc-live-frame oc-live-frame--static" style="--oc-live-w: 1680; --oc-live-h: 1400">
+  <iframe src="https://omniacss.eu/" title="OmniaCSS home page" loading="lazy" scrolling="no" tabindex="-1"></iframe>
+</div>

package/snippets/watermark.html

@@ -0,0 +1,40 @@
+<!-- OmniaUI component: watermark - Light slanted text such as CONCEPT or DRAFT over an image, a card or a live frame. Needs @birdycom/omniaui CSS.
+     File: packages/ui/snippets/watermark.html | Map: positioned box -> content -> span.oc-watermark (last child) per variant
+     Class API (modifiers are extra classes on the same element):
+       .oc-watermark: click-through layer over its positioned parent, text in a <span>, scales with the box
+       Content: a <span> with text, an <img> logo or an inline <svg> icon; .oc-watermark__stack puts a mark above a word
+       Modifiers: --straight (no slant), --tile (repeat: several children), --corner / --corner-top (small stamp), --mono (gray logo),
+         --light (for dark images), --primary, --destructive
+       Tokens: --oc-watermark-color, --oc-watermark-opacity, --oc-watermark-angle, --oc-watermark-size
+     Slots: the text (one span; several for --tile). The layer is aria-hidden: say "draft" in the content if it matters.
+-->
+<figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
+  <span class="oc-media-art oc-media-art--3" role="img" aria-label="Kitchen, design"></span>
+  <span class="oc-watermark" aria-hidden="true"><span>Concept</span></span>
+</figure>
+
+<article class="oc-card relative">
+  <div class="oc-card-header"><h3 class="oc-card-title">Quote 2026-014</h3></div>
+  <div class="oc-card-content">Kitchen renovation, Hasselt. Valid for 30 days.</div>
+  <span class="oc-watermark oc-watermark--straight oc-watermark--destructive" aria-hidden="true"><span>Draft</span></span>
+</article>
+
+<figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
+  <span class="oc-media-art oc-media-art--5" role="img" aria-label="Passive house, photo"></span>
+  <span class="oc-watermark oc-watermark--tile oc-watermark--light" aria-hidden="true"><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span><span>Sample</span></span>
+</figure>
+
+<figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
+  <span class="oc-media-art oc-media-art--6" role="img" aria-label="Garden terrace, photo"></span>
+  <span class="oc-watermark oc-watermark--corner" aria-hidden="true"><span>Preview</span></span>
+</figure>
+
+<figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
+  <span class="oc-media-art oc-media-art--2" role="img" aria-label="Product photo"></span>
+  <span class="oc-watermark oc-watermark--mono" aria-hidden="true"><img src="/logo.svg" alt=""></span>
+</figure>
+
+<figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
+  <span class="oc-media-art oc-media-art--5" role="img" aria-label="Private photo"></span>
+  <span class="oc-watermark oc-watermark--light oc-watermark--straight" aria-hidden="true"><span class="oc-watermark__stack"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg><span>Private</span></span></span>
+</figure>