@jomae/catalog 0.1.0

package/dist/rules/carousel.js

@@ -0,0 +1,78 @@
+export const carousel = {
+    id: "carousel-scroll-markers",
+    title: "Carousels",
+    replaces: [
+        "swiper",
+        "embla-carousel",
+        "embla-carousel-react",
+        "react-slick",
+        "slick-carousel",
+        "keen-slider",
+        "flickity",
+    ],
+    featureIds: ["scroll-snap", "scroll-buttons", "scroll-markers"],
+    native: "CSS scroll-snap with ::scroll-button() and ::scroll-marker()",
+    human: {
+        explainer: "A scroll container with scroll-snap has covered the swiping half of a carousel for years. What was missing was the chrome around it: previous and next buttons, and a row of dots that tracks the current slide. ::scroll-button() and ::scroll-marker() generate both from CSS, and the browser wires up the scrolling, the focus order and the accessible names. The markers are real tab stops, so keyboard and screen reader support comes for free rather than being something you have to add back.",
+        snippet: `.carousel {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 80%;
+  gap: 1rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  /* Put the dot row after the scroller. */
+  scroll-marker-group: after;
+}
+
+.carousel > * {
+  scroll-snap-align: center;
+}
+
+/* Prev / next, generated and wired up by the browser. */
+.carousel::scroll-button(inline-start) {
+  content: "\\2190";
+}
+.carousel::scroll-button(inline-end) {
+  content: "\\2192";
+}
+.carousel::scroll-button(*):disabled {
+  opacity: 0.4;
+}
+
+/* One dot per slide. */
+.carousel > *::scroll-marker {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.3;
+}
+.carousel > *::scroll-marker:target-current {
+  opacity: 1;
+}`,
+        demoUrl: "https://www.jomaendle.com/blog/css-carousel",
+    },
+    agent: {
+        when: "building a horizontal gallery with prev/next buttons and dot indicators",
+        unless: [
+            "You need Safari or Firefox support today. Both ship scroll-snap but not ::scroll-button() or ::scroll-marker(), so they fall back to a bare scroll container with no buttons and no dots.",
+            "You need autoplay, infinite looping, or a coverflow-style 3D effect. None of these have a CSS equivalent.",
+            "You render hundreds of slides and rely on the library to virtualise them.",
+            "Slides animate as a function of scroll position, for example parallax or a scaling centre slide.",
+            "You need programmatic control from JavaScript beyond scrollIntoView, such as pause on hover or a progress bar tied to a timer.",
+        ],
+        snippet: `.carousel {
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-marker-group: after;
+}
+.carousel > * { scroll-snap-align: center; }
+.carousel::scroll-button(inline-end) { content: "\\2192"; }
+.carousel > *::scroll-marker { content: ""; }
+.carousel > *::scroll-marker:target-current { opacity: 1; }`,
+    },
+};
+//# sourceMappingURL=carousel.js.map

package/dist/rules/carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.js","sourceRoot":"","sources":["../../src/rules/carousel.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,QAAQ,GAAS;IAC5B,EAAE,EAAE,yBAAyB;IAC7B,KAAK,EAAE,WAAW;IAClB,QAAQ,EAAE;QACR,QAAQ;QACR,gBAAgB;QAChB,sBAAsB;QACtB,aAAa;QACb,gBAAgB;QAChB,aAAa;QACb,UAAU;KACX;IACD,UAAU,EAAE,CAAC,aAAa,EAAE,gBAAgB,EAAE,gBAAgB,CAAC;IAC/D,MAAM,EAAE,8DAA8D;IACtE,KAAK,EAAE;QACL,SAAS,EACP,2eAA2e;QAC7e,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsCX;QACE,OAAO,EAAE,6CAA6C;KACvD;IACD,KAAK,EAAE;QACL,IAAI,EAAE,yEAAyE;QAC/E,MAAM,EAAE;YACN,2LAA2L;YAC3L,2GAA2G;YAC3G,2EAA2E;YAC3E,kGAAkG;YAClG,gIAAgI;SACjI;QACD,OAAO,EAAE;;;;;;;;4DAQ+C;KACzD;CACF,CAAC"}

package/dist/rules/color-functions.d.ts

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

package/dist/rules/color-functions.d.ts.map

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

package/dist/rules/color-functions.js

