@teseor/css 1.7.0 → 1.9.0

package/src/components/overlays/modal/modal.docs.json

@@ -0,0 +1,163 @@
+{
+  "id": "modal",
+  "type": "component",
+  "title": "Modal",
+  "description": "Container for modal dialogs. Use with overlay for backdrop effect.",
+  "api": "./modal.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "children": [{ "tag": "p", "text": "Modal content goes here" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay\"></div>\n<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <p>Modal content goes here</p>\n  </div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "data": {
+        "sizes": [
+          { "mod": "sm", "label": "Small" },
+          { "mod": "", "label": "Default" },
+          { "mod": "lg", "label": "Large" }
+        ]
+      },
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--sm ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "children": [{ "tag": "p", "text": "Small modal" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal ui-modal--sm\">\n  <div class=\"ui-modal__content\">Small modal</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "With Scrollable Content",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 200px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-modal ui-modal--visible",
+                  "attrs": { "style": "position: absolute;" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-modal__content",
+                      "attrs": { "style": "max-height: 150px;" },
+                      "children": [
+                        {
+                          "tag": "div",
+                          "class": "ui-modal__body",
+                          "children": [
+                            { "tag": "p", "text": "Line 1" },
+                            { "tag": "p", "text": "Line 2" },
+                            { "tag": "p", "text": "Line 3" },
+                            { "tag": "p", "text": "Line 4" },
+                            { "tag": "p", "text": "Line 5" },
+                            { "tag": "p", "text": "Line 6" }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-modal\">\n  <div class=\"ui-modal__content\">\n    <div class=\"ui-modal__body\">\n      <!-- Scrollable content -->\n    </div>\n  </div>\n</div>"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-modal-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "token": "--ui-modal-radius",
+      "default": "var(--ui-radius-lg)",
+      "description": "Border radius"
+    },
+    {
+      "token": "--ui-modal-shadow",
+      "default": "0 24px 48px rgb(0 0 0 / 0.25)",
+      "description": "Box shadow"
+    },
+    {
+      "token": "--ui-modal-padding",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Content padding"
+    },
+    {
+      "token": "--ui-modal-max-width",
+      "default": "calc(var(--ui-unit) * 60)",
+      "description": "Max width (default)"
+    },
+    {
+      "token": "--ui-modal-max-width-sm",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Max width (small)"
+    },
+    {
+      "token": "--ui-modal-max-width-lg",
+      "default": "calc(var(--ui-unit) * 80)",
+      "description": "Max width (large)"
+    },
+    {
+      "token": "--ui-modal-max-height",
+      "default": "calc(100vh - var(--ui-unit) * 8)",
+      "description": "Max height"
+    },
+    { "token": "--ui-modal-z", "default": "var(--ui-z-modal)", "description": "Z-index" }
+  ]
+}

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

@@ -0,0 +1,61 @@
+@use '../../../config/tokens/variables' as t;
+// @component overlay
+// @element div
+
+// Overlay - backdrop for modals, dialogs, drawers
+// Full viewport coverage with semi-transparent background
+
+@layer components.tokens {
+  .overlay {
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
+    --_bg: var(--ui-overlay-bg, #{t.$overlay-bg});
+    // @desc Z-index stacking order
+    --_z: var(--ui-overlay-z, var(--ui-z-overlay, #{t.$z-overlay}));
+  }
+
+  // @modifier boolean light
+  .overlay--light {
+    // @desc Bg light
+    --_bg: var(--ui-overlay-bg-light, #{t.$overlay-bg-light});
+  }
+
+  // @modifier boolean blur
+  .overlay--blur {
+    // @desc Bg blur
+    --_bg: var(--ui-overlay-bg-blur, #{t.$overlay-bg-blur});
+  }
+}
+
+@layer components.styles {
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--_z);
+
+    background: var(--_bg);
+  }
+
+  .overlay--blur {
+    backdrop-filter: blur(calc(#{t.$unit} * 0.5));
+  }
+
+  // Animation states (controlled via JS)
+  .overlay--entering,
+  // @modifier boolean visible
+  .overlay--visible {
+    opacity: 1;
+  }
+
+  .overlay--exiting,
+  .overlay--hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // @modifier boolean animate
+  .overlay--animate {
+    transition: opacity var(--_duration-normal) var(--_ease-default);
+  }
+}

package/src/{04-components → components}/overlays/overlay/overlay.api.json

@@ -1,4 +1,5 @@
 {
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "overlay",
   "element": "div",
   "modifiers": {
@@ -8,29 +9,33 @@
     "blur": {
       "type": "boolean"
     },
-    "animate": {
+    "visible": {
       "type": "boolean"
     },
-    "visible": {
+    "animate": {
       "type": "boolean"
     }
   },
   "cssVars": [
     {
       "name": "--ui-overlay-bg",
-      "default": "rgb(0 0 0 / 0.5"
+      "default": "var(--ui-overlay-bg)",
+      "description": "Background color"
     },
     {
       "name": "--ui-overlay-z",
-      "default": "var(--ui-z-overlay)"
+      "default": "var(--ui-z-overlay)",
+      "description": "Z-index stacking order"
     },
     {
       "name": "--ui-overlay-bg-light",
-      "default": "rgb(255 255 255 / 0.7"
+      "default": "var(--ui-overlay-bg-light)",
+      "description": "Bg light"
     },
     {
       "name": "--ui-overlay-bg-blur",
-      "default": "rgb(0 0 0 / 0.3"
+      "default": "var(--ui-overlay-bg-blur)",
+      "description": "Bg blur"
     }
   ]
 }

package/src/components/overlays/overlay/overlay.docs.json

@@ -0,0 +1,138 @@
+{
+  "id": "overlay",
+  "type": "component",
+  "title": "Overlay",
+  "description": "Full viewport backdrop for modals, dialogs, and drawers. Controls visibility via state modifiers.",
+  "api": "./overlay.api.json",
+  "sections": [
+    {
+      "title": "Default",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": { "style": "position: relative; padding: var(--ui-space-2);" },
+                  "text": "Content behind overlay"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Light Variant",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-text);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--light",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": {
+                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
+                  },
+                  "text": "Dark content behind light overlay"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--light\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "Blur Variant",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: linear-gradient(45deg, var(--ui-color-primary), var(--ui-color-success));"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--blur",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "p",
+                  "attrs": {
+                    "style": "position: relative; padding: var(--ui-space-2); color: white;"
+                  },
+                  "text": "Blurred backdrop"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--blur\"></div>"
+        }
+      ]
+    },
+    {
+      "title": "With Animation",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; height: 120px; background: var(--ui-color-bg-subtle);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-overlay ui-overlay--animate ui-overlay--visible",
+                  "attrs": { "style": "position: absolute;" }
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-overlay ui-overlay--animate ui-overlay--visible\"></div>\n<!-- JS toggles between --visible and --hidden -->"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-overlay-bg",
+      "default": "rgb(0 0 0 / 0.5)",
+      "description": "Default backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-light",
+      "default": "rgb(255 255 255 / 0.7)",
+      "description": "Light variant backdrop color"
+    },
+    {
+      "token": "--ui-overlay-bg-blur",
+      "default": "rgb(0 0 0 / 0.3)",
+      "description": "Blur variant backdrop color"
+    },
+    { "token": "--ui-overlay-z", "default": "var(--ui-z-overlay)", "description": "Z-index layer" }
+  ]
+}

package/src/{04-components → components}/overlays/popover/index.scss

@@ -1,17 +1,33 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component popover
+// @element div
 
 // Popover - floating panel for additional content
 // Larger than tooltip, can contain structured content
 
 @layer components.tokens {
   .popover {
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-size-md: var(--ui-font-size-md, #{t.$font-size-md});
+    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
     --_bg: var(--ui-popover-bg, var(--ui-color-bg, white));
-    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, rgb(0 0 0 / 0.1)));
+    // @desc Border color
+    --_border-color: var(--ui-popover-border-color, var(--ui-color-border, #{t.$color-border}));
+    // @desc Corner radius
     --_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(#{t.$unit} * 1)));
+    // @desc Box shadow
     --_shadow: var(--ui-popover-shadow, 0 calc(#{t.$unit} / 2) calc(#{t.$unit} * 2) rgb(0 0 0 / 0.15));
+    // @desc Padding on all sides
     --_padding: var(--ui-popover-padding, calc(#{t.$unit} * 2));
+    // @desc Maximum width
     --_max-width: var(--ui-popover-max-width, calc(#{t.$unit} * 40));
-    --_z: var(--ui-popover-z, var(--ui-z-popover, 500));
+    // @desc Z-index stacking order
+    --_z: var(--ui-popover-z, var(--ui-z-popover, #{t.$z-popover}));
+    // @desc Arrow size
     --_arrow-size: var(--ui-popover-arrow-size, calc(#{t.$unit}));
   }
 }
@@ -24,13 +40,13 @@
     max-inline-size: var(--_max-width);
     padding: var(--_padding);
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
 
     background: var(--_bg);
     border-radius: var(--_radius);
-    outline: var(--ui-border-width-sm, 0.0625rem) solid var(--_border-color);
+    outline: var(--_border-width-sm) solid var(--_border-color);
     box-shadow: var(--_shadow);
-    outline-offset: calc(var(--ui-border-width-sm, 0.0625rem) * -1);
+    outline-offset: calc(var(--_border-width-sm) * -1);
   }
 
   // Header section
@@ -38,17 +54,18 @@
     padding-block-end: calc(#{t.$unit} * 2);
     margin-block-end: calc(#{t.$unit} * 2);
 
-    box-shadow: inset 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+    box-shadow: inset 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   .popover__title {
     margin: 0;
 
-    font-size: var(--ui-font-size-md, #{t.$font-size-md});
-    font-weight: var(--ui-weight-semibold, 600);
+    font-size: var(--_font-size-md);
+    font-weight: var(--_weight-semibold);
   }
 
   // Arrow pointing down (popover above trigger)
+  // @modifier position
   .popover--top::after {
 
     content: "";
@@ -109,6 +126,6 @@
   }
 
   .popover--animate {
-    transition: opacity var(--ui-duration-fast, 100ms) var(--ui-ease-default, ease);
+    transition: opacity var(--_duration-fast) var(--_ease-default);
   }
 }

package/src/components/overlays/popover/popover.api.json

@@ -0,0 +1,56 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "popover",
+  "element": "div",
+  "modifiers": {
+    "position": {
+      "values": ["top", "bottom", "visible", "hidden", "animate"]
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-popover-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-popover-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    },
+    {
+      "name": "--ui-popover-radius",
+      "default": "var(--ui-radius-md)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-popover-shadow",
+      "default": "0 calc(var(--ui-unit) / 2) calc(var(--ui-unit) * 2) rgb(0 0 0 / 0.15)",
+      "description": "Box shadow"
+    },
+    {
+      "name": "--ui-popover-padding",
+      "default": "calc(var(--ui-unit) * 2)",
+      "description": "Padding on all sides"
+    },
+    {
+      "name": "--ui-popover-max-width",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum width"
+    },
+    {
+      "name": "--ui-popover-z",
+      "default": "var(--ui-z-popover)",
+      "description": "Z-index stacking order"
+    },
+    {
+      "name": "--ui-popover-arrow-size",
+      "default": "calc(var(--ui-unit))",
+      "description": "Arrow size"
+    }
+  ]
+}

package/src/{04-components → components}/overlays/popover/popover.docs.json

@@ -9,7 +9,19 @@
       "title": "Default",
       "examples": [
         {
-          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><p>Popover content goes here. Can contain multiple paragraphs and other elements.</p></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover",
+              "attrs": { "style": "position: relative;" },
+              "children": [
+                {
+                  "tag": "p",
+                  "text": "Popover content goes here. Can contain multiple paragraphs and other elements."
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover\">\n  <p>Popover content goes here.</p>\n</div>"
         }
       ]
@@ -18,7 +30,23 @@
       "title": "With Header",
       "examples": [
         {
-          "html": "<div class=\"ui-popover\" style=\"position: relative;\"><header class=\"ui-popover__header\"><h3 class=\"ui-popover__title\">Popover Title</h3></header><p>Content with a header section.</p></div>",
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover",
+              "attrs": { "style": "position: relative;" },
+              "children": [
+                {
+                  "tag": "header",
+                  "class": "ui-popover__header",
+                  "children": [
+                    { "tag": "h3", "class": "ui-popover__title", "text": "Popover Title" }
+                  ]
+                },
+                { "tag": "p", "text": "Content with a header section." }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover\">\n  <header class=\"ui-popover__header\">\n    <h3 class=\"ui-popover__title\">Popover Title</h3>\n  </header>\n  <p>Content with a header section.</p>\n</div>"
         }
       ]
@@ -27,7 +55,20 @@
       "title": "With Arrow",
       "examples": [
         {
-          "html": "<div style=\"padding: var(--ui-space-4);\"><div class=\"ui-popover ui-popover--top\" style=\"position: relative;\"><p>Popover with arrow pointing down</p></div></div>",
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "padding: var(--ui-space-4);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-popover ui-popover--top",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [{ "tag": "p", "text": "Popover with arrow pointing down" }]
+                }
+              ]
+            }
+          ],
           "code": "<div class=\"ui-popover ui-popover--top\">\n  <p>Popover with arrow pointing down</p>\n</div>"
         }
       ]
@@ -56,15 +97,15 @@
     },
     {
       "token": "--ui-popover-padding",
-      "default": "calc(var(--unit) * 2)",
+      "default": "calc(var(--ui-unit) * 2)",
       "description": "Content padding"
     },
     {
       "token": "--ui-popover-max-width",
-      "default": "calc(var(--unit) * 40)",
+      "default": "calc(var(--ui-unit) * 40)",
       "description": "Maximum width"
     },
     { "token": "--ui-popover-z", "default": "var(--ui-z-popover)", "description": "Z-index layer" },
-    { "token": "--ui-popover-arrow-size", "default": "var(--unit)", "description": "Arrow size" }
+    { "token": "--ui-popover-arrow-size", "default": "var(--ui-unit)", "description": "Arrow size" }
   ]
 }