npm - @f12io/maple - Versions diffs - 2.0.1 - Mend

@f12io/maple 2.0.1

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 (63) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,33 @@
+The Root Source License (ROOT) v1.0
+Copyright (c) 2026 f12.io
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Root"), to deal
+in the Root without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Root, subject to the following distribution conditions, where
+"The System" refers to any structure that encapsulates the Root in an
+abstract form, capable of recreating a copy or substantial portions of
+the Root on-demand.
+A. Distribution of The Root: If you distribute the Root, the above
+copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Root.
+B. Distribution through The System: If you provide public network access
+to a System, allowing it to act as a distribution channel—regardless of
+the percentage of the Root's coverage in that System—the above copyright
+notice and this permission notice shall be included in all copies or
+substantial portions of the Root distributed by the System.
+C. Severability: If any provision of this License is held to be unenforceable,
+the remainder of the License shall remain in full force and effect.
+THE ROOT IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE ROOT OR THE USE OR OTHER DEALINGS IN THE ROOT.

package/README.md ADDED Viewed

@@ -0,0 +1,187 @@
+<div align="center">
+  <h1>Maple</h1>
+  <p>
+    A variable-first, stack-agnostic runtime CSS engine.<br>
+    Atomic. Tiny (~12kb gzipped). Delightfully intuitive.
+  </p>
+  <p>
+    Zero build steps • Zero configuration • Zero dependencies
+  </p>
+  <p>
+    <a href="#quick-start">Quick Start</a> •
+    <a href="#why-maple">Why Maple?</a> •
+    <a href="#documentation">Documentation</a> •
+    <a href="https://maple.f12.io">Website</a>
+  </p>
+</div>
+## TL;DR
+Maple is a runtime CSS engine that generates atomic styles from utility classes **only when they appear in the DOM**.
+Instead of shipping pre-compiled stylesheets, Maple ships a small JavaScript file that observes the DOM and constructs CSSOM incrementally as your application renders. If a class is never used, its style is never generated.
+This shifts styling cost from upfront network transfer to demand-driven runtime generation. It eliminates build steps, complex configuration, and unused CSS, while keeping styles encapsulated.
+## Quick Start
+Add Maple to your project by including the script below in the document `<head>` and start styling with utility classes.
+```html
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Include Maple in the head -->
+    <script src="https://cdn.jsdelivr.net/npm/@f12io/maple/dist/maple.js"></script>
+  </head>
+  <body>
+    <!-- Start styling -->
+    <div class="bgc-blue-500 c-white p-4 rad-2">Hello World</div>
+  </body>
+</html>
+```
+> [!IMPORTANT]
+> Load Maple as a blocking script in the document head.
+>
+> Maple replaces a render-blocking stylesheet with a small render-blocking runtime. Loading it with `async`, `defer`, `type="module"`, or at the end of the body allows the browser to paint elements before Maple has generated their styles, which can cause a Flash of Unstyled Content.
+> [!TIP]
+> For production, pin Maple to a specific version:
+>
+> ```html
+> <script src="https://cdn.jsdelivr.net/npm/@f12io/maple@x.y.z/dist/maple.js"></script>
+> ```
+## Why Maple?
+Instead of generating or optimizing CSS files ahead of time, Maple generates styles **on-demand** as the browser encounters classes.
+That model creates benefits across delivery, developer experience, and styling power.
+### Delivery & Performance
+- [Constant Transfer Size](https://maple.f12.io/docs/why-maple/constant-transfer-size): Maple ships as a single ~12kb gzipped JavaScript file.
+- [Incremental CSSOM](https://maple.f12.io/docs/why-maple/incremental-cssom): CSS is constructed incrementally based on what appears on the page.
+- [Automatic Code Splitting](https://maple.f12.io/docs/why-maple/automatic-splitting): If a component is not on the screen, its styling cost is zero.
+- [Zero Dead Code](https://maple.f12.io/docs/why-maple/no-unused-styles): Styles cannot exist "just in case"; they are generated only from classes that appear in the DOM.
+### Developer Experience
+- [No Build Step](https://maple.f12.io/docs/why-maple/no-build-step): Include the script and start styling.
+- [No Configuration Files](https://maple.f12.io/docs/why-maple/no-configuration-files): Maple observes the DOM using a `MutationObserver` instead of scanning source files.
+- [No Special SSR Treatment](https://maple.f12.io/docs/why-maple/no-special-ssr-treatment): Maple behaves the same whether HTML is produced by Next.js, Remix, Nuxt, PHP, or served as a static file.
+- [Universal Portability](https://maple.f12.io/docs/why-maple/universal-portability): If you can add a `<script>` tag, you can use Maple.
+### Styling Power
+- [Dynamic Data as CSS](https://maple.f12.io/docs/why-maple/dynamic-data-as-css): Maple treats dynamic data exactly like static class names.
+- [Variable-first Architecture](https://maple.f12.io/docs/why-maple/variable-first-architecture): Utilities map to semantic fallback chains of CSS variables.
+- [Dynamic Color Manipulation](https://maple.f12.io/docs/why-maple/dynamic-color-manipulation): Color utilities resolve through CSS variables in the OKLCH color space.
+- [True Encapsulation](https://maple.f12.io/docs/why-maple/true-encapsulation): Selector logic can live inside the class name itself.
+## Syntax
+Every Maple class name follows a colon-separated structure:
+```txt
+media-query:selector:utility
+```
+The first two parts are optional, so Maple scales from simple utilities to advanced state management.
+```html
+<div class="bgc-red"></div>
+<div class="&:hover:bgc-red"></div>
+<div class="@md:^.active:bgc-red"></div>
+```
+Learn the full syntax in the [Syntax Reference](https://maple.f12.io/docs/syntax).
+## Examples
+### Variable-first Utilities
+Maple maps utility classes to cascading CSS variables rather than hardcoded values. You can also define variables directly in HTML using class syntax.
+```html
+<div class="--primary=blue bgc-primary-200 c-primary-700">I am blue.</div>
+```
+When you want to bypass the variable system, use `=` to inject a literal value directly:
+```html
+<div class="w=86% c=#ff0000"></div>
+```
+Read more in [Variable-first Architecture](https://maple.f12.io/docs/why-maple/variable-first-architecture) and [Variable Utilities](https://maple.f12.io/docs/guide).
+### Dynamic Classes
+Because Maple observes the DOM directly, dynamically generated class names work naturally.
+```jsx
+<div className={`md:bg-${userColor} w=${progress}%`}></div>
+```
+Read more in [Dynamic Data as CSS](https://maple.f12.io/docs/why-maple/dynamic-data-as-css).
+### Dynamic Colors
+Maple color utilities resolve through CSS variables in the OKLCH color space, making lightness, chroma, hue, and alpha adjustable at runtime.
+```html
+<div class="bgc-primary-320/70 c-white/80"></div>
+<div class="c-coral-600"></div>
+<div class="bg-teal/70"></div>
+<div class="c-slateblue-500/20"></div>
+```
+Read more in [Dynamic Color Manipulation](https://maple.f12.io/docs/why-maple/dynamic-color-manipulation) and try the [Native Palette](https://maple.f12.io/docs/guide/native-palette).
+### Inline Selectors
+Maple supports selector logic inside utility classes.
+```html
+<button class="c-red ^.card:c-green ^.nav:c-blue">
+  Text is green when in a card and blue when in a navigation bar.
+</button>
+<button class="&:hover:c-black">The text becomes black on hover</button>
+<div class="/>span:fw=700">
+  <span>This text is bold</span>
+</div>
+```
+Read more in [True Encapsulation](https://maple.f12.io/docs/why-maple/true-encapsulation) and [Selectors](https://maple.f12.io/docs/syntax/selectors).
+## Limitations & Trade-offs
+Maple's architecture offers unique benefits but also introduces constraints you should understand before adoption.
+- **JavaScript is Required.** Maple runs entirely in the browser and does not generate static CSS. If JavaScript is disabled, the page will render without styles.
+- **Runtime Cost Scaling.** Maple's generation work scales with the number of **unique** utility classes that appear in the DOM.
+- **Not all CSS fits in Utilities.** Certain patterns, such as keyframes, font-face declarations, and global resets, are often better expressed in traditional CSS.
+- **Relative OKLCH Colors.** As of May 2026, global support for relative color syntax is about 89%, with broader support for plain OKLab and OKLCH colors. Browsers that do not support relative color syntax ignore those generated color declarations.
+## Documentation
+- [Introduction](https://maple.f12.io/docs)
+- [Quick Start](https://maple.f12.io/docs/quick-start)
+- [Why Maple?](https://maple.f12.io/docs/why-maple)
+- [Syntax Reference](https://maple.f12.io/docs/syntax)
+- [Guide](https://maple.f12.io/docs/guide)
+## Contributing
+If you're interested in contributing to Maple, please read our [contributing docs](https://github.com/f12io/maple/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.
+## License
+Released under the [Root Source License (ROOT)](https://github.com/f12io/maple/blob/main/LICENSE), an MIT-style permissive license with an additional distribution condition for systems that can recreate the source on demand. © [f12.io](https://f12.io)

package/dist/keyframes.css ADDED Viewed

@@ -0,0 +1,445 @@
+/**
+ * Include: <link rel="stylesheet" href="keyframes.css">
+ * Usage: <div class="anim-fade-in">Fades in</div>
+ */
+/* ============================================
+   Fade Animations
+   ============================================ */
+@keyframes fade-in {
+  from {
+    opacity: var(--fade-from-opacity, 0);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 1);
+  }
+}
+@keyframes fade-out {
+  from {
+    opacity: var(--fade-from-opacity, 1);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 0);
+  }
+}
+@keyframes fade-in-up {
+  from {
+    opacity: var(--fade-from-opacity, 0);
+    transform: translate3d(0, var(--fade-distance, 48px), 0)
+      scale(var(--fade-scale-from, 0.98));
+  }
+  to {
+    opacity: var(--fade-to-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes fade-in-down {
+  from {
+    opacity: var(--fade-from-opacity, 0);
+    transform: translate3d(0, calc(var(--fade-distance, 48px) * -1), 0)
+      scale(var(--fade-scale-from, 0.98));
+  }
+  to {
+    opacity: var(--fade-to-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes fade-in-left {
+  from {
+    opacity: var(--fade-from-opacity, 0);
+    transform: translate3d(var(--fade-distance, 48px), 0, 0)
+      scale(var(--fade-scale-from, 0.98));
+  }
+  to {
+    opacity: var(--fade-to-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes fade-in-right {
+  from {
+    opacity: var(--fade-from-opacity, 0);
+    transform: translate3d(calc(var(--fade-distance, 48px) * -1), 0, 0)
+      scale(var(--fade-scale-from, 0.98));
+  }
+  to {
+    opacity: var(--fade-to-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+}
+@keyframes fade-out-up {
+  from {
+    opacity: var(--fade-from-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 0);
+    transform: translate3d(0, calc(var(--fade-distance, 48px) * -1), 0)
+      scale(var(--fade-scale-to, 0.98));
+  }
+}
+@keyframes fade-out-down {
+  from {
+    opacity: var(--fade-from-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 0);
+    transform: translate3d(0, var(--fade-distance, 48px), 0)
+      scale(var(--fade-scale-to, 0.98));
+  }
+}
+@keyframes fade-out-left {
+  from {
+    opacity: var(--fade-from-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 0);
+    transform: translate3d(calc(var(--fade-distance, 48px) * -1), 0, 0)
+      scale(var(--fade-scale-to, 0.98));
+  }
+}
+@keyframes fade-out-right {
+  from {
+    opacity: var(--fade-from-opacity, 1);
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  to {
+    opacity: var(--fade-to-opacity, 0);
+    transform: translate3d(var(--fade-distance, 48px), 0, 0)
+      scale(var(--fade-scale-to, 0.98));
+  }
+}
+/* ============================================
+   Scale Animations
+   ============================================ */
+@keyframes scale-in {
+  from {
+    opacity: var(--scale-from-opacity, 0);
+    transform: scale(var(--scale-from, 0.96));
+  }
+  to {
+    opacity: var(--scale-to-opacity, 1);
+    transform: scale(1);
+  }
+}
+@keyframes scale-out {
+  from {
+    opacity: var(--scale-from-opacity, 1);
+    transform: scale(1);
+  }
+  to {
+    opacity: var(--scale-to-opacity, 0);
+    transform: scale(var(--scale-to, 0.96));
+  }
+}
+/* ============================================
+   Slide Animations
+   ============================================ */
+@keyframes slide-in-up {
+  from {
+    transform: translate3d(0, var(--slide-distance, 100%), 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slide-in-down {
+  from {
+    transform: translate3d(0, calc(var(--slide-distance, 100%) * -1), 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slide-in-left {
+  from {
+    transform: translate3d(var(--slide-distance, 100%), 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slide-in-right {
+  from {
+    transform: translate3d(calc(var(--slide-distance, 100%) * -1), 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+@keyframes slide-out-up {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, calc(var(--slide-distance, 100%) * -1), 0);
+  }
+}
+@keyframes slide-out-down {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, var(--slide-distance, 100%), 0);
+  }
+}
+@keyframes slide-out-left {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(calc(var(--slide-distance, 100%) * -1), 0, 0);
+  }
+}
+@keyframes slide-out-right {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(var(--slide-distance, 100%), 0, 0);
+  }
+}
+/* ============================================
+   Continuous Animations
+   ============================================ */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes ping {
+  75%,
+  100% {
+    transform: scale(var(--ping-scale, 2));
+    opacity: 0;
+  }
+}
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: var(--pulse-opacity, 0.5);
+  }
+}
+@keyframes bounce {
+  0%,
+  100% {
+    transform: translateY(calc(var(--bounce-distance, 25%) * -1));
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
+@keyframes float {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, calc(var(--float-distance, 8px) * -1), 0);
+  }
+}
+@property --beam-angle {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0deg;
+}
+@keyframes border-beam {
+  from {
+    --beam-angle: 0deg;
+  }
+  to {
+    --beam-angle: 360deg;
+  }
+}
+.border-beam {
+  position: relative;
+  isolation: isolate;
+}
+.border-beam::before {
+  content: '';
+  position: absolute;
+  inset: calc(var(--beam-offset, 0px) * -1);
+  border-radius: var(--beam-radius, inherit);
+  padding: var(--beam-width, 1px);
+  pointer-events: none;
+  opacity: var(--beam-opacity, 1);
+  background: conic-gradient(
+    from var(--beam-angle),
+    transparent var(--beam-tail-start, 75%),
+    var(--beam-glow-color, color-mix(in oklch, currentColor 75%, transparent))
+      var(--beam-glow-start, 88%),
+    var(--beam-core-color, currentColor) var(--beam-core-start, 92%),
+    var(--beam-glow-color, color-mix(in oklch, currentColor 75%, transparent))
+      var(--beam-glow-end, 96%),
+    transparent 100%
+  );
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  -webkit-mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+}
+/* ============================================
+   Attention Seekers
+   ============================================ */
+@keyframes shake-x {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  15% {
+    transform: translate3d(calc(var(--shake-distance, 10px) * -1), 0, 0);
+  }
+  30% {
+    transform: translate3d(var(--shake-distance, 10px), 0, 0);
+  }
+  45% {
+    transform: translate3d(calc(var(--shake-distance, 10px) * -0.66), 0, 0);
+  }
+  60% {
+    transform: translate3d(calc(var(--shake-distance, 10px) * 0.66), 0, 0);
+  }
+  75% {
+    transform: translate3d(calc(var(--shake-distance, 10px) * -0.33), 0, 0);
+  }
+  90% {
+    transform: translate3d(calc(var(--shake-distance, 10px) * 0.33), 0, 0);
+  }
+}
+@keyframes shake-y {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  15% {
+    transform: translate3d(0, calc(var(--shake-distance, 10px) * -1), 0);
+  }
+  30% {
+    transform: translate3d(0, var(--shake-distance, 10px), 0);
+  }
+  45% {
+    transform: translate3d(0, calc(var(--shake-distance, 10px) * -0.66), 0);
+  }
+  60% {
+    transform: translate3d(0, calc(var(--shake-distance, 10px) * 0.66), 0);
+  }
+  75% {
+    transform: translate3d(0, calc(var(--shake-distance, 10px) * -0.33), 0);
+  }
+  90% {
+    transform: translate3d(0, calc(var(--shake-distance, 10px) * 0.33), 0);
+  }
+}
+@keyframes beat {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  14% {
+    transform: scale(var(--beat-scale, 1.12));
+  }
+  28% {
+    transform: scale(1);
+  }
+  42% {
+    transform: scale(var(--beat-scale, 1.12));
+  }
+  70% {
+    transform: scale(1);
+  }
+}
+@keyframes bell {
+  0%,
+  100% {
+    transform: rotate(0deg);
+    transform-origin: var(--bell-origin, top center);
+  }
+  15% {
+    transform: rotate(var(--bell-angle, 10deg));
+  }
+  30% {
+    transform: rotate(calc(var(--bell-angle, 10deg) * -0.8));
+  }
+  45% {
+    transform: rotate(calc(var(--bell-angle, 10deg) * 0.6));
+  }
+  60% {
+    transform: rotate(calc(var(--bell-angle, 10deg) * -0.4));
+  }
+  75% {
+    transform: rotate(calc(var(--bell-angle, 10deg) * 0.2));
+  }
+}
+@keyframes wiggle {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  12.5% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * -1));
+  }
+  25% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * 0.8));
+  }
+  37.5% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * -0.65));
+  }
+  50% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * 0.5));
+  }
+  62.5% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * -0.35));
+  }
+  75% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * 0.2));
+  }
+  87.5% {
+    transform: rotate(calc(var(--wiggle-angle, 10deg) * -0.1));
+  }
+}