@teseor/css 1.14.2 → 1.15.0

package/src/utilities/container/container.docs.json

@@ -1,121 +0,0 @@
-{
-  "id": "container-utils",
-  "type": "utility",
-  "title": "Container",
-  "description": "Container query utilities for component-level responsive design.",
-  "api": "container.api.json",
-  "sections": [
-    {
-      "title": "Inline Size Containment",
-      "description": "Establish inline-size containment so children can use container queries to respond to the container width.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-inline ui-p-2",
-              "style": {
-                "background": "var(--ui-color-bg-muted)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "text": "This card is inside an inline-size container"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card\">Content responds to container width</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Size Containment",
-      "description": "Establish containment on both axes for container queries on width and height.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-size ui-p-2",
-              "style": {
-                "background": "var(--ui-color-bg-muted)",
-                "block-size": "12rem"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "text": "Inside a size container"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-size\">\n  <div class=\"ui-card\">Content responds to container width and height</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Remove Containment",
-      "description": "Reset container type back to normal (no containment).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-normal ui-p-2",
-              "style": {
-                "background": "var(--ui-color-bg-muted)"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card",
-                  "text": "No containment on this container"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-normal\">\n  <div class=\"ui-card\">Normal container behavior</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "With Responsive Card",
-      "description": "Combine container-inline with card--responsive for automatic horizontal layout at wider container sizes.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-container-inline",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card ui-card--responsive",
-                  "children": [
-                    {
-                      "tag": "div",
-                      "class": "ui-card__media",
-                      "style": {
-                        "background": "var(--ui-color-bg-muted)",
-                        "min-block-size": "6rem"
-                      }
-                    },
-                    {
-                      "tag": "div",
-                      "class": "ui-card__body",
-                      "text": "Card switches to horizontal layout when container is wide enough"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-container-inline\">\n  <div class=\"ui-card ui-card--responsive\">\n    <div class=\"ui-card__media\">Image</div>\n    <div class=\"ui-card__body\">Switches to horizontal at >= 30rem</div>\n  </div>\n</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/display/display.docs.json

@@ -1,83 +0,0 @@
-{
-  "id": "display-utils",
-  "type": "utility",
-  "title": "Display",
-  "description": "Flexbox and display utilities.",
-  "api": "display.api.json",
-  "sections": [
-    {
-      "title": "Flex Layout",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-flex ui-justify-between ui-items-center ui-gap-2 ui-p-2",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                { "tag": "span", "text": "Start" },
-                { "tag": "span", "text": "Center (items-center)" },
-                { "tag": "span", "text": "End" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-flex ui-justify-between ui-items-center ui-gap-2\">\n  <span>Start</span>\n  <span>Center</span>\n  <span>End</span>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Flex Direction",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-flex ui-flex-col ui-gap-1 ui-p-2",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                { "tag": "span", "text": "Column 1" },
-                { "tag": "span", "text": "Column 2" },
-                { "tag": "span", "text": "Column 3" }
-              ]
-            },
-            {
-              "tag": "div",
-              "class": "ui-flex ui-flex-row ui-gap-1 ui-p-2",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "children": [
-                { "tag": "span", "text": "Row 1" },
-                { "tag": "span", "text": "Row 2" },
-                { "tag": "span", "text": "Row 3" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-flex ui-flex-col ui-gap-1\">...</div>\n<div class=\"ui-flex ui-flex-row ui-gap-1\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Visibility",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "span",
-              "class": "ui-visible ui-p-1",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "text": "Visible"
-            },
-            {
-              "tag": "span",
-              "class": "ui-invisible ui-p-1",
-              "style": { "background": "var(--ui-color-bg-muted)" },
-              "text": "Invisible (hidden but occupies space)"
-            }
-          ],
-          "code": "<span class=\"ui-visible\">Visible</span>\n<span class=\"ui-invisible\">Invisible (hidden but occupies space)</span>"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/scroll-animation/scroll-animation.docs.json

@@ -1,100 +0,0 @@
-{
-  "id": "scroll-animation-utils",
-  "type": "utility",
-  "title": "Scroll Animation",
-  "description": "Scroll-driven animation utilities for progress indicators and viewport-triggered effects. Wrapped in @supports — no impact on unsupported browsers.",
-  "api": "scroll-animation.api.json",
-  "sections": [
-    {
-      "title": "Scroll Progress Indicator",
-      "description": "Fixed bar at the top of the viewport that fills as the user scrolls down.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": { "style": "position: relative; block-size: 12rem; overflow-y: auto;" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-scroll-progress",
-                  "attrs": { "style": "position: absolute;" }
-                },
-                {
-                  "tag": "div",
-                  "attrs": { "style": "block-size: 40rem; padding: var(--ui-space-2);" },
-                  "children": [{ "tag": "p", "text": "Scroll down to see the progress bar fill." }]
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-scroll-progress\"></div>\n<!-- Fills as page scrolls -->"
-        }
-      ]
-    },
-    {
-      "title": "View Fade",
-      "description": "Elements fade in as they enter the viewport.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-view-fade ui-card ui-p-2",
-              "text": "I fade in on scroll"
-            }
-          ],
-          "code": "<div class=\"ui-view-fade\">I fade in on scroll</div>"
-        }
-      ]
-    },
-    {
-      "title": "View Slide Up",
-      "description": "Elements slide up and fade in on viewport entry.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-view-slide-up ui-card ui-p-2",
-              "text": "I slide up into view"
-            }
-          ],
-          "code": "<div class=\"ui-view-slide-up\">I slide up into view</div>"
-        }
-      ]
-    },
-    {
-      "title": "View Slide Start",
-      "description": "Elements slide in from the start edge (left in LTR) on viewport entry.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-view-slide-start ui-card ui-p-2",
-              "text": "I slide from the start"
-            }
-          ],
-          "code": "<div class=\"ui-view-slide-start\">I slide from the start</div>"
-        }
-      ]
-    },
-    {
-      "title": "View Scale",
-      "description": "Elements scale up and fade in on viewport entry.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-view-scale ui-card ui-p-2",
-              "text": "I scale into view"
-            }
-          ],
-          "code": "<div class=\"ui-view-scale\">I scale into view</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/scroll-snap/scroll-snap.docs.json

