@jomae/catalog 0.1.0

package/dist/rules/masonry.js

@@ -0,0 +1,56 @@
+export const masonry = {
+    id: "css-masonry",
+    title: "Masonry layouts",
+    replaces: [
+        "react-masonry-css",
+        "masonry-layout",
+        "react-masonry-component",
+        "muuri",
+        "react-photo-gallery",
+    ],
+    featureIds: ["masonry"],
+    native: "CSS masonry item placement",
+    human: {
+        explainer: "A masonry library reads every item's height and absolutely positions it into the shortest column, then redoes the whole thing on resize. CSS masonry places items into the shortest track during layout, so it stays correct on resize with no JavaScript and keeps items in DOM order for keyboard and screen reader users, which absolutely positioned columns often do not. This is the least settled feature in the catalog: the syntax has changed more than once and is still being argued about, so treat it as something to try rather than something to ship.",
+        snippet: `.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-rows: masonry;
+  gap: 1rem;
+}
+
+/* A column-based fallback that works everywhere. Reading order
+   goes down each column rather than across, which is the
+   trade-off you accept for shipping it today. */
+@supports not (grid-template-rows: masonry) {
+  .gallery {
+    display: block;
+    columns: 16rem;
+    column-gap: 1rem;
+  }
+  .gallery > * {
+    break-inside: avoid;
+    margin-bottom: 1rem;
+  }
+}`,
+    },
+    agent: {
+        when: "laying out a gallery of items with varying heights into columns with no vertical gaps",
+        unless: [
+            "You are shipping to production. Masonry is limited availability, the syntax is not final, and it may land under a different property name. Use the CSS columns fallback or keep the library.",
+            "You need drag-and-drop reordering or filtering with animated repositioning.",
+            "You need items to span multiple columns based on their content.",
+            "Reading order matters and you need it to go across rows rather than down columns, which the columns fallback cannot do.",
+        ],
+        snippet: `.gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
+  grid-template-rows: masonry;
+}
+@supports not (grid-template-rows: masonry) {
+  .gallery { columns: 16rem; }
+  .gallery > * { break-inside: avoid; }
+}`,
+    },
+};
+//# sourceMappingURL=masonry.js.map

package/dist/rules/masonry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../src/rules/masonry.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAS;IAC3B,EAAE,EAAE,aAAa;IACjB,KAAK,EAAE,iBAAiB;IACxB,QAAQ,EAAE;QACR,mBAAmB;QACnB,gBAAgB;QAChB,yBAAyB;QACzB,OAAO;QACP,qBAAqB;KACtB;IACD,UAAU,EAAE,CAAC,SAAS,CAAC;IACvB,MAAM,EAAE,4BAA4B;IACpC,KAAK,EAAE;QACL,SAAS,EACP,wiBAAwiB;QAC1iB,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;EAoBX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,uFAAuF;QAC7F,MAAM,EAAE;YACN,8LAA8L;YAC9L,6EAA6E;YAC7E,iEAAiE;YACjE,yHAAyH;SAC1H;QACD,OAAO,EAAE;;;;;;;;EAQX;KACC;CACF,CAAC"}

package/dist/rules/popover.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const popover: Rule;
+//# sourceMappingURL=popover.d.ts.map

package/dist/rules/popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,OAAO,EAAE,IA6DrB,CAAC"}

package/dist/rules/popover.js

