overlapui 0.0.0-stage → 1.0.0

package/overlapui.fscss

@@ -0,0 +1,381 @@
+@define ou-root(root:root){`
+:@use(root) {
+  --ou-ring: #17203a;
+  --ou-ease: cubic-bezier(.3, 1.3, .5, 1);
+  --ou-time: .35s;
+
+  /* avatar-overlap */
+  --ou-size: 44px;
+  --ou-overlap: -14px;
+  --ou-gap: 6px;
+  --ou-c: #f59e0b;
+  --ou-letter: #fff;
+  --ou-ring-width: 3px;
+
+  /* card-overlap */
+  --ou-peek: 34px;
+  --ou-card-h: 76px;
+  --ou-card-gap: 10px;
+  --ou-card-bg: #1f2a48;
+  --ou-card-color: #cbd5ee;
+  --ou-card-title: #fff;
+  --ou-card-radius: 16px;
+  --ou-card-pad-y: 10px;
+  --ou-card-pad-x: 14px;
+  --ou-card-thumb: 48px;
+  --ou-card-thumb-radius: 12px;
+
+  /* img-overlap */
+  --ou-img: 96px;
+  --ou-img-overlap: -52px;
+  --ou-img-gap: 12px;
+  --ou-img-radius: 18px;
+  --ou-img-border: 3px;
+  --ou-img-tilt: -5deg;
+  --ou-img-tilt-even: 4deg;
+
+  /* circle-overlap */
+  --ou-item: 48px;
+  --ou-r: 86px;
+  --ou-center-bg: #ec4899;
+  --n: 6;
+}
+`}
+
+@define ou-avatar-size(size:44px, overlap:-14px){
+  --ou-size: @use(size);
+  --ou-overlap: @use(overlap);
+}
+
+@define ou-card-size(peek:34px, height:76px){
+  --ou-peek: @use(peek);
+  --ou-card-h: @use(height);
+}
+
+@define ou-img-size(size:96px, overlap:-52px){
+  --ou-img: @use(size);
+  --ou-img-overlap: @use(overlap);
+}
+
+@define ou-circle-size(item:48px, radius:86px){
+  --ou-item: @use(item);
+  --ou-r: @use(radius);
+}
+
+@define ou-avatar-colors(){`
+@arr ou-colors[
+  #ef4444, #f97316, #f59e0b, #eab308,
+  #84cc16, #22c55e, #10b981, #14b8a6,
+  #06b6d4, #0ea5e9, #3b82f6, #6366f1,
+  #8b5cf6, #a855f7, #d946ef, #ec4899,
+  #f43f5e, #fb7185, #fda4af, #fdba74,
+  #fde047, #bef264, #86efac, #5eead4,
+  #67e8f9, #7dd3fc,
+  #94a3b8, #64748b, #475569, #334155,
+  #1e293b, #0f172a, #78716c, #57534e,
+  #44403c, #292524,
+  #9ca3af
+]
+
+@arr ou-idx[count(26, 1)]
+@arr ou-num-idx[27, 28, 29, 30, 31, 32, 33, 34, 35, 36]
+@arr ou-low-letters[A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z]
+@arr ou-letters[a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r, s, t, u, v, w, x, y, z]
+`}
+
+@define avatar-overlap(sel:.avatar-overlap){`
+@ou-avatar-colors()
+
+@use(sel) {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+@use(sel) > li {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: var(--ou-size);
+  height: var(--ou-size);
+  margin-left: var(--ou-overlap);
+  border-radius: 50%;
+  background: var(--ou-c);
+  box-shadow: 0 0 0 var(--ou-ring-width) var(--ou-ring);
+  font-size: 0;
+  cursor: pointer;
+  transition:
+    margin var(--ou-time) var(--ou-ease),
+    transform .2s ease;
+}
+
+@use(sel) > li:first-child {
+  margin-left: 0;
+}
+
+@use(sel) > li::before {
+  content: attr(data-alph);
+  text-transform: uppercase;
+  font: 700 calc(var(--ou-size) * .4)/1 system-ui, sans-serif;
+  color: var(--ou-letter);
+}
+
+@use(sel) > li > img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+@use(sel) > li[data-alph] {
+  --ou-c: @arr.ou-colors[37] !important;
+}
+
+@use(sel) > li[data-alph="@arr.ou-letters[@arr.ou-idx[]]"] {
+  $i: @arr.ou-idx[];
+  --ou-c: @arr.ou-colors[$i!] !important;
+}
+
+@use(sel) > li[data-alph="@arr.ou-low-letters[@arr.ou-idx[]]"] {
+  $i: @arr.ou-idx[];
+  --ou-c: @arr.ou-colors[$i!] !important;
+}
+
+@use(sel) > li[data-alph="@arr.ou-num-idx[]"] {
+  $i: @arr.ou-num-idx[];
+  --ou-c: @arr.ou-colors[$i!] !important;
+}
+
+@use(sel):hover > li + li,
+@use(sel):focus-within > li + li {
+  margin-left: var(--ou-gap);
+}
+
+@use(sel) > li:hover {
+  transform: translateY(-4px);
+  z-index: 2;
+}
+`}
+
+@define card-overlap(sel:.card-overlap){`
+@use(sel) {
+  display: flex;
+  flex-direction: column;
+  width: min(100%, 340px);
+}
+
+@use(sel) > div {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: 12px;
+  align-content: center;
+  min-height: var(--ou-card-h);
+  margin-top: calc(var(--ou-peek) - var(--ou-card-h));
+  padding: var(--ou-card-pad-y) var(--ou-card-pad-x);
+  border-radius: var(--ou-card-radius);
+  background: var(--ou-card-bg);
+  color: var(--ou-card-color);
+  font: 400 13px/1.3 system-ui, sans-serif;
+  box-shadow:
+    0 -6px 16px rgba(0, 0, 0, .35),
+    0 0 0 1px rgba(255, 255, 255, .06);
+  transition:
+    margin var(--ou-time) var(--ou-ease),
+    transform .2s ease;
+}
+
+@use(sel) > div:first-child {
+  margin-top: 0;
+}
+
+@use(sel) > div > img {
+  grid-row: span 2;
+  width: var(--ou-card-thumb);
+  height: var(--ou-card-thumb);
+  border-radius: var(--ou-card-thumb-radius);
+  object-fit: cover;
+  background: linear-gradient(135deg, #16D89D, #015E6B);
+}
+
+@use(sel) > div > h3 {
+  margin: 0;
+  align-self: end;
+  font-size: 15px;
+  color: var(--ou-card-title);
+}
+
+@use(sel):hover > div + div,
+@use(sel):focus-within > div + div {
+  margin-top: var(--ou-card-gap);
+}
+
+@use(sel) > div:hover {
+  transform: translateX(6px);
+}
+`}
+
+@define img-overlap(sel:.img-overlap){`
+@use(sel) {
+  display: flex;
+  align-items: center;
+  width: max-content;
+  padding: 10px;
+}
+
+@use(sel) > img {
+  flex: none;
+  width: var(--ou-img);
+  height: var(--ou-img);
+  margin-left: var(--ou-img-overlap);
+  border: var(--ou-img-border) solid var(--ou-ring);
+  border-radius: var(--ou-img-radius);
+  object-fit: cover;
+  background: linear-gradient(135deg, #16D89D, #015E6B);
+  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
+  transform: rotate(var(--ou-img-tilt));
+  transition:
+    margin var(--ou-time) var(--ou-ease),
+    transform var(--ou-time) var(--ou-ease);
+}
+
+@use(sel) > img:first-child {
+  margin-left: 0;
+}
+
+@use(sel) > img:nth-child(even) {
+  transform: rotate(var(--ou-img-tilt-even));
+}
+
+@use(sel):hover > img,
+@use(sel):focus-within > img {
+  transform: rotate(0);
+}
+
+@use(sel):hover > img + img,
+@use(sel):focus-within > img + img {
+  margin-left: var(--ou-img-gap);
+}
+
+@use(sel) > img:hover {
+  transform: translateY(-6px) scale(1.04);
+  z-index: 2;
+}
+`}
+
+
+
+@define circle-overlap(sel:.circle-overlap){`
+@use(sel) {
+  position: relative;
+  z-index: 0;
+  isolation: isolate;
+  width: var(--ou-item);
+  height: var(--ou-item);
+  margin: calc(var(--ou-r) + var(--ou-item));
+}
+
+@use(sel) > * {
+  --c: #6366f1;
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  border: 0;
+  border-radius: 50%;
+  background: var(--c);
+  color: #fff;
+  font: 700 18px/1 system-ui, sans-serif;
+  text-decoration: none;
+  box-shadow: 0 0 0 var(--ou-ring-width) var(--ou-ring);
+  cursor: pointer;
+}
+
+@use(sel) > :first-child {
+  z-index: 2;
+  background: var(--ou-center-bg);
+  transition: transform var(--ou-time) var(--ou-ease);
+}
+
+@use(sel) > :not(:first-child) {
+  --a: calc(360deg / var(--n) * var(--i, 0));
+  opacity: 0;
+  pointer-events: none;
+  transform: scale(.5);
+  transition:
+    transform var(--ou-time) var(--ou-ease),
+    opacity .2s ease;
+  transition-delay: calc(var(--i, 0) * 30ms);
+}
+
+@use(sel):hover::before,
+@use(sel):focus-within::before {
+  content: "";
+  position: absolute;
+  inset: calc((var(--ou-r) + var(--ou-item)) * -1);
+  border-radius: 50%;
+}
+
+@use(sel):hover > :not(:first-child),
+@use(sel):focus-within > :not(:first-child) {
+  opacity: 1;
+  pointer-events: auto;
+  transform:
+    rotate(var(--a))
+    translateY(calc(var(--ou-r) * -1))
+    rotate(calc(var(--a) * -1));
+}
+
+@use(sel):hover > :first-child,
+@use(sel):focus-within > :first-child {
+  transform: rotate(45deg);
+}
+
+@use(sel) > :not(:first-child):hover {
+  filter: brightness(1.15);
+}
+
+@use(sel) > :nth-child(2)  { --i: 0; }
+@use(sel) > :nth-child(3)  { --i: 1; --c: #f59e0b; }
+@use(sel) > :nth-child(4)  { --i: 2; --c: #22c55e; }
+@use(sel) > :nth-child(5)  { --i: 3; --c: #06b6d4; }
+@use(sel) > :nth-child(6)  { --i: 4; --c: #ef4444; }
+@use(sel) > :nth-child(7)  { --i: 5; --c: #8b5cf6; }
+@use(sel) > :nth-child(8)  { --i: 6; --c: #14b8a6; }
+@use(sel) > :nth-child(9)  { --i: 7; --c: #f97316; }
+@use(sel) > :nth-child(10) { --i: 8; --c: #84cc16; }
+@use(sel) > :nth-child(11) { --i: 9; --c: #e11d48; }
+@use(sel) > :nth-child(12) { --i: 10; --c: #0ea5e9; }
+@use(sel) > :nth-child(13) { --i: 11; --c: #a855f7; }
+`}
+
+@define ou-reduced-motion(){`
+@media (prefers-reduced-motion: reduce) {
+  .avatar-overlap > li,
+  .card-overlap > div,
+  .img-overlap > img,
+  .circle-overlap > * {
+    transition: none;
+  }
+}
+`}
+
+@define overlapui(
+  avatar:.avatar-overlap,
+  card:.card-overlap,
+  img:.img-overlap,
+  circle:.circle-overlap
+){`
+@ou-root()
+@avatar-overlap(@use(avatar))
+@card-overlap(@use(card))
+@img-overlap(@use(img))
+@circle-overlap(@use(circle))
+@ou-reduced-motion()
+`}