@@ -1,333 +0,0 @@
-{
-  "id": "scroll-snap-utils",
-  "type": "utility",
-  "title": "Scroll Snap",
-  "description": "Scroll-snap utilities for carousels, horizontal lists, and snap-to-position scrolling.",
-  "api": "scroll-snap.api.json",
-  "sections": [
-    {
-      "title": "Horizontal Snap",
-      "description": "Snap children to start position on horizontal scroll.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Item 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Item 2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Item 3"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Item 4"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Item 1</div>\n  <div class=\"ui-snap-start\">Item 2</div>\n  <div class=\"ui-snap-start\">Item 3</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Center Snap",
-      "description": "Snap children to center position.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-center ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Center 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-center ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Center 2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-center ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Center 3"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-center\">Center 1</div>\n  <div class=\"ui-snap-center\">Center 2</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Vertical Snap",
-      "description": "Snap children on vertical scroll.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-y",
-              "style": { "max-block-size": "8rem" },
-              "children": [
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 1" },
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 2" },
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 3" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-y\" style=\"max-block-size: 8rem\">\n  <div class=\"ui-snap-start\">Section 1</div>\n  <div class=\"ui-snap-start\">Section 2</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Proximity Snap",
-      "description": "Softer snap that only engages when close to a snap point.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Proximity 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Proximity 2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Proximity 3"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x-proximity ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Proximity 1</div>\n  <div class=\"ui-snap-start\">Proximity 2</div>\n</div>"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-y-proximity",
-              "style": { "max-block-size": "8rem" },
-              "children": [
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 1" },
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 2" },
-                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 3" }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-y-proximity\" style=\"max-block-size: 8rem\">\n  <div class=\"ui-snap-start\">Section 1</div>\n  <div class=\"ui-snap-start\">Section 2</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "End Alignment and Stop",
-      "description": "Snap children to end position or force stop at every snap point.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-end ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "End 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-end ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "End 2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-end ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "End 3"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-end\">End 1</div>\n  <div class=\"ui-snap-end\">End 2</div>\n</div>"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Always 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Always 2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-snap-always ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "Always 3"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start ui-snap-always\">Always 1</div>\n  <div class=\"ui-snap-start ui-snap-always\">Always 2</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Disable Snap",
-      "description": "Remove snap behavior from a container.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-none ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem", "overflow-x": "auto" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "No snap 1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "No snap 2"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-none\">\n  <div>No snap 1</div>\n  <div>No snap 2</div>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Scroll Padding",
-      "description": "Offset snap position for fixed headers or insets.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-1"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-1"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-snap-p-1 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-1</div>\n</div>"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-2"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-2"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-snap-p-2 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-2</div>\n</div>"
-        },
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2",
-              "style": { "max-inline-size": "20rem" },
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-4"
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-snap-start ui-card ui-p-2",
-                  "style": { "min-inline-size": "10rem" },
-                  "text": "p-4"
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-snap-x ui-snap-p-4 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">p-4</div>\n</div>"
-        }
-      ]
-    }
-  ]
-}