@splendidlabz/styles 4.3.2 → 4.4.1

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@splendidlabz/styles",
-  "version": "4.3.2",
+  "version": "4.4.1",
   "description": "",
   "type": "module",
   "author": "Zell Liew <zellwk@gmail.com>",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "scripts"
   ],
   "exports": {
     ".": "./src/styles.css",

package/scripts/all.js

@@ -0,0 +1,14 @@
+import { masonry, scrollableHorizontal, sticky } from './index.js'
+
+const defaultOptions = {
+  masonry: true,
+  sticky: true,
+  scrollable: true,
+}
+
+export function all(options = {}) {
+  options = { ...defaultOptions, ...options }
+  if (options.masonry) masonry(options.element)
+  if (options.sticky) sticky(options.element)
+  if (options.scrollable) scrollableHorizontal(options.element)
+}

package/scripts/index.js

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

package/scripts/masonry.js

@@ -0,0 +1,7 @@
+import { getElement, masonry as Masonry } from '@splendidlabz/utils/dom'
+
+export function masonry(selector) {
+  const container = getElement(selector) || document
+  const elements = Array.from(container.querySelectorAll("[class*='masonry']"))
+  elements.forEach(Masonry)
+}

package/scripts/scrollable.js

@@ -0,0 +1,14 @@
+import { getElement, preferHorizontalScroll } from '@splendidlabz/utils/dom'
+
+export function scrollableHorizontal(selector) {
+  const container = getElement(selector) || document
+
+  const elements = Array.from(
+    container.querySelectorAll('.scrollable-prefer-horizontal'),
+  )
+
+  if (container.classList?.contains('scrollable-prefer-horizontal'))
+    elements.push(container)
+
+  elements.forEach(preferHorizontalScroll)
+}

package/scripts/sticky.js

@@ -0,0 +1,35 @@
+import {
+  getElement,
+  mutationObserver,
+  sticky as Sticky,
+} from '@splendidlabz/utils/dom'
+
+/**
+ * Initializes sticky behavior for elements within a container.
+ * @param {string|HTMLElement} selector - The selector or element to initialize sticky behavior within.
+ * @param {Object} [options] - Optional settings.
+ * @param {number} [options.observeTimeout=0] - The timeout in milliseconds to observe DOM mutations.
+ */
+export function sticky(selector, { observerTimeout = 1000 } = {}) {
+  const container = getElement(selector) || document.body
+  const elements = Array.from(container.querySelectorAll('.sticky-check'))
+  if (container.classList.contains('sticky-check')) elements.push(container)
+
+  elements.forEach(Sticky)
+
+  if (observerTimeout) {
+    const obs = mutationObserver(container, {
+      childList: true,
+      subtree: true,
+      callback: function ({ entry, observer }) {
+        // Nodes seem to be added one by one, so getting the first one is enough
+        const node = entry.addedNodes[0]
+        const klass = node?.className
+        if (!klass || typeof klass !== 'string') return
+        if (!klass.includes('sticky-check')) return
+        Sticky(node)
+      },
+    })
+    if (observerTimeout) setTimeout(_ => obs.disconnect(), observerTimeout)
+  }
+}

package/src/components/css/card.css

@@ -54,14 +54,14 @@
 
   > :where(:first-child) {
     border-radius: 0;
-    border-top-left-radius: var(--radius);
-    border-bottom-left-radius: var(--radius);
+    border-top-left-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
   }
 
   > :where(:last-child) {
     border-radius: 0;
-    border-top-right-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
+    border-top-right-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
   }
 }
 
@@ -79,14 +79,14 @@
     border-style: var(--border-style);
   }
 
-  > :first-child {
-    border-top-left-radius: var(--radius);
-    border-top-right-radius: var(--radius);
+  > :where(:first-child) {
+    border-top-left-radius: calc(var(--radius) - var(--border-width));
+    border-top-right-radius: calc(var(--radius) - var(--border-width));
   }
 
-  > :last-child {
-    border-bottom-left-radius: var(--radius);
-    border-bottom-right-radius: var(--radius);
+  > :where(:last-child) {
+    border-bottom-left-radius: calc(var(--radius) - var(--border-width));
+    border-bottom-right-radius: calc(var(--radius) - var(--border-width));
   }
 }
 

package/src/components/css/prose.css

@@ -74,3 +74,8 @@
     }
   }
 }
+
+@utility prose-tight {
+  @apply prose;
+  gap: 1em;
+}

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

@@ -4,7 +4,7 @@
   * {
     fill: var(--fill-color);
     stroke: var(--stroke-color); /* Fallback to text color */
-    stroke-width: var(--stroke-width);
+    stroke-width: var(--stroke-width, revert-layer);
   }
 }
 

package/src/components/svelte/callout.css