@@ -0,0 +1,62 @@
+export const popover = {
+    id: "popover-anchor-positioning",
+    title: "Tooltips, dropdowns and popovers",
+    replaces: [
+        "@floating-ui/react",
+        "@floating-ui/react-dom",
+        "@floating-ui/dom",
+        "@popperjs/core",
+        "popper.js",
+        "tippy.js",
+        "@tippyjs/react",
+        "react-popper",
+        "react-tooltip",
+    ],
+    featureIds: ["popover", "anchor-positioning"],
+    native: "The Popover API with CSS anchor positioning",
+    human: {
+        explainer: "Two separate problems used to need a library. Putting an element in the top layer so it escapes overflow and z-index, and keeping it pinned to its trigger. The popover attribute solves the first, including light dismiss, Escape to close and focus handling, with no JavaScript at all. CSS anchor positioning solves the second, including position-try fallbacks that flip the popover when it would overflow the viewport. Anchor positioning is the part to check before you commit, because it has not reached Baseline yet.",
+        snippet: `<button popovertarget="menu" id="trigger">Open</button>
+<div popover id="menu">Anchored content</div>
+
+<style>
+  #trigger {
+    anchor-name: --trigger;
+  }
+
+  #menu {
+    position: absolute;
+    position-anchor: --trigger;
+    /* Sit below the trigger, aligned to its left edge. */
+    top: anchor(bottom);
+    left: anchor(left);
+    margin-top: 0.5rem;
+    /* Flip above when there is no room below. */
+    position-try-fallbacks: flip-block;
+  }
+</style>`,
+        demoUrl: "https://www.jomaendle.com/blog/html-popover",
+    },
+    agent: {
+        when: "building a tooltip, dropdown menu or popover anchored to a trigger",
+        unless: [
+            "You need Baseline-level support for the positioning. CSS anchor positioning is Chromium-only today, so Safari and Firefox need a JavaScript fallback or a static position.",
+            "You need collision handling beyond position-try-fallbacks, such as shifting along an axis to stay in view rather than flipping.",
+            "You need an arrow that tracks the trigger across a flip.",
+            "A popover must stay open while a second one opens, or nest inside another. Auto popovers close their ancestors.",
+            "You need hover-with-intent timing, which the platform does not cover.",
+        ],
+        snippet: `<button popovertarget="p" id="t">Open</button>
+<div popover id="p">Content</div>
+<style>
+  #t { anchor-name: --t; }
+  #p {
+    position: absolute;
+    position-anchor: --t;
+    top: anchor(bottom);
+    position-try-fallbacks: flip-block;
+  }
+</style>`,
+    },
+};
+//# sourceMappingURL=popover.js.map

package/dist/rules/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","sourceRoot":"","sources":["../../src/rules/popover.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,OAAO,GAAS;IAC3B,EAAE,EAAE,4BAA4B;IAChC,KAAK,EAAE,kCAAkC;IACzC,QAAQ,EAAE;QACR,oBAAoB;QACpB,wBAAwB;QACxB,kBAAkB;QAClB,gBAAgB;QAChB,WAAW;QACX,UAAU;QACV,gBAAgB;QAChB,cAAc;QACd,eAAe;KAChB;IACD,UAAU,EAAE,CAAC,SAAS,EAAE,oBAAoB,CAAC;IAC7C,MAAM,EAAE,6CAA6C;IACrD,KAAK,EAAE;QACL,SAAS,EACP,ugBAAugB;QACzgB,OAAO,EAAE;;;;;;;;;;;;;;;;;;SAkBJ;QACL,OAAO,EAAE,6CAA6C;KACvD;IACD,KAAK,EAAE;QACL,IAAI,EAAE,oEAAoE;QAC1E,MAAM,EAAE;YACN,4KAA4K;YAC5K,iIAAiI;YACjI,0DAA0D;YAC1D,iHAAiH;YACjH,uEAAuE;SACxE;QACD,OAAO,EAAE;;;;;;;;;;SAUJ;KACN;CACF,CAAC"}

package/dist/rules/scroll-animations.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const scrollAnimations: Rule;
+//# sourceMappingURL=scroll-animations.d.ts.map

package/dist/rules/scroll-animations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-animations.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,gBAAgB,EAAE,IAyD9B,CAAC"}

package/dist/rules/scroll-animations.js

