@splendidlabz/styles 4.9.0 → 4.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.9.0",
+  "version": "4.11.0",
   "description": "",
   "type": "module",
   "homepage": "https://splendidlabz.com/docs/styles",

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/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%;

package/src/effects/bezel.css

@@ -0,0 +1,334 @@
+@utility bezel {
+  @apply border-scaffold;
+  --x: 50%;
+  --y: 50%;
+  --dist: 0px;
+  --b: var(--border-width);
+  --r: var(--radius);
+  position: relative;
+  border-color: transparent;
+  background:
+    var(--inner-gradient, none),
+    linear-gradient(var(--bg-color, transparent), var(--bg-color, transparent)),
+    var(--outer-gradient, none);
+  background-origin: padding-box, padding-box, border-box;
+  background-clip: padding-box, padding-box, border-box;
+}
+
+/*********************
+ * Inner & Outer gradients *
+ *********************/
+@utility inner-radial {
+  --_shape: var(--inner-shape, var(--gradient-shape));
+  --_size: var(--inner-size, var(--gradient-size));
+  --_position: var(--inner-position, var(--gradient-position));
+  --inner-gradient: radial-gradient(
+    var(--_shape) var(--_size) at var(--_position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--inner-stops)
+  );
+}
+
+@utility outer-radial {
+  --_shape: var(--outer-shape, var(--gradient-shape));
+  --_size: var(--outer-size, var(--gradient-size));
+  --_position: var(--outer-position, var(--gradient-position));
+  --outer-gradient: radial-gradient(
+    var(--_shape) var(--_size) at var(--_position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--outer-stops)
+  );
+}
+
+@utility inner-linear {
+  --_angle: var(--inner-angle, var(--gradient-angle));
+  --inner-gradient: linear-gradient(
+    var(--_angle) in var(--color-space) var(--hue-interpolation),
+    var(--inner-stops)
+  );
+}
+
+@utility outer-linear {
+  --_angle: var(--outer-angle, var(--gradient-angle));
+  --outer-gradient: linear-gradient(
+    var(--_angle) in var(--color-space) var(--hue-interpolation),
+    var(--outer-stops)
+  );
+}
+
+@utility inner-conic {
+  --_angle: var(--inner-angle, var(--gradient-angle));
+  --_position: var(--inner-position, var(--gradient-position));
+  --inner-gradient: conic-gradient(
+    from var(--_angle) at var(--_position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--inner-stops)
+  );
+}
+
+@utility outer-conic {
+  --_angle: var(--outer-angle, var(--gradient-angle));
+  --_position: var(--outer-position, var(--gradient-position));
+  --outer-gradient: conic-gradient(
+    from var(--_angle) at var(--_position) in var(--color-space)
+      var(--hue-interpolation),
+    var(--outer-stops)
+  );
+}
+
+/*********************
+ * Spotlight *
+ *********************/
+@utility spotlight {
+  --proximity: max(
+    0,
+    1 - var(--dist, 9999px) /
+      max(var(--inner-size, 0px), var(--outer-size, 200px))
+  );
+}
+
+/*********************
+ * Bezel frost *
+ * Frosted variant. Ring lives on ::before so the element itself can carry backdrop-filter with no opaque layers in the way. 
+ *********************/
+/* stylelint-disable nesting-selector-no-missing-scoping-root */
+@utility bezel-frost {
+  @apply border-scaffold;
+  --b: var(--border-width);
+  --r: var(--radius);
+  --frost: 16px;
+  position: relative;
+  border-color: transparent;
+  backdrop-filter: blur(var(--frost));
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    inset: calc(-1 * var(--b));
+    padding: var(--b);
+    border-radius: inherit;
+    background: var(--outer-gradient, none);
+    mask:
+      linear-gradient(#000 0 0) content-box,
+      linear-gradient(#000 0 0);
+    mask-composite: exclude;
+  }
+}
+
+/*********************
+ * Bezel Arrow *
+ * Creates arrows with bezel-arrow-* where * is top|bottom|left|right . 
+ * Uses both before and pseudo elements. 
+ *********************/
+@utility bezel-arrow {
+  @apply bezel;
+  --a: var(--arrow-angle, 90deg);
+  --h: var(--arrow-height, 0.75em);
+  --p: var(--arrow-position, 50%);
+  overflow: visible;
+  z-index: 0;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--b));
+    z-index: -1;
+    background: inherit;
+  }
+
+  /* Per-layer sizes match the three-layer stack: inner, bg-color, outer.
+   * ::before = outer-only (the rim slice over the arrow tail).
+   * ::after  = card-interior slice (inner + bg-color, no outer). */
+  &::before {
+    background-size:
+      0 0,
+      0 0,
+      100% 100%;
+  }
+
+  &::after {
+    border: inherit;
+    background-size:
+      100% 100%,
+      100% 100%,
+      0 0;
+  }
+}
+
+@utility bezel-arrow-top {
+  @apply bezel-arrow;
+  border-radius: min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
+    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r)
+    var(--r) / var(--r);
+  background-position: bottom;
+  background-size: 100% calc(100% + var(--h));
+
+  &::before,
+  &::after {
+    top: calc(-1 * var(--b) - var(--h));
+  }
+
+  &::before {
+    clip-path: polygon(
+      min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
+        calc(var(--h) + var(--b)),
+      min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) var(--h),
+      var(--p) 0,
+      max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) var(--h),
+      max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) calc(var(--h) + var(--b))
+    );
+  }
+
+  &::after {
+    clip-path: polygon(
+      min(
+          100% - var(--b),
+          var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+            tan(45deg - var(--a) / 4)
+        )
+        calc(var(--h) + var(--b)),
+      var(--p) calc(var(--b) / sin(var(--a) / 2)),
+      max(
+          var(--b),
+          var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+            tan(45deg - var(--a) / 4)
+        )
+        calc(var(--h) + var(--b)),
+      50% 50%
+    );
+  }
+}
+
+@utility bezel-arrow-bottom {
+  @apply bezel-arrow;
+  border-radius: var(--r) var(--r)
+    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
+    min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);
+  background-size: 100% calc(100% + var(--h));
+
+  &::before,
+  &::after {
+    bottom: calc(-1 * var(--b) - var(--h));
+  }
+
+  &::before {
+    clip-path: polygon(
+      min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
+        calc(100% - var(--h) - var(--b)),
+      min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
+      var(--p) 100%,
+      max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
+      max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+        calc(100% - var(--h) - var(--b))
+    );
+  }
+
+  &::after {
+    clip-path: polygon(
+      min(
+          100% - var(--b),
+          var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+            tan(45deg - var(--a) / 4)
+        )
+        calc(100% - var(--h) - var(--b)),
+      var(--p) calc(100% - var(--b) / sin(var(--a) / 2)),
+      max(
+          var(--b),
+          var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+            tan(45deg - var(--a) / 4)
+        )
+        calc(100% - var(--h) - var(--b)),
+      50% 50%
+    );
+  }
+}
+
+@utility bezel-arrow-left {
+  @apply bezel-arrow;
+  border-radius: var(--r) /
+    min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r)
+    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2));
+  background-position: right;
+  background-size: calc(100% + var(--h)) 100%;
+
+  &::before,
+  &::after {
+    left: calc(-1 * var(--b) - var(--h));
+  }
+
+  &::before {
+    clip-path: polygon(
+      calc(var(--h) + var(--b))
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+      var(--h) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+      0 var(--p),
+      var(--h) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
+      calc(var(--h) + var(--b)) max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+    );
+  }
+
+  &::after {
+    clip-path: polygon(
+      calc(var(--h) + var(--b))
+        min(
+          100% - var(--b),
+          var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+            tan(45deg - var(--a) / 4)
+        ),
+      calc(var(--b) / sin(var(--a) / 2)) var(--p),
+      calc(var(--h) + var(--b))
+        max(
+          var(--b),
+          var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+            tan(45deg - var(--a) / 4)
+        ),
+      50% 50%
+    );
+  }
+}
+
+@utility bezel-arrow-right {
+  @apply bezel-arrow;
+  border-radius: var(--r) / var(--r)
+    min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
+    min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r);
+  background-size: calc(100% + var(--h)) 100%;
+
+  &::before,
+  &::after {
+    right: calc(-1 * var(--b) - var(--h));
+  }
+
+  &::before {
+    clip-path: polygon(
+      calc(100% - var(--h) - var(--b))
+        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+      calc(100% - var(--h)) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
+      100% var(--p),
+      calc(100% - var(--h)) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
+      calc(100% - var(--h) - var(--b))
+        max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
+    );
+  }
+
+  &::after {
+    clip-path: polygon(
+      calc(100% - var(--h) - var(--b))
+        min(
+          100% - var(--b),
+          var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
+            tan(45deg - var(--a) / 4)
+        ),
+      calc(100% - var(--b) / sin(var(--a) / 2)) var(--p),
+      calc(100% - var(--h) - var(--b))
+        max(
+          var(--b),
+          var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
+            tan(45deg - var(--a) / 4)
+        ),
+      50% 50%
+    );
+  }
+}

package/src/effects/fancybox.css

@@ -1,7 +1,4 @@
 :root {
-  --color-space: oklch;
-  --hue-interpolation: shorter hue;
-
   /* --inner-gradient: linear-gradient(var(--gradient-angle), #563444, #4ecdc4); */
   /* --bg-color: transparent;
   --outer-gradient: linear-gradient(