@teseor/css 1.0.0 → 1.2.0

package/src/04-components/nav/nav.docs.json

@@ -0,0 +1,242 @@
+{
+  "id": "nav",
+  "type": "component",
+  "title": "Nav",
+  "description": "Horizontal or vertical navigation links for primary and secondary navigation.",
+  "api": "./nav.api.json",
+  "sections": [
+    {
+      "title": "Basic",
+      "description": "Underline-style navigation with active state indicator.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-nav",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-nav__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item ui-nav__item--active",
+                          "text": "Dashboard",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Projects",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Settings",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item ui-nav__item--disabled",
+                          "text": "Disabled",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Pills",
+      "description": "Background-filled variant for standalone navigation.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-nav ui-nav--pills",
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-nav__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item ui-nav__item--active",
+                          "text": "Overview",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Analytics",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Reports",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "description": "Vertical navigation with start-side indicator.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-nav ui-nav--vertical",
+              "style": { "inline-size": "200px" },
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-nav__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item ui-nav__item--active",
+                          "text": "Profile",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Account",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Security",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Vertical Pills",
+      "description": "Vertical navigation with pill-style active indicator.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "nav",
+              "class": "ui-nav ui-nav--vertical ui-nav--pills",
+              "style": { "inline-size": "200px" },
+              "children": [
+                {
+                  "tag": "ul",
+                  "class": "ui-nav__list",
+                  "children": [
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item ui-nav__item--active",
+                          "text": "General",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Notifications",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "li",
+                      "children": [
+                        {
+                          "tag": "a",
+                          "class": "ui-nav__item",
+                          "text": "Billing",
+                          "attrs": { "href": "#" }
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/04-components/nav/nav.visual.spec.ts

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

package/src/04-components/overlay/overlay.api.json

@@ -1,7 +1,20 @@
 {
   "name": "overlay",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "light": {
+      "type": "boolean"
+    },
+    "blur": {
+      "type": "boolean"
+    },
+    "animate": {
+      "type": "boolean"
+    },
+    "visible": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-overlay-bg",

package/src/04-components/pagination/pagination.api.json

@@ -1,7 +1,28 @@
 {
   "name": "pagination",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    }
+  },
+  "elements": {
+    "prev": {},
+    "next": {},
+    "list": {},
+    "item": {},
+    "ellipsis": {},
+    "link": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-pagination-gap",

package/src/04-components/popover/popover.api.json

@@ -1,7 +1,15 @@
 {
   "name": "popover",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "position": {
+      "values": ["top"]
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {}
+  },
   "cssVars": [
     {
       "name": "--ui-popover-bg",

package/src/04-components/progress/progress.api.json

@@ -1,7 +1,26 @@
 {
   "name": "progress",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["success", "warning", "danger"]
+    },
+    "striped": {
+      "type": "boolean"
+    },
+    "animated": {
+      "type": "boolean"
+    },
+    "indeterminate": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "bar": {}
+  },
   "cssVars": [
     {
       "name": "--ui-progress-height",

package/src/04-components/radio/radio.api.json

@@ -3,7 +3,7 @@
   "element": "input",
   "modifiers": {
     "size": {
-      "values": ["lg"]
+      "values": ["sm", "lg"]
     },
     "error": {
       "type": "boolean"

package/src/04-components/select/select.api.json

@@ -10,6 +10,9 @@
     },
     "state": {
       "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
     }
   },
   "cssVars": [

package/src/04-components/skeleton/skeleton.api.json

@@ -1,7 +1,14 @@
 {
   "name": "skeleton",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "variant": {
+      "values": ["text", "circle", "heading", "rect"]
+    },
+    "pulse": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-skeleton-bg",

package/src/04-components/status/status.api.json

@@ -1,7 +1,20 @@
 {
   "name": "status",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "variant": {
+      "values": ["success", "warning", "danger", "info"]
+    },
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "pulse": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "dot": {}
+  },
   "cssVars": [
     {
       "name": "--ui-status-size",

package/src/04-components/table/table.api.json

@@ -1,7 +1,14 @@
 {
   "name": "table",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "compact": {
+      "type": "boolean"
+    },
+    "striped": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-table-font-size",

package/src/04-components/tabs/tabs.api.json

@@ -2,6 +2,23 @@
   "name": "tabs",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "list": {},
+    "tab": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        }
+      }
+    },
+    "panel": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-tabs-border-color",

package/src/04-components/tag/tag.api.json

@@ -9,6 +9,10 @@
       "values": ["primary", "success", "warning", "danger"]
     }
   },
+  "elements": {
+    "remove": {}
+  },
+  "relatedComponents": ["tag-group"],
   "cssVars": [
     {
       "name": "--ui-tag-height",

package/src/04-components/textarea/textarea.api.json

@@ -10,6 +10,9 @@
     },
     "state": {
       "values": ["error", "success"]
+    },
+    "resize": {
+      "values": ["resize-none", "resize-both"]
     }
   },
   "cssVars": [

package/src/04-components/toast/toast.api.json

@@ -1,7 +1,28 @@
 {
   "name": "toast",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "variant": {
+      "values": ["success", "warning", "danger", "info"]
+    }
+  },
+  "elements": {
+    "content": {},
+    "title": {},
+    "description": {},
+    "close": {},
+    "action": {}
+  },
+  "relatedComponents": [
+    {
+      "name": "toast-viewport",
+      "modifiers": {
+        "position": {
+          "values": ["top-end", "bottom-end"]
+        }
+      }
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-toast-viewport-gap",

package/src/04-components/toggle/toggle.api.json

@@ -6,6 +6,11 @@
       "values": ["sm", "lg"]
     }
   },
+  "elements": {
+    "input": {},
+    "track": {},
+    "thumb": {}
+  },
   "cssVars": [
     {
       "name": "--ui-toggle-track-width",

package/src/04-components/tooltip/tooltip.api.json

@@ -1,7 +1,17 @@
 {
   "name": "tooltip",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "position": {
+      "values": ["top", "bottom", "start", "end"]
+    },
+    "animate": {
+      "type": "boolean"
+    },
+    "visible": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-tooltip-bg",

package/src/testing/page-setup.ts

@@ -9,9 +9,11 @@ import { scaffoldCss } from './scaffold';
 
 interface DocsItem {
   tag: string;
-  class: string;
-  text: string;
+  class?: string;
+  text?: string;
   attrs?: Record<string, string>;
+  style?: Record<string, string>;
+  children?: DocsItem[];
 }
 
 interface DocsExample {
@@ -41,13 +43,27 @@ export function loadComponentApi(apiPath: string): ComponentAPI {
 }
 
 function renderItem(item: DocsItem): string {
-  const attrs = item.attrs
-    ? Object.entries(item.attrs)
-        .map(([k, v]) => (v === '' ? k : `${k}="${v}"`))
-        .join(' ')
-    : '';
-  const attrStr = attrs ? ` ${attrs}` : '';
-  return `<${item.tag} class="${item.class}"${attrStr}>${item.text}</${item.tag}>`;
+  const parts: string[] = [];
+
+  if (item.class) parts.push(`class="${item.class}"`);
+
+  if (item.style) {
+    const css = Object.entries(item.style)
+      .map(([k, v]) => `${k}: ${v}`)
+      .join('; ');
+    parts.push(`style="${css}"`);
+  }
+
+  if (item.attrs) {
+    for (const [k, v] of Object.entries(item.attrs)) {
+      parts.push(v === '' ? k : `${k}="${v}"`);
+    }
+  }
+
+  const attrStr = parts.length ? ` ${parts.join(' ')}` : '';
+  const content = item.children ? item.children.map(renderItem).join('\n') : (item.text ?? '');
+
+  return `<${item.tag}${attrStr}>${content}</${item.tag}>`;
 }
 
 export function loadDocsJson(docsPath: string): DocsJson {