@teseor/css 1.1.0 → 1.2.1

package/src/04-components/{accordion → disclosure/accordion}/accordion.api.json

@@ -1,7 +1,11 @@
 {
   "name": "accordion",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "separated": {
+      "type": "boolean"
+    }
+  },
   "cssVars": [
     {
       "name": "--ui-accordion-border-color",

package/src/04-components/{accordion → disclosure/accordion}/accordion.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, 'accordion.docs.json');
 

package/src/04-components/{accordion → disclosure/accordion}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Accordion - grouped expandable sections
 // Container for multiple disclosure items

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

@@ -1,7 +1,19 @@
 {
   "name": "disclosure",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "borderless": {
+      "type": "boolean"
+    },
+    "animate": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "trigger": {},
+    "icon": {},
+    "content": {}
+  },
   "cssVars": [
     {
       "name": "--ui-disclosure-border-color",

package/src/04-components/disclosure/{disclosure.visual.spec.ts → disclosure/disclosure.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, 'disclosure.docs.json');
 

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

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Disclosure - expandable/collapsible content section
 // Uses native details/summary for no-JS accessibility

package/src/04-components/{alert → feedback/alert}/alert.api.json

@@ -6,6 +6,12 @@
       "values": ["info", "success", "warning", "danger"]
     }
   },
+  "elements": {
+    "content": {},
+    "title": {},
+    "description": {},
+    "icon": {}
+  },
   "cssVars": [
     {
       "name": "--ui-alert-padding",

package/src/04-components/{alert → feedback/alert}/alert.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, 'alert.docs.json');
 

package/src/04-components/{alert → feedback/alert}/index.scss

@@ -1,43 +1,38 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // @component alert
 // @element div
 
 @layer components.tokens {
   .alert {
+    // Single accent color - variants override, bg/border derived via color-mix
+    --_accent: var(--ui-alert-accent, var(--ui-color-border, #{t.$color-border}));
+
     --_padding: var(--ui-alert-padding, var(--ui-space-2, #{t.$space-2}));
     --_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, #{t.$border-width-sm}));
     --_gap: var(--ui-alert-gap, var(--ui-space-1, #{t.$space-1}));
     --_radius: var(--ui-alert-radius, var(--ui-radius-md, #{t.$radius-md}));
-    --_bg: var(--ui-alert-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-    --_border-color: var(--ui-alert-border-color, var(--ui-color-border, #{t.$color-border}));
+    --_bg: color-mix(in oklch, var(--_accent) 8%, white);
+    --_border-color: var(--_accent);
     --_color: var(--ui-alert-color, var(--ui-color-text, #{t.$color-text}));
-    --_icon-color: var(--ui-alert-icon-color, currentcolor);
+    --_icon-color: var(--_accent);
   }
 
   // @modifier variant
   .alert--info {
-    --_bg: var(--ui-alert-info-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-    --_border-color: var(--ui-alert-info-border, var(--ui-color-primary, #{t.$color-primary}));
-    --_icon-color: var(--ui-alert-info-icon, var(--ui-color-primary, #{t.$color-primary}));
+    --_accent: var(--ui-color-primary, #{t.$color-primary});
   }
 
   .alert--success {
-    --_bg: var(--ui-alert-success-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-    --_border-color: var(--ui-alert-success-border, var(--ui-color-success, #{t.$color-success}));
-    --_icon-color: var(--ui-alert-success-icon, var(--ui-color-success, #{t.$color-success}));
+    --_accent: var(--ui-color-success, #{t.$color-success});
   }
 
   .alert--warning {
-    --_bg: var(--ui-alert-warning-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-    --_border-color: var(--ui-alert-warning-border, var(--ui-color-warning, #{t.$color-warning}));
-    --_icon-color: var(--ui-alert-warning-icon, var(--ui-color-warning, #{t.$color-warning}));
+    --_accent: var(--ui-color-warning, #{t.$color-warning});
   }
 
   .alert--danger {
-    --_bg: var(--ui-alert-danger-bg, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
-    --_border-color: var(--ui-alert-danger-border, var(--ui-color-danger, #{t.$color-danger}));
-    --_icon-color: var(--ui-alert-danger-icon, var(--ui-color-danger, #{t.$color-danger}));
+    --_accent: var(--ui-color-danger, #{t.$color-danger});
   }
 }
 

package/src/04-components/{progress → feedback/progress}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Progress - progress bar indicator
 // Shows completion status of a task

package/src/04-components/{progress → feedback/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/{progress → feedback/progress}/progress.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, 'progress.docs.json');
 

package/src/04-components/{skeleton → feedback/skeleton}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Skeleton - loading placeholder
 // Animated shimmer effect for content loading states

package/src/04-components/{skeleton → feedback/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/{skeleton → feedback/skeleton}/skeleton.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, 'skeleton.docs.json');
 

package/src/04-components/{spinner → feedback/spinner}/index.scss

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

package/src/04-components/{spinner → feedback/spinner}/spinner.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, 'spinner.docs.json');
 

package/src/04-components/{toast → feedback/toast}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Toast - notification messages
 // Appears in viewport corner with auto-dismiss

package/src/04-components/{toast → feedback/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/{toast → feedback/toast}/toast.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, 'toast.docs.json');
 

package/src/04-components/{checkbox → forms/checkbox}/checkbox.api.json

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

package/src/04-components/{checkbox → forms/checkbox}/checkbox.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, 'checkbox.docs.json');
 

package/src/04-components/{checkbox → forms/checkbox}/index.scss

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

package/src/04-components/forms/field/field.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "field",
+  "element": "div",
+  "modifiers": {
+    "horizontal": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "label": {},
+    "control": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-field-gap",
+      "default": "0"
+    }
+  ]
+}

package/src/04-components/{field → forms/field}/field.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, 'field.docs.json');
 

package/src/04-components/{field → forms/field}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Field - form field wrapper
 // Combines label, control, helper text, and error message

package/src/04-components/{form-error → forms/form-error}/form-error.api.json

@@ -2,6 +2,9 @@
   "name": "form-error",
   "element": "div",
   "modifiers": {},
+  "elements": {
+    "icon": {}
+  },
   "cssVars": [
     {
       "name": "--ui-form-error-color",

package/src/04-components/{form-error → forms/form-error}/form-error.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, 'form-error.docs.json');
 

package/src/04-components/{form-error → forms/form-error}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Form Error - validation error message for form fields
 // Displays error text with danger color

package/src/04-components/{form-helper → forms/form-helper}/form-helper.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, 'form-helper.docs.json');
 

package/src/04-components/{form-helper → forms/form-helper}/index.scss

@@ -1,4 +1,4 @@
-@use '../../00-config/tokens/variables' as t;
+@use '../../../00-config/tokens/variables' as t;
 
 // Form Helper - helper text for form fields
 // Displays muted text below form controls

package/src/04-components/{input → forms/input}/index.scss

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

package/src/04-components/{input → forms/input}/input.api.json

@@ -10,8 +10,39 @@
     },
     "state": {
       "values": ["error", "success"]
+    },
+    "block": {
+      "type": "boolean"
     }
   },
+  "relatedComponents": [
+    {
+      "name": "input-group",
+      "modifiers": {
+        "has-prefix": {
+          "type": "boolean"
+        },
+        "has-suffix": {
+          "type": "boolean"
+        }
+      },
+      "elements": {
+        "addon": {
+          "modifiers": {
+            "start": {
+              "type": "boolean"
+            },
+            "end": {
+              "type": "boolean"
+            },
+            "interactive": {
+              "type": "boolean"
+            }
+          }
+        }
+      }
+    }
+  ],
   "cssVars": [
     {
       "name": "--ui-input-height",

package/src/04-components/{input → forms/input}/input.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, 'input.docs.json');
 

package/src/04-components/{label → forms/label}/index.scss

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

package/src/04-components/{label → forms/label}/label.api.json

@@ -6,6 +6,10 @@
       "values": ["lg"]
     }
   },
+  "elements": {
+    "required": {},
+    "optional": {}
+  },
   "cssVars": [
     {
       "name": "--ui-label-font-size",

package/src/04-components/{label → forms/label}/label.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, 'label.docs.json');
 

package/src/04-components/{radio → forms/radio}/index.scss

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

package/src/04-components/{radio → forms/radio}/radio.api.json

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

package/src/04-components/{radio → forms/radio}/radio.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, 'radio.docs.json');
 

package/src/04-components/{select → forms/select}/index.scss

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

package/src/04-components/{select → forms/select}/select.api.json

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

package/src/04-components/{select → forms/select}/select.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, 'select.docs.json');
 

package/src/04-components/{textarea → forms/textarea}/index.scss

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

package/src/04-components/{textarea → forms/textarea}/textarea.api.json

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

package/src/04-components/{textarea → forms/textarea}/textarea.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, 'textarea.docs.json');
 

package/src/04-components/{toggle → forms/toggle}/index.scss

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

package/src/04-components/{toggle → forms/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/{toggle → forms/toggle}/toggle.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, 'toggle.docs.json');