@@ -0,0 +1,58 @@
+export const scrollAnimations = {
+    id: "scroll-driven-animations",
+    title: "Scroll-triggered animations",
+    replaces: ["aos", "scrollreveal", "wowjs", "wow.js", "scrollmagic", "rellax"],
+    featureIds: ["scroll-driven-animations"],
+    native: "animation-timeline: view() and scroll()",
+    human: {
+        explainer: "Reveal-on-scroll libraries watch elements with an IntersectionObserver and add a class. animation-timeline replaces the observer with a timeline: view() ties an animation's progress to the element's position in the viewport, and scroll() ties it to a scroll container's offset. These run off the main thread, so they hold up under load in a way that a scroll listener does not. Fade-in-on-scroll is a progressive enhancement, so the fallback is simply that the content is visible, which is the correct default anyway.",
+        snippet: `@keyframes fade-in {
+  from {
+    opacity: 0;
+    translate: 0 2rem;
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .reveal {
+      animation: fade-in linear both;
+      animation-timeline: view();
+      /* Run from entering the viewport to 40% up it. */
+      animation-range: entry 0% cover 40%;
+    }
+  }
+}
+
+/* A reading-progress bar, no JavaScript. */
+@keyframes grow {
+  from {
+    scale: 0 1;
+  }
+}
+.progress {
+  animation: grow linear both;
+  animation-timeline: scroll(root block);
+  transform-origin: left;
+}`,
+    },
+    agent: {
+        when: "fading or moving elements in as they scroll into view, or driving a reading-progress bar",
+        unless: [
+            "You need Safari or Firefox support. Scroll-driven animations are limited availability, so wrap them in @supports and make sure the un-animated state is the visible one.",
+            "You need a callback in JavaScript when an element enters view, for analytics, lazy loading or infinite scroll. That is what IntersectionObserver is for and CSS does not replace it.",
+            "You need to animate something that is not a descendant of, or a sibling reachable from, the scrolling element. Timeline scope is limited.",
+            "The animation must run once and stay put. A view timeline is scrubbed, so it reverses when the user scrolls back up.",
+            "You are using the library's IntersectionObserver for anything other than animation, in which case removing it changes unrelated behaviour.",
+        ],
+        snippet: `@keyframes fade-in { from { opacity: 0; translate: 0 2rem; } }
+@supports (animation-timeline: view()) {
+  .reveal {
+    animation: fade-in linear both;
+    animation-timeline: view();
+    animation-range: entry 0% cover 40%;
+  }
+}`,
+    },
+};
+//# sourceMappingURL=scroll-animations.js.map

package/dist/rules/scroll-animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-animations.js","sourceRoot":"","sources":["../../src/rules/scroll-animations.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,EAAE,EAAE,0BAA0B;IAC9B,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,CAAC;IAC7E,UAAU,EAAE,CAAC,0BAA0B,CAAC;IACxC,MAAM,EAAE,yCAAyC;IACjD,KAAK,EAAE;QACL,SAAS,EACP,ugBAAugB;QACzgB,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4BX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0FAA0F;QAChG,MAAM,EAAE;YACN,0KAA0K;YAC1K,sLAAsL;YACtL,2IAA2I;YAC3I,sHAAsH;YACtH,4IAA4I;SAC7I;QACD,OAAO,EAAE;;;;;;;EAOX;KACC;CACF,CAAC"}

package/dist/rules/scroll-lock.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const scrollLock: Rule;
+//# sourceMappingURL=scroll-lock.d.ts.map

package/dist/rules/scroll-lock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-lock.d.ts","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,IAuCxB,CAAC"}

package/dist/rules/scroll-lock.js

@@ -0,0 +1,40 @@
+export const scrollLock = {
+    id: "overscroll-behavior",
+    title: "Scroll chaining and body scroll lock",
+    replaces: [
+        "body-scroll-lock",
+        "react-scrolllock",
+        "no-scroll",
+        "scroll-lock",
+    ],
+    featureIds: ["overscroll-behavior"],
+    native: "overscroll-behavior: contain",
+    human: {
+        explainer: "Reaching the end of a scrollable modal and having the page behind it start scrolling is scroll chaining. overscroll-behavior: contain stops the scroll at that boundary, which is the behaviour body-scroll-lock reimplements by fixing the body and compensating for the scrollbar. contain also disables pull-to-refresh inside that element, which is usually what you want in a drawer. Note that a modal opened with showModal() already blocks background scrolling, so check whether you need this at all.",
+        snippet: `.drawer,
+.modal-body {
+  overflow-y: auto;
+  /* Stop the page behind from scrolling at the boundary. */
+  overscroll-behavior: contain;
+}
+
+/* Disable pull-to-refresh for the whole page. */
+body {
+  overscroll-behavior-y: contain;
+}`,
+    },
+    agent: {
+        when: "stopping the page behind a modal or drawer from scrolling when the overlay reaches its end",
+        unless: [
+            "You need this to work everywhere today. web-features reports overscroll-behavior as limited availability, so verify against your support target rather than assuming it.",
+            "You need the background genuinely frozen, not just unchained. iOS Safari in particular has a long history of scrolling the body anyway, which is the specific bug body-scroll-lock exists to work around.",
+            "The overlay itself does not scroll. overscroll-behavior only applies to a scroll container, so a short modal needs a different approach.",
+            "You need to preserve and restore the scroll position across opening and closing.",
+        ],
+        snippet: `.drawer {
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}`,
+    },
+};
+//# sourceMappingURL=scroll-lock.js.map

