@teseor/css 1.4.0 → 1.5.0

package/src/04-components/data-display/image/image.api.json

@@ -0,0 +1,76 @@
+{
+  "name": "image",
+  "element": "figure",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "md", "lg", "xl", "full"]
+    },
+    "rounded": {
+      "type": "boolean"
+    },
+    "circle": {
+      "type": "boolean"
+    },
+    "object-fit": {
+      "values": ["cover", "contain"]
+    }
+  },
+  "elements": {
+    "img": {},
+    "caption": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-image-size",
+      "default": "auto"
+    },
+    {
+      "name": "--ui-image-size-sm",
+      "default": "calc(var(--unit) * 12)"
+    },
+    {
+      "name": "--ui-image-size-md",
+      "default": "calc(var(--unit) * 24)"
+    },
+    {
+      "name": "--ui-image-size-lg",
+      "default": "calc(var(--unit) * 40)"
+    },
+    {
+      "name": "--ui-image-size-xl",
+      "default": "calc(var(--unit) * 60)"
+    },
+    {
+      "name": "--ui-image-bg",
+      "default": "var(--ui-color-bg-muted)"
+    },
+    {
+      "name": "--ui-image-radius",
+      "default": "0"
+    },
+    {
+      "name": "--ui-image-radius-rounded",
+      "default": "var(--ui-radius-lg)"
+    },
+    {
+      "name": "--ui-image-radius-circle",
+      "default": "50%"
+    },
+    {
+      "name": "--ui-image-object-fit",
+      "default": "cover"
+    },
+    {
+      "name": "--ui-image-caption-color",
+      "default": "var(--ui-color-text-muted)"
+    },
+    {
+      "name": "--ui-image-caption-font-size",
+      "default": "var(--ui-font-size-sm)"
+    },
+    {
+      "name": "--ui-image-caption-spacing",
+      "default": "var(--ui-space-1)"
+    }
+  ]
+}

package/src/04-components/data-display/image/image.docs.json

@@ -0,0 +1,337 @@
+{
+  "id": "image",
+  "type": "component",
+  "title": "Image",
+  "description": "Responsive image with fallback placeholder, optional caption, and shape modifiers.",
+  "api": "./image.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='160'%3E%3Crect fill='%23b0bec5' width='192' height='160'/%3E%3C/svg%3E",
+                    "alt": "Placeholder"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%2390a4ae' width='96' height='96'/%3E%3C/svg%3E",
+                    "alt": "Small"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%2378909c' width='192' height='192'/%3E%3C/svg%3E",
+                    "alt": "Medium"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--lg",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Crect fill='%23607d8b' width='320' height='320'/%3E%3C/svg%3E",
+                    "alt": "Large"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--sm\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Small\">\n</figure>\n<figure class=\"ui-image ui-image--md\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Medium\">\n</figure>\n<figure class=\"ui-image ui-image--lg\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Large\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Rounded",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%234db6ac' width='192' height='140'/%3E%3C/svg%3E",
+                    "alt": "Rounded"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--rounded\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Rounded\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Circle",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Crect fill='%23ce93d8' width='96' height='96'/%3E%3C/svg%3E",
+                    "alt": "Circle small"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192'%3E%3Crect fill='%23ba68c8' width='192' height='192'/%3E%3C/svg%3E",
+                    "alt": "Circle medium"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--circle\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Circle\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Object Fit",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--cover",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2364b5f6' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Ecover%3C/text%3E%3C/svg%3E",
+                    "alt": "Cover fit"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--contain",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='150'%3E%3Crect fill='%2381c784' width='300' height='150'/%3E%3Ctext x='150' y='80' text-anchor='middle' fill='%23fff' font-size='16'%3Econtain%3C/text%3E%3C/svg%3E",
+                    "alt": "Contain fit"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image ui-image--cover\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Cover\">\n</figure>\n<figure class=\"ui-image ui-image--contain\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Contain\">\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Caption",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--md ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='140'%3E%3Crect fill='%23ffb74d' width='192' height='140'/%3E%3C/svg%3E",
+                    "alt": "With caption"
+                  }
+                },
+                {
+                  "tag": "figcaption",
+                  "class": "ui-image__caption",
+                  "text": "An optional image caption"
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"...\" alt=\"Description\">\n  <figcaption class=\"ui-image__caption\">Caption text</figcaption>\n</figure>"
+        }
+      ]
+    },
+    {
+      "title": "Fallback",
+      "examples": [
+        {
+          "layout": "cluster",
+          "items": [
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken image"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--rounded",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken rounded"
+                  }
+                }
+              ]
+            },
+            {
+              "tag": "figure",
+              "class": "ui-image ui-image--sm ui-image--circle",
+              "children": [
+                {
+                  "tag": "img",
+                  "class": "ui-image__img",
+                  "attrs": {
+                    "src": "",
+                    "alt": "Broken circle"
+                  }
+                }
+              ]
+            }
+          ],
+          "code": "<figure class=\"ui-image\">\n  <img class=\"ui-image__img\" src=\"\" alt=\"Fallback shown\">\n</figure>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-image-size",
+      "default": "auto",
+      "description": "Default image dimensions"
+    },
+    {
+      "token": "--ui-image-size-sm",
+      "default": "calc(var(--unit) * 12)",
+      "description": "Small size"
+    },
+    {
+      "token": "--ui-image-size-md",
+      "default": "calc(var(--unit) * 24)",
+      "description": "Medium size"
+    },
+    {
+      "token": "--ui-image-size-lg",
+      "default": "calc(var(--unit) * 40)",
+      "description": "Large size"
+    },
+    {
+      "token": "--ui-image-size-xl",
+      "default": "calc(var(--unit) * 60)",
+      "description": "Extra large size"
+    },
+    {
+      "token": "--ui-image-bg",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Fallback background"
+    },
+    {
+      "token": "--ui-image-radius",
+      "default": "0",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-image-radius-rounded",
+      "default": "var(--ui-radius-lg)",
+      "description": "Rounded variant radius"
+    },
+    {
+      "token": "--ui-image-radius-circle",
+      "default": "50%",
+      "description": "Circle variant radius"
+    },
+    {
+      "token": "--ui-image-object-fit",
+      "default": "cover",
+      "description": "Object-fit strategy"
+    },
+    {
+      "token": "--ui-image-caption-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Caption text color"
+    },
+    {
+      "token": "--ui-image-caption-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Caption font size"
+    },
+    {
+      "token": "--ui-image-caption-spacing",
+      "default": "var(--ui-space-1)",
+      "description": "Space between image and caption"
+    }
+  ]
+}

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

