@teseor/css 1.0.0

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

@@ -0,0 +1,85 @@
+{
+  "name": "select",
+  "element": "select",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg"]
+    },
+    "variant": {
+      "values": ["filled", "ghost"]
+    },
+    "state": {
+      "values": ["error", "success"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-select-height",
+      "default": "var(--ui-row-2)"
+    },
+    {
+      "name": "--ui-select-padding-x",
+      "default": "var(--ui-space-1)"
+    },
+    {
+      "name": "--ui-select-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-select-radius",
+      "default": "var(--ui-radius-md)"
+    },
+    {
+      "name": "--ui-select-bg",
+      "default": "var(--ui-color-bg)"
+    },
+    {
+      "name": "--ui-select-border-color",
+      "default": "var(--ui-color-border-strong)"
+    },
+    {
+      "name": "--ui-select-border-color-focus",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-select-text",
+      "default": "var(--ui-color-text)"
+    },
+    {
+      "name": "--ui-select-icon-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-select-height-sm",
+      "default": "calc(#{t.$row} * 1.5"
+    },
+    {
+      "name": "--ui-select-font-size-sm",
+      "default": "var(--ui-font-size-xs)"
+    },
+    {
+      "name": "--ui-select-height-lg",
+      "default": "calc(#{t.$row} * 2.5"
+    },
+    {
+      "name": "--ui-select-padding-x-lg",
+      "default": "var(--ui-space-2)"
+    },
+    {
+      "name": "--ui-select-font-size-lg",
+      "default": "var(--ui-font-size-md)"
+    },
+    {
+      "name": "--ui-select-filled-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-select-error-border",
+      "default": "var(--ui-color-danger)"
+    },
+    {
+      "name": "--ui-select-success-border",
+      "default": "var(--ui-color-success)"
+    }
+  ]
+}

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

@@ -0,0 +1,162 @@
+{
+  "id": "select",
+  "type": "component",
+  "title": "Select",
+  "description": "Native select dropdown with custom styling. Dropdown options use browser default styles.",
+  "api": "./select.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "html": "<select class=\"ui-select\"><option value=\"\" disabled selected>Choose option...</option><option value=\"1\">Option 1</option><option value=\"2\">Option 2</option><option value=\"3\">Option 3</option></select>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--sm",
+              "html": "<option>Small</option><option>Option 2</option>"
+            },
+            {
+              "tag": "select",
+              "class": "ui-select",
+              "html": "<option>Default</option><option>Option 2</option>"
+            },
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--lg",
+              "html": "<option>Large</option><option>Option 2</option>"
+            }
+          ],
+          "code": "<select class=\"ui-select ui-select--sm\">...</select>\n<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--lg\">...</select>"
+        }
+      ]
+    },
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "select", "class": "ui-select", "html": "<option>Outline (default)</option>" },
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--filled",
+              "html": "<option>Filled</option>"
+            },
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--ghost",
+              "html": "<option>Ghost</option>"
+            }
+          ],
+          "code": "<select class=\"ui-select\">...</select>\n<select class=\"ui-select ui-select--filled\">...</select>\n<select class=\"ui-select ui-select--ghost\">...</select>"
+        }
+      ]
+    },
+    {
+      "title": "States",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--error",
+              "html": "<option>Error state</option>"
+            },
+            {
+              "tag": "select",
+              "class": "ui-select ui-select--success",
+              "html": "<option>Success state</option>"
+            },
+            {
+              "tag": "select",
+              "class": "ui-select",
+              "attrs": { "disabled": "" },
+              "html": "<option>Disabled</option>"
+            }
+          ],
+          "code": "<select class=\"ui-select ui-select--error\">...</select>\n<select class=\"ui-select ui-select--success\">...</select>\n<select class=\"ui-select\" disabled>...</select>"
+        }
+      ]
+    },
+    {
+      "title": "Full Width",
+      "examples": [
+        {
+          "html": "<select class=\"ui-select ui-select--block\"><option value=\"\">Full width select...</option><option value=\"1\">Option 1</option></select>"
+        }
+      ]
+    },
+    {
+      "title": "With Option Groups",
+      "examples": [
+        {
+          "html": "<select class=\"ui-select ui-select--block\"><option value=\"\" disabled selected>Choose a fruit...</option><optgroup label=\"Citrus\"><option value=\"orange\">Orange</option><option value=\"lemon\">Lemon</option></optgroup><optgroup label=\"Berries\"><option value=\"strawberry\">Strawberry</option><option value=\"blueberry\">Blueberry</option></optgroup></select>",
+          "code": "<select class=\"ui-select\">\n  <optgroup label=\"Citrus\">\n    <option>Orange</option>\n    <option>Lemon</option>\n  </optgroup>\n  <optgroup label=\"Berries\">\n    <option>Strawberry</option>\n  </optgroup>\n</select>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-select-height",
+      "default": "var(--ui-row-2)",
+      "description": "Default height"
+    },
+    {
+      "token": "--ui-select-height-sm",
+      "default": "calc(var(--row) * 1.5)",
+      "description": "Small height"
+    },
+    {
+      "token": "--ui-select-height-lg",
+      "default": "calc(var(--row) * 2.5)",
+      "description": "Large height"
+    },
+    {
+      "token": "--ui-select-padding-x",
+      "default": "var(--ui-space-1)",
+      "description": "Horizontal padding"
+    },
+    {
+      "token": "--ui-select-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Font size"
+    },
+    {
+      "token": "--ui-select-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-select-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-select-border-color",
+      "default": "var(--ui-color-border-strong)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-select-border-color-focus",
+      "default": "var(--ui-color-primary)",
+      "description": "Focus border color"
+    },
+    { "token": "--ui-select-text", "default": "var(--ui-color-text)", "description": "Text color" },
+    {
+      "token": "--ui-select-icon-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Arrow icon color"
+    }
+  ]
+}

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

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