@@ -0,0 +1,42 @@
+export const colorFunctions = {
+    id: "css-color-functions",
+    title: "Colour manipulation",
+    replaces: ["polished", "color2k", "chroma-js", "tinycolor2", "color"],
+    featureIds: ["color-mix", "oklab"],
+    native: "color-mix(), oklch() and relative colour syntax",
+    human: {
+        explainer: "Lightening, darkening, mixing and adding transparency were the reasons to ship a colour library, and CSS now does all four. color-mix() blends two colours in a chosen space, and relative colour syntax reads a channel off an existing colour so you can shift one part of it. Working in oklch() matters here: mixing in a perceptual space keeps a hue from drifting grey through the middle of a gradient, which is the usual complaint about mixing in sRGB. Because these run on custom properties, one theme token can generate its own hover and border shades at runtime.",
+        snippet: `:root {
+  --brand: oklch(62% 0.19 256);
+}
+
+.button {
+  background: var(--brand);
+}
+
+/* Darken by mixing toward black. */
+.button:hover {
+  background: color-mix(in oklch, var(--brand) 85%, black);
+}
+
+/* Read the channels off --brand and change only alpha. */
+.button-ghost {
+  background: oklch(from var(--brand) l c h / 0.15);
+  border: 1px solid color-mix(in oklch, var(--brand) 40%, transparent);
+}`,
+    },
+    agent: {
+        when: "deriving hover, border or muted shades from a single brand colour",
+        unless: [
+            "You need the computed colour value as a string in JavaScript, for a canvas fill, a chart library or an email template. CSS colours only resolve in the browser at paint time.",
+            "You need contrast-ratio calculation or WCAG checking, which these functions do not provide.",
+            "You need colour-blindness simulation, palette generation or interpolation across more than two stops.",
+            "You are generating colours at build time in Node rather than in the browser.",
+            "You rely on the relative colour syntax shown above, oklch(from ...). color-mix() and oklch() are Baseline widely available, but reading channels off an existing colour is newer, so check it before shipping.",
+        ],
+        snippet: `:root { --brand: oklch(62% 0.19 256); }
+.btn:hover { background: color-mix(in oklch, var(--brand) 85%, black); }
+.ghost { background: oklch(from var(--brand) l c h / 0.15); }`,
+    },
+};
+//# sourceMappingURL=color-functions.js.map

package/dist/rules/color-functions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-functions.js","sourceRoot":"","sources":["../../src/rules/color-functions.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAS;IAClC,EAAE,EAAE,qBAAqB;IACzB,KAAK,EAAE,qBAAqB;IAC5B,QAAQ,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,OAAO,CAAC;IACrE,UAAU,EAAE,CAAC,WAAW,EAAE,OAAO,CAAC;IAClC,MAAM,EAAE,iDAAiD;IACzD,KAAK,EAAE;QACL,SAAS,EACP,qjBAAqjB;QACvjB,OAAO,EAAE;;;;;;;;;;;;;;;;;EAiBX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,mEAAmE;QACzE,MAAM,EAAE;YACN,+KAA+K;YAC/K,6FAA6F;YAC7F,uGAAuG;YACvG,8EAA8E;YAC9E,gNAAgN;SACjN;QACD,OAAO,EAAE;;8DAEiD;KAC3D;CACF,CAAC"}

package/dist/rules/container-queries.d.ts

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

package/dist/rules/container-queries.d.ts.map

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

package/dist/rules/container-queries.js

