@birdycom/omniaui 0.12.1 → 0.12.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/README.md +2 -1
  2. package/bin/lib/copy-js.mjs +56 -0
  3. package/bin/omniaui.mjs +6 -2
  4. package/dist/carousel.js +11 -2
  5. package/dist/components.css +494 -6
  6. package/dist/components.min.css +1 -1
  7. package/dist/data-table.js +11 -2
  8. package/dist/oc-theme.css +1 -1
  9. package/dist/parts/app-status-dot.css +50 -0
  10. package/dist/parts/app-titlebar.css +96 -0
  11. package/dist/parts/media-glass.css +71 -0
  12. package/dist/parts/media-live-frame.css +38 -0
  13. package/dist/parts/media-watermark.css +96 -0
  14. package/dist/parts/site-link-row.css +54 -0
  15. package/dist/parts/site-prose.css +12 -0
  16. package/manifest.json +48 -0
  17. package/package.json +2 -2
  18. package/snippets/glass.html +24 -0
  19. package/snippets/link-row.html +14 -0
  20. package/snippets/live-frame.html +20 -0
  21. package/snippets/status-dot.html +15 -0
  22. package/snippets/titlebar.html +29 -0
  23. package/snippets/watermark.html +40 -0
package/snippets/watermark.html ADDED
@@ -0,0 +1,40 @@
1
+ <!-- OmniaUI component: watermark - Light slanted text such as CONCEPT or DRAFT over an image, a card or a live frame. Needs @birdycom/omniaui CSS.
2
+ File: packages/ui/snippets/watermark.html | Map: positioned box -> content -> span.oc-watermark (last child) per variant
3
+ Class API (modifiers are extra classes on the same element):
4
+ .oc-watermark: click-through layer over its positioned parent, text in a <span>, scales with the box
5
+ Content: a <span> with text, an <img> logo or an inline <svg> icon; .oc-watermark__stack puts a mark above a word
6
+ Modifiers: --straight (no slant), --tile (repeat: several children), --corner / --corner-top (small stamp), --mono (gray logo),
7
+ --light (for dark images), --primary, --destructive
8
+ Tokens: --oc-watermark-color, --oc-watermark-opacity, --oc-watermark-angle, --oc-watermark-size
9
+ Slots: the text (one span; several for --tile). The layer is aria-hidden: say "draft" in the content if it matters.
10
+ -->
11
+ <figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
12
+ <span class="oc-media-art oc-media-art--3" role="img" aria-label="Kitchen, design"></span>
13
+ <span class="oc-watermark" aria-hidden="true"><span>Concept</span></span>
14
+ </figure>
15
+
16
+ <article class="oc-card relative">
17
+ <div class="oc-card-header"><h3 class="oc-card-title">Quote 2026-014</h3></div>
18
+ <div class="oc-card-content">Kitchen renovation, Hasselt. Valid for 30 days.</div>
19
+ <span class="oc-watermark oc-watermark--straight oc-watermark--destructive" aria-hidden="true"><span>Draft</span></span>
20
+ </article>
21
+
22
+ <figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
23
+ <span class="oc-media-art oc-media-art--5" role="img" aria-label="Passive house, photo"></span>
24
+ <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>
25
+ </figure>
26
+
27
+ <figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
28
+ <span class="oc-media-art oc-media-art--6" role="img" aria-label="Garden terrace, photo"></span>
29
+ <span class="oc-watermark oc-watermark--corner" aria-hidden="true"><span>Preview</span></span>
30
+ </figure>
31
+
32
+ <figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
33
+ <span class="oc-media-art oc-media-art--2" role="img" aria-label="Product photo"></span>
34
+ <span class="oc-watermark oc-watermark--mono" aria-hidden="true"><img src="/logo.svg" alt=""></span>
35
+ </figure>
36
+
37
+ <figure class="relative m-0 w-full aspect-16 overflow-hidden rounded-lg">
38
+ <span class="oc-media-art oc-media-art--5" role="img" aria-label="Private photo"></span>
39
+ <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>
40
+ </figure>