package/dist/rules/scroll-lock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-lock.js","sourceRoot":"","sources":["../../src/rules/scroll-lock.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,sCAAsC;IAC7C,QAAQ,EAAE;QACR,kBAAkB;QAClB,kBAAkB;QAClB,WAAW;QACX,aAAa;KACd;IACD,UAAU,EAAE,CAAC,qBAAqB,CAAC;IACnC,MAAM,EAAE,8BAA8B;IACtC,KAAK,EAAE;QACL,SAAS,EACP,mfAAmf;QACrf,OAAO,EAAE;;;;;;;;;;EAUX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4FAA4F;QAClG,MAAM,EAAE;YACN,0KAA0K;YAC1K,2MAA2M;YAC3M,0IAA0I;YAC1I,kFAAkF;SACnF;QACD,OAAO,EAAE;;;EAGX;KACC;CACF,CAAC"}

package/dist/rules/scrollbars.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const scrollbars: Rule;
+//# sourceMappingURL=scrollbars.d.ts.map

package/dist/rules/scrollbars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbars.d.ts","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,UAAU,EAAE,IA2CxB,CAAC"}

package/dist/rules/scrollbars.js

@@ -0,0 +1,44 @@
+export const scrollbars = {
+    id: "styled-scrollbars",
+    title: "Styled scrollbars",
+    replaces: [
+        "react-custom-scrollbars",
+        "react-custom-scrollbars-2",
+        "simplebar",
+        "simplebar-react",
+        "overlayscrollbars",
+        "overlayscrollbars-react",
+        "perfect-scrollbar",
+    ],
+    featureIds: ["scrollbar-width", "scrollbar-color", "scrollbar-gutter"],
+    native: "scrollbar-width, scrollbar-color and scrollbar-gutter",
+    human: {
+        explainer: "Custom scrollbar libraries hide the real scrollbar and draw a fake one, which costs you native momentum scrolling, keyboard behaviour and accessibility. The standard properties restyle the actual scrollbar instead: scrollbar-width for thin or none, scrollbar-color for the thumb and track. scrollbar-gutter: stable is the one worth adding regardless, because it reserves the gutter and stops the page shifting sideways when content grows tall enough to need a scrollbar.",
+        snippet: `/* Reserve the gutter so the page does not jump. */
+html {
+  scrollbar-gutter: stable;
+}
+
+.panel {
+  scrollbar-width: thin;
+  /* thumb, then track */
+  scrollbar-color: #666 transparent;
+  overflow-y: auto;
+}`,
+    },
+    agent: {
+        when: "restyling a scrollbar to match a dark theme, or stopping layout shift when a scrollbar appears",
+        unless: [
+            "The design calls for a scrollbar shape the standard properties cannot express, such as a rounded floating thumb with a custom width in pixels. scrollbar-width only offers auto, thin and none.",
+            "You need the overlay-style scrollbar that appears on hover and takes no layout space on every platform.",
+            "You need identical scrollbars across operating systems for a design comp. Native scrollbars still look like the platform's.",
+            "You are relying on the library for scroll shadows or a virtualised list, which these properties do not address.",
+        ],
+        snippet: `html { scrollbar-gutter: stable; }
+.panel {
+  scrollbar-width: thin;
+  scrollbar-color: #666 transparent;
+}`,
+    },
+};
+//# sourceMappingURL=scrollbars.js.map