@@ -0,0 +1,53 @@
+export const containerQueries = {
+    id: "container-queries",
+    title: "Element size queries",
+    replaces: [
+        "react-resize-detector",
+        "react-use-measure",
+        "react-sizeme",
+        "react-container-query",
+        "element-resize-detector",
+    ],
+    featureIds: ["container-queries"],
+    native: "Container queries",
+    human: {
+        explainer: "Measuring an element with ResizeObserver to decide how it should look means layout, then JavaScript, then a re-render, and a visible flash on first paint. A container query does the same branch in CSS during layout, so the card is already correct when it first paints. Container query units are the other half of this: cqi lets padding and type scale with the container rather than the viewport.",
+        snippet: `.card-wrapper {
+  container-type: inline-size;
+  container-name: card;
+}
+
+/* Stack below 400px of container width, side by side above. */
+.card {
+  display: grid;
+  gap: 1rem;
+}
+
+@container card (width >= 400px) {
+  .card {
+    grid-template-columns: 8rem 1fr;
+  }
+}
+
+/* Scale with the container instead of the viewport. */
+@container card (width >= 400px) {
+  .card h3 {
+    font-size: clamp(1rem, 4cqi, 1.5rem);
+  }
+}`,
+    },
+    agent: {
+        when: "a component needs to change layout based on its own width rather than the viewport",
+        unless: [
+            "You need the measured pixel value in JavaScript, for example to pass a width to a canvas, a virtualised list or a charting library.",
+            "You need to react to height. container-type: size requires the container's block size to be independent of its content, which often means giving it an explicit height.",
+            "You need to observe an element that is not an ancestor of the thing being styled. Container queries only look up the tree.",
+            "You are querying the element itself rather than a wrapper. A container cannot query its own size, so this needs an extra element.",
+        ],
+        snippet: `.wrapper { container-type: inline-size; container-name: card; }
+@container card (width >= 400px) {
+  .card { grid-template-columns: 8rem 1fr; }
+}`,
+    },
+};
+//# sourceMappingURL=container-queries.js.map

package/dist/rules/container-queries.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container-queries.js","sourceRoot":"","sources":["../../src/rules/container-queries.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,gBAAgB,GAAS;IACpC,EAAE,EAAE,mBAAmB;IACvB,KAAK,EAAE,sBAAsB;IAC7B,QAAQ,EAAE;QACR,uBAAuB;QACvB,mBAAmB;QACnB,cAAc;QACd,uBAAuB;QACvB,yBAAyB;KAC1B;IACD,UAAU,EAAE,CAAC,mBAAmB,CAAC;IACjC,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE;QACL,SAAS,EACP,6YAA6Y;QAC/Y,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,oFAAoF;QAC1F,MAAM,EAAE;YACN,qIAAqI;YACrI,yKAAyK;YACzK,4HAA4H;YAC5H,mIAAmI;SACpI;QACD,OAAO,EAAE;;;EAGX;KACC;CACF,CAAC"}

package/dist/rules/dialog.d.ts

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

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

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

package/dist/rules/dialog.js

@@ -0,0 +1,51 @@
+export const dialog = {
+    id: "dialog-element",
+    title: "Modal dialogs",
+    replaces: [
+        "react-modal",
+        "react-responsive-modal",
+        "react-aria-modal",
+        "@reach/dialog",
+        "micromodal",
+        "a11y-dialog",
+    ],
+    featureIds: ["dialog"],
+    native: "<dialog> with showModal()",
+    human: {
+        explainer: "showModal() gives you the things a modal library exists to provide: the top layer, so no z-index fights, a real backdrop you style with ::backdrop, focus moved into the dialog and restored on close, a focus trap while it is open, Escape to dismiss, and inert content behind it. The parts still worth writing yourself are click-outside-to-close and the open and close transitions.",
+        snippet: `<dialog id="confirm">
+  <form method="dialog">
+    <h2>Delete this project?</h2>
+    <button value="cancel">Cancel</button>
+    <button value="confirm">Delete</button>
+  </form>
+</dialog>
+
+<script>
+  document.querySelector("#confirm").showModal();
+</script>
+
+<style>
+  dialog::backdrop {
+    background: rgb(0 0 0 / 0.5);
+    backdrop-filter: blur(2px);
+  }
+</style>`,
+    },
+    agent: {
+        when: "building a modal dialog, confirmation prompt or alert",
+        unless: [
+            "You need click-on-the-backdrop to close. <dialog> does not do this, so you still write a small click handler that compares the event target.",
+            "You need enter and exit transitions and must support browsers without @starting-style and transition-behavior: allow-discrete.",
+            "You need a non-modal overlay that leaves the page interactive. Use popover instead of showModal().",
+            "You render the dialog through a portal into a container that is itself inside a transform or filter, which creates a containing block and breaks top-layer assumptions.",
+            "Your framework's dialog component is already handling scroll locking and route-driven open state, and the migration is not worth the churn.",
+        ],
+        snippet: `<dialog id="d">
+  <form method="dialog"><button>Close</button></form>
+</dialog>
+<script>document.querySelector("#d").showModal();</script>
+<style>dialog::backdrop { background: rgb(0 0 0 / 0.5); }</style>`,
+    },
+};
+//# sourceMappingURL=dialog.js.map

