@teseor/css 1.14.2 → 1.15.0

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

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

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

@@ -0,0 +1,18 @@
+---
+title: Visually Hidden
+type: utility
+id: 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
+---
+
+<!-- @default -->
+<!-- Content is hidden visually but announced by screen readers -->
+<button>
+Submit
+  <span class="ui-visually-hidden"> form to contact support</span>
+</button>
+
+<!-- @focusable_skip_link -->
+<!-- Becomes visible when focused - useful for skip links -->
+<a class="ui-visually-hidden ui-visually-hidden--focusable" href="#main" style="position: relative;">Skip to main content</a>

package/src/base/typography/typography.docs.json

@@ -1,328 +0,0 @@
-{
-  "id": "typography",
-  "type": "token",
-  "title": "Typography",
-  "description": "Modular scale (1.2 ratio) with 8px grid-snapped line-heights. Responsive breakpoints at 730px and 1080px adjust heading sizes.",
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Type Scale",
-      "description": "Font sizes follow a 1.2 (Minor Third) modular scale from 12px to 40px. All line-heights snap to 8px multiples.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "table",
-              "class": "ui-table",
-              "children": [
-                {
-                  "tag": "thead",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "th", "text": "Token" },
-                        { "tag": "th", "text": "Size" },
-                        { "tag": "th", "text": "Line-height" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "tbody",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-xs" }]
-                        },
-                        { "tag": "td", "text": "12px" },
-                        { "tag": "td", "text": "16px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-sm" }]
-                        },
-                        { "tag": "td", "text": "14px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-md" }]
-                        },
-                        { "tag": "td", "text": "16px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-lg" }]
-                        },
-                        { "tag": "td", "text": "20px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-xl" }]
-                        },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-2xl" }]
-                        },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "32px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-3xl" }]
-                        },
-                        { "tag": "td", "text": "32px" },
-                        { "tag": "td", "text": "40px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        {
-                          "tag": "td",
-                          "children": [{ "tag": "code", "text": "--ui-font-size-4xl" }]
-                        },
-                        { "tag": "td", "text": "40px" },
-                        { "tag": "td", "text": "48px" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Headings",
-      "description": "Headings use semantic tokens and adjust size at breakpoints.",
-      "examples": [
-        {
-          "items": [
-            { "tag": "h1", "text": "Heading 1 - 40px / 48px" },
-            { "tag": "h2", "text": "Heading 2 - 32px / 40px" },
-            { "tag": "h3", "text": "Heading 3 - 28px / 32px" },
-            { "tag": "h4", "text": "Heading 4 - 24px / 32px" },
-            { "tag": "h5", "text": "Heading 5 - 20px / 24px" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Body Text",
-      "description": "Default body text at 16px with 24px line-height (1.5x ratio).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "text": "Body text at 16px with 24px line-height. The " },
-                { "tag": "strong", "text": "bold text" },
-                { "text": " and " },
-                { "tag": "code", "text": "inline code" },
-                { "text": " maintain the same rhythm." }
-              ]
-            },
-            {
-              "tag": "p",
-              "class": "ui-text-body-sm",
-              "text": "Body small at 14px with 24px line-height for secondary text."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Text Roles",
-      "description": "Semantic text styles for specific use cases.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-lead",
-              "text": "Lead paragraph - 20px / 32px. Use for opening paragraphs or article intros."
-            }
-          ]
-        },
-        {
-          "items": [
-            { "tag": "p", "class": "ui-text-eyebrow", "text": "Eyebrow text" },
-            { "tag": "h2", "text": "Related Heading" }
-          ],
-          "description": "Eyebrow - 12px uppercase with wide tracking. Use above headings for categorization."
-        },
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-caption",
-              "text": "Caption text - 12px / 16px. Use for labels, hints, and metadata."
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Font Weights",
-      "description": "Four weight levels for hierarchy.",
-      "examples": [
-        {
-          "items": [
-            { "tag": "p", "class": "ui-font-normal", "text": "Normal (400) - Body text" },
-            {
-              "tag": "p",
-              "class": "ui-font-medium",
-              "text": "Medium (500) - Labels, small headings"
-            },
-            { "tag": "p", "class": "ui-font-semibold", "text": "Semibold (600) - Subheadings" },
-            { "tag": "p", "class": "ui-font-bold", "text": "Bold (700) - Headlines, emphasis" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Letter Spacing",
-      "description": "Three tracking options based on use case.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "class": "ui-text-3xl ui-tracking-display",
-              "text": "Display tracking (-0.02em)"
-            },
-            { "tag": "p", "text": "Body tracking (0) - default" },
-            { "tag": "p", "class": "ui-text-eyebrow", "text": "Caps tracking (+0.08em)" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Line Length",
-      "description": "Constrain text width for optimal readability (45-75 characters).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-prose",
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "This paragraph is constrained to 65ch max-width for optimal reading comfort. Long lines of text are harder to read because the eye has difficulty tracking back to the start of the next line."
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Responsive Behavior",
-      "description": "Headings scale down on mobile (<730px) and up on desktop (>1080px).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "table",
-              "class": "ui-table",
-              "children": [
-                {
-                  "tag": "thead",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "th", "text": "Heading" },
-                        { "tag": "th", "text": "Mobile" },
-                        { "tag": "th", "text": "Default" },
-                        { "tag": "th", "text": "Desktop" }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "tbody",
-                  "children": [
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h1" },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "40px" },
-                        { "tag": "td", "text": "48px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h2" },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "32px" },
-                        { "tag": "td", "text": "40px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h3" },
-                        { "tag": "td", "text": "20px" },
-                        { "tag": "td", "text": "28px" },
-                        { "tag": "td", "text": "28px" }
-                      ]
-                    },
-                    {
-                      "tag": "tr",
-                      "children": [
-                        { "tag": "td", "text": "h4" },
-                        { "tag": "td", "text": "18px" },
-                        { "tag": "td", "text": "24px" },
-                        { "tag": "td", "text": "24px" }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}

package/src/components/actions/button/button.docs.json

@@ -1,264 +0,0 @@
-{
-  "id": "button",
-  "type": "component",
-  "title": "Button",
-  "api": "./button.api.json",
-  "description": "Buttons trigger actions. Use primary for main CTA, secondary for less important actions.",
-  "modifiers": {
-    "size": {
-      "usage": "Default is 32px (2 rows). Use small for dense UIs, large for prominent CTAs."
-    },
-    "variant": {
-      "usage": "Primary for main actions. Secondary for less important. Outline for subtle. Ghost for toolbar. Danger for destructive. Link for inline."
-    },
-    "icon": {
-      "usage": "Square icon-only buttons. Always add aria-label for accessibility."
-    },
-    "radius": {
-      "usage": "Override border radius. Use radius-full for pill-shaped buttons."
-    },
-    "block": {
-      "usage": "Full width button. Use for mobile or form submit."
-    },
-    "loading": {
-      "usage": "Shows spinner animation. Button becomes non-interactive."
-    }
-  },
-  "sections": [
-    {
-      "title": "Variants",
-      "description": "Button styles for different purposes and emphasis levels.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button", "text": "Primary" },
-            { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-            { "tag": "button", "class": "ui-button ui-button--outline", "text": "Outline" },
-            { "tag": "button", "class": "ui-button ui-button--ghost", "text": "Ghost" },
-            { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" },
-            { "tag": "button", "class": "ui-button ui-button--link", "text": "Link" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sizes",
-      "description": "Small for dense UIs, default for most cases, large for prominent CTAs.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
-            { "tag": "button", "class": "ui-button ui-button--md", "text": "Medium" },
-            { "tag": "button", "class": "ui-button ui-button--lg", "text": "Large" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Radius",
-      "description": "Override border radius. Use radius-full for pill-shaped buttons.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--radius-none", "text": "None" },
-            { "tag": "button", "class": "ui-button ui-button--radius-sm", "text": "Small" },
-            { "tag": "button", "class": "ui-button", "text": "Default" },
-            { "tag": "button", "class": "ui-button ui-button--radius-lg", "text": "Large" },
-            { "tag": "button", "class": "ui-button ui-button--radius-full", "text": "Full" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Block",
-      "description": "Full width button for mobile or form submit.",
-      "examples": [
-        {
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--block", "text": "Block Button" }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Loading",
-      "description": "Shows spinner animation. Button becomes non-interactive.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            { "tag": "button", "class": "ui-button ui-button--loading", "text": "Loading" },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--secondary ui-button--loading",
-              "text": "Loading"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Icon Button",
-      "description": "Square icon-only buttons. Use with SVG icons from Lucide or similar sets.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon ui-button--sm",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M18 6 6 18" } },
-                    { "tag": "path", "attrs": { "d": "m6 6 12 12" } }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
-                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
-                  ]
-                }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--icon ui-button--lg",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "circle", "attrs": { "cx": "11", "cy": "11", "r": "8" } },
-                    { "tag": "path", "attrs": { "d": "m21 21-4.3-4.3" } }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button ui-button--icon ui-button--sm\">\n  <svg class=\"ui-icon\"><!-- x icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon\">\n  <svg class=\"ui-icon\"><!-- plus icon --></svg>\n</button>\n<button class=\"ui-button ui-button--icon ui-button--lg\">\n  <svg class=\"ui-icon\"><!-- search icon --></svg>\n</button>"
-        }
-      ]
-    },
-    {
-      "title": "With Icon",
-      "description": "Buttons with icon and text. Use ui-button__icon element with --start or --end modifier.",
-      "examples": [
-        {
-          "layout": "row",
-          "items": [
-            {
-              "tag": "button",
-              "class": "ui-button",
-              "children": [
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-button__icon ui-button__icon--start",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [
-                    { "tag": "path", "attrs": { "d": "M5 12h14" } },
-                    { "tag": "path", "attrs": { "d": "M12 5v14" } }
-                  ]
-                },
-                { "text": "Add Item" }
-              ]
-            },
-            {
-              "tag": "button",
-              "class": "ui-button ui-button--secondary",
-              "children": [
-                { "text": "Next" },
-                {
-                  "tag": "svg",
-                  "class": "ui-icon ui-button__icon ui-button__icon--end",
-                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "children": [{ "tag": "path", "attrs": { "d": "m9 18 6-6-6-6" } }]
-                }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button\">\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--start\"><!-- plus --></svg>\n  Add Item\n</button>\n<button class=\"ui-button ui-button--secondary\">\n  Next\n  <svg class=\"ui-icon ui-button__icon ui-button__icon--end\"><!-- chevron-right --></svg>\n</button>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-button-accent",
-      "default": "var(--ui-color-primary)",
-      "description": "Primary accent color. All shades auto-generated via color-mix."
-    },
-    {
-      "token": "--ui-button-height",
-      "default": "var(--ui-row-2)",
-      "description": "Overall height"
-    },
-    {
-      "token": "--ui-button-padding-x",
-      "default": "var(--ui-space-2)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-button-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-button-font-weight",
-      "default": "var(--ui-weight-medium)",
-      "description": "Font weight"
-    },
-    {
-      "token": "--ui-button-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Corner radius"
-    },
-    {
-      "token": "--ui-button-color",
-      "default": "var(--ui-color-text-inverse)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-button-height-sm",
-      "default": "calc(var(--ui-row) * 1.5)",
-      "description": "Overall height at small size"
-    },
-    {
-      "token": "--ui-button-font-size-sm",
-      "default": "var(--ui-font-size-xs)",
-      "description": "Font size at small size"
-    },
-    {
-      "token": "--ui-button-height-lg",
-      "default": "calc(var(--ui-row) * 2.5)",
-      "description": "Overall height at large size"
-    },
-    {
-      "token": "--ui-button-padding-x-lg",
-      "default": "var(--ui-space-3)",
-      "description": "Horizontal padding at large size"
-    },
-    {
-      "token": "--ui-button-font-size-lg",
-      "default": "var(--ui-font-size-md)",
-      "description": "Font size at large size"
-    }
-  ]
-}