npm - @teseor/css - Versions diffs - 1.7.0 → 1.8.0 - Mend

@teseor/css 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (500) hide show

package/src/{04-components → components}/data-display/icon/icon.docs.json RENAMED Viewed

@@ -11,7 +11,14 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\"/></svg>"
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M12 5v14M5 12h14\"/>"
+            }
+          ]
         }
       ]
     },
@@ -21,7 +28,38 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/></svg><svg class=\"ui-icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/></svg></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--gap-2",
+              "children": [
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"/><polyline points=\"9 22 9 12 15 12 15 22\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9\"/><path d=\"M10.3 21a1.94 1.94 0 0 0 3.4 0\"/>"
+                },
+                {
+                  "tag": "svg",
+                  "class": "ui-icon",
+                  "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                  "innerHTML": "<path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"/><circle cx=\"12\" cy=\"7\" r=\"4\"/>"
+                }
+              ]
+            }
+          ]
         }
       ]
     },
@@ -30,74 +68,74 @@
       "description": "Scale icons from extra small to extra large.",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--xs",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "xs" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--sm",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "sm" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--md",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "md" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--lg",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "lg" }
               ]
             },
             {
               "tag": "div",
-              "class": "ui-stack",
+              "class": "ui-column",
               "style": { "align-items": "center", "gap": "var(--ui-space-1)" },
               "children": [
                 {
                   "tag": "svg",
                   "class": "ui-icon ui-icon--xl",
                   "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
-                  "html": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                  "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
                 },
                 { "tag": "small", "text": "xl" }
               ]
@@ -132,7 +170,7 @@
               "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
             }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -156,7 +194,7 @@
               "innerHTML": "<path d=\"M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z\"/>"
             }
           ],
-          "layout": "cluster"
+          "layout": "row"
         }
       ]
     },
@@ -166,7 +204,14 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<svg class=\"ui-icon ui-icon--lg ui-icon--spin\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/></svg>"
+          "items": [
+            {
+              "tag": "svg",
+              "class": "ui-icon ui-icon--lg ui-icon--spin",
+              "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+              "innerHTML": "<path d=\"M21 12a9 9 0 1 1-6.219-8.56\"/>"
+            }
+          ]
         }
       ]
     },