package/dist/rules/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","sourceRoot":"","sources":["../../src/rules/dialog.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,MAAM,GAAS;IAC1B,EAAE,EAAE,gBAAgB;IACpB,KAAK,EAAE,eAAe;IACtB,QAAQ,EAAE;QACR,aAAa;QACb,wBAAwB;QACxB,kBAAkB;QAClB,eAAe;QACf,YAAY;QACZ,aAAa;KACd;IACD,UAAU,EAAE,CAAC,QAAQ,CAAC;IACtB,MAAM,EAAE,2BAA2B;IACnC,KAAK,EAAE;QACL,SAAS,EACP,6XAA6X;QAC/X,OAAO,EAAE;;;;;;;;;;;;;;;;;SAiBJ;KACN;IACD,KAAK,EAAE;QACL,IAAI,EAAE,uDAAuD;QAC7D,MAAM,EAAE;YACN,8IAA8I;YAC9I,gIAAgI;YAChI,oGAAoG;YACpG,yKAAyK;YACzK,6IAA6I;SAC9I;QACD,OAAO,EAAE;;;;kEAIqD;KAC/D;CACF,CAAC"}

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

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

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

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

package/dist/rules/discrete-transitions.js

@@ -0,0 +1,57 @@
+export const discreteTransitions = {
+    id: "discrete-transitions",
+    title: "Enter and exit transitions",
+    replaces: [
+        "framer-motion",
+        "motion",
+        "react-transition-group",
+        "react-spring",
+    ],
+    featureIds: ["starting-style", "transition-behavior"],
+    native: "@starting-style with transition-behavior: allow-discrete",
+    human: {
+        explainer: "Animating an element as it appears used to need JavaScript for one reason: there was no way to give the browser a starting value for an element that was not in the DOM a frame ago, and no way to transition display or overlay. @starting-style supplies the first, and transition-behavior: allow-discrete the second, so a popover or dialog can fade and slide both in and out with CSS only. This covers simple enter and exit. It is not a replacement for an animation library in general, and the list below is longer than usual for that reason.",
+        snippet: `.toast {
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity 0.3s,
+    translate 0.3s,
+    display 0.3s allow-discrete;
+}
+
+/* The state to animate FROM on first paint. */
+@starting-style {
+  .toast {
+    opacity: 0;
+    translate: 0 1rem;
+  }
+}
+
+/* The state to animate TO on the way out. */
+.toast[hidden] {
+  display: none;
+  opacity: 0;
+  translate: 0 1rem;
+}`,
+    },
+    agent: {
+        when: "fading or sliding an element in and out as it is added to or removed from the DOM",
+        unless: [
+            "The library is doing layout animation. FLIP-style transitions between positions, shared element transitions and Framer Motion's layout prop have no CSS equivalent. Reach for View Transitions instead, and check its support.",
+            "You need spring physics or velocity-aware easing. CSS easing functions are fixed curves, and linear() approximates a spring without responding to interruption velocity.",
+            "You need gestures: drag, pan, pinch or swipe-to-dismiss.",
+            "You need to orchestrate a sequence, such as staggered children or a timeline where one animation waits for another.",
+            "You need scroll-linked animation. That is scroll-driven animations, which is a separate feature and less supported.",
+            "You need to interrupt and reverse mid-flight from application state, or read animation progress in JavaScript.",
+            "You still support browsers without @starting-style. Without it the element appears with no transition, which is a reasonable degradation but a visible difference.",
+        ],
+        snippet: `.el {
+  opacity: 1;
+  transition: opacity 0.3s, display 0.3s allow-discrete;
+}
+@starting-style { .el { opacity: 0; } }
+.el[hidden] { display: none; opacity: 0; }`,
+    },
+};
+//# sourceMappingURL=discrete-transitions.js.map

package/dist/rules/discrete-transitions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"discrete-transitions.js","sourceRoot":"","sources":["../../src/rules/discrete-transitions.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,mBAAmB,GAAS;IACvC,EAAE,EAAE,sBAAsB;IAC1B,KAAK,EAAE,4BAA4B;IACnC,QAAQ,EAAE;QACR,eAAe;QACf,QAAQ;QACR,wBAAwB;QACxB,cAAc;KACf;IACD,UAAU,EAAE,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;IACrD,MAAM,EAAE,0DAA0D;IAClE,KAAK,EAAE;QACL,SAAS,EACP,6hBAA6hB;QAC/hB,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,mFAAmF;QACzF,MAAM,EAAE;YACN,gOAAgO;YAChO,0KAA0K;YAC1K,0DAA0D;YAC1D,qHAAqH;YACrH,qHAAqH;YACrH,gHAAgH;YAChH,oKAAoK;SACrK;QACD,OAAO,EAAE;;;;;2CAK8B;KACxC;CACF,CAAC"}

