@teseor/css 1.14.2 → 1.15.0

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

package/src/utilities/view-transition/view-transition.docs.json

@@ -1,63 +0,0 @@
-{
-  "id": "view-transition-utils",
-  "type": "utility",
-  "title": "View Transition",
-  "description": "CSS View Transitions API utilities for smooth page navigation. Enabled by default; unsupported browsers work normally.",
-  "api": "view-transition.api.json",
-  "sections": [
-    {
-      "title": "Static elements",
-      "description": "Elements that persist without animation. Sidebar and header stay fixed during page transitions.",
-      "examples": [
-        {
-          "code": "<header class=\"ui-transition-name-header\">...</header>\n<nav class=\"ui-transition-name-sidebar\">...</nav>"
-        }
-      ]
-    },
-    {
-      "title": "Slide animations",
-      "description": "Content slides in/out in different directions.",
-      "examples": [
-        {
-          "code": "<main class=\"ui-transition-name-main\">Slides up</main>\n<main class=\"ui-transition-name-slide-up\">Slides up</main>\n<main class=\"ui-transition-name-slide-down\">Slides down</main>\n<main class=\"ui-transition-name-slide-start\">Slides from left</main>\n<main class=\"ui-transition-name-slide-end\">Slides from right</main>"
-        }
-      ]
-    },
-    {
-      "title": "Scale and fade",
-      "description": "Scale effect for modals/cards, fade for subtle transitions.",
-      "examples": [
-        {
-          "code": "<div class=\"ui-transition-name-scale\">Scales in/out</div>\n<div class=\"ui-transition-name-card\">Card scales</div>\n<div class=\"ui-transition-name-modal\">Modal scales</div>\n<div class=\"ui-transition-name-fade\">Fades in/out</div>"
-        }
-      ]
-    },
-    {
-      "title": "Hero morph",
-      "description": "Same element on both pages morphs (position/size interpolates). Use same class on source and target.",
-      "examples": [
-        {
-          "code": "<!-- Page 1: thumbnail -->\n<img class=\"ui-transition-name-hero\" src=\"product.jpg\">\n\n<!-- Page 2: full image -->\n<img class=\"ui-transition-name-hero\" src=\"product.jpg\">"
-        }
-      ]
-    },
-    {
-      "title": "Disable",
-      "description": "Exclude an element from view transitions.",
-      "examples": [
-        {
-          "code": "<div class=\"ui-transition-name-none\">No transition</div>"
-        }
-      ]
-    },
-    {
-      "title": "Preserving scroll position",
-      "description": "View transitions snapshot elements, resetting scroll. Use `pagereveal` event to restore scroll before paint.",
-      "examples": [
-        {
-          "code": "// Save scroll on navigation\nlink.addEventListener('click', () => {\n  sessionStorage.setItem('scroll', sidebar.scrollTop);\n});\n\n// Restore before page reveals\nwindow.addEventListener('pagereveal', () => {\n  const saved = sessionStorage.getItem('scroll');\n  if (saved) sidebar.scrollTop = parseInt(saved, 10);\n});"
-        }
-      ]
-    }
-  ]
-}

package/src/utilities/visually-hidden/visually-hidden.docs.json

@@ -1,44 +0,0 @@
-{
-  "id": "visually-hidden",
-  "type": "utility",
-  "title": "Visually Hidden",
-  "description": "Hides content visually while keeping it accessible to screen readers. Use for skip links and accessible labels.",
-  "api": "visually-hidden.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Content is hidden visually but announced by screen readers",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "button",
-              "children": [
-                { "text": "Submit" },
-                { "tag": "span", "class": "ui-visually-hidden", "text": " form to contact support" }
-              ]
-            }
-          ],
-          "code": "<button>\n  Submit\n  <span class=\"ui-visually-hidden\"> form to contact support</span>\n</button>"
-        }
-      ]
-    },
-    {
-      "title": "Focusable (Skip Link)",
-      "description": "Becomes visible when focused - useful for skip links",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "a",
-              "class": "ui-visually-hidden ui-visually-hidden--focusable",
-              "attrs": { "href": "#main", "style": "position: relative;" },
-              "text": "Skip to main content"
-            }
-          ],
-          "code": "<a href=\"#main\" class=\"ui-visually-hidden ui-visually-hidden--focusable\">\n  Skip to main content\n</a>"
-        }
-      ]
-    }
-  ]
-}