package/dist/rules/scrollbars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrollbars.js","sourceRoot":"","sources":["../../src/rules/scrollbars.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAS;IAC9B,EAAE,EAAE,mBAAmB;IACvB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE;QACR,yBAAyB;QACzB,2BAA2B;QAC3B,WAAW;QACX,iBAAiB;QACjB,mBAAmB;QACnB,yBAAyB;QACzB,mBAAmB;KACpB;IACD,UAAU,EAAE,CAAC,iBAAiB,EAAE,iBAAiB,EAAE,kBAAkB,CAAC;IACtE,MAAM,EAAE,uDAAuD;IAC/D,KAAK,EAAE;QACL,SAAS,EACP,wdAAwd;QAC1d,OAAO,EAAE;;;;;;;;;;EAUX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gGAAgG;QACtG,MAAM,EAAE;YACN,iMAAiM;YACjM,yGAAyG;YACzG,6HAA6H;YAC7H,iHAAiH;SAClH;QACD,OAAO,EAAE;;;;EAIX;KACC;CACF,CAAC"}

package/dist/rules/select.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const select: Rule;
+//# sourceMappingURL=select.d.ts.map

package/dist/rules/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,IAqDpB,CAAC"}

package/dist/rules/select.js

@@ -0,0 +1,54 @@
+export const select = {
+    id: "customizable-select",
+    title: "Custom select menus",
+    replaces: ["react-select", "choices.js", "select2", "tom-select"],
+    featureIds: ["customizable-select"],
+    native: "appearance: base-select on <select>",
+    human: {
+        explainer: "Opting a select into appearance: base-select makes its picker a normal, styleable part of the page, so options can hold markup: an avatar, a swatch, a second line of muted text. The keyboard behaviour, the accessible role and the mobile picker stay the browser's, which is the part custom select components most often get wrong. This covers presentation. It does not turn a select into a combobox.",
+        snippet: `<select>
+  <button>
+    <selectedcontent></selectedcontent>
+  </button>
+  <option value="de">
+    <span aria-hidden="true">DE</span> Germany
+  </option>
+  <option value="at">
+    <span aria-hidden="true">AT</span> Austria
+  </option>
+</select>
+
+<style>
+  select,
+  select::picker(select) {
+    appearance: base-select;
+  }
+
+  select::picker(select) {
+    border-radius: 0.5rem;
+    padding: 0.25rem;
+  }
+
+  option:checked {
+    font-weight: 600;
+  }
+</style>`,
+    },
+    agent: {
+        when: "styling a select's options with markup, such as a flag or a two-line label",
+        unless: [
+            "You need typeahead filtering, multi-select with tags, or options loaded asynchronously from a search. Those make it a combobox, and a select is the wrong element regardless of styling.",
+            "You need creatable options, where the user can add a value that is not in the list.",
+            "You need anything beyond Chromium today. Customizable select is limited availability. It degrades to a normal select, which is a safe fallback, but the design will not match.",
+            "You need grouped options with sticky group headers while scrolling.",
+        ],
+        snippet: `<select>
+  <button><selectedcontent></selectedcontent></button>
+  <option value="a"><span>A</span> Option A</option>
+</select>
+<style>
+  select, select::picker(select) { appearance: base-select; }
+</style>`,
+    },
+};
+//# sourceMappingURL=select.js.map

package/dist/rules/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/rules/select.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE,CAAC,cAAc,EAAE,YAAY,EAAE,SAAS,EAAE,YAAY,CAAC;IACjE,UAAU,EAAE,CAAC,qBAAqB,CAAC;IACnC,MAAM,EAAE,qCAAqC;IAC7C,KAAK,EAAE;QACL,SAAS,EACP,+YAA+Y;QACjZ,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;SA0BJ;KACN;IACD,KAAK,EAAE;QACL,IAAI,EAAE,4EAA4E;QAClF,MAAM,EAAE;YACN,0LAA0L;YAC1L,qFAAqF;YACrF,gLAAgL;YAChL,qEAAqE;SACtE;QACD,OAAO,EAAE;;;;;;SAMJ;KACN;CACF,CAAC"}