package/src/04-components/data-display/image/index.scss

@@ -0,0 +1,103 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// @component image
+// @element figure
+
+@layer components.tokens {
+  .image {
+    --_size: var(--ui-image-size, auto);
+    --_radius: var(--ui-image-radius, 0);
+    --_object-fit: var(--ui-image-object-fit, cover);
+    --_bg: var(--ui-image-bg, var(--ui-color-bg-muted, #{t.$color-bg-muted}));
+    --_caption-color: var(--ui-image-caption-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    --_caption-font-size: var(--ui-image-caption-font-size, var(--ui-font-size-sm, #{t.$font-size-sm}));
+    --_caption-spacing: var(--ui-image-caption-spacing, var(--ui-space-1));
+  }
+
+  // @modifier size
+  .image--sm {
+    --_size: var(--ui-image-size-sm, calc(#{t.$unit} * 12));
+  }
+
+  .image--md {
+    --_size: var(--ui-image-size-md, calc(#{t.$unit} * 24));
+  }
+
+  .image--lg {
+    --_size: var(--ui-image-size-lg, calc(#{t.$unit} * 40));
+  }
+
+  .image--xl {
+    --_size: var(--ui-image-size-xl, calc(#{t.$unit} * 60));
+  }
+
+  .image--full {
+    --_size: 100%;
+  }
+
+  // @modifier boolean rounded
+  .image--rounded {
+    --_radius: var(--ui-image-radius-rounded, var(--ui-radius-lg, #{t.$radius-lg}));
+  }
+
+  // @modifier boolean circle
+  .image--circle {
+    --_radius: var(--ui-image-radius-circle, 50%);
+  }
+
+  // @modifier object-fit
+  .image--cover {
+    --_object-fit: cover;
+  }
+
+  .image--contain {
+    --_object-fit: contain;
+  }
+}
+
+@layer components.styles {
+  .image {
+    display: inline-block;
+
+    max-inline-size: 100%;
+    padding: 0;
+    margin: 0;
+  }
+
+  .image__img {
+    display: block;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+    max-inline-size: 100%;
+
+    object-fit: var(--_object-fit);
+
+    background: var(--_bg);
+    border-radius: var(--_radius);
+  }
+
+  // Fallback when image fails to load — :not([src]) or broken src
+  // The background from --_bg shows through as placeholder
+  .image__img:not([src]),
+  .image__img[src=''] {
+    aspect-ratio: 1 / 1;
+
+    // Ensure minimum dimensions for empty state
+    min-block-size: calc(#{t.$unit} * 8);
+    min-inline-size: calc(#{t.$unit} * 8);
+  }
+
+  .image__caption {
+    margin-block-start: var(--_caption-spacing);
+
+    font-size: var(--_caption-font-size);
+    line-height: var(--ui-row-1, #{t.$row-1});
+    color: var(--_caption-color);
+  }
+
+  // Circle needs equal aspect ratio to stay round
+  .image--circle .image__img {
+    aspect-ratio: 1 / 1;
+  }
+}

package/src/04-components/feedback/progress-circle/index.scss

@@ -0,0 +1,92 @@
+@use '../../../00-config/tokens/variables' as t;
+
+// Progress Circle - circular progress indicator
+// Uses SVG circles with stroke-dasharray/dashoffset driven by --ui-progress-circle-value
+
+@layer components.tokens {
+  .progress-circle {
+    --_size: var(--ui-progress-circle-size, calc(var(--unit) * 6));
+    --_stroke-width: var(--ui-progress-circle-stroke-width, 8);
+    --_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary));
+    --_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border));
+    --_value: var(--ui-progress-circle-value, 0);
+    --_circumference: 282.743;
+  }
+
+  // @modifier size
+  .progress-circle--sm {
+    --_size: var(--ui-progress-circle-size-sm, calc(var(--unit) * 4));
+  }
+
+  .progress-circle--lg {
+    --_size: var(--ui-progress-circle-size-lg, calc(var(--unit) * 8));
+  }
+
+  .progress-circle--xl {
+    --_size: var(--ui-progress-circle-size-xl, calc(var(--unit) * 12));
+  }
+
+  // @modifier variant
+  .progress-circle--success {
+    --_fill-color: var(--ui-color-success);
+  }
+
+  .progress-circle--warning {
+    --_fill-color: var(--ui-color-warning);
+  }
+
+  .progress-circle--danger {
+    --_fill-color: var(--ui-color-danger);
+  }
+}
+
+@layer components.styles {
+  .progress-circle {
+    display: inline-block;
+    flex-shrink: 0;
+
+    block-size: var(--_size);
+    inline-size: var(--_size);
+
+    vertical-align: middle;
+    transform: rotate(-90deg);
+  }
+
+  .progress-circle__track {
+    fill: none;
+    stroke: var(--_track-color);
+    stroke-width: var(--_stroke-width);
+  }
+
+  .progress-circle__fill {
+    fill: none;
+    stroke: var(--_fill-color);
+    stroke-width: var(--_stroke-width);
+    stroke-linecap: round;
+    stroke-dasharray: var(--_circumference);
+    stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_value) / 100));
+
+    transition: stroke-dashoffset var(--ui-duration-slow, 300ms) var(--ui-ease-default, ease);
+  }
+
+  // Indeterminate - rotating partial arc
+  .progress-circle--indeterminate {
+    animation: progress-circle-rotate 1.4s linear infinite;
+  }
+
+  .progress-circle--indeterminate .progress-circle__fill {
+    stroke-dashoffset: calc(var(--_circumference) * 0.25);
+
+    transition: none;
+  }
+
+  @keyframes progress-circle-rotate {
+    from {
+      transform: rotate(-90deg);
+    }
+
+    to {
+      transform: rotate(270deg);
+    }
+  }
+}

package/src/04-components/feedback/progress-circle/progress-circle.api.json

@@ -0,0 +1,53 @@
+{
+  "name": "progress-circle",
+  "element": "svg",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg", "xl"]
+    },
+    "variant": {
+      "values": ["success", "warning", "danger"]
+    },
+    "indeterminate": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "track": {},
+    "fill": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-progress-circle-size",
+      "default": "calc(var(--unit) * 6)"
+    },
+    {
+      "name": "--ui-progress-circle-stroke-width",
+      "default": "8"
+    },
+    {
+      "name": "--ui-progress-circle-fill-color",
+      "default": "var(--ui-color-primary)"
+    },
+    {
+      "name": "--ui-progress-circle-track-color",
+      "default": "var(--ui-color-border)"
+    },
+    {
+      "name": "--ui-progress-circle-value",
+      "default": "0"
+    },
+    {
+      "name": "--ui-progress-circle-size-sm",
+      "default": "calc(var(--unit) * 4)"
+    },
+    {
+      "name": "--ui-progress-circle-size-lg",
+      "default": "calc(var(--unit) * 8)"
+    },
+    {
+      "name": "--ui-progress-circle-size-xl",
+      "default": "calc(var(--unit) * 12)"
+    }
+  ]
+}