@teseor/css 1.0.0

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

@@ -0,0 +1,63 @@
+{
+  "id": "overlay",
+  "type": "component",
+  "title": "Overlay",
+  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
+  "api": "./overlay.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2);\">Content behind overlay</p></div>",
+          "code": "<div class=\"ui-overlay\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Light Variant",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-text);\"><div class=\"ui-overlay ui-overlay--light\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Dark content behind light overlay</p></div>",
+          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Blur Variant",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));\"><div class=\"ui-overlay ui-overlay--blur\" style=\"position: absolute;\"></div><p style=\"position: relative; padding: var(--ui-space-2); color: white;\">Blurred backdrop</p></div>",
+          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Animation",
+      "examples": [
+        {
+          "html": "<div style=\"position: relative; height: 120px; background: var(--ui-color-bg-subtle);\"><div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\" style=\"position: absolute;\"></div></div>",
+          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-overlay-bg",
+      "default": "rgb(0 0 0 / 0.5)",
+      "description": "Default backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-light",
+      "default": "rgb(255 255 255 / 0.7)",
+      "description": "Light variant backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-blur",
+      "default": "rgb(0 0 0 / 0.3)",
+      "description": "Blur variant backdrop color"
+    },
+    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
+  ]
+}

package/src/04-components/overlay/overlay.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, 'overlay.docs.json');
+
+test.describe('overlay visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'overlay');
+    await saveForLostPixel(page, 'overlay');
+    await expect(page.locator('body')).toHaveScreenshot('overlay.visual.png');
+  });
+});

package/src/04-components/pagination/index.scss

