@teseor/css 1.1.0 → 1.2.1

package/src/04-components/index.scss

@@ -1,41 +1,42 @@
-@forward './accordion/index';
-@forward './alert/index';
-@forward './avatar/index';
-@forward './badge/index';
-@forward './breadcrumb/index';
-@forward './button/index';
-@forward './button-group/index';
-@forward './card/index';
-@forward './checkbox/index';
-@forward './code/index';
-@forward './data-list/index';
-@forward './dialog/index';
-@forward './disclosure/index';
-@forward './divider/index';
-@forward './drawer/index';
-@forward './field/index';
-@forward './form-error/index';
-@forward './form-helper/index';
-@forward './heading/index';
-@forward './icon/index';
-@forward './input/index';
-@forward './label/index';
-@forward './link/index';
-@forward './menu/index';
-@forward './modal/index';
-@forward './overlay/index';
-@forward './pagination/index';
-@forward './popover/index';
-@forward './progress/index';
-@forward './radio/index';
-@forward './select/index';
-@forward './skeleton/index';
-@forward './spinner/index';
-@forward './status/index';
-@forward './table/index';
-@forward './tabs/index';
-@forward './tag/index';
-@forward './textarea/index';
-@forward './toast/index';
-@forward './toggle/index';
-@forward './tooltip/index';
+@forward './actions/button/index';
+@forward './actions/button-group/index';
+@forward './data-display/avatar/index';
+@forward './data-display/badge/index';
+@forward './data-display/card/index';
+@forward './data-display/data-list/index';
+@forward './data-display/icon/index';
+@forward './data-display/status/index';
+@forward './data-display/table/index';
+@forward './data-display/tag/index';
+@forward './disclosure/accordion/index';
+@forward './disclosure/disclosure/index';
+@forward './feedback/alert/index';
+@forward './feedback/progress/index';
+@forward './feedback/skeleton/index';
+@forward './feedback/spinner/index';
+@forward './feedback/toast/index';
+@forward './forms/checkbox/index';
+@forward './forms/field/index';
+@forward './forms/form-error/index';
+@forward './forms/form-helper/index';
+@forward './forms/input/index';
+@forward './forms/label/index';
+@forward './forms/radio/index';
+@forward './forms/select/index';
+@forward './forms/textarea/index';
+@forward './forms/toggle/index';
+@forward './layout/divider/index';
+@forward './navigation/breadcrumb/index';
+@forward './navigation/menu/index';
+@forward './navigation/nav/index';
+@forward './navigation/pagination/index';
+@forward './navigation/tabs/index';
+@forward './overlays/dialog/index';
+@forward './overlays/drawer/index';
+@forward './overlays/modal/index';
+@forward './overlays/overlay/index';
+@forward './overlays/popover/index';
+@forward './overlays/tooltip/index';
+@forward './typography/code/index';
+@forward './typography/heading/index';
+@forward './typography/link/index';

package/src/04-components/{divider → layout/divider}/divider.api.json

@@ -7,6 +7,9 @@
     },
     "dashed": {
       "type": "boolean"
+    },
+    "position": {
+      "values": ["start", "end"]
     }
   },
   "cssVars": [

package/src/04-components/{divider → layout/divider}/divider.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'divider.docs.json');
 

package/src/04-components/{divider → layout/divider}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // @component divider
 // @element div

package/src/04-components/{breadcrumb → navigation/breadcrumb}/breadcrumb.api.json

@@ -2,6 +2,11 @@
   "name": "breadcrumb",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "item": {},