@@ -16,7 +16,8 @@ Variables:
 
     :where(.callout-header) {
       padding-block: 0.375rem;
-      border-bottom: 1px solid var(--divider-color, var(--border-color));
+      border-bottom: var(--border-width) solid
+        var(--divider-color, var(--border-color));
       border-top-left-radius: inherit;
       border-top-right-radius: inherit;
       color: var(--text-callout-header, var(--text-color));

package/src/components/svelte/status.css

@@ -1,7 +1,6 @@
 @utility status {
   & {
     @apply border-scaffold;
-    margin-top: 1rem;
     padding: 1rem;
     color: var(--text-color);
     background-color: var(--bg-color);

package/src/effects/scrollbars.css

@@ -13,22 +13,27 @@
 
 @utility scrollbars-on {
   @layer base {
-    :root {
+    & {
       @media (prefers-color-scheme: light) {
-        --scrollbar-thumb-color: var(--scrollbar-thumb-color-light);
-        --scrollbar-track-color: var(--scrollbar-track-color-light);
+        --_thumb-fallback-color: var(--scrollbar-thumb-color-light);
+        --_track-fallback-color: var(--scrollbar-track-color-light);
       }
 
       @media (prefers-color-scheme: dark) {
-        --scrollbar-thumb-color: var(--scrollbar-thumb-color-dark);
-        --scrollbar-track-color: var(--scrollbar-track-color-dark);
+        --_thumb-fallback-color: var(--scrollbar-thumb-color-dark);
+        --_track-fallback-color: var(--scrollbar-track-color-dark);
       }
     }
 
+    &,
     * {
       scroll-behavior: var(--scroll-behavior);
       scrollbar-width: var(--scrollbar-width);
-      scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+      scrollbar-color: var(
+          --scrollbar-thumb-color,
+          var(--_thumb-fallback-color)
+        )
+        var(--scrollbar-track-color, var(--_track-fallback-color));
 
       /* Works on Chrome, Edge, and Safari */
       &::-webkit-scrollbar {

package/src/generic/anchors-and-buttons.css

@@ -49,6 +49,7 @@
   }
 
   a:where(:not(.button)) {
+    @apply pigment-without-border;
     --bg-color: transparent;
     --border-color: transparent;
   }

package/src/generic/form.css

@@ -54,7 +54,7 @@
     }
   }
 
-  /* This is for honeypot */
+  /* Honeypot */
   .form-field-helper {
     display: none !important;
   }

package/src/layouts/macro/grid.css

@@ -67,12 +67,12 @@
   @apply grid-scaffold;
   grid-template-columns:
     repeat(calc(var(--cols) - 1), minmax(0, 1fr))
-    minmax(0, auto);
+    minmax(0, var(--sbw, auto));
 }
 
 @utility grid-auto-fr {
   @apply grid-scaffold;
-  grid-template-columns: minmax(0, auto) repeat(
+  grid-template-columns: minmax(0, var(--sbw, auto)) repeat(
       calc(var(--cols) - 1),
       minmax(0, 1fr)
     );

package/src/layouts/position/nudge.css

@@ -74,17 +74,17 @@
  * Functional Utilities *
  *********************/
 @utility nudge-* {
-  --nudge: --value([length]);
+  --nudge: --value([*]);
   --nudge: calc(var(--spacing) * --value(integer));
 }
 
 @utility nudge-x-* {
-  --nudge-x: --value([length]);
+  --nudge-x: --value([*]);
   --nudge-x: calc(var(--spacing) * --value(integer));
 }
 
 @utility nudge-y-* {
-  --nudge-y: --value([length]);
+  --nudge-y: --value([*]);
   --nudge-y: calc(var(--spacing) * --value(integer));
 }
 

package/src/tools/pigment.css

@@ -31,7 +31,6 @@ Usage with the Fill System
  *********************/
 @utility pigment-scaffold {
   & {
-    @apply border-scaffold;
     @apply transition-scaffold;
     --_bgc: var(--bg-color);
     --_tc: var(--text-color, currentcolor);
@@ -132,7 +131,16 @@ Usage with the Fill System
  * Actual pigment utility *
  *********************/
 
+@utility pigment-without-border {
+  @apply pigment-scaffold;
+  @apply pigment-hover-scaffold;
+  @apply pigment-focus-scaffold;
+  @apply pigment-active-scaffold;
+  @apply pigment-selected-scaffold;
+}
+
 @utility pigment {
+  @apply border-scaffold;
   @apply pigment-scaffold;
   @apply pigment-hover-scaffold;
   @apply pigment-focus-scaffold;
@@ -149,6 +157,7 @@ Usage with the Fill System
 }
 
 @utility pigment-with-svg {
+  @apply border-scaffold;
   @apply pigment-scaffold;
   @apply pigment-svg-scaffold;
   @apply pigment-hover-scaffold;

package/src/tools/transitions.css

@@ -13,7 +13,7 @@
       var(--transition-easing);
     --transition-props:
       background, border, color, display, fill, opacity, outline, stroke,
-      transform;
+      transform, translate, scale, rotate, skew, perspective;
     transition: var(--transition-values);
     transition-property: var(--transition-props);
   }
@@ -24,8 +24,8 @@
     @apply transition-scaffold;
     --transition-props:
       backdrop-filter, background, border, color, display, fill, filter, gap,
-      opacity, outline, overlay, stroke, transform;
-    transition-behavior: allow-discrete;
+      opacity, outline, overlay, stroke, transform, translate, scale, rotate,
+      skew, perspective;
   }
 }
 

package/src/variables/font.css

@@ -27,7 +27,6 @@
   --text-21: 6.75rem;   /* 108px */
   --text-22: 7.5rem;    /* 120px */
 
-
   /* EM Values */
   --text-1e: 0.625em;   /* 10px */
   --text-2e: 0.6875em;  /* 11px */

package/src/variables/radius.css

@@ -2,7 +2,9 @@
  *********************/
 @theme {
   --radius-0.5: calc(var(--spacing) * 0.5);
+  --radius-0.75r: calc(var(--radius) * 0.75);
   --radius-1: calc(var(--spacing) * 1);
+  --radius-1.25: calc(var(--spacing) * 1.25);
   --radius-1.5: calc(var(--spacing) * 1.5);
   --radius-2: calc(var(--spacing) * 2);
   --radius-2.5: calc(var(--spacing) * 2.5);