package/dist/rules/smooth-scroll.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const smoothScroll: Rule;
+//# sourceMappingURL=smooth-scroll.d.ts.map

package/dist/rules/smooth-scroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-scroll.d.ts","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,YAAY,EAAE,IAwC1B,CAAC"}

package/dist/rules/smooth-scroll.js

@@ -0,0 +1,41 @@
+export const smoothScroll = {
+    id: "smooth-scroll",
+    title: "Smooth scrolling and scroll-to-anchor",
+    replaces: [
+        "react-scroll",
+        "smoothscroll-polyfill",
+        "scroll-behavior-polyfill",
+        "smooth-scroll",
+        "jump.js",
+    ],
+    featureIds: ["scroll-behavior"],
+    native: "scroll-behavior: smooth with scroll-margin-top",
+    human: {
+        explainer: "One CSS declaration makes every in-page anchor and every scrollIntoView call animate instead of jump. The piece people miss is scroll-margin-top, which stops a sticky header from covering the heading you just scrolled to, and it works for both anchor links and focus. Gate the whole thing behind prefers-reduced-motion, because a long smooth scroll is a common motion-sickness trigger.",
+        snippet: `@media (prefers-reduced-motion: no-preference) {
+  :root {
+    scroll-behavior: smooth;
+  }
+}
+
+/* Stop a sticky header covering the target. */
+:target,
+[id] {
+  scroll-margin-top: 5rem;
+}`,
+    },
+    agent: {
+        when: "making in-page anchor links scroll smoothly to their target",
+        unless: [
+            "You need to control the duration or easing of the scroll. CSS gives you no handle on either, and browsers differ.",
+            "You need a callback when the scroll finishes. scrollend helps, but it is newer than scroll-behavior itself.",
+            "You need to scroll to a coordinate that is computed rather than to an element.",
+            "You need scroll spy, meaning highlighting the nav item for the section currently in view. That is a separate problem and still needs JavaScript or scroll-driven animations.",
+        ],
+        snippet: `@media (prefers-reduced-motion: no-preference) {
+  :root { scroll-behavior: smooth; }
+}
+[id] { scroll-margin-top: 5rem; }`,
+    },
+};
+//# sourceMappingURL=smooth-scroll.js.map

package/dist/rules/smooth-scroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"smooth-scroll.js","sourceRoot":"","sources":["../../src/rules/smooth-scroll.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,YAAY,GAAS;IAChC,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,uCAAuC;IAC9C,QAAQ,EAAE;QACR,cAAc;QACd,uBAAuB;QACvB,0BAA0B;QAC1B,eAAe;QACf,SAAS;KACV;IACD,UAAU,EAAE,CAAC,iBAAiB,CAAC;IAC/B,MAAM,EAAE,gDAAgD;IACxD,KAAK,EAAE;QACL,SAAS,EACP,mYAAmY;QACrY,OAAO,EAAE;;;;;;;;;;EAUX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6DAA6D;QACnE,MAAM,EAAE;YACN,mHAAmH;YACnH,6GAA6G;YAC7G,gFAAgF;YAChF,8KAA8K;SAC/K;QACD,OAAO,EAAE;;;kCAGqB;KAC/B;CACF,CAAC"}

package/dist/rules/sticky.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const sticky: Rule;
+//# sourceMappingURL=sticky.d.ts.map

package/dist/rules/sticky.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky.d.ts","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,MAAM,EAAE,IAsCpB,CAAC"}

package/dist/rules/sticky.js