package/dist/rules/field-sizing.d.ts

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

package/dist/rules/field-sizing.d.ts.map

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

package/dist/rules/field-sizing.js

@@ -0,0 +1,37 @@
+export const fieldSizing = {
+    id: "field-sizing",
+    title: "Auto-growing textareas",
+    replaces: ["react-textarea-autosize", "autosize", "react-autosize-textarea"],
+    featureIds: ["field-sizing"],
+    native: "field-sizing: content",
+    human: {
+        explainer: "The usual approach copies the textarea's value into a hidden mirror element, measures it, and writes the height back on every keystroke. field-sizing: content tells the control to size itself to its own value, so the growing happens during layout with no measuring and no re-render. Pair it with rows and max-height so it starts at a sensible size and stops before it eats the viewport.",
+        snippet: `textarea {
+  field-sizing: content;
+  /* Where it starts. */
+  min-height: 3lh;
+  /* Where it stops growing. */
+  max-height: 12lh;
+}
+
+/* Works on inputs and selects too. */
+input[type="text"] {
+  field-sizing: content;
+  min-width: 8ch;
+}`,
+    },
+    agent: {
+        when: "a textarea or input should grow to fit what the user has typed",
+        unless: [
+            "You need Safari or Firefox support today. field-sizing reached Baseline newly available only in mid-2026, so verify against your support target and keep a fallback if you cannot afford a fixed-height textarea.",
+            "You need the measured height in JavaScript, for example to sync a neighbouring element.",
+            "You need to animate the height change. field-sizing resizes without a transition.",
+        ],
+        snippet: `textarea {
+  field-sizing: content;
+  min-height: 3lh;
+  max-height: 12lh;
+}`,
+    },
+};
+//# sourceMappingURL=field-sizing.js.map

package/dist/rules/field-sizing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-sizing.js","sourceRoot":"","sources":["../../src/rules/field-sizing.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,WAAW,GAAS;IAC/B,EAAE,EAAE,cAAc;IAClB,KAAK,EAAE,wBAAwB;IAC/B,QAAQ,EAAE,CAAC,yBAAyB,EAAE,UAAU,EAAE,yBAAyB,CAAC;IAC5E,UAAU,EAAE,CAAC,cAAc,CAAC;IAC5B,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE;QACL,SAAS,EACP,oYAAoY;QACtY,OAAO,EAAE;;;;;;;;;;;;EAYX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,gEAAgE;QACtE,MAAM,EAAE;YACN,mNAAmN;YACnN,yFAAyF;YACzF,mFAAmF;SACpF;QACD,OAAO,EAAE;;;;EAIX;KACC;CACF,CAAC"}

package/dist/rules/fluid-type.d.ts

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

package/dist/rules/fluid-type.d.ts.map

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

package/dist/rules/fluid-type.js

@@ -0,0 +1,30 @@
+export const fluidType = {
+    id: "fluid-type-clamp",
+    title: "Fluid type scales",
+    replaces: ["fitty", "fittext.js", "textfit", "react-textfit"],
+    featureIds: ["min-max-clamp"],
+    native: "clamp() with a viewport-relative middle value",
+    human: {
+        explainer: "clamp() takes a minimum, a preferred value and a maximum, so a heading can scale with the viewport and still stop before it becomes unreadable at either end. Mixing rem into the preferred value, rather than using vw alone, keeps the text responsive to the user's font size, so zooming still works. Container query units swap the viewport for the component's own width when a card needs to scale independently of the page.",
+        snippet: `h1 {
+  /* min 2rem, max 4rem, scaling with the viewport between. */
+  font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem);
+}
+
+/* Scale with the container instead of the viewport. */
+.card h2 {
+  font-size: clamp(1.25rem, 0.9rem + 2cqi, 2rem);
+}`,
+    },
+    agent: {
+        when: "a heading or display type should scale between a minimum and maximum size with the viewport",
+        unless: [
+            "You need text to fit an exact box on one line, which is what fitty and textfit actually do. clamp() scales against the viewport or container, and knows nothing about the string's rendered width.",
+            "The text is user-generated and of unpredictable length, so no fixed scale will fit every case.",
+            "You need to fit text to a shape or along a path.",
+        ],
+        snippet: `h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 4rem); }
+.card h2 { font-size: clamp(1.25rem, 0.9rem + 2cqi, 2rem); }`,
+    },
+};
+//# sourceMappingURL=fluid-type.js.map