@@ -0,0 +1,99 @@
+@use '../../00-config/tokens/variables' as t;
+
+// Skeleton - loading placeholder
+// Animated shimmer effect for content loading states
+
+@layer components.tokens {
+  .skeleton {
+    --_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgb(0 0 0 / 0.1)));
+    --_shimmer: var(--ui-skeleton-shimmer, rgb(255 255 255 / 0.5));
+    --_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(#{t.$unit} / 2)));
+  }
+}
+
+@layer components.styles {
+  .skeleton {
+
+    display: block;
+    position: relative;
+
+    overflow: hidden;
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  // Shimmer animation
+  .skeleton::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      var(--_shimmer) 50%,
+      transparent 100%
+    );
+
+    animation: skeleton-shimmer 1.5s infinite;
+    transform: translateX(-100%);
+  }
+
+  @keyframes skeleton-shimmer {
+    100% {
+      transform: translateX(100%);
+    }
+  }
+
+  // Text line variant
+  .skeleton--text {
+    block-size: calc(#{t.$unit} * 2);
+    inline-size: 100%;
+  }
+
+  // Heading variant
+  .skeleton--heading {
+    block-size: calc(#{t.$unit} * 3);
+    inline-size: 60%;
+  }
+
+  // Avatar/circle variant
+  .skeleton--circle {
+    block-size: calc(#{t.$unit} * 5);
+    inline-size: calc(#{t.$unit} * 5);
+
+    border-radius: 50%;
+  }
+
+  // Image/rectangle variant
+  .skeleton--rect {
+    block-size: calc(#{t.$unit} * 20);
+    inline-size: 100%;
+  }
+
+  // No animation variant
+  .skeleton--static::after {
+    animation: none;
+  }
+
+  // Pulse animation alternative
+  .skeleton--pulse {
+    animation: skeleton-pulse 1.5s infinite ease-in-out;
+  }
+
+  .skeleton--pulse::after {
+    display: none;
+  }
+
+  @keyframes skeleton-pulse {
+    0%,
+    100% {
+      opacity: 1;
+    }
+
+    50% {
+      opacity: 0.5;
+    }
+  }
+}

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

@@ -0,0 +1,19 @@
+{
+  "name": "skeleton",
+  "element": "div",
+  "modifiers": {},
+  "cssVars": [
+    {
+      "name": "--ui-skeleton-bg",
+      "default": "var(--ui-color-bg-subtle)"
+    },
+    {
+      "name": "--ui-skeleton-shimmer",
+      "default": "rgb(255 255 255 / 0.5"
+    },
+    {
+      "name": "--ui-skeleton-radius",
+      "default": "var(--ui-radius-sm)"
+    }
+  ]
+}

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

@@ -0,0 +1,62 @@
+{
+  "id": "skeleton",
+  "type": "component",
+  "title": "Skeleton",
+  "description": "Loading placeholder with shimmer animation for content loading states.",
+  "api": "./skeleton.api.json",
+  "sections": [
+    {
+      "title": "Text Lines",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div></div>",
+          "code": "<div class=\"ui-skeleton ui-skeleton--text\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 80%;\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 60%;\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Shapes",
+      "examples": [
+        {
+          "html": "<div style=\"display: flex; gap: var(--ui-space-2); align-items: flex-start;\"><div class=\"ui-skeleton ui-skeleton--circle\"></div><div style=\"flex: 1; display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div></div></div>",
+          "code": "<div class=\"ui-skeleton ui-skeleton--circle\"></div>\n<div class=\"ui-skeleton ui-skeleton--heading\"></div>\n<div class=\"ui-skeleton ui-skeleton--text\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Card Skeleton",
+      "examples": [
+        {
+          "html": "<div class=\"ui-card\" style=\"width: 300px;\"><div class=\"ui-skeleton ui-skeleton--rect\"></div><div style=\"padding: var(--ui-space-2); display: flex; flex-direction: column; gap: var(--ui-space-1);\"><div class=\"ui-skeleton ui-skeleton--heading\"></div><div class=\"ui-skeleton ui-skeleton--text\"></div><div class=\"ui-skeleton ui-skeleton--text\" style=\"width: 70%;\"></div></div></div>",
+          "code": "<div class=\"ui-card\">\n  <div class=\"ui-skeleton ui-skeleton--rect\"></div>\n  <div class=\"ui-skeleton ui-skeleton--heading\"></div>\n  <div class=\"ui-skeleton ui-skeleton--text\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Pulse Animation",
+      "examples": [
+        {
+          "html": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>",
+          "code": "<div class=\"ui-skeleton ui-skeleton--text ui-skeleton--pulse\"></div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-skeleton-bg",
+      "default": "var(--ui-color-bg-subtle)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-skeleton-shimmer",
+      "default": "rgb(255 255 255 / 0.5)",
+      "description": "Shimmer highlight color"
+    },
+    {
+      "token": "--ui-skeleton-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Border radius"
+    }
+  ]
+}

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

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

@@ -0,0 +1,60 @@
+@use '../../00-config/tokens/variables' as t;
+
+// @component spinner
+// @element div
+
+@layer components.tokens {
+  .spinner {
+    --_size: var(--ui-spinner-size, calc(var(--unit) * 4));
+    --_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md));
+    --_color: var(--ui-spinner-color, currentcolor);
+    --_track-color: var(--ui-spinner-track-color, transparent);
+    --_duration: var(--ui-spinner-duration, 750ms);
+  }
+
+  // @modifier size
+  .spinner--xs {
+    --_size: var(--ui-spinner-size-xs, calc(var(--unit) * 2));
+    --_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm));
+  }
+
+  .spinner--sm {
+    --_size: var(--ui-spinner-size-sm, calc(var(--unit) * 3));
+    --_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md));
+  }
+
+  .spinner--lg {
+    --_size: var(--ui-spinner-size-lg, calc(var(--unit) * 5));
+    --_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md));
+  }
+
+  .spinner--xl {
+    --_size: var(--ui-spinner-size-xl, calc(var(--unit) * 6));
+    --_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg));
+  }
+}
+
+@layer components.styles {
+  .spinner {
+    display: inline-block;
+    flex-shrink: 0;
+
+    box-sizing: border-box;
+    block-size: var(--_size);
+    inline-size: var(--_size);
+
+    vertical-align: middle;
+
+    border: var(--_border-width) solid var(--_track-color);
+    border-radius: 50%;
+    border-block-start-color: var(--_color);
+
+    animation: spinner-rotate var(--_duration) linear infinite;
+  }
+
+  @keyframes spinner-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

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

@@ -0,0 +1,63 @@
+{
+  "name": "spinner",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["xs", "sm", "lg", "xl"]
+    }
+  },
+  "cssVars": [
+    {
+      "name": "--ui-spinner-size",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-spinner-border-width",
+      "default": "var(--ui-border-width-md)"
+    },
+    {
+      "name": "--ui-spinner-color",
+      "default": "currentcolor"
+    },
+    {
+      "name": "--ui-spinner-track-color",
+      "default": "transparent"
+    },
+    {
+      "name": "--ui-spinner-duration",
+      "default": "750ms"
+    },
+    {
+      "name": "--ui-spinner-size-xs",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-spinner-border-width-xs",
+      "default": "var(--ui-border-width-sm)"
+    },
+    {
+      "name": "--ui-spinner-size-sm",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-spinner-border-width-sm",
+      "default": "var(--ui-border-width-md)"
+    },
+    {
+      "name": "--ui-spinner-size-lg",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-spinner-border-width-lg",
+      "default": "var(--ui-border-width-md)"
+    },
+    {
+      "name": "--ui-spinner-size-xl",
+      "default": "var(--unit)"
+    },
+    {
+      "name": "--ui-spinner-border-width-xl",
+      "default": "var(--ui-border-width-lg)"
+    }
+  ]
+}

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