@@ -176,7 +221,50 @@
       "api": "./icon.api.json",
       "examples": [
         {
-          "html": "<div class=\"ui-cluster ui-cluster--gap-2\"><span style=\"color: var(--ui-color-primary)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><span style=\"color: var(--ui-color-success)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span><span style=\"color: var(--ui-color-danger)\"><svg class=\"ui-icon ui-icon--lg\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/></svg></span></div>"
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--gap-2",
+              "children": [
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-primary)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-success)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                },
+                {
+                  "tag": "span",
+                  "attrs": { "style": "color: var(--ui-color-danger)" },
+                  "children": [
+                    {
+                      "tag": "svg",
+                      "class": "ui-icon ui-icon--lg",
+                      "attrs": { "xmlns": "http://www.w3.org/2000/svg", "viewBox": "0 0 24 24" },
+                      "innerHTML": "<circle cx=\"11\" cy=\"11\" r=\"8\"/><path d=\"m21 21-4.3-4.3\"/>"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/{04-components → components}/data-display/icon/index.scss RENAMED Viewed

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 // @component icon
 // @element svg
@@ -63,4 +63,10 @@
       transform: rotate(360deg);
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .icon--spin {
+      animation: none;
+    }
+  }
 }

package/src/{04-components → components}/data-display/image/image.api.json RENAMED Viewed

@@ -26,19 +26,19 @@
     },
     {
       "name": "--ui-image-size-sm",
-      "default": "calc(var(--unit) * 12)"
+      "default": "calc(var(--ui-unit) * 12)"
     },
     {
       "name": "--ui-image-size-md",
-      "default": "calc(var(--unit) * 24)"
+      "default": "calc(var(--ui-unit) * 24)"
     },
     {
       "name": "--ui-image-size-lg",
-      "default": "calc(var(--unit) * 40)"
+      "default": "calc(var(--ui-unit) * 40)"
     },
     {
       "name": "--ui-image-size-xl",
-      "default": "calc(var(--unit) * 60)"
+      "default": "calc(var(--ui-unit) * 60)"
     },
     {
       "name": "--ui-image-bg",

package/src/{04-components → components}/data-display/image/image.docs.json RENAMED Viewed

@@ -33,7 +33,7 @@
       "title": "Sizes",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -110,7 +110,7 @@
       "title": "Circle",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -149,7 +149,7 @@
       "title": "Object Fit",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -217,7 +217,7 @@
       "title": "Fallback",
       "examples": [
         {
-          "layout": "cluster",
+          "layout": "row",
           "items": [
             {
               "tag": "figure",
@@ -275,22 +275,22 @@
     },
     {
       "token": "--ui-image-size-sm",
-      "default": "calc(var(--unit) * 12)",
+      "default": "calc(var(--ui-unit) * 12)",
       "description": "Small size"
     },
     {
       "token": "--ui-image-size-md",
-      "default": "calc(var(--unit) * 24)",
+      "default": "calc(var(--ui-unit) * 24)",
       "description": "Medium size"
     },
     {
       "token": "--ui-image-size-lg",
-      "default": "calc(var(--unit) * 40)",
+      "default": "calc(var(--ui-unit) * 40)",
       "description": "Large size"
     },
     {
       "token": "--ui-image-size-xl",
-      "default": "calc(var(--unit) * 60)",
+      "default": "calc(var(--ui-unit) * 60)",
       "description": "Extra large size"
     },
     {

package/src/{04-components → components}/data-display/image/index.scss RENAMED Viewed

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

package/src/{04-components → components}/data-display/stat/index.scss RENAMED Viewed

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 @layer components.tokens {
   .stat {

package/src/{04-components → components}/data-display/stat/stat.docs.json RENAMED Viewed

@@ -29,7 +29,7 @@
           "items": [
             {
               "tag": "div",
-              "class": "ui-cluster ui-cluster--lg",
+              "class": "ui-row ui-row--lg",
               "children": [
                 {
                   "tag": "div",

package/src/{04-components → components}/data-display/status/index.scss RENAMED Viewed

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 // Status - visual status indicator
 // Small dot or badge to show state
@@ -72,6 +72,12 @@
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    .status--pulse .status__dot::before {
+      animation: none;
+    }
+  }
   // Size variants
   .status--sm {
     --_size: calc(#{t.$unit} * 0.75);

package/src/{04-components → components}/data-display/status/status.api.json RENAMED Viewed

@@ -18,7 +18,7 @@
   "cssVars": [
     {
       "name": "--ui-status-size",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     },
     {
       "name": "--ui-status-color",
@@ -26,7 +26,7 @@
     },
     {
       "name": "--ui-status-gap",
-      "default": "calc(#{t.$unit} * 1"
+      "default": "calc(var(--ui-unit) * 1"
     }
   ]
 }

package/src/components/data-display/status/status.docs.json ADDED Viewed

@@ -0,0 +1,147 @@
+{
+  "id": "status",
+  "type": "component",
+  "title": "Status",
+  "description": "Visual status indicator with colored dot to show state.",
+  "api": "./status.api.json",
+  "sections": [
+    {
+      "title": "Variants",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Online" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--warning",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Away" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--danger",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Busy" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--info",
+                  "children": [
+                    { "tag": "span", "class": "ui-status__dot" },
+                    { "text": "In a meeting" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n  Online\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-4); align-items: center;" },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success ui-status--sm",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Small" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Default" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success ui-status--lg",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Large" }]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--sm\">...</span>\n<span class=\"ui-status\">...</span>\n<span class=\"ui-status ui-status--lg\">...</span>"
+        }
+      ]
+    },
+    {
+      "title": "Pulse Animation",
+      "description": "For live or active indicators",
+      "api": "./status.api.json",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-status ui-status--success ui-status--pulse",
+              "children": [{ "tag": "span", "class": "ui-status__dot" }, { "text": "Live" }]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success ui-status--pulse\">\n  <span class=\"ui-status__dot\"></span>\n  Live\n</span>"
+        }
+      ]
+    },
+    {
+      "title": "Dot Only",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "display: flex; gap: var(--ui-space-2);" },
+              "children": [
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--success",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--warning",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-status ui-status--danger",
+                  "children": [{ "tag": "span", "class": "ui-status__dot" }]
+                }
+              ]
+            }
+          ],
+          "code": "<span class=\"ui-status ui-status--success\">\n  <span class=\"ui-status__dot\"></span>\n</span>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    { "token": "--ui-status-size", "default": "var(--ui-unit)", "description": "Dot size" },
+    {
+      "token": "--ui-status-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Default dot color"
+    },
+    {
+      "token": "--ui-status-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between dot and text"
+    }
+  ]
+}

package/src/{04-components → components}/data-display/table/index.scss RENAMED Viewed

@@ -1,4 +1,4 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
 // Token definitions
 @layer components.tokens {
@@ -34,7 +34,7 @@
       padding-block-end: calc(var(--_cell-padding-y) - var(--ui-border-width-sm, #{t.$border-width-sm}));
       padding-inline: var(--_cell-padding-x);
       // Grid-aligned line-height (3 units = 24px at 8px unit)
-      line-height: calc(var(--unit, #{t.$unit}) * 3);
+      line-height: calc(var(--ui-unit, #{t.$unit}) * 3);
       text-align: start;
       border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--_border-color);