@teseor/css 1.7.0 → 1.9.0

package/src/components/data-display/data-list/data-list.docs.json

@@ -0,0 +1,259 @@
+{
+  "id": "data-list",
+  "type": "component",
+  "title": "Data List",
+  "api": "./data-list.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Name" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "John Doe" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Email" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "john@example.com" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Role" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Administrator" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Horizontal Layout",
+      "description": "Side-by-side label and value",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--horizontal",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Status" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Active" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Created" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Updated" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Dec 8, 2025" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Divided",
+      "description": "With separator lines between items",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--divided",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Order ID" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "#12345" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Total" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "$99.00" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Payment" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Credit Card" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Striped",
+      "description": "Alternating background for readability",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--striped",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "CPU" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Intel i7" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Memory" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "16 GB" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Storage" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "512 GB SSD" }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Display" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "14\" Retina" }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Small" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Compact display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Default" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Standard display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "dl",
+              "class": "ui-data-list ui-data-list--lg",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-data-list__item",
+                  "children": [
+                    { "tag": "dt", "class": "ui-data-list__label", "text": "Large" },
+                    { "tag": "dd", "class": "ui-data-list__value", "text": "Spacious display" }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-data-list-gap",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Gap between items"
+    },
+    {
+      "token": "--ui-data-list-item-gap",
+      "default": "var(--ui-unit)",
+      "description": "Gap between label and value"
+    },
+    {
+      "token": "--ui-data-list-label-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Label color"
+    },
+    {
+      "token": "--ui-data-list-value-color",
+      "default": "var(--ui-color-text)",
+      "description": "Value color"
+    }
+  ]
+}

package/src/{04-components → components}/data-display/data-list/index.scss

@@ -1,13 +1,27 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component data-list
+// @element div
 
 // Data-List - key-value pairs
 // Display structured data with labels and values
 
 @layer components.tokens {
   .data-list {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_color-border: var(--ui-color-border, #{t.$color-border});
+    --_color-bg-subtle: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
+    --_radius-sm: var(--ui-radius-sm, #{t.$radius-sm});
+    --_font-size-lg: var(--ui-font-size-lg, #{t.$font-size-lg});
+    // @desc Gap between children
     --_gap: var(--ui-data-list-gap, calc(#{t.$unit} * 2));
+    // @desc Item gap between children
     --_item-gap: var(--ui-data-list-item-gap, calc(#{t.$unit} * 1));
+    // @desc Label text color
     --_label-color: var(--ui-data-list-label-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
+    // @desc Value display text color
     --_value-color: var(--ui-data-list-value-color, var(--ui-color-text, #{t.$color-text}));
   }
 }
@@ -20,7 +34,7 @@
 
     margin: 0;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
   }
 
   .data-list__item {
@@ -30,20 +44,21 @@
   }
 
   .data-list__label {
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    font-weight: var(--ui-weight-medium, #{t.$weight-medium});
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-sm);
+    font-weight: var(--_weight-medium);
+    line-height: var(--_row-1);
     color: var(--_label-color);
   }
 
   .data-list__value {
     margin: 0;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
     color: var(--_value-color);
   }
 
   // Horizontal layout (side-by-side)
+  // @modifier layout
   .data-list--horizontal .data-list__item {
     flex-direction: row;
     align-items: baseline;
@@ -60,11 +75,12 @@
   }
 
   // With dividers
+  // @modifier style
   .data-list--divided .data-list__item {
     // Subtract border from padding to keep total on grid
-    padding-block-end: calc(var(--_gap) - var(--ui-border-width-sm, #{t.$border-width-sm}));
+    padding-block-end: calc(var(--_gap) - var(--_border-width-sm));
 
-    border-block-end: var(--ui-border-width-sm, #{t.$border-width-sm}) solid var(--ui-color-border, #{t.$color-border});
+    border-block-end: var(--_border-width-sm) solid var(--_color-border);
   }
 
   .data-list--divided .data-list__item:last-child {
@@ -77,16 +93,17 @@
   .data-list--striped .data-list__item:nth-child(odd) {
     padding: calc(#{t.$unit} * 1);
 
-    background: var(--ui-color-bg-subtle, #{t.$color-bg-subtle});
-    border-radius: var(--ui-radius-sm, #{t.$radius-sm});
+    background: var(--_color-bg-subtle);
+    border-radius: var(--_radius-sm);
   }
 
   // Compact size
+  // @modifier size
   .data-list--sm {
     --_gap: calc(#{t.$unit} * 1);
     --_item-gap: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
+    font-size: var(--_font-size-sm);
   }
 
   // Large size
@@ -94,6 +111,6 @@
     --_gap: calc(#{t.$unit} * 3);
     --_item-gap: calc(#{t.$unit} * 1);
 
-    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
+    font-size: var(--_font-size-lg);
   }
 }

package/src/{04-components → components}/data-display/icon/icon.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "icon",
   "element": "svg",
   "modifiers": {
@@ -18,40 +19,28 @@
   "cssVars": [
     {
       "name": "--ui-icon-size",
-      "default": "var(--ui-ctx-size, 1rem)",
+      "default": "var(--ui-ctx-size)",
       "description": "3-tier: global > context > default"
     },
     {
       "name": "--ui-icon-stroke",
-      "default": "2"
+      "default": "var(--ui-icon-stroke)",
+      "description": "Stroke"
     },
     {
-      "name": "--ui-icon-size-xs",
-      "default": "var(--ui-size-xs)"
-    },
-    {
-      "name": "--ui-icon-size-sm",
-      "default": "var(--ui-size-sm)"
-    },
-    {
-      "name": "--ui-icon-size-md",
-      "default": "var(--ui-size-md)"
-    },
-    {
-      "name": "--ui-icon-size-lg",
-      "default": "var(--ui-size-lg)"
-    },
-    {
-      "name": "--ui-icon-size-xl",
-      "default": "var(--ui-size-xl)"
+      "name": "--ui-icon-size-",
+      "default": "",
+      "description": "Size"
     },
     {
       "name": "--ui-icon-stroke-thin",
-      "default": "1"
+      "default": "var(--ui-icon-stroke-thin)",
+      "description": "Stroke thin"
     },
     {
       "name": "--ui-icon-stroke-thick",
-      "default": "2.5"
+      "default": "var(--ui-icon-stroke-thick)",
+      "description": "Stroke thick"
     }
   ]
 }

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

@@ -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\"/>"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }