@splendidlabz/styles 4.8.2 → 4.10.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.8.2",
+  "version": "4.10.1",
   "description": "",
   "type": "module",
   "homepage": "https://splendidlabz.com/docs/styles",
@@ -14,7 +14,7 @@
     ".": "./src/styles.css",
     "./components": "./src/components/index.css",
     "./layouts": "./src/layouts/direct.css",
-    "./layouts/no-tw": "./dist/no-tw/styles.css",
+    "./pigment": "./src/tools/pigment.css",
     "./scripts": "./scripts/index.js",
     "./scripts/*": "./scripts/*.js"
   },

package/scripts/all.js

@@ -1,9 +1,11 @@
 import { masonry, scrollableHorizontal, sticky } from './index.js'
+import { start as spotlight } from './spotlight.js'
 
 const defaultOptions = {
   masonry: true,
   sticky: true,
   scrollable: true,
+  spotlight: true,
 }
 
 export function all(options = {}) {
@@ -11,4 +13,5 @@ export function all(options = {}) {
   if (options.masonry) masonry(options.element)
   if (options.sticky) sticky(options.element)
   if (options.scrollable) scrollableHorizontal(options.element)
+  if (options.spotlight) spotlight()
 }

package/scripts/index.js

@@ -1,3 +1,4 @@
 export * from './masonry.js'
 export * from './scrollable.js'
 export * from './sticky.js'
+export * from './spotlight.js'

package/scripts/spotlight.js

@@ -0,0 +1,93 @@
+/* eslint-env browser */
+/*
+ * Spotlight tracker — vanilla cursor-position writer for `.spotlight` cards.
+ *
+ * Pairs with the `bezel` + `.spotlight` utilities in this package.
+ * Lives alongside the styles it powers so the script + CSS ship together.
+ *
+ * Behavior:
+ *   • One global `pointermove` listener on `window`.
+ *   • Discovery via live `HTMLCollection` — DOM updates membership for free.
+ *   • Rects cached in a `WeakMap` so departed nodes GC.
+ *   • rAF-coalesced writes: `--x`, `--y` (px, padding-box-origin) and `--dist` (px).
+ *   • No proximity math in JS — CSS owns falloff via
+ *     `max(0, 1 - --dist / max(--inner-size, --outer-size))`.
+ *   • On `mouseleave` from document.body, all cards' `--dist` is reset to a large
+ *     value so proximities collapse to 0.
+ *
+ * Call `start()` to begin tracking; `stop()` to tear down. Both are idempotent
+ * and SSR-safe.
+ *
+ * Spec: 2026-05-10-fancybox-spotlight.md
+ */
+
+// SSR guard — module must be import-safe in non-browser contexts.
+const isBrowser =
+  typeof window !== 'undefined' && typeof document !== 'undefined'
+
+let cards
+let rects
+let pending = false
+let started = false
+let mx = 0
+let my = 0
+
+function rectOf(card) {
+  let r = rects.get(card)
+  if (!r) {
+    r = card.getBoundingClientRect()
+    rects.set(card, r)
+  }
+  return r
+}
+
+function recache() {
+  for (const c of cards) rects.set(c, c.getBoundingClientRect())
+}
+
+function update() {
+  pending = false
+  for (const card of cards) {
+    const r = rectOf(card)
+    const dx = Math.max(r.left - mx, 0, mx - r.right)
+    const dy = Math.max(r.top - my, 0, my - r.bottom)
+    const dist = Math.hypot(dx, dy)
+
+    card.style.setProperty('--x', `${mx - r.left}px`)
+    card.style.setProperty('--y', `${my - r.top}px`)
+    card.style.setProperty('--dist', `${dist}px`)
+  }
+}
+
+function onMove(e) {
+  mx = e.clientX
+  my = e.clientY
+  if (pending) return
+  pending = true
+  requestAnimationFrame(update)
+}
+
+function onLeave() {
+  for (const c of cards) c.style.setProperty('--dist', '9999px')
+}
+
+export function start() {
+  if (!isBrowser || started) return
+  started = true
+  cards = document.getElementsByClassName('spotlight') // live HTMLCollection
+  rects = new WeakMap()
+
+  window.addEventListener('pointermove', onMove)
+  window.addEventListener('resize', recache)
+  window.addEventListener('scroll', recache, { passive: true })
+  document.body.addEventListener('mouseleave', onLeave)
+}
+
+export function stop() {
+  if (!isBrowser || !started) return
+  started = false
+  window.removeEventListener('pointermove', onMove)
+  window.removeEventListener('resize', recache)
+  window.removeEventListener('scroll', recache)
+  document.body.removeEventListener('mouseleave', onLeave)
+}

package/src/components/css/prose.css

@@ -1,86 +1,78 @@
 @utility prose {
-  & {
-    display: flex;
-    flex-flow: column;
-    gap: 1lh;
-    hanging-punctuation: first allow-end last;
-
-    /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
-    > * + :where(h2),
-    > * + :where(astro-island, astro-slot) > :where(h2):first-child {
-      margin-top: calc(var(--spacing) * 6);
-      scroll-margin-block: calc(var(--spacing) * 6);
-    }
-
-    > * + :where(h3),
-    > * + :where(astro-island, astro-slot) > :where(h3):first-child {
-      margin-top: calc(var(--spacing) * 4);
-      margin-bottom: calc(var(--spacing) * -2);
-      scroll-margin-block: calc(var(--spacing) * 4);
-    }
-
-    > * + :where(h4, h5, h6),
-    > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
-      margin-top: calc(var(--spacing) * 4);
-      margin-bottom: calc(var(--spacing) * -4);
-      scroll-margin-block: calc(var(--spacing) * 4);
-    }
-
-    :where(ul) {
-      list-style-type: initial;
-    }
-
-    /* Basic list styles */
-    :where(ul, ol),
-    > :where(astro-island, astro-slot) :where(ul, ol) {
-      list-style-position: outside;
-      margin-left: 2em;
+  display: flex;
+  flex-flow: column;
+  gap: 1lh;
+  hanging-punctuation: first allow-end last;
+
+  /* Using padding instead of margin, so #targets will leave some whitespace above when scrolling to the component. */
+  > * + :where(h2),
+  > * + :where(astro-island, astro-slot) > :where(h2):first-child {
+    margin-top: calc(var(--spacing) * 6);
+    scroll-margin-block: calc(var(--spacing) * 6);
+  }
 
-      :where(ul, ol) {
-        margin-left: 0;
-        padding-left: 2em;
-      }
+  > * + :where(h3),
+  > * + :where(astro-island, astro-slot) > :where(h3):first-child {
+    margin-top: calc(var(--spacing) * 4);
+    scroll-margin-block: calc(var(--spacing) * 4);
+  }
 
-      li {
-        font-variant-numeric: lining-nums;
-      }
+  > * + :where(h4, h5, h6),
+  > * + :where(astro-island, astro-slot) > :where(h4, h5, h6):first-child {
+    margin-top: calc(var(--spacing) * 2);
+    scroll-margin-block: calc(var(--spacing) * 2);
+  }
 
-      li + li {
-        margin-top: calc(var(--spacing));
-      }
+  :where(ul) {
+    list-style-type: initial;
+  }
 
-      li:has(li) + li {
-        margin-top: calc(var(--spacing) * 2);
-      }
+  /* Basic list styles */
+  :where(ul, ol),
+  > :where(astro-island, astro-slot) :where(ul, ol) {
+    list-style-position: outside;
+    margin-left: 2em;
 
-      li > :where(ul, ol) {
-        margin-top: calc(var(--spacing));
-      }
+    :where(ul, ol) {
+      margin-left: 0;
+      padding-left: 1em;
     }
 
-    :where(a) {
-      text-decoration-line: underline;
+    li {
+      font-variant-numeric: lining-nums;
     }
 
-    :where(> img),
-    :where(> figure img) {
-      border: 1px solid oklch(90% 0 0deg);
-      border-radius: var(--radius);
+    li + li {
+      margin-top: calc(var(--spacing));
     }
 
-    :where(> figure) {
-      inline-size: fit-content;
-      margin-inline: auto;
+    li > :where(ul, ol) {
+      margin-top: calc(var(--spacing));
     }
+  }
 
-    :where(> figure figcaption) {
-      contain: inline-size;
-    }
+  :where(a) {
+    text-decoration-line: underline;
+  }
 
-    :where(.fancylist) {
-      margin-left: 1em;
-      padding-left: 0;
-    }
+  :where(> img),
+  :where(> figure img) {
+    border: 1px solid oklch(90% 0 0deg);
+    border-radius: var(--radius);
+  }
+
+  :where(> figure) {
+    inline-size: fit-content;
+    margin-inline: auto;
+  }
+
+  :where(> figure figcaption) {
+    contain: inline-size;
+  }
+
+  :where(.fancylist) {
+    margin-left: 1em;
+    padding-left: 0;
   }
 }
 

package/src/components/css/simple-svg.css

@@ -15,21 +15,18 @@
  *********************/
 /* prettier-ignore */
 @utility spl-stroke-* {
-  & {
-    --stroke-width: --value([length]);
-    --stroke-color: --value(--color-*, [color]);
-    --stroke-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
-  }
+  --stroke-width: --spacing(--value(number));
+  --stroke-width: --value([length]);
+  --stroke-color: --value(--color-*, [color]);
+  --stroke-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(number)%
+  );
 }
 
-/*********************
- * Fill *
- * Allows spl-fill-<color>/<modifier> to create --fill-color
- *********************/
 /* prettier-ignore */
 @utility spl-fill-* {
-  & {
-    --fill-color: --value(--color-*, [color]);
-    --fill-color: oklch(from --value(--color-*, [color]) l c h / --modifier(integer)%);
-  }
+  --fill-color: --value(--color-*, [color]);
+  --fill-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(number)%
+  );
 }

package/src/components/css/strikethrough.css

@@ -1,3 +1,5 @@
+/* stylelint-disable declaration-block-no-duplicate-custom-properties */
+
 @utility strikethrough {
   position: relative;
   display: inline-block;
@@ -15,3 +17,26 @@
     transform-origin: center;
   }
 }
+
+/* prettier-ignore */
+@utility strike-angle-* {
+  --strike-angle: --value(number)deg;
+}
+
+/* prettier-ignore */
+@utility -strike-angle-* {
+  --strike-angle: calc(--value(number) * -1deg);
+}
+
+/* prettier-ignore */
+@utility strike-* {
+  /* strike-width  */
+  --strike-width: --spacing(--value(number));
+  --strike-width: --value([length]);
+
+  /* strike-color */
+  --strike-color: --value(--color-*, [color]);
+  --strike-color: oklch(
+    from --value(--color-*, [color]) l c h / --modifier(integer)%
+  );
+}

package/src/components/css/writing-mode.css

@@ -1,41 +1,37 @@
 @utility writing-normal {
+  transition: none;
   writing-mode: horizontal-tb;
 }
 
 @utility writing-rotate-left {
-  & {
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
+  transform: rotate(180deg);
+  transition: none;
+  writing-mode: vertical-rl;
+}
 
-    /* transform: rotate(180deg); */
-    /* transform: scale(-1, -1); */
+@utility writing-rotate-right {
+  transition: none;
+  writing-mode: vertical-lr;
+}
 
-    /* // This is the alternative if we don't want to use rotate */
-  }
+@utility writing-rotateleft {
+  @apply writing-rotate-left;
 }
 
-@utility writing-rotate-right {
-  & {
-    writing-mode: vertical-rl;
-    text-orientation: sideways;
-  }
+@utility writing-rotateright {
+  @apply writing-rotate-right;
 }
 
 @utility writing-downwards {
-  & {
-    writing-mode: vertical-lr;
-    text-orientation: upright;
-  }
+  writing-mode: vertical-lr;
+  text-orientation: upright;
 }
 
-/* Alias for writing-downwards */
-@utility writing-downards-lr {
+@utility writing-downwards-lr {
   @apply writing-downwards;
 }
 
 @utility writing-downwards-rl {
-  & {
-    writing-mode: vertical-rl;
-    text-orientation: upright;
-  }
+  writing-mode: vertical-rl;
+  text-orientation: upright;
 }

package/src/components/svelte/browserframe.css

@@ -60,6 +60,10 @@ dot-3-color */
     border-radius: 0 0 var(--radius) var(--radius);
     background: var(--bg-frame-content);
 
+    > :where(*) {
+      border-radius: inherit;
+    }
+
     > :where(.background) svg {
       width: 100%;
       height: 100%;