@@ -0,0 +1,114 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Pagination - page navigation
+// Navigation through paginated content
+
+@layer components.tokens {
+  .pagination {
+    --_gap: var(--ui-pagination-gap, calc(#{t.$unit} * 0.5));
+    --_item-size: var(--ui-pagination-item-size, calc(#{t.$unit} * 4));
+    --_item-radius: var(--ui-pagination-item-radius, var(--ui-radius-sm, #{t.$radius-sm}));
+    --_item-bg: var(--ui-pagination-item-bg, transparent);
+    --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
+    --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
+    --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, #{t.$color-text}));
+    --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
+  }
+}
+
+@layer components.styles {
+  .pagination {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+  }
+
+  .pagination__list {
+    display: flex;
+    align-items: center;
+    gap: var(--_gap);
+
+    padding: 0;
+    margin: 0;
+
+    list-style: none;
+  }
+
+  .pagination__item {
+    display: flex;
+  }
+
+  .pagination__link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_item-size);
+    min-inline-size: var(--_item-size);
+    padding-inline: calc(#{t.$unit} * 1);
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    text-decoration: none;
+    color: var(--_item-color);
+
+    background: var(--_item-bg);
+    border-radius: var(--_item-radius);
+
+    transition:
+      background var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease),
+      color var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+
+    &:hover {
+      background: var(--_item-bg-hover);
+    }
+  }
+
+  // Current page
+  .pagination__link[aria-current="page"],
+  .pagination__link--active {
+    color: var(--_item-color-active);
+
+    background: var(--_item-bg-active);
+    pointer-events: none;
+  }
+
+  // Disabled state
+  .pagination__link[aria-disabled="true"],
+  .pagination__link--disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  // Previous/Next buttons
+  .pagination__prev,
+  .pagination__next {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(#{t.$unit} * 0.5);
+
+    padding-inline: calc(#{t.$unit} * 1.5);
+  }
+
+  // Ellipsis
+  .pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    block-size: var(--_item-size);
+    min-inline-size: var(--_item-size);
+
+    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+  }
+
+  // Size variants
+  .pagination--sm {
+    --_item-size: calc(#{t.$unit} * 3);
+    --_gap: calc(#{t.$unit} * 0.25);
+  }
+
+  .pagination--lg {
+    --_item-size: calc(#{t.$unit} * 5);
+    --_gap: calc(#{t.$unit} * 0.75);
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "name": "pagination",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-pagination-gap",
+      "default": "calc(#{t.$unit} * 0.5"
+    },
+    {
+      "name": "--ui-pagination-item-size",
+      "default": "calc(#{t.$unit} * 4"
+    },
+    {
+      "name": "--ui-pagination-item-radius",
+      "default": "var(--ui-radius-sm)"
+    },
+    {
+      "name": "--ui-pagination-item-bg",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-pagination-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-pagination-item-bg-active",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-pagination-item-color",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-pagination-item-color-active",
+      "default": "var(--ui-color-text-inverse)"
+    }
+  ]
+}

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

@@ -0,0 +1,88 @@
+{
+  "api": "./pagination.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev\" href=\"#\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">4</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">5</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
+        }
+      ]
+    },
+    {
+      "title": "With Ellipsis",
+      "examples": [
+        {
+          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev\" href=\"#\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><span class=\"ui-pagination__ellipsis\">...</span></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">4</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">5</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">6</a></li><li class=\"ui-pagination__item\"><span class=\"ui-pagination__ellipsis\">...</span></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">20</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
+        }
+      ]
+    },
+    {
+      "title": "Disabled States",
+      "examples": [
+        {
+          "html": "<nav class=\"ui-pagination\"><a class=\"ui-pagination__link ui-pagination__prev ui-pagination__link--disabled\" aria-disabled=\"true\">Prev</a><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul><a class=\"ui-pagination__link ui-pagination__next\" href=\"#\">Next</a></nav>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<nav class=\"ui-pagination ui-pagination--sm\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
+          "layout": "stack"
+        },
+        {
+          "html": "<nav class=\"ui-pagination\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
+          "layout": "stack"
+        },
+        {
+          "html": "<nav class=\"ui-pagination ui-pagination--lg\"><ul class=\"ui-pagination__list\"><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">1</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link ui-pagination__link--active\" aria-current=\"page\" href=\"#\">2</a></li><li class=\"ui-pagination__item\"><a class=\"ui-pagination__link\" href=\"#\">3</a></li></ul></nav>",
+          "layout": "stack"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-pagination-gap",
+      "default": "calc(var(--unit) * 0.5)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-pagination-item-size",
+      "default": "calc(var(--unit) * 4)",
+      "description": "Item size"
+    },
+    {
+      "token": "--ui-pagination-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item border radius"
+    },
+    {
+      "token": "--ui-pagination-item-bg",
+      "default": "transparent",
+      "description": "Item background"
+    },
+    {
+      "token": "--ui-pagination-item-bg-hover",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Item hover background"
+    },
+    {
+      "token": "--ui-pagination-item-bg-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Active item background"
+    },
+    {
+      "token": "--ui-pagination-item-color",
+      "default": "var(--ui-color-text)",
+      "description": "Item text color"
+    },
+    {
+      "token": "--ui-pagination-item-color-active",
+      "default": "var(--ui-color-text-inverse)",
+      "description": "Active item text color"
+    }
+  ]
+}

package/src/04-components/pagination/pagination.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, 'pagination.docs.json');
+
+test.describe('pagination visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'pagination');
+    await saveForLostPixel(page, 'pagination');
+    await expect(page.locator('body')).toHaveScreenshot('pagination.visual.png');
+  });
+});

package/src/04-components/popover/index.scss

@@ -0,0 +1,114 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Popover - floating panel for additional content
+// Larger than tooltip, can contain structured content
+
+@layer components.tokens {
+  .popover {
+    --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
+    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    --_shadow: var(--ui-popover-shadow, 0 calc(#{t.$unit} / 2) calc(#{t.$unit} * 2) rgb(0 0 0 / 0.15));
+    --_padding: var(--ui-popover-padding, calc(#{t.$unit} * 2));
+    --_max-width: var(--ui-popover-max-width, calc(#{t.$unit} * 40));
+    --_z: var(--ui-popover-z, var(--ui-z-popover, 500));
+    --_arrow-size: var(--ui-popover-arrow-size, calc(#{t.$unit}));
+  }
+}
+
+@layer components.styles {
+  .popover {
+    position: absolute;
+    z-index: var(--_z);
+
+    max-inline-size: var(--_max-width);
+    padding: var(--_padding);
+
+    line-height: var(--ui-row-1, #{t.$row});
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    box-shadow: var(--_shadow);
+    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+  }
+
+  // Header section
+  .popover__header {
+    padding-block-end: calc(#{t.$unit} * 2);
+    margin-block-end: calc(#{t.$unit} * 2);
+
+    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+  }
+
+  .popover__title {
+    margin: 0;
+
+    font-size: var(--ui-font-size-md, #{t.$font-size-md});
+    font-weight: var(--ui-weight-semibold, 600);
+  }
+
+  // Arrow pointing down (popover above trigger)
+  .popover--top::after {
+
+    content: "";
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-block-start-color: var(--_bg);
+    transform: translateX(-50%);
+  }
+
+  .popover--top::before {
+
+    content: "";
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 50%;
+
+    border: calc(var(--_arrow-size) + 1px) solid transparent;
+    border-block-start-color: var(--_border-color);
+    transform: translateX(-50%);
+  }
+
+  // Arrow pointing up (popover below trigger)
+  .popover--bottom::after {
+
+    content: "";
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+
+    border: var(--_arrow-size) solid transparent;
+    border-block-end-color: var(--_bg);
+    transform: translateX(-50%);
+  }
+
+  .popover--bottom::before {
+
+    content: "";
+    position: absolute;
+    inset-block-end: 100%;
+    inset-inline-start: 50%;
+
+    border: calc(var(--_arrow-size) + 1px) solid transparent;
+    border-block-end-color: var(--_border-color);
+    transform: translateX(-50%);
+  }
+
+  // Animation states
+  .popover--visible {
+    opacity: 1;
+  }
+
+  .popover--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .popover--animate {
+    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "name": "popover",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-popover-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-popover-border-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-popover-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-popover-shadow",
+      "default": "0 calc(#{t.$unit} / 2"
+    },
+    {
+      "name": "--ui-popover-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-popover-max-width",
+      "default": "calc(#{t.$unit} * 40"
+    },
+    {
+      "name": "--ui-popover-z",
+      "default": "var(--ui-z-popover)"
+    },
+    {
+      "name": "--ui-popover-arrow-size",
+      "default": "calc(#{t.$unit}"
+    }
+  ]
+}

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

@@ -0,0 +1,70 @@
+{
+  "id": "popover",
+  "type": "component",
+  "title": "Popover",
+  "description": "Floating panel for additional content. Larger than tooltip, can contain structured content.",
+  "api": "./popover.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><p>Popover content goes here. Can contain multiple paragraphs and other elements.</p></div>",
+          "code": "<div class=\"ui-popover\">\n  <p>Popover content goes here.</p>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Header",
+      "examples": [
+        {
+          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><header class=\"ui-popover__header\"><h3 class=\"ui-popover__title\">Popover Title</h3></header><p>Content with a header section.</p></div>",
+          "code": "<div class=\"ui-popover\">\n  <header class=\"ui-popover__header\">\n    <h3 class=\"ui-popover__title\">Popover Title</h3>\n  </header>\n  <p>Content with a header section.</p>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Arrow",
+      "examples": [
+        {
+          "html": "<div style=\"padding: var(--ui-space-4);\"><div class=\"ui-popover ui-popover--top\" style=\"position: relative;\"><p>Popover with arrow pointing down</p></div></div>",
+          "code": "<div class=\"ui-popover ui-popover--top\">\n  <p>Popover with arrow pointing down</p>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-popover-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-popover-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-popover-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-popover-shadow",
+      "default": "0 4px 16px rgb(0 0 0 / 0.15)",
+      "description": "Box shadow"
+    },
+    {
+      "token": "--ui-popover-padding",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Content padding"
+    },
+    {
+      "token": "--ui-popover-max-width",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Maximum width"
+    },
+    { "token": "--ui-popover-z", "default": "var(--ui-z-popover)", "description": "Z-index layer" },
+    { "token": "--ui-popover-arrow-size", "default": "var(--unit)", "description": "Arrow size" }
+  ]
+}

package/src/04-components/popover/popover.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, 'popover.docs.json');
+
+test.describe('popover visual regression', () => {
+  test('all variations', async ({ page }) => {
+    await setupVisualTestFromDocs(page, DOCS_PATH);
+    await validateGridRhythm(page, 'popover');
+    await saveForLostPixel(page, 'popover');
+    await expect(page.locator('body')).toHaveScreenshot('popover.visual.png');
+  });
+});