package/dist/rules/fluid-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fluid-type.js","sourceRoot":"","sources":["../../src/rules/fluid-type.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,SAAS,GAAS;IAC7B,EAAE,EAAE,kBAAkB;IACtB,KAAK,EAAE,mBAAmB;IAC1B,QAAQ,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,eAAe,CAAC;IAC7D,UAAU,EAAE,CAAC,eAAe,CAAC;IAC7B,MAAM,EAAE,+CAA+C;IACvD,KAAK,EAAE;QACL,SAAS,EACP,uaAAua;QACza,OAAO,EAAE;;;;;;;;EAQX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,6FAA6F;QACnG,MAAM,EAAE;YACN,oMAAoM;YACpM,gGAAgG;YAChG,kDAAkD;SACnD;QACD,OAAO,EAAE;6DACgD;KAC1D;CACF,CAAC"}

package/dist/rules/height-animation.d.ts

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

package/dist/rules/height-animation.d.ts.map

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

package/dist/rules/height-animation.js

@@ -0,0 +1,46 @@
+export const heightAnimation = {
+    id: "height-auto-animation",
+    title: "Animating to height auto",
+    replaces: ["react-collapse", "react-animate-height", "react-smooth-collapse"],
+    featureIds: ["interpolate-size", "calc-size"],
+    native: "interpolate-size: allow-keywords, or calc-size()",
+    human: {
+        explainer: "You cannot transition to height: auto, which is why every collapse library measures the content and animates to a pixel value instead. interpolate-size: allow-keywords opts a subtree into interpolating intrinsic keywords, so height: auto and width: max-content become animatable. calc-size() does the same for a single value when you would rather not opt in globally. Set it once on the root and existing transitions to auto start working.",
+        snippet: `/* Opt in once, near the root. */
+:root {
+  interpolate-size: allow-keywords;
+}
+
+.panel {
+  height: 0;
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+
+.panel[data-open] {
+  height: auto;
+}
+
+/* Or, without the global opt-in: */
+.panel-alt {
+  transition: height 0.3s;
+  height: calc-size(0, size);
+}
+.panel-alt[data-open] {
+  height: calc-size(auto, size);
+}`,
+    },
+    agent: {
+        when: "animating a collapsible panel open and closed to its natural height",
+        unless: [
+            "You need anything beyond Chromium today. interpolate-size and calc-size() are both limited availability, so Safari and Firefox will snap rather than animate. That degrades acceptably, but it is not the same experience.",
+            "You need the transition to work on a <details> element in browsers that do not support it, where the content is display: none while closed.",
+            "You need the measured content height in JavaScript for anything else, such as a scroll offset.",
+            "The panel contains content that loads or reflows during the transition, which the browser cannot anticipate.",
+        ],
+        snippet: `:root { interpolate-size: allow-keywords; }
+.panel { height: 0; overflow: hidden; transition: height 0.3s; }
+.panel[data-open] { height: auto; }`,
+    },
+};
+//# sourceMappingURL=height-animation.js.map

package/dist/rules/height-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"height-animation.js","sourceRoot":"","sources":["../../src/rules/height-animation.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,eAAe,GAAS;IACnC,EAAE,EAAE,uBAAuB;IAC3B,KAAK,EAAE,0BAA0B;IACjC,QAAQ,EAAE,CAAC,gBAAgB,EAAE,sBAAsB,EAAE,uBAAuB,CAAC;IAC7E,UAAU,EAAE,CAAC,kBAAkB,EAAE,WAAW,CAAC;IAC7C,MAAM,EAAE,kDAAkD;IAC1D,KAAK,EAAE;QACL,SAAS,EACP,ybAAyb;QAC3b,OAAO,EAAE;;;;;;;;;;;;;;;;;;;;;;EAsBX;KACC;IACD,KAAK,EAAE;QACL,IAAI,EAAE,qEAAqE;QAC3E,MAAM,EAAE;YACN,4NAA4N;YAC5N,6IAA6I;YAC7I,gGAAgG;YAChG,8GAA8G;SAC/G;QACD,OAAO,EAAE;;oCAEuB;KACjC;CACF,CAAC"}