@@ -0,0 +1,39 @@
+export const sticky = {
+    id: "sticky-positioning",
+    title: "Sticky headers and sidebars",
+    replaces: [
+        "sticky-js",
+        "stickyfill",
+        "react-sticky",
+        "sticky-kit",
+        "stickybits",
+    ],
+    featureIds: ["sticky-positioning"],
+    native: "position: sticky",
+    human: {
+        explainer: "These libraries measured scroll position and toggled position: fixed with a computed offset. position: sticky does it in the compositor, so it does not jitter and does not run code on scroll. Two things trip people up: sticky is relative to the nearest scrolling ancestor, so an overflow: hidden or overflow: auto anywhere up the tree silently breaks it, and you must set at least one of top, right, bottom or left.",
+        snippet: `.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+/* A sidebar that sticks until its section scrolls past. */
+.sidebar {
+  position: sticky;
+  top: 5rem;
+  align-self: start;
+}`,
+    },
+    agent: {
+        when: "a header, sidebar or table head should stick while its container scrolls",
+        unless: [
+            "You need to know when the element became stuck, to add a shadow or shrink it. Nothing in CSS exposes that state directly, so this still wants an IntersectionObserver sentinel.",
+            "You need the element to stick relative to the viewport while its parent has overflow set. Sticky is scoped to the nearest scroll container, so this needs a different structure.",
+            "You need it to stop sticking at a computed point unrelated to its containing block.",
+        ],
+        snippet: `.header { position: sticky; top: 0; z-index: 10; }
+.sidebar { position: sticky; top: 5rem; align-self: start; }`,
+    },
+};
+//# sourceMappingURL=sticky.js.map

package/dist/rules/sticky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky.js","sourceRoot":"","sources":["../../src/rules/sticky.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,oBAAoB;IACxB,KAAK,EAAE,6BAA6B;IACpC,QAAQ,EAAE;QACR,WAAW;QACX,YAAY;QACZ,cAAc;QACd,YAAY;QACZ,YAAY;KACb;IACD,UAAU,EAAE,CAAC,oBAAoB,CAAC;IAClC,MAAM,EAAE,kBAAkB;IAC1B,KAAK,EAAE;QACL,SAAS,EACP,iaAAia;QACna,OAAO,EAAE;;;;;;;;;;;EAWX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,0EAA0E;QAChF,MAAM,EAAE;YACN,iLAAiL;YACjL,kLAAkL;YAClL,qFAAqF;SACtF;QACD,OAAO,EAAE;6DACgD;KAC1D;CACF,CAAC"}

package/dist/rules/text-box-trim.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const textBoxTrim: Rule;
+//# sourceMappingURL=text-box-trim.d.ts.map

package/dist/rules/text-box-trim.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-box-trim.d.ts","sourceRoot":"","sources":["../../src/rules/text-box-trim.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,WAAW,EAAE,IA+BzB,CAAC"}

package/dist/rules/text-box-trim.js

@@ -0,0 +1,32 @@
+export const textBoxTrim = {
+    id: "text-box-trim",
+    title: "Trimming font leading",
+    replaces: ["capsize", "@capsizecss/core", "@capsizecss/metrics"],
+    featureIds: ["text-box"],
+    native: "text-box-trim and text-box-edge",
+    human: {
+        explainer: "Every font ships with space above the cap height and below the baseline, so a heading never sits flush against the box you gave it, and optical alignment ends up as hand-tuned negative margins. Capsize computes those metrics and generates the margins for you. text-box-trim asks the browser to remove that space directly, using metrics it already has, so a button label centres properly and a heading's spacing matches what the design specified.",
+        snippet: `h1,
+.button {
+  /* Trim the leading above the cap height and
+     below the baseline. */
+  text-box: trim-both cap alphabetic;
+}
+
+/* Longhand form. */
+.label {
+  text-box-trim: trim-both;
+  text-box-edge: cap alphabetic;
+}`,
+    },
+    agent: {
+        when: "removing a font's built-in leading so text sits flush in its box",
+        unless: [
+            "You are shipping to production outside Chromium. text-box is limited availability, and the fallback is the untrimmed spacing you started with, which shifts your vertical rhythm between browsers.",
+            "You need the computed metrics as numbers at build time, for example to generate spacing tokens or to lay out text in a canvas or a PDF. Capsize gives you values; CSS only affects rendering.",
+            "You need to support a font whose metrics are wrong or missing, which Capsize lets you override by hand.",
+        ],
+        snippet: "h1 { text-box: trim-both cap alphabetic; }",
+    },
+};
+//# sourceMappingURL=text-box-trim.js.map