package/overlapui.standalone.fscss

@@ -0,0 +1,20 @@
+/* overlapui.standalone.fscss
+   Full expand of overlapui for developers who link plain CSS only.
+   Selective / token-driven use: import from overlapui.fscss in your own .fscss file.
+
+   Build:  npx fscss@1.2.5 overlapui.standalone.fscss overlapui.css
+   CI:     .github/workflows/compile-standalone.yml
+*/
+
+@import((
+*
+) from "./overlapui.fscss")
+
+/* Expand every public mixin onto default selectors */
+@ou-root()
+@avatar-overlap(.avatar-overlap)
+@card-overlap(.card-overlap)
+@img-overlap(.img-overlap)
+@circle-overlap(.circle-overlap)
+@ou-reduced-motion()
+

package/package.json

@@ -1,6 +1,48 @@
 {
   "name": "overlapui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "CSS-first overlapping UI stacks for FSCSS — plus plain overlapui.css for non-FSCSS pages",
+  "main": "overlapui.fscss",
+  "style": "overlapui.css",
+  "files": [
+    "overlapui.fscss",
+    "overlapui.standalone.fscss",
+    "overlapui.css",
+    "overlapui.min.css",
+    "README.md",
+    "templates"
+  ],
+  "scripts": {
+    "build:css": "fscss overlapui.standalone.fscss overlapui.css"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fscss-ttr/overlapui.fscss.git"
+  },
+  "homepage": "https://github.com/fscss-ttr/overlapui.fscss#readme",
+  "bugs": {
+    "url": "https://github.com/fscss-ttr/overlapui.fscss/issues"
+  },
+  "author": "Figsh (https://github.com/Figsh)",
+  "contributors": [
+    {
+      "name": "fscss-ttr",
+      "url": "https://github.com/fscss-ttr"
+    }
+  ],
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/Figsh"
+  },
+  "keywords": [
+    "fscss",
+    "css",
+    "overlap",
+    "avatar",
+    "ui",
+    "circle-menu",
+    "card-stack"
+  ],
+  "license": "MIT",
+  "type": "commonjs"
+}

