@teseor/css 1.14.3 → 1.15.0

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>"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/spacing/spacing.docs.json

@@ -1,133 +0,0 @@
-{
-  "id": "spacing-utils",
-  "type": "utility",
-  "title": "Spacing",
-  "description": "Margin and padding utilities aligned to 8px grid.",
-  "api": "spacing.api.json",
-  "sections": [
-    {
-      "title": "Padding",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-p-1",
-              "text": "p-1 (8px padding)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-p-2",
-              "text": "p-2 (16px padding)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-p-4",
-              "text": "p-4 (32px padding)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            }
-          ],
-          "code": "<div class=\"ui-p-1\">...</div>\n<div class=\"ui-p-2\">...</div>\n<div class=\"ui-p-4\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Directional Padding",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-px-4 ui-py-2",
-              "text": "px-4 py-2 (horizontal 32px, vertical 16px)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-pt-4 ui-pb-1",
-              "text": "pt-4 pb-1 (top 32px, bottom 8px)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-ps-4 ui-pe-1",
-              "text": "ps-4 pe-1 (start 32px, end 8px)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            }
-          ],
-          "code": "<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-pt-4 ui-pb-1\">...</div>\n<div class=\"ui-ps-4 ui-pe-1\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Margin",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-mb-2",
-              "text": "mb-2 (16px bottom margin)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-mt-4 ui-mb-2",
-              "text": "mt-4 mb-2 (top 32px, bottom 16px)",
-              "style": { "background": "var(--ui-color-bg-muted)" }
-            },
-            {
-              "tag": "div",
-              "class": "ui-mx-auto",
-              "text": "mx-auto (centered with auto margins)",
-              "style": {
-                "background": "var(--ui-color-bg-muted)",
-                "max-inline-size": "var(--ui-row-8)"
-              }
-            }
-          ],
-          "code": "<div class=\"ui-mb-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>\n<div class=\"ui-mx-auto\">...</div>"
-        }
-      ]
-    },
-    {
-      "title": "Gap",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-flex ui-gap-2",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-p-2",
-                  "text": "Item",
-                  "style": { "background": "var(--ui-color-bg-muted)" }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-p-2",
-                  "text": "Item",
-                  "style": { "background": "var(--ui-color-bg-muted)" }
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-p-2",
-                  "text": "Item",
-                  "style": { "background": "var(--ui-color-bg-muted)" }
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-flex ui-gap-2\">\n  <div>Item</div>\n  <div>Item</div>\n  <div>Item</div>\n</div>"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/text/text.docs.json

@@ -1,191 +0,0 @@
-{
-  "id": "text-utils",
-  "type": "utility",
-  "title": "Text",
-  "description": "Typography and text utilities. Font sizes follow a 1.2 modular scale.",
-  "api": "text.api.json",
-  "sections": [
-    {
-      "title": "Sizes",
-      "description": "Font size utilities with 8px grid-snapped line-heights.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "p", "class": "ui-text-xs", "text": "text-xs: 12px / 16px line-height" },
-            { "tag": "p", "class": "ui-text-sm", "text": "text-sm: 14px / 24px line-height" },
-            { "tag": "p", "class": "ui-text-md", "text": "text-md: 16px / 24px line-height" },
-            { "tag": "p", "class": "ui-text-lg", "text": "text-lg: 20px / 32px line-height" },
-            { "tag": "p", "class": "ui-text-xl", "text": "text-xl: 24px / 32px line-height" },
-            { "tag": "p", "class": "ui-text-2xl", "text": "text-2xl: 28px / 32px line-height" },
-            { "tag": "p", "class": "ui-text-3xl", "text": "text-3xl: 32px / 40px line-height" },
-            { "tag": "p", "class": "ui-text-4xl", "text": "text-4xl: 40px / 48px line-height" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Text Roles",
-      "description": "Semantic text styles for specific use cases.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-lead",
-              "text": "Lead: Opening paragraph style (20px / 32px)"
-            },
-            { "tag": "p", "class": "ui-text-eyebrow", "text": "Eyebrow: Small caps label" },
-            {
-              "tag": "p",
-              "class": "ui-text-caption",
-              "text": "Caption: Labels and hints (12px / 16px)"
-            },
-            {
-              "tag": "p",
-              "class": "ui-text-body-sm",
-              "text": "Body small: Secondary text (14px / 24px)"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Weights",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "p", "class": "ui-font-normal", "text": "font-normal (400)" },
-            { "tag": "p", "class": "ui-font-medium", "text": "font-medium (500)" },
-            { "tag": "p", "class": "ui-font-semibold", "text": "font-semibold (600)" },
-            { "tag": "p", "class": "ui-font-bold", "text": "font-bold (700)" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Letter Spacing",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-2xl ui-tracking-display",
-              "text": "tracking-display: Tight (-0.02em)"
-            },
-            { "tag": "p", "class": "ui-tracking-body", "text": "tracking-body: Default (0)" },
-            {
-              "tag": "p",
-              "class": "ui-tracking-caps ui-uppercase",
-              "text": "tracking-caps: Wide (+0.08em)"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Line Length",
-      "description": "Constrain text width for optimal readability.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "p", "class": "ui-prose-sm", "text": "prose-sm: 45ch max-width" },
-            { "tag": "p", "class": "ui-prose", "text": "prose: 65ch max-width (recommended)" },
-            { "tag": "p", "class": "ui-prose-lg", "text": "prose-lg: 75ch max-width" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Colors",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "p", "class": "ui-text-primary", "text": "text-primary" },
-            { "tag": "p", "class": "ui-text-muted", "text": "text-muted" },
-            { "tag": "p", "class": "ui-text-success", "text": "text-success" },
-            { "tag": "p", "class": "ui-text-warning", "text": "text-warning" },
-            { "tag": "p", "class": "ui-text-danger", "text": "text-danger" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Alignment",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            { "tag": "p", "class": "ui-text-start", "text": "text-start (default)" },
-            { "tag": "p", "class": "ui-text-center", "text": "text-center" },
-            { "tag": "p", "class": "ui-text-end", "text": "text-end" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Text Wrap",
-      "description": "Control how text wraps across lines.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-balance ui-text-2xl ui-font-bold",
-              "style": { "max-inline-size": "20rem" },
-              "text": "Balanced: distributes text evenly across lines"
-            },
-            {
-              "tag": "p",
-              "class": "ui-text-pretty",
-              "style": { "max-inline-size": "20rem" },
-              "text": "Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally"
-            },
-            {
-              "tag": "p",
-              "class": "ui-text-nowrap",
-              "text": "Nowrap: prevents text from wrapping to the next line"
-            }
-          ],
-          "code": "<p class=\"ui-text-balance\">Balanced heading text</p>\n<p class=\"ui-text-pretty\">Pretty body text</p>\n<p class=\"ui-text-nowrap\">No wrap text</p>"
-        }
-      ]
-    },
-    {
-      "title": "Multi-line Truncation",
-      "description": "Clamp text to a specific number of lines with ellipsis.",
-      "examples": [
-        {
-          "layout": "column",
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-truncate-2",
-              "style": { "max-inline-size": "20rem" },
-              "text": "Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character."
-            },
-            {
-              "tag": "p",
-              "class": "ui-truncate-3",
-              "style": { "max-inline-size": "20rem" },
-              "text": "Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end."
-            },
-            {
-              "tag": "p",
-              "class": "ui-truncate-4",
-              "style": { "max-inline-size": "20rem" },
-              "text": "Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis."
-            }
-          ],
-          "code": "<p class=\"ui-truncate-2\">Long text clamped to 2 lines...</p>\n<p class=\"ui-truncate-3\">Long text clamped to 3 lines...</p>\n<p class=\"ui-truncate-4\">Long text clamped to 4 lines...</p>"
-        }
-      ]
-    }
-  ]
-}