package/dist/rules/text-box-trim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-box-trim.js","sourceRoot":"","sources":["../../src/rules/text-box-trim.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAS;IAC/B,EAAE,EAAE,eAAe;IACnB,KAAK,EAAE,uBAAuB;IAC9B,QAAQ,EAAE,CAAC,SAAS,EAAE,kBAAkB,EAAE,qBAAqB,CAAC;IAChE,UAAU,EAAE,CAAC,UAAU,CAAC;IACxB,MAAM,EAAE,iCAAiC;IACzC,KAAK,EAAE;QACL,SAAS,EACP,+bAA+b;QACjc,OAAO,EAAE;;;;;;;;;;;EAWX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,kEAAkE;QACxE,MAAM,EAAE;YACN,oMAAoM;YACpM,+LAA+L;YAC/L,yGAAyG;SAC1G;QACD,OAAO,EAAE,4CAA4C;KACtD;CACF,CAAC"}

package/dist/rules/text-wrap-balance.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const textWrapBalance: Rule;
+//# sourceMappingURL=text-wrap-balance.d.ts.map

package/dist/rules/text-wrap-balance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap-balance.d.ts","sourceRoot":"","sources":["../../src/rules/text-wrap-balance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,IAiC7B,CAAC"}

package/dist/rules/text-wrap-balance.js

@@ -0,0 +1,34 @@
+export const textWrapBalance = {
+    id: "text-wrap-balance",
+    title: "Balanced headings",
+    replaces: ["react-wrap-balancer", "balance-text"],
+    featureIds: ["text-wrap-balance"],
+    native: "text-wrap: balance",
+    human: {
+        explainer: "A balancer measures the text, then re-flows it so the last line is not a single orphaned word. text-wrap: balance asks the browser to do the same thing during layout, with no measuring pass and no layout shift after hydration. Browsers cap the line count they will balance, usually around four to six, so it is aimed at headings and short blurbs rather than paragraphs. For body copy, text-wrap: pretty handles orphans without the cap.",
+        snippet: `h1,
+h2,
+h3,
+blockquote {
+  text-wrap: balance;
+}
+
+/* For longer copy, avoid a single-word last line
+   without balancing the whole block. */
+p {
+  text-wrap: pretty;
+}`,
+    },
+    agent: {
+        when: "stopping a heading or short blurb from breaking with one word on the last line",
+        unless: [
+            "The text runs longer than about four lines. Browsers stop balancing past a line-count cap, so long paragraphs are unaffected. Use text-wrap: pretty there.",
+            "You need identical line breaks across every browser, for example to match a design comp pixel for pixel. Balancing is a browser heuristic and the results differ.",
+            "You need to balance to a specific ratio or set a maximum line width in characters, which the library exposes and CSS does not.",
+            "You are counting on text-wrap: pretty as the fallback for body copy. It has much narrower support than balance, so treat it as an enhancement.",
+        ],
+        snippet: `h1, h2, h3 { text-wrap: balance; }
+p { text-wrap: pretty; }`,
+    },
+};
+//# sourceMappingURL=text-wrap-balance.js.map

package/dist/rules/text-wrap-balance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-wrap-balance.js","sourceRoot":"","sources":["../../src/rules/text-wrap-balance.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,mBAAmB;IACvB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,CAAC,qBAAqB,EAAE,cAAc,CAAC;IACjD,UAAU,EAAE,CAAC,mBAAmB,CAAC;IACjC,MAAM,EAAE,oBAAoB;IAC5B,KAAK,EAAE;QACL,SAAS,EACP,qbAAqb;QACvb,OAAO,EAAE;;;;;;;;;;;EAWX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gFAAgF;QACtF,MAAM,EAAE;YACN,4JAA4J;YAC5J,mKAAmK;YACnK,gIAAgI;YAChI,gJAAgJ;SACjJ;QACD,OAAO,EAAE;yBACY;KACtB;CACF,CAAC"}

package/dist/rules/view-transitions.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from "../schema.ts";
+export declare const viewTransitions: Rule;
+//# sourceMappingURL=view-transitions.d.ts.map

package/dist/rules/view-transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-transitions.d.ts","sourceRoot":"","sources":["../../src/rules/view-transitions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEzC,eAAO,MAAM,eAAe,EAAE,IAoD7B,CAAC"}