package/dist/rules/index.d.ts

@@ -0,0 +1,14 @@
+import type { Rule } from "../schema.ts";
+/**
+ * Every rule in the catalog. Order is not significant: surfaces sort by
+ * replaceable weight or support tier, not by position here.
+ */
+export declare const rules: readonly Rule[];
+/** Lookup by rule id. */
+export declare const rulesById: ReadonlyMap<string, Rule>;
+/**
+ * Package name to rule. The schema guarantees a package is claimed by at most
+ * one rule, so this is unambiguous.
+ */
+export declare const rulesByPackage: ReadonlyMap<string, Rule>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/rules/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAuBzC;;;GAGG;AACH,eAAO,MAAM,KAAK,EAAE,SAAS,IAAI,EAsBhC,CAAC;AAEF,yBAAyB;AACzB,eAAO,MAAM,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAE/C,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,WAAW,CAAC,MAAM,EAAE,IAAI,CAEpD,CAAC"}

package/dist/rules/index.js

@@ -0,0 +1,56 @@
+import { accordion } from "./accordion.js";
+import { aspectRatio } from "./aspect-ratio.js";
+import { carousel } from "./carousel.js";
+import { colorFunctions } from "./color-functions.js";
+import { containerQueries } from "./container-queries.js";
+import { dialog } from "./dialog.js";
+import { discreteTransitions } from "./discrete-transitions.js";
+import { fieldSizing } from "./field-sizing.js";
+import { fluidType } from "./fluid-type.js";
+import { heightAnimation } from "./height-animation.js";
+import { masonry } from "./masonry.js";
+import { popover } from "./popover.js";
+import { scrollAnimations } from "./scroll-animations.js";
+import { scrollLock } from "./scroll-lock.js";
+import { scrollbars } from "./scrollbars.js";
+import { select } from "./select.js";
+import { smoothScroll } from "./smooth-scroll.js";
+import { sticky } from "./sticky.js";
+import { textBoxTrim } from "./text-box-trim.js";
+import { textWrapBalance } from "./text-wrap-balance.js";
+import { viewTransitions } from "./view-transitions.js";
+/**
+ * Every rule in the catalog. Order is not significant: surfaces sort by
+ * replaceable weight or support tier, not by position here.
+ */
+export const rules = [
+    accordion,
+    aspectRatio,
+    carousel,
+    colorFunctions,
+    containerQueries,
+    dialog,
+    discreteTransitions,
+    fieldSizing,
+    fluidType,
+    heightAnimation,
+    masonry,
+    popover,
+    scrollAnimations,
+    scrollLock,
+    scrollbars,
+    select,
+    smoothScroll,
+    sticky,
+    textBoxTrim,
+    textWrapBalance,
+    viewTransitions,
+];
+/** Lookup by rule id. */
+export const rulesById = new Map(rules.map((rule) => [rule.id, rule]));
+/**
+ * Package name to rule. The schema guarantees a package is claimed by at most
+ * one rule, so this is unambiguous.
+ */
+export const rulesByPackage = new Map(rules.flatMap((rule) => rule.replaces.map((pkg) => [pkg, rule])));
+//# sourceMappingURL=index.js.map

package/dist/rules/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/rules/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAChE,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAoB;IACpC,SAAS;IACT,WAAW;IACX,QAAQ;IACR,cAAc;IACd,gBAAgB;IAChB,MAAM;IACN,mBAAmB;IACnB,WAAW;IACX,SAAS;IACT,eAAe;IACf,OAAO;IACP,OAAO;IACP,gBAAgB;IAChB,UAAU;IACV,UAAU;IACV,MAAM;IACN,YAAY;IACZ,MAAM;IACN,WAAW;IACX,eAAe;IACf,eAAe;CAChB,CAAC;AAEF,yBAAyB;AACzB,MAAM,CAAC,MAAM,SAAS,GAA8B,IAAI,GAAG,CACzD,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC,CACrC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAA8B,IAAI,GAAG,CAC9D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,EAAE,IAAI,CAAU,CAAC,CAAC,CAC1E,CAAC"}

package/dist/rules/masonry.d.ts

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

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

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