+    "link": {},
+    "current": {}
+  },
   "cssVars": [
     {
       "name": "--ui-breadcrumb-height",

package/src/04-components/{breadcrumb → navigation/breadcrumb}/breadcrumb.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'breadcrumb.docs.json');
 

package/src/04-components/{breadcrumb → navigation/breadcrumb}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Breadcrumb - navigation hierarchy
 // Shows current page location in site structure

package/src/04-components/{menu → navigation/menu}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Menu - action menu
 // Dropdown list of actions or options

package/src/04-components/{menu → navigation/menu}/menu.api.json

@@ -2,6 +2,30 @@
   "name": "menu",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "group": {},
+    "label": {},
+    "separator": {},
+    "item": {
+      "modifiers": {
+        "disabled": {
+          "type": "boolean"
+        },
+        "danger": {
+          "type": "boolean"
+        },
+        "check": {
+          "type": "boolean"
+        },
+        "radio": {
+          "type": "boolean"
+        }
+      }
+    },
+    "item-icon": {},
+    "item-shortcut": {},
+    "item-indicator": {}
+  },
   "cssVars": [
     {
       "name": "--ui-menu-min-width",

package/src/04-components/{menu → navigation/menu}/menu.visual.spec.ts

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
-import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../testing';
+import { saveForLostPixel, setupVisualTestFromDocs, validateGridRhythm } from '../../../testing';
 
 const DOCS_PATH = resolve(__dirname, 'menu.docs.json');
 

package/src/04-components/navigation/nav/index.scss

@@ -0,0 +1,142 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component nav
+// @element nav
+
+@layer components.tokens {
+  .nav {
+    --_gap: var(--ui-nav-gap, var(--ui-space-1, #{t.$space-1}));
+    --_item-height: var(--ui-nav-item-height, var(--ui-row-2, #{t.$row-2}));
+    --_item-padding-x: var(--ui-nav-item-padding-x, var(--ui-space-2, #{t.$space-2}));
+    --_item-font-size: var(--ui-nav-item-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_item-font-weight: var(--ui-nav-item-font-weight, var(--ui-weight-medium, #{t.$weight-medium}));
+    --_item-color: var(--ui-nav-item-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_item-color-hover: var(--ui-nav-item-color-hover, var(--ui-color-text, #{t.$color-text}));
+    --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-primary, #{t.$color-primary}));
+    --_item-radius: var(--ui-nav-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_border-color: var(--ui-nav-border-color, var(--ui-color-border, #{t.$color-border}));
+  }
+
+  // @modifier pills
+  .nav--pills {
+    --_item-bg-hover: var(--ui-nav-item-bg-hover, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_item-bg-active: var(--ui-nav-item-bg-active, var(--ui-color-primary, #{t.$color-primary}));
+    --_item-color-active: var(--ui-nav-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+
+  // @modifier boolean vertical
+}
+
+@layer components.styles {
+  .nav__list {
+    display: flex;
+    align-items: stretch;
+    gap: var(--_gap);
+
+    box-sizing: border-box;
+    block-size: var(--_item-height);
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+
+    // Bottom border via box-shadow to avoid height impact
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 var(--_border-color);
+  }
+
+  .nav__item {
+    display: inline-flex;
+    align-items: center;
+
+    box-sizing: border-box;
+    block-size: var(--_item-height);
+    padding-inline: var(--_item-padding-x);
+
+    font-family: var(--ui-font-sans, #{t.$font-sans});
+    font-size: var(--_item-font-size);
+    font-weight: var(--_item-font-weight);
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    color: var(--_item-color);
+
+    background: transparent;
+    border: none;
+    // Underline indicator via box-shadow
+    box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 transparent;
+    cursor: pointer;
+
+    transition:
+      color var(--ui-duration-base) var(--ui-ease-default),
+      background var(--ui-duration-base) var(--ui-ease-default),
+      box-shadow var(--ui-duration-base) var(--ui-ease-default);
+
+    &:hover {
+      color: var(--_item-color-hover);
+    }
+
+    &--active {
+      color: var(--_item-color-active);
+
+      box-shadow: inset 0 calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 var(--_item-color-active);
+    }
+
+    &--disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  // Pills variant - background instead of underline
+  .nav--pills {
+    .nav__list {
+      box-shadow: none;
+    }
+
+    .nav__item {
+      border-radius: var(--_item-radius);
+      box-shadow: none;
+
+      &:hover {
+        background: var(--_item-bg-hover);
+      }
+
+      &--active {
+        color: var(--_item-color-active);
+
+        background: var(--_item-bg-active);
+      }
+    }
+  }
+
+  // Vertical orientation
+  .nav--vertical {
+    .nav__list {
+      flex-direction: column;
+      align-items: stretch;
+
+      block-size: auto;
+
+      box-shadow: inset calc(var(--ui-border-width-sm, #{t.$border-width-sm}) * -1) 0 0 var(--_border-color);
+    }
+
+    .nav__item {
+      box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 transparent;
+
+      &--active {
+        box-shadow: inset calc(var(--ui-border-width-md, #{t.$border-width-md}) * -1) 0 0 var(--_item-color-active);
+      }
+    }
+  }
+
+  // Vertical + pills
+  .nav--vertical.nav--pills {
+    .nav__list {
+      box-shadow: none;
+    }
+
+    .nav__item {
+      box-shadow: none;
+    }
+  }
+}

package/src/04-components/navigation/nav/nav.api.json

@@ -0,0 +1,55 @@
+{
+  "name": "nav",
+  "element": "nav",
+  "modifiers": {
+    "pills": {
+      "type": "boolean"
+    },
+    "vertical": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "list": {},
+    "item": {
+      "modifiers": {
+        "active": {
+          "type": "boolean"
+        },
+        "disabled": {
+          "type": "boolean"
+        }
+      }
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-nav-gap",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-nav-item-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-nav-item-padding-x",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-nav-item-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-nav-item-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-nav-item-color-active",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-nav-border-color",
+      "default": "var(--ui-color-border)"
+    }
+  ]
+}

package/src/04-components/navigation/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/navigation/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/{pagination → navigation/pagination}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Pagination - page navigation
 // Navigation through paginated content