package/templates/README.md

@@ -0,0 +1,9 @@
+# templates
+
+Example pages for **overlapui.fscss**.
+
+| Folder | Description |
+|--------|-------------|
+| [stacks/](./stacks/) | Avatar, card, image, circle menu, members table |
+
+Feel free to Add more focused demos as `templates/<name>/` with README.

package/templates/stacks/Index.html

@@ -0,0 +1,163 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>overlapui stacks — template</title>
+  <meta name="description" content="Template demo for overlapui.fscss: avatar, card, image, and circle stacks.">
+  <script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>
+  <link type="text/fscss" href="stacks.fscss">
+  <!-- Prod: npx fscss@1.2.5 stacks.fscss css/stacks.css then link css/stacks.css -->
+</head>
+<body>
+  <div class="page">
+    <header class="page-head">
+      <h1>overlapui stacks</h1>
+      <p>
+        Focused template for
+        <a href="https://github.com/fscss-ttr/overlapui.fscss" target="_blank" rel="noopener">overlapui.fscss</a>
+        — avatars, cards, images, and a radial circle menu. Hover or focus stacks to open them.
+      </p>
+    </header>
+
+    <div class="grid">
+      <section class="section">
+        <h2>Avatar overlap</h2>
+        <div class="center-block">
+          <ul class="avatar-overlap" tabindex="0">
+            <li data-alph="g">Gina</li>
+            <li data-alph="h"><img src="https://i.pravatar.cc/80?img=12" alt="">Hank</li>
+            <li data-alph="i">Ivy</li>
+            <li data-alph="j">Jo</li>
+            <li data-alph="5">Ops</li>
+          </ul>
+        </div>
+        <p class="hint">data-alph drives letter + color · optional img covers the face</p>
+      </section>
+
+      <div class="grid grid-2">
+        <section class="section">
+          <h2>Card overlap</h2>
+          <div class="card-overlap" tabindex="0">
+            <div>
+              <img src="https://picsum.photos/96?random=1" alt="">
+              <h3>Invoice paid</h3>
+              Acme · $2,400
+            </div>
+            <div>
+              <img src="https://picsum.photos/96?random=2" alt="">
+              <h3>Seat added</h3>
+              overlapui workspace
+            </div>
+            <div>
+              <img src="https://picsum.photos/96?random=3" alt="">
+              <h3>Comment</h3>
+              “Ship the circle menu”
+            </div>
+          </div>
+        </section>
+
+        <section class="section">
+          <h2>Image overlap</h2>
+          <div class="center-block">
+            <div class="img-overlap" tabindex="0">
+              <img src="https://picsum.photos/120?random=4" alt="">
+              <img src="https://picsum.photos/120?random=5" alt="">
+              <img src="https://picsum.photos/120?random=6" alt="">
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <section class="section">
+        <h2>Circle overlap (settings-style)</h2>
+        <div class="circle-demo">
+          <div class="circle-overlap" style="--n:5" tabindex="0">
+            <button type="button" aria-label="Open menu">+</button>
+            <a href="#profile" aria-label="Profile">P</a>
+            <a href="#billing" aria-label="Billing">B</a>
+            <a href="#team" aria-label="Team">T</a>
+            <a href="#keys" aria-label="API keys">K</a>
+            <a href="#out" aria-label="Sign out">×</a>
+          </div>
+        </div>
+        <p class="hint">First child is the center · --n is satellite count</p>
+      </section>
+
+      <section class="section">
+        <h2>Members table</h2>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th>Members</th>
+                <th>Role</th>
+                <th>Balance</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>
+                  <div class="member-cell">
+                    <ul class="avatar-overlap" tabindex="0">
+                      <li data-alph="a"><img src="https://i.pravatar.cc/72?img=11" alt="">Ada</li>
+                      <li data-alph="n">Nia</li>
+                      <li data-alph="k">Ken</li>
+                    </ul>
+                    <div class="member-meta">
+                      <strong>Design pod</strong>
+                      <span>3 people</span>
+                    </div>
+                  </div>
+                </td>
+                <td>Product design</td>
+                <td class="amount pos">+$1,240</td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="member-cell">
+                    <ul class="avatar-overlap" tabindex="0">
+                      <li data-alph="m">Mo</li>
+                      <li data-alph="s"><img src="https://i.pravatar.cc/72?img=15" alt="">Sam</li>
+                    </ul>
+                    <div class="member-meta">
+                      <strong>Platform</strong>
+                      <span>2 people</span>
+                    </div>
+                  </div>
+                </td>
+                <td>Engineering</td>
+                <td class="amount pos">+$890</td>
+              </tr>
+              <tr>
+                <td>
+                  <div class="member-cell">
+                    <ul class="avatar-overlap" tabindex="0">
+                      <li data-alph="r">Rae</li>
+                      <li data-alph="j">Jo</li>
+                      <li data-alph="t">Ty</li>
+                    </ul>
+                    <div class="member-meta">
+                      <strong>Growth</strong>
+                      <span>3 people</span>
+                    </div>
+                  </div>
+                </td>
+                <td>GTM</td>
+                <td class="amount neg">−$120</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+
+    <footer class="page-foot">
+      Module:
+      <a href="https://github.com/fscss-ttr/overlapui.fscss">overlapui.fscss</a>
+      · Lives in this repo at
+      <code>overlapui.fscss/templates/stacks</code>
+    </footer>
+  </div>
+</body>
+</html>

package/templates/stacks/README.md

@@ -0,0 +1,56 @@
+# templates/stacks
+
+Focused demo for **overlapui.fscss** — avatar, card, image, and circle stacks, plus a members table.
+
+## Path in this repo
+
+```text
+overlapui.fscss/
+├── overlapui.fscss
+├── README.md
+└── templates/
+    └── stacks/
+        ├── index.html
+        ├── stacks.fscss
+        └── README.md
+```
+
+## Run
+
+From `templates/stacks/`:
+
+```bash
+npx serve .
+```
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>
+<link type="text/fscss" href="stacks.fscss">
+```
+
+`stacks.fscss` imports the module via relative path:
+
+```fscss
+@import((*) from "../../overlapui.fscss")
+```
+
+Or 
+
+```fscss
+@import((*) from overlapui)
+```
+
+## Compile
+
+```bash
+npx fscss stacks.fscss stacks.css
+```
+
+## Requires
+
+- FSCSS **1.2.5+** recommended
+- Parent module: `overlapui.fscss` at repo root
+
+## License
+
+MIT — same as the main module.