@teseor/css 1.0.0

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

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

@@ -0,0 +1,111 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Disclosure - expandable/collapsible content section
+// Uses native details/summary for no-JS accessibility
+
+@layer components.tokens {
+  .disclosure {
+    --_border-color: var(--ui-disclosure-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --_border-width: var(--ui-disclosure-border-width, 1px);
+    --_radius: var(--ui-disclosure-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    --_trigger-height: var(--ui-disclosure-trigger-height, var(--ui-row-3, calc(#{t.$row} * 3)));
+    --_padding-x: var(--ui-disclosure-padding-x, calc(#{t.$unit} * 2));
+    --_padding-y: var(--ui-disclosure-padding-y, calc(#{t.$unit} * 2));
+  }
+}
+
+@layer components.styles {
+  .disclosure {
+    box-sizing: border-box;
+
+    border-radius: var(--_radius);
+    outline: var(--_border-width) solid var(--_border-color);
+    outline-offset: calc(var(--_border-width) * -1);
+  }
+
+  // When closed, set explicit height for grid rhythm
+  .disclosure:not([open]) {
+    block-size: var(--_trigger-height);
+  }
+
+  .disclosure__trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(#{t.$unit} * 2);
+
+    block-size: var(--_trigger-height);
+    inline-size: 100%;
+    padding-inline: var(--_padding-x);
+
+    font-weight: var(--ui-weight-medium, 500);
+    line-height: 1;
+    text-align: start;
+
+    cursor: pointer;
+    list-style: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+
+    &::marker {
+      display: none;
+    }
+  }
+
+  // Trigger hover state
+  .disclosure__trigger:hover {
+    background: var(--ui-color-bg-subtle, rgb(0 0 0 / 0.02));
+  }
+
+  // Icon that rotates when open
+  .disclosure__icon {
+    flex-shrink: 0;
+
+    transition: transform var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+  }
+
+  .disclosure[open] .disclosure__icon {
+    transform: rotate(180deg);
+  }
+
+  // Content panel
+  .disclosure__content {
+    padding: 0 var(--_padding-x) var(--_padding-y);
+  }
+
+  // Animation for content
+  .disclosure--animate .disclosure__content {
+    animation: disclosure-open var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+  }
+
+  @keyframes disclosure-open {
+    from {
+      opacity: 0;
+      transform: translateY(calc(#{t.$unit} * -1));
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  // Borderless variant
+  .disclosure--borderless {
+    --_border-width: 0;
+
+    border: none;
+    border-radius: 0;
+  }
+
+  // Flush variant (no horizontal padding)
+  .disclosure--flush .disclosure__trigger {
+    padding-inline: 0;
+  }
+
+  .disclosure--flush .disclosure__content {
+    padding-inline: 0;
+  }
+}

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

@@ -0,0 +1,30 @@
+{
+  "name": "divider",
+  "element": "div",
+  "modifiers": {
+    "vertical": {
+      "type": "boolean"
+    },
+    "dashed": {
+      "type": "boolean"
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-divider-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-divider-line-size",
+      "default": "1px"
+    },
+    {
+      "name": "--ui-divider-height",
+      "default": "#{t.$unit}"
+    },
+    {
+      "name": "--ui-divider-gap",
+      "default": "calc(#{t.$unit} * 2"
+    }
+  ]
+}

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

@@ -0,0 +1,68 @@
+{
+  "id": "divider",
+  "type": "component",
+  "title": "Divider",
+  "description": "Visual separator between content sections. Supports horizontal/vertical orientation and optional text label.",
+  "api": "./divider.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<div class=\"ui-divider\" role=\"separator\"></div>",
+          "code": "<div class=\"ui-divider\" role=\"separator\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Label",
+      "examples": [
+        {
+          "html": "<div class=\"ui-divider\" role=\"separator\">OR</div>",
+          "code": "<div class=\"ui-divider\" role=\"separator\">OR</div>"
+        }
+      ]
+    },
+    {
+      "title": "Label Alignment",
+      "examples": [
+        {
+          "html": "<div class=\"ui-divider ui-divider--start\" role=\"separator\">Start</div><div class=\"ui-divider\" role=\"separator\">Center</div><div class=\"ui-divider ui-divider--end\" role=\"separator\">End</div>",
+          "code": "<div class=\"ui-divider ui-divider--start\">Start</div>\n<div class=\"ui-divider\">Center</div>\n<div class=\"ui-divider ui-divider--end\">End</div>"
+        }
+      ]
+    },
+    {
+      "title": "Dashed",
+      "examples": [
+        {
+          "html": "<div class=\"ui-divider ui-divider--dashed\" role=\"separator\"></div>",
+          "code": "<div class=\"ui-divider ui-divider--dashed\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; height: 64px; align-items: center;\"><span>Left</span><div class=\"ui-divider ui-divider--vertical\" role=\"separator\"></div><span>Right</span></div>",
+          "code": "<div style=\"display: flex;\">\n  <span>Left</span>\n  <div class=\"ui-divider ui-divider--vertical\"></div>\n  <span>Right</span>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-divider-color",
+      "default": "var(--ui-color-border)",
+      "description": "Line color"
+    },
+    { "token": "--ui-divider-line-size", "default": "1px", "description": "Line thickness" },
+    { "token": "--ui-divider-height", "default": "var(--unit)", "description": "Container height" },
+    {
+      "token": "--ui-divider-gap",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Vertical margin"
+    }
+  ]
+}

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

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

@@ -0,0 +1,115 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component divider
+// @element div
+
+@layer components.tokens {
+  .divider {
+    --_color: var(--ui-divider-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    --_line-size: var(--ui-divider-line-size, 1px);
+    --_height: var(--ui-divider-height, #{t.$unit});
+    --_gap: var(--ui-divider-gap, calc(#{t.$unit} * 2));
+  }
+}
+
+@layer components.styles {
+  .divider {
+    display: flex;
+    align-items: center;
+
+    block-size: var(--_height);
+    margin: var(--_gap) 0;
+
+    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    line-height: 1;
+    color: var(--ui-color-text-muted);
+  }
+
+  // Horizontal line (default)
+  .divider::before,
+  .divider::after {
+
+    content: "";
+    flex: 1;
+
+    block-size: var(--_line-size);
+
+    background: var(--_color);
+  }
+
+  // With text label - taller to accommodate text
+  .divider:not(:empty) {
+    --_height: var(--ui-row-1, #{t.$row});
+  }
+
+  .divider:not(:empty)::before {
+    margin-inline-end: calc(#{t.$unit} * 2);
+  }
+
+  .divider:not(:empty)::after {
+    margin-inline-start: calc(#{t.$unit} * 2);
+  }
+
+  // Without text - single line
+  .divider:empty::after {
+    display: none;
+  }
+
+  // @modifier boolean vertical
+  .divider--vertical {
+    flex-direction: column;
+    align-self: stretch;
+
+    margin: 0 var(--_gap);
+
+    writing-mode: vertical-rl;
+  }
+
+  .divider--vertical::before,
+  .divider--vertical::after {
+    flex: 1;
+
+    block-size: auto;
+    inline-size: var(--_size);
+  }
+
+  // @modifier align
+  .divider--start::before {
+    display: none;
+  }
+
+  .divider--start:not(:empty)::after {
+    margin-inline-start: calc(#{t.$unit} * 2);
+  }
+
+  .divider--end::after {
+    display: none;
+  }
+
+  .divider--end:not(:empty)::before {
+    margin-inline-end: calc(#{t.$unit} * 2);
+  }
+
+  // @modifier boolean dashed
+  .divider--dashed::before,
+  .divider--dashed::after {
+    background: repeating-linear-gradient(
+      90deg,
+      var(--_color) 0,
+      var(--_color) calc(#{t.$unit} / 2),
+      transparent calc(#{t.$unit} / 2),
+      transparent #{t.$unit}
+    );
+  }
+
+  .divider--vertical.divider--dashed::before,
+  .divider--vertical.divider--dashed::after {
+    background: repeating-linear-gradient(
+      180deg,
+      var(--_color) 0,
+      var(--_color) calc(#{t.$unit} / 2),
+      transparent calc(#{t.$unit} / 2),
+      transparent #{t.$unit}
+    );
+  }
+}

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

@@ -0,0 +1,39 @@
+{
+  "name": "drawer",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-drawer-size",
+      "default": "calc(#{t.$unit} * 40"
+    },
+    {
+      "name": "--ui-drawer-max-size",
+      "default": "90%"
+    },
+    {
+      "name": "--ui-drawer-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-drawer-shadow",
+      "default": "var(--shadow-lg)"
+    },
+    {
+      "name": "--ui-drawer-header-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-drawer-body-padding",
+      "default": "calc(#{t.$unit} * 3"
+    },
+    {
+      "name": "--ui-drawer-footer-padding",
+      "default": "calc(#{t.$unit} * 2"
+    },
+    {
+      "name": "--ui-drawer-border-color",
+      "default": "var(--ui-color-border)"
+    }
+  ]
+}

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

@@ -0,0 +1,78 @@
+{
+  "api": "./drawer.api.json",
+  "sections": [
+    {
+      "title": "Default (End)",
+      "description": "Slides in from the end (right in LTR)",
+      "examples": [
+        {
+          "html": "<div style=\"position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer-overlay\" style=\"position:absolute\"></div><div class=\"ui-drawer ui-drawer--end\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><div><h2 class=\"ui-drawer__title\">Drawer Title</h2><p class=\"ui-drawer__description\">Optional description text</p></div><button class=\"ui-drawer__close ui-button ui-button--ghost ui-button--icon\">X</button></div><div class=\"ui-drawer__body\"><p>Drawer content goes here.</p></div><div class=\"ui-drawer__footer\"><button class=\"ui-button ui-button--secondary\">Cancel</button><button class=\"ui-button\">Save</button></div></div></div>"
+        }
+      ]
+    },
+    {
+      "title": "Positions",
+      "examples": [
+        {
+          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--start ui-drawer--sm\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Start</h2></div><div class=\"ui-drawer__body\"><p>From start edge</p></div></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--top\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Top</h2></div><div class=\"ui-drawer__body\"><p>From top edge</p></div></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div style=\"position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--bottom\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__header\"><h2 class=\"ui-drawer__title\">Bottom</h2></div><div class=\"ui-drawer__body\"><p>From bottom edge</p></div></div></div>",
+          "layout": "stack"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end ui-drawer--sm\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Small drawer</p></div></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Default drawer</p></div></div></div>",
+          "layout": "stack"
+        },
+        {
+          "html": "<div style=\"position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)\"><div class=\"ui-drawer ui-drawer--end ui-drawer--lg\" style=\"position:absolute\" data-state=\"open\"><div class=\"ui-drawer__body\"><p>Large drawer</p></div></div></div>",
+          "layout": "stack"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-drawer-size",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Default width/height"
+    },
+    { "token": "--ui-drawer-max-size", "default": "90%", "description": "Maximum size" },
+    {
+      "token": "--ui-drawer-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    { "token": "--ui-drawer-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
+    {
+      "token": "--ui-drawer-header-padding",
+      "default": "16px 24px",
+      "description": "Header padding"
+    },
+    { "token": "--ui-drawer-body-padding", "default": "24px", "description": "Body padding" },
+    {
+      "token": "--ui-drawer-footer-padding",
+      "default": "16px 24px",
+      "description": "Footer padding"
+    },
+    {
+      "token": "--ui-drawer-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    }
+  ]
+}

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