@@ -0,0 +1,88 @@
+{
+  "id": "spinner",
+  "type": "component",
+  "title": "Spinner",
+  "description": "Loading indicator with pure CSS animation. Inherits color from parent.",
+  "api": "./spinner.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [{ "tag": "div", "class": "ui-spinner" }],
+          "code": "<div class=\"ui-spinner\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            { "tag": "div", "class": "ui-spinner ui-spinner--xs" },
+            { "tag": "div", "class": "ui-spinner ui-spinner--sm" },
+            { "tag": "div", "class": "ui-spinner" },
+            { "tag": "div", "class": "ui-spinner ui-spinner--lg" },
+            { "tag": "div", "class": "ui-spinner ui-spinner--xl" }
+          ],
+          "code": "<div class=\"ui-spinner ui-spinner--xs\"></div>\n<div class=\"ui-spinner ui-spinner--sm\"></div>\n<div class=\"ui-spinner\"></div>\n<div class=\"ui-spinner ui-spinner--lg\"></div>\n<div class=\"ui-spinner ui-spinner--xl\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Color Inheritance",
+      "examples": [
+        {
+          "html": "<div class=\"ui-cluster\" style=\"gap: var(--ui-space-2);\"><div style=\"color: var(--ui-color-primary);\"><div class=\"ui-spinner\"></div></div><div style=\"color: var(--ui-color-danger);\"><div class=\"ui-spinner\"></div></div><div style=\"color: var(--ui-color-success);\"><div class=\"ui-spinner\"></div></div></div>",
+          "code": "<div style=\"color: var(--ui-color-primary);\">\n  <div class=\"ui-spinner\"></div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "In Button",
+      "examples": [
+        {
+          "html": "<button class=\"ui-button ui-button--primary\" disabled style=\"opacity: 0.7;\"><div class=\"ui-spinner ui-spinner--xs\"></div><span>Loading...</span></button>",
+          "code": "<button class=\"ui-button\" disabled>\n  <div class=\"ui-spinner ui-spinner--xs\"></div>\n  <span>Loading...</span>\n</button>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-spinner-size",
+      "default": "calc(var(--unit) * 4)",
+      "description": "Default size"
+    },
+    {
+      "token": "--ui-spinner-size-xs",
+      "default": "calc(var(--unit) * 2)",
+      "description": "Extra small size"
+    },
+    {
+      "token": "--ui-spinner-size-sm",
+      "default": "calc(var(--unit) * 3)",
+      "description": "Small size"
+    },
+    {
+      "token": "--ui-spinner-size-lg",
+      "default": "calc(var(--unit) * 5)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-spinner-size-xl",
+      "default": "calc(var(--unit) * 6)",
+      "description": "Extra large size"
+    },
+    {
+      "token": "--ui-spinner-border-width",
+      "default": "var(--ui-border-width-md)",
+      "description": "Border width"
+    },
+    { "token": "--ui-spinner-color", "default": "currentcolor", "description": "Spinner color" },
+    { "token": "--ui-spinner-track-color", "default": "transparent", "description": "Track color" },
+    { "token": "--ui-spinner-duration", "default": "750ms", "description": "Animation duration" }
+  ]
+}