@teseor/css 1.7.0 → 1.8.0

package/src/{03-layout/stack/stack.docs.json → layout/column/column.docs.json}

@@ -1,9 +1,9 @@
 {
-  "id": "stack",
+  "id": "column",
   "type": "primitive",
-  "title": "Stack",
+  "title": "Column",
   "description": "Vertical layout with consistent gap.",
-  "api": "stack.api.json",
+  "api": "column.api.json",
   "sections": [
     {
       "title": "Basic",
@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--sm",
+              "class": "ui-column ui-column--sm",
               "children": [
                 {
                   "tag": "div",
@@ -51,7 +51,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--xs",
+              "class": "ui-column ui-column--xs",
               "children": [
                 {
                   "tag": "div",
@@ -77,7 +77,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--md",
+              "class": "ui-column ui-column--md",
               "children": [
                 {
                   "tag": "div",
@@ -103,7 +103,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack ui-stack--lg",
+              "class": "ui-column ui-column--lg",
               "children": [
                 {
                   "tag": "div",

package/src/layout/column/column.visual.spec.ts

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

package/src/layout/column/index.scss

@@ -0,0 +1,13 @@
+@layer primitives {
+  .column {
+    display: flex;
+    flex-direction: column;
+    gap: var(--column-gap, var(--ui-space-2));
+  }
+
+  .column--xs { --column-gap: var(--ui-space-1); }
+  .column--sm { --column-gap: var(--ui-space-2); }
+  .column--md { --column-gap: var(--ui-space-4); }
+  .column--lg { --column-gap: var(--ui-space-6); }
+  .column--xl { --column-gap: var(--ui-space-8); }
+}

package/src/layout/container/index.scss

@@ -0,0 +1,17 @@
+@layer primitives {
+  .container {
+    max-inline-size: var(--container-width, calc(var(--ui-unit) * 120));
+    padding-inline: var(--ui-space-4);
+  }
+
+  .container--center {
+    margin-inline: auto;
+  }
+
+  // Size modifiers
+  .container--sm { --container-width: calc(var(--ui-unit) * 80); }
+  .container--md { --container-width: calc(var(--ui-unit) * 100); }
+  .container--lg { --container-width: calc(var(--ui-unit) * 120); }
+  .container--xl { --container-width: calc(var(--ui-unit) * 160); }
+  .container--full { max-inline-size: none; }
+}

package/src/{03-layout → layout}/content/index.scss

@@ -14,7 +14,7 @@
 
   // Prose-friendly: narrower max-width for readability
   .content--prose {
-    max-inline-size: calc(var(--unit) * 80);
+    max-inline-size: calc(var(--ui-unit) * 80);
   }
 
   // Flush: no padding, just gap

package/src/layout/grid/grid.visual.spec.ts

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

package/src/{03-layout → layout}/index.scss

@@ -2,16 +2,15 @@
 @forward './aspect-ratio';
 @forward './box';
 @forward './center';
-@forward './cluster';
+@forward './column';
 @forward './container';
 @forward './content';
-@forward './flex';
 @forward './footer';
 @forward './grid';
 @forward './main';
 @forward './nav-rail';
 @forward './page-header';
+@forward './row';
 @forward './sidebar';
 @forward './sidebar-nav';
-@forward './stack';
 @forward './topbar';

package/src/{03-layout → layout}/main/index.scss

@@ -1,16 +1,16 @@
 @layer primitives {
   .main {
     padding-block-start: var(--topbar-height, 0);
-    margin-inline-start: var(--sidebar-width, calc(var(--unit) * 30));
+    margin-inline-start: var(--sidebar-width, calc(var(--ui-unit) * 30));
   }
 
-  /* When sidebar is on the end */
+  // When sidebar is on the end
   .main--sidebar-end {
     margin-inline-start: 0;
-    margin-inline-end: var(--sidebar-width, calc(var(--unit) * 30));
+    margin-inline-end: var(--sidebar-width, calc(var(--ui-unit) * 30));
   }
 
-  /* No sidebar */
+  // No sidebar
   .main--full {
     margin-inline-start: 0;
     margin-inline-end: 0;

package/src/layout/row/index.scss

@@ -0,0 +1,18 @@
+@layer primitives {
+  .row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--row-gap, var(--ui-space-2));
+  }
+
+  .row--xs { --row-gap: var(--ui-space-1); }
+  .row--sm { --row-gap: var(--ui-space-2); }
+  .row--md { --row-gap: var(--ui-space-4); }
+  .row--lg { --row-gap: var(--ui-space-6); }
+
+  .row--start { justify-content: flex-start; }
+  .row--center { justify-content: center; }
+  .row--end { justify-content: flex-end; }
+  .row--between { justify-content: space-between; }
+}

package/src/{03-layout/cluster/cluster.api.json → layout/row/row.api.json}

@@ -1,5 +1,5 @@
 {
-  "name": "cluster",
+  "name": "row",
   "element": "div",
   "modifiers": {
     "size": {

package/src/{03-layout/cluster/cluster.docs.json → layout/row/row.docs.json}

@@ -1,9 +1,9 @@
 {
-  "id": "cluster",
+  "id": "row",
   "type": "primitive",
-  "title": "Cluster",
+  "title": "Row",
   "description": "Horizontal layout with wrapping.",
-  "api": "cluster.api.json",
+  "api": "row.api.json",
   "sections": [
     {
       "title": "Basic",
@@ -12,7 +12,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--md",
+              "class": "ui-row ui-row--md",
               "children": [
                 {
                   "tag": "div",
@@ -59,7 +59,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--xs",
+              "class": "ui-row ui-row--xs",
               "children": [
                 {
                   "tag": "div",
@@ -93,7 +93,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--lg",
+              "class": "ui-row ui-row--lg",
               "children": [
                 {
                   "tag": "div",

package/src/{03-layout/cluster/cluster.visual.spec.ts → layout/row/row.visual.spec.ts}

@@ -2,14 +2,14 @@ import { resolve } from 'node:path';
 import { expect, test } from '@playwright/test';
 import { saveForLostPixel, setupVisualTestFromDocs } from '../../testing';
 
-const DOCS_PATH = resolve(__dirname, 'cluster.docs.json');
+const DOCS_PATH = resolve(__dirname, 'row.docs.json');
 
-test.describe('cluster visual regression', () => {
+test.describe('row visual regression', () => {
   test('all variations', async ({ page }) => {
     await setupVisualTestFromDocs(page, DOCS_PATH);
-    // skip validateGridRhythm: cluster is a layout primitive that
+    // skip validateGridRhythm: row is a layout primitive that
     // controls gap/alignment, not child height
-    await saveForLostPixel(page, 'cluster');
-    await expect(page.locator('body')).toHaveScreenshot('cluster.visual.png');
+    await saveForLostPixel(page, 'row');
+    await expect(page.locator('body')).toHaveScreenshot('row.visual.png');
   });
 });

package/src/{03-layout → layout}/sidebar/index.scss

@@ -8,19 +8,19 @@
     z-index: var(--ui-z-sticky);
 
     block-size: calc(100vh - var(--topbar-height, 0px));
-    inline-size: var(--sidebar-width, calc(var(--unit) * 30));
+    inline-size: var(--sidebar-width, calc(var(--ui-unit) * 30));
     overflow-y: auto;
 
     background: var(--ui-color-bg-subtle);
     box-shadow: inset calc(var(--ui-border-width-sm) * -1) 0 0 0 var(--ui-color-border);
   }
 
-  /* Width modifiers */
-  .sidebar--sm { --sidebar-width: calc(var(--unit) * 24); }
-  .sidebar--md { --sidebar-width: calc(var(--unit) * 30); }
-  .sidebar--lg { --sidebar-width: calc(var(--unit) * 40); }
+  // Width modifiers
+  .sidebar--sm { --sidebar-width: calc(var(--ui-unit) * 24); }
+  .sidebar--md { --sidebar-width: calc(var(--ui-unit) * 30); }
+  .sidebar--lg { --sidebar-width: calc(var(--ui-unit) * 40); }
 
-  /* Position modifier - sidebar on end (right in LTR) */
+  // Position modifier - sidebar on end (right in LTR)
   .sidebar--end {
     inset-inline-start: auto;
     inset-inline-end: 0;

package/src/{03-layout → layout}/sidebar/sidebar.docs.json

@@ -19,11 +19,11 @@
       "description": "Three width options via size modifiers.",
       "examples": [
         {
-          "layout": "stack",
+          "layout": "column",
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "children": [
                 { "tag": "code", "text": "--sm" },
                 { "tag": "span", "text": "192px (24 units)" }
@@ -31,7 +31,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "children": [
                 { "tag": "code", "text": "--md" },
                 { "tag": "span", "text": "240px (30 units, default)" }
@@ -39,7 +39,7 @@
             },
             {
               "tag": "div",
-              "class": "ui-cluster",
+              "class": "ui-row",
               "children": [
                 { "tag": "code", "text": "--lg" },
                 { "tag": "span", "text": "320px (40 units)" }

package/src/{03-layout → layout}/sidebar-nav/index.scss

@@ -83,9 +83,15 @@
     list-style: none;
   }
 
-  // Subgroup label (nested section)
+  // Collapsible subgroup (details/summary)
+  .sidebar-nav__subgroup {
+    margin: 0;
+  }
+
+  // Subgroup label (summary element or span)
   .sidebar-nav__subgroup-label {
     display: block;
+    list-style: none;
 
     padding: var(--ui-space-1) var(--ui-space-2);
     margin: 0;
@@ -94,6 +100,13 @@
     font-size: var(--ui-size-xs);
     font-weight: var(--ui-weight-medium);
     color: var(--ui-color-text-muted);
+
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .sidebar-nav__subgroup-label::-webkit-details-marker {
+    display: none;
   }
 
   // Nav item (link wrapper)
@@ -155,7 +168,7 @@
 
   // Disabled state
   .sidebar-nav__item--disabled {
-    opacity: 0.5;
+    opacity: var(--ui-opacity-disabled, 0.5);
     cursor: not-allowed;
     pointer-events: none;
   }