npm - @teseor/css - Versions diffs - 1.14.3 → 1.15.0 - Mend

@teseor/css 1.14.3 → 1.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (295) hide show

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

@@ -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 ADDED Viewed

@@ -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/root.docs.json DELETED Viewed

@@ -1,35 +0,0 @@
-{
-  "id": "root",
-  "type": "token",
-  "title": "Root",
-  "description": "Base styles applied to the .root class: font family, size, line-height, color, and background",
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Usage",
-      "description": "Add the .ui-root class to the html or body element to establish baseline typography and color.",
-      "examples": [
-        {
-          "title": "Basic setup",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-root",
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "Text inherits font-family, size, line-height, and color from .ui-root"
-                }
-              ]
-            }
-          ],
-          "code": "<html class=\"ui-root\">\n  <body>\n    <!-- All children inherit base styles -->\n  </body>\n</html>"
-        },
-        {
-          "title": "Tokens applied",
-          "code": ".ui-root {\n  font-family: var(--ui-font-sans);\n  font-size: var(--ui-font-size-md);\n  line-height: var(--ui-leading-md);\n  color: var(--ui-color-text);\n  background: var(--ui-color-bg);\n}"
-        }
-      ]
-    }
-  ]
-}

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

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