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

@teseor/css 1.14.3 → 1.15.1

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 (464) hide show

package/src/layout/topbar/topbar-visual.png DELETED Viewed

Binary file

package/src/layout/topbar/topbar.docs.json DELETED Viewed

@@ -1,110 +0,0 @@
-{
-  "id": "topbar",
-  "type": "primitive",
-  "title": "Topbar",
-  "description": "Fixed or sticky header bar for app layouts with start, center, and end sections.",
-  "api": "./topbar.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Basic topbar with three sections: start (brand), center (search/nav), and end (actions).",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Brand" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__center",
-                  "children": [{ "tag": "span", "text": "Center content" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Sticky",
-      "description": "Stays at the top of the viewport on scroll.",
-      "examples": [
-        {
-          "code": "<header class=\"ui-topbar ui-topbar--sticky ui-topbar--bordered\">\n  <div class=\"ui-topbar__start\"><strong>Brand</strong></div>\n  <div class=\"ui-topbar__center\">Nav</div>\n  <div class=\"ui-topbar__end\">Actions</div>\n</header>"
-        }
-      ]
-    },
-    {
-      "title": "Bordered",
-      "description": "Bottom border via inset box-shadow to preserve grid rhythm.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--bordered",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Bordered" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Raised",
-      "description": "Subtle drop shadow below the topbar.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "header",
-              "class": "ui-topbar ui-topbar--raised",
-              "children": [
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__start",
-                  "children": [{ "tag": "strong", "text": "Raised" }]
-                },
-                {
-                  "tag": "div",
-                  "class": "ui-topbar__end",
-                  "children": [{ "tag": "span", "text": "Actions" }]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Integration with Sidebar",
-      "description": "Set --topbar-height on .app-shell so sidebar and main offset correctly. The topbar itself uses --fixed, and sidebar/main read --topbar-height.",
-      "examples": [
-        {
-          "code": "<body class=\"ui-app-shell\" style=\"--topbar-height: var(--ui-row-3)\">\n  <header class=\"ui-topbar ui-topbar--fixed ui-topbar--bordered\">\n    <div class=\"ui-topbar__start\"><strong>App</strong></div>\n    <div class=\"ui-topbar__end\">User</div>\n  </header>\n  <aside class=\"ui-sidebar\">Sidebar</aside>\n  <main class=\"ui-main\">\n    <div class=\"ui-container\">Content</div>\n  </main>\n</body>"
-        }
-      ]
-    }
-  ]
-}

package/src/layout/topbar/topbar.visual.spec.ts DELETED Viewed

@@ -1,14 +0,0 @@
-import { resolve } from 'node:path';
-import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../test-utils';
-const DOCS_PATH = resolve(__dirname, 'topbar.docs.json');
-test.describe('topbar visual regression', () => {
-  test('all variations', async ({ page }) => {
-    await setupVisualTestFromDocs(page, DOCS_PATH);
-    await validateGridRhythm(page, 'topbar');
-    await saveForLostPixel(page, 'topbar');
-    await expect(page.locator('body')).toHaveScreenshot('topbar.visual.png');
-  });
-});

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

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

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

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