@teseor/css 1.10.0 → 1.10.1

package/src/components/forms/toggle/index.scss

@@ -6,8 +6,8 @@
 @layer components.tokens {
   .toggle {
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
-    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary, #{t.$color-primary}));
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     // @desc Track width
     --_track-width: var(--ui-toggle-track-width, calc(#{t.$unit} * 5));
@@ -16,7 +16,7 @@
     // @desc Track background
     --_track-bg: var(--ui-toggle-track-bg, var(--ui-color-bg-subtle, #{t.$overlay-bg-subtle}));
     // @desc Track bg checked
-    --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary));
+    --_track-bg-checked: var(--ui-toggle-track-bg-checked, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Track corner radius
     --_track-radius: var(--ui-toggle-track-radius, calc(#{t.$unit} * 1.5));
     // @desc Thumb control size

package/src/components/navigation/breadcrumb/index.scss

@@ -11,18 +11,18 @@
     // @desc Separator
     --_breadcrumb-separator: var(--ui-breadcrumb-separator, "/");
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
-    --_color-primary: var(--ui-color-primary);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
+    --_color-primary: var(--ui-color-primary, #{t.$color-primary});
     // @desc Overall height
     --_height: var(--ui-breadcrumb-height, var(--ui-row-1, #{t.$row}));
     // @desc Gap between children
     --_gap: var(--ui-breadcrumb-gap, calc(#{t.$unit} * 1));
     // @desc Separator text color
-    --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted));
+    --_separator-color: var(--ui-breadcrumb-separator-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Link text color
-    --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted));
+    --_link-color: var(--ui-breadcrumb-link-color, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Current color
-    --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text));
+    --_current-color: var(--ui-breadcrumb-current-color, var(--ui-color-text, #{t.$color-text}));
   }
 }
 

package/src/components/navigation/menu/index.scss

@@ -32,7 +32,7 @@
     // @desc Border color
     --_border-color: var(--ui-menu-border-color, var(--ui-color-border, #{t.$color-border}));
     // @desc Box shadow
-    --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg));
+    --_shadow: var(--ui-menu-shadow, var(--ui-shadow-lg, #{t.$shadow-lg}));
     // @desc Item padding on all sides
     --_item-padding: var(--ui-menu-item-padding, calc(#{t.$unit} * 1) calc(#{t.$unit} * 2));
     // @desc Item corner radius

package/src/components/navigation/nav/index.scss

@@ -8,8 +8,8 @@
     --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
     --_font-sans: var(--ui-font-sans, #{t.$font-sans});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
-    --_duration-base: var(--ui-duration-base);
-    --_ease-default: var(--ui-ease-default);
+    --_duration-base: var(--ui-duration-base, #{t.$duration-base});
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     --_opacity-disabled: var(--ui-opacity-disabled, #{t.$opacity-disabled});
     // @desc Gap between children
     --_gap: var(--ui-nav-gap, var(--ui-space-1, #{t.$space-1}));

package/src/components/navigation/nav/nav.docs.json

@@ -238,5 +238,67 @@
         }
       ]
     }
+  ],
+  "customization": [
+    {
+      "token": "--ui-nav-gap",
+      "default": "var(--ui-space-1)",
+      "description": "Gap between children"
+    },
+    {
+      "token": "--ui-nav-item-height",
+      "default": "var(--ui-row-2)",
+      "description": "Item overall height"
+    },
+    {
+      "token": "--ui-nav-item-padding-x",
+      "default": "var(--ui-space-2)",
+      "description": "Item horizontal padding"
+    },
+    {
+      "token": "--ui-nav-item-font-size",
+      "default": "var(--ui-font-size-sm)",
+      "description": "Item font size"
+    },
+    {
+      "token": "--ui-nav-item-font-weight",
+      "default": "var(--ui-weight-medium)",
+      "description": "Item font weight"
+    },
+    {
+      "token": "--ui-nav-item-color",
+      "default": "var(--ui-color-text-muted)",
+      "description": "Item text color"
+    },
+    {
+      "token": "--ui-nav-item-color-hover",
+      "default": "var(--ui-color-text)",
+      "description": "Item color on hover"
+    },
+    {
+      "token": "--ui-nav-item-color-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Item color when active"
+    },
+    {
+      "token": "--ui-nav-item-radius",
+      "default": "var(--ui-radius-sm)",
+      "description": "Item corner radius"
+    },
+    {
+      "token": "--ui-nav-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "token": "--ui-nav-item-bg-hover",
+      "default": "var(--ui-color-bg-muted)",
+      "description": "Item background on hover"
+    },
+    {
+      "token": "--ui-nav-item-bg-active",
+      "default": "var(--ui-color-primary)",
+      "description": "Item background when active"
+    }
   ]
 }

package/src/components/navigation/pagination/index.scss

@@ -23,12 +23,24 @@
     // @desc Item bg hover
     --_item-bg-hover: var(--ui-pagination-item-bg-hover, var(--ui-color-bg-subtle, #{t.$color-bg-subtle}));
     // @desc Item bg active
-    --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary));
+    --_item-bg-active: var(--ui-pagination-item-bg-active, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Item text color
     --_item-color: var(--ui-pagination-item-color, var(--ui-color-text, #{t.$color-text}));
     // @desc Item color active
     --_item-color-active: var(--ui-pagination-item-color-active, var(--ui-color-text-inverse, #{t.$color-text-inverse}));
   }
+
+  // Size variants
+  // @modifier size
+  .pagination--sm {
+    --_item-size: calc(#{t.$unit} * 3);
+    --_gap: calc(#{t.$unit} * 0.25);
+  }
+
+  .pagination--lg {
+    --_item-size: calc(#{t.$unit} * 5);
+    --_gap: calc(#{t.$unit} * 0.75);
+  }
 }
 
 @layer components.styles {
@@ -115,16 +127,4 @@
 
     color: var(--_color-text-muted);
   }
-
-  // Size variants
-  // @modifier size
-  .pagination--sm {
-    --_item-size: calc(#{t.$unit} * 3);
-    --_gap: calc(#{t.$unit} * 0.25);
-  }
-
-  .pagination--lg {
-    --_item-size: calc(#{t.$unit} * 5);
-    --_gap: calc(#{t.$unit} * 0.75);
-  }
 }

package/src/components/navigation/tabs/index.scss

@@ -11,8 +11,8 @@
     --_weight-medium: var(--ui-weight-medium, #{t.$weight-medium});
     --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     --_border-width-md: var(--ui-border-width-md, #{t.$border-width-md});
-    --_duration-base: var(--ui-duration-base);
-    --_ease-default: var(--ui-ease-default);
+    --_duration-base: var(--ui-duration-base, #{t.$duration-base});
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
     --_color-text: var(--ui-color-text, #{t.$color-text});
     --_color-primary: var(--ui-color-primary, #{t.$color-primary});
     --_row-1: var(--ui-row-1, #{t.$row});

package/src/components/overlays/drawer/index.scss

@@ -27,7 +27,7 @@
     // @desc Background color
     --_bg: var(--ui-drawer-bg, var(--ui-color-bg, #{t.$color-bg}));
     // @desc Box shadow
-    --_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg));
+    --_shadow: var(--ui-drawer-shadow, var(--ui-shadow-lg, #{t.$shadow-lg}));
     // @desc Header padding on all sides
     --_header-padding: var(--ui-drawer-header-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
     // @desc Body area padding on all sides

package/src/components/typography/link/index.scss

@@ -6,11 +6,11 @@
 @layer components.tokens {
   .link {
     --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
-    --_ease-default: var(--ui-ease-default, ease);
-    --_color-focus: var(--ui-color-focus, var(--ui-color-primary));
-    --_color-text-muted: var(--ui-color-text-muted);
+    --_ease-default: var(--ui-ease-default, #{t.$ease-default});
+    --_color-focus: var(--ui-color-focus, var(--ui-color-primary, #{t.$color-primary}));
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
     // @desc Text color
-    --_color: var(--ui-link-color, var(--ui-color-primary));
+    --_color: var(--ui-link-color, var(--ui-color-primary, #{t.$color-primary}));
     // @desc Color hover
     --_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--_color) 85%, black)));
     // @desc Color visited
@@ -24,9 +24,9 @@
   // @modifier variant
   .link--muted {
     // @desc Color muted
-    --_color: var(--ui-link-color-muted, var(--ui-color-text-muted));
+    --_color: var(--ui-link-color-muted, var(--ui-color-text-muted, #{t.$color-text-muted}));
     // @desc Color muted hover
-    --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text));
+    --_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text, #{t.$color-text}));
   }
 
   .link--subtle {

package/src/config/tokens/_variables.scss

@@ -141,6 +141,14 @@ $duration-normal: 200ms;
 $duration-slow: 250ms;
 $duration-slower: 400ms;
 
+// Motion - easing (matches config/tokens/motion)
+$ease-default: cubic-bezier(0.4, 0, 0.2, 1);
+
+// Shadows (matches config/tokens/shadows, static hue fallback)
+$shadow-sm: 0 1px 2px hsl(220 10% 20% / 0.05);
+$shadow-md: 0 4px 6px hsl(220 10% 20% / 0.1);
+$shadow-lg: 0 10px 15px hsl(220 10% 20% / 0.15);
+
 // Z-index scale (matches config/tokens/zindex)
 $z-base: 0;
 $z-sticky: 100;

package/src/layout/center/center.docs.json

@@ -7,6 +7,7 @@
   "sections": [
     {
       "title": "Basic",
+      "description": "Centers children both horizontally and vertically using flexbox.",
       "examples": [
         {
           "items": [
@@ -16,7 +17,45 @@
               "style": { "height": "var(--ui-row-4)", "background": "var(--ui-color-bg-muted)" },
               "children": [{ "tag": "span", "text": "Centered content" }]
             }
-          ]
+          ],
+          "code": "<div class=\"ui-center\" style=\"height: var(--ui-row-4);\">\n  <span>Centered content</span>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Column Direction",
+      "description": "Stack centered children vertically.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-center ui-center--column",
+              "style": { "height": "var(--ui-row-6)", "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                { "tag": "span", "text": "First line" },
+                { "tag": "span", "text": "Second line" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-center ui-center--column\" style=\"height: var(--ui-row-6);\">\n  <span>First line</span>\n  <span>Second line</span>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Full Page Center",
+      "description": "Center content within a full viewport area, useful for loading or empty states.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-center",
+              "style": { "height": "var(--ui-row-8)", "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "No results found" }]
+            }
+          ],
+          "code": "<div class=\"ui-center\" style=\"height: 100vh;\">\n  <p>No results found</p>\n</div>"
         }
       ]
     }

package/src/layout/container/container.docs.json

@@ -0,0 +1,85 @@
+{
+  "id": "container",
+  "type": "primitive",
+  "title": "Container",
+  "description": "Content wrapper with max-width and inline padding. Centers page content with consistent margins.",
+  "api": "container.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Constrains content to a max width with horizontal padding.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Content within a container" }]
+            }
+          ],
+          "code": "<div class=\"ui-container\">Content within a container</div>"
+        }
+      ]
+    },
+    {
+      "title": "Centered",
+      "description": "Centers the container horizontally with auto margins.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Centered container" }]
+            }
+          ],
+          "code": "<div class=\"ui-container ui-container--center\">Centered container</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "description": "Width presets for different layout needs.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--sm ui-container--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Small" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--md ui-container--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Medium" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--lg ui-container--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Large (default)" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--xl ui-container--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Extra large" }]
+            },
+            {
+              "tag": "div",
+              "class": "ui-container ui-container--full",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [{ "tag": "p", "text": "Full width" }]
+            }
+          ],
+          "code": "<div class=\"ui-container ui-container--sm\">Small</div>\n<div class=\"ui-container ui-container--md\">Medium</div>\n<div class=\"ui-container ui-container--lg\">Large</div>\n<div class=\"ui-container ui-container--xl\">Extra large</div>\n<div class=\"ui-container ui-container--full\">Full width</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/layout/main/main.docs.json

@@ -0,0 +1,87 @@
+{
+  "id": "main",
+  "type": "primitive",
+  "title": "Main",
+  "description": "Main content area that accounts for sidebar and topbar offsets in app layouts.",
+  "api": "main.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "description": "Offsets content for a start-side sidebar and optional topbar.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "style": { "position": "relative", "height": "var(--ui-row-4)" },
+              "children": [
+                {
+                  "tag": "main",
+                  "class": "ui-main",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [{ "tag": "p", "text": "Main content area" }]
+                }
+              ]
+            }
+          ],
+          "code": "<main class=\"ui-main\">Main content area</main>"
+        }
+      ]
+    },
+    {
+      "title": "Sidebar End",
+      "description": "Offsets content for an end-side sidebar instead of start.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "style": { "position": "relative", "height": "var(--ui-row-4)" },
+              "children": [
+                {
+                  "tag": "main",
+                  "class": "ui-main ui-main--sidebar-end",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [{ "tag": "p", "text": "Content with end sidebar" }]
+                }
+              ]
+            }
+          ],
+          "code": "<main class=\"ui-main ui-main--sidebar-end\">Content with end sidebar</main>"
+        }
+      ]
+    },
+    {
+      "title": "Full Width",
+      "description": "No sidebar offset. Use when there is no sidebar.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "style": { "position": "relative", "height": "var(--ui-row-4)" },
+              "children": [
+                {
+                  "tag": "main",
+                  "class": "ui-main ui-main--full",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  },
+                  "children": [{ "tag": "p", "text": "Full width content" }]
+                }
+              ]
+            }
+          ],
+          "code": "<main class=\"ui-main ui-main--full\">Full width content</main>"
+        }
+      ]
+    }
+  ]
+}

package/src/utilities/display/display.docs.json

@@ -6,6 +6,7 @@
   "api": "display.api.json",
   "sections": [
     {
+      "title": "Flex Layout",
       "examples": [
         {
           "items": [
@@ -23,6 +24,60 @@
           "code": "<div class=\"ui-flex ui-justify-between ui-items-center ui-gap-2\">\n  <span>Start</span>\n  <span>Center</span>\n  <span>End</span>\n</div>"
         }
       ]
+    },
+    {
+      "title": "Flex Direction",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-flex ui-flex-col ui-gap-1 ui-p-2",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                { "tag": "span", "text": "Column 1" },
+                { "tag": "span", "text": "Column 2" },
+                { "tag": "span", "text": "Column 3" }
+              ]
+            },
+            {
+              "tag": "div",
+              "class": "ui-flex ui-flex-row ui-gap-1 ui-p-2",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                { "tag": "span", "text": "Row 1" },
+                { "tag": "span", "text": "Row 2" },
+                { "tag": "span", "text": "Row 3" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-flex ui-flex-col ui-gap-1\">...</div>\n<div class=\"ui-flex ui-flex-row ui-gap-1\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Visibility",
+      "examples": [
+        {
+          "layout": "row",
+          "items": [
+            {
+              "tag": "span",
+              "class": "ui-visible ui-p-1",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "text": "Visible"
+            },
+            {
+              "tag": "span",
+              "class": "ui-invisible ui-p-1",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "text": "Invisible (hidden but occupies space)"
+            }
+          ],
+          "code": "<span class=\"ui-visible\">Visible</span>\n<span class=\"ui-invisible\">Invisible (hidden but occupies space)</span>"
+        }
+      ]
     }
   ]
 }

package/src/utilities/spacing/spacing.docs.json

@@ -6,6 +6,7 @@
   "api": "spacing.api.json",
   "sections": [
     {
+      "title": "Padding",
       "examples": [
         {
           "layout": "column",
@@ -27,15 +28,104 @@
               "class": "ui-p-4",
               "text": "p-4 (32px padding)",
               "style": { "background": "var(--ui-color-bg-muted)" }
-            },
+            }
+          ],
+          "code": "<div class=\"ui-p-1\">...</div>\n<div class=\"ui-p-2\">...</div>\n<div class=\"ui-p-4\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Directional Padding",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
             {
               "tag": "div",
               "class": "ui-px-4 ui-py-2",
               "text": "px-4 py-2 (horizontal 32px, vertical 16px)",
               "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-pt-4 ui-pb-1",
+              "text": "pt-4 pb-1 (top 32px, bottom 8px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-ps-4 ui-pe-1",
+              "text": "ps-4 pe-1 (start 32px, end 8px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            }
+          ],
+          "code": "<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-pt-4 ui-pb-1\">...</div>\n<div class=\"ui-ps-4 ui-pe-1\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Margin",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-mb-2",
+              "text": "mb-2 (16px bottom margin)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-mt-4 ui-mb-2",
+              "text": "mt-4 mb-2 (top 32px, bottom 16px)",
+              "style": { "background": "var(--ui-color-bg-muted)" }
+            },
+            {
+              "tag": "div",
+              "class": "ui-mx-auto",
+              "text": "mx-auto (centered with auto margins)",
+              "style": {
+                "background": "var(--ui-color-bg-muted)",
+                "max-inline-size": "var(--ui-row-8)"
+              }
+            }
+          ],
+          "code": "<div class=\"ui-mb-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>\n<div class=\"ui-mx-auto\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Gap",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-flex ui-gap-2",
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-p-2",
+                  "text": "Item",
+                  "style": { "background": "var(--ui-color-bg-muted)" }
+                }
+              ]
             }
           ],
-          "code": "<div class=\"ui-p-2\">...</div>\n<div class=\"ui-px-4 ui-py-2\">...</div>\n<div class=\"ui-mt-4 ui-mb-2\">...</div>"
+          "code": "<div class=\"ui-flex ui-gap-2\">\n  <div>Item</div>\n  <div>Item</div>\n  <div>Item</div>\n</div>"
         }
       ]
     }