@teseor/css 1.7.0 → 1.9.0

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

@@ -0,0 +1,68 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "drawer",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg", "full"]
+    },
+    "position": {
+      "values": ["end", "start", "top", "bottom"]
+    }
+  },
+  "elements": {
+    "header": {},
+    "title": {},
+    "description": {},
+    "close": {},
+    "body": {},
+    "footer": {}
+  },
+  "relatedComponents": [
+    {
+      "name": "drawer-overlay"
+    }
+  ],
+  "cssVars": [
+    {
+      "name": "--ui-drawer-size",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Overall size"
+    },
+    {
+      "name": "--ui-drawer-max-size",
+      "default": "90%",
+      "description": "Max size"
+    },
+    {
+      "name": "--ui-drawer-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-drawer-shadow",
+      "default": "var(--ui-shadow-lg)",
+      "description": "Box shadow"
+    },
+    {
+      "name": "--ui-drawer-header-padding",
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Header padding on all sides"
+    },
+    {
+      "name": "--ui-drawer-body-padding",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Body area padding on all sides"
+    },
+    {
+      "name": "--ui-drawer-footer-padding",
+      "default": "calc(var(--ui-unit) * 2) calc(var(--ui-unit) * 3)",
+      "description": "Footer padding on all sides"
+    },
+    {
+      "name": "--ui-drawer-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    }
+  ]
+}

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

@@ -0,0 +1,282 @@
+{
+  "id": "drawer",
+  "type": "component",
+  "title": "Drawer",
+  "api": "./drawer.api.json",
+  "sections": [
+    {
+      "title": "Default (End)",
+      "description": "Slides in from the end (right in LTR)",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:300px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer-overlay",
+                  "attrs": { "style": "position:absolute" }
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [
+                        {
+                          "tag": "div",
+                          "children": [
+                            { "tag": "h2", "class": "ui-drawer__title", "text": "Drawer Title" },
+                            {
+                              "tag": "p",
+                              "class": "ui-drawer__description",
+                              "text": "Optional description text"
+                            }
+                          ]
+                        },
+                        {
+                          "tag": "button",
+                          "class": "ui-drawer__close ui-button ui-button--ghost ui-button--icon",
+                          "text": "X"
+                        }
+                      ]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Drawer content goes here." }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__footer",
+                      "children": [
+                        {
+                          "tag": "button",
+                          "class": "ui-button ui-button--secondary",
+                          "text": "Cancel"
+                        },
+                        { "tag": "button", "class": "ui-button", "text": "Save" }
+                      ]
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Positions",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--start ui-drawer--sm",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Start" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From start edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--top",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Top" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From top edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:200px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--bottom",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__header",
+                      "children": [{ "tag": "h2", "class": "ui-drawer__title", "text": "Bottom" }]
+                    },
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "From bottom edge" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    },
+    {
+      "title": "Sizes",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end ui-drawer--sm",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Small drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Default drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position:relative;height:150px;overflow:hidden;border:1px solid var(--ui-color-border);border-radius:var(--ui-radius-md)"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-drawer ui-drawer--end ui-drawer--lg",
+                  "attrs": { "style": "position:absolute", "data-state": "open" },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-drawer__body",
+                      "children": [{ "tag": "p", "text": "Large drawer" }]
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "layout": "column"
+        }
+      ]
+    }
+  ],
+  "customization": [
+    {
+      "token": "--ui-drawer-size",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Default width/height"
+    },
+    { "token": "--ui-drawer-max-size", "default": "90%", "description": "Maximum size" },
+    {
+      "token": "--ui-drawer-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    { "token": "--ui-drawer-shadow", "default": "var(--shadow-lg)", "description": "Box shadow" },
+    {
+      "token": "--ui-drawer-header-padding",
+      "default": "16px 24px",
+      "description": "Header padding"
+    },
+    { "token": "--ui-drawer-body-padding", "default": "24px", "description": "Body padding" },
+    {
+      "token": "--ui-drawer-footer-padding",
+      "default": "16px 24px",
+      "description": "Footer padding"
+    },
+    {
+      "token": "--ui-drawer-border-color",
+      "default": "var(--ui-color-border)",
+      "description": "Border color"
+    }
+  ]
+}

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

@@ -1,20 +1,44 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component drawer
+// @element div
+// @related drawer-overlay
 
 // Drawer - slide-out panel
 // Side panel that slides in from edge
 
 @layer components.tokens {
   .drawer {
+    --_z-drawer: var(--ui-z-drawer, #{t.$z-drawer});
+    --_overlay-bg: var(--ui-overlay-bg, #{t.$overlay-bg});
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-out: var(--ui-ease-out, ease-out);
+    --_duration-fast: var(--ui-duration-fast, #{t.$duration-fast});
+    --_ease-in: var(--ui-ease-in, ease-in);
+    --_border-width-sm: var(--ui-border-width-sm, #{t.$border-width-sm});
+    --_font-size-lg: var(--ui-font-size-lg, #{t.$font-size-lg});
+    --_weight-semibold: var(--ui-weight-semibold, #{t.$weight-semibold});
+    --_row-1: var(--ui-row-1, #{t.$row});
+    --_font-size-sm: var(--ui-font-size-sm, #{t.$font-size-sm});
+    --_color-text-muted: var(--ui-color-text-muted, #{t.$color-text-muted});
+    // @desc Overall size
     --_size: var(--ui-drawer-size, calc(#{t.$unit} * 40));
+    // @desc Max size
     --_max-size: var(--ui-drawer-max-size, 90%);
+    // @desc Background color
     --_bg: var(--ui-drawer-bg, var(--ui-color-bg, #{t.$color-bg}));
-    --_shadow: var(--ui-drawer-shadow, var(--shadow-lg));
+    // @desc Box shadow
+    --_shadow: var(--ui-drawer-shadow, var(--ui-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
     --_body-padding: var(--ui-drawer-body-padding, calc(#{t.$unit} * 3));
+    // @desc Footer padding on all sides
     --_footer-padding: var(--ui-drawer-footer-padding, calc(#{t.$unit} * 2) calc(#{t.$unit} * 3));
+    // @desc Border color
     --_border-color: var(--ui-drawer-border-color, var(--ui-color-border, #{t.$color-border}));
   }
 
+  // @modifier size
   .drawer--sm {
     --_size: calc(#{t.$unit} * 30);
   }
@@ -34,17 +58,17 @@
   .drawer-overlay {
     position: fixed;
     inset: 0;
-    z-index: var(--ui-z-drawer, 900);
+    z-index: var(--_z-drawer);
 
-    background: var(--ui-overlay-bg, rgb(0 0 0 / 0.5));
+    background: var(--_overlay-bg);
   }
 
   .drawer-overlay[data-state="open"] {
-    animation: drawer-overlay-in var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-overlay-in var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer-overlay[data-state="closed"] {
-    animation: drawer-overlay-out var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-overlay-out var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes drawer-overlay-in {
@@ -65,13 +89,14 @@
     display: flex;
     flex-direction: column;
     position: fixed;
-    z-index: var(--ui-z-drawer, 900);
+    z-index: var(--_z-drawer);
 
     background: var(--_bg);
     box-shadow: var(--_shadow);
   }
 
   // Direction variants
+  // @modifier position
   .drawer--end {
     inset-block: 0;
     inset-inline-end: 0;
@@ -79,7 +104,7 @@
     inline-size: var(--_size);
     max-inline-size: var(--_max-size);
 
-    box-shadow: calc(var(--ui-border-width-sm, 1px) * -1) 0 0 var(--_border-color);
+    box-shadow: calc(var(--_border-width-sm) * -1) 0 0 var(--_border-color);
   }
 
   .drawer--start {
@@ -89,7 +114,7 @@
     inline-size: var(--_size);
     max-inline-size: var(--_max-size);
 
-    box-shadow: var(--ui-border-width-sm, 1px) 0 0 var(--_border-color);
+    box-shadow: var(--_border-width-sm) 0 0 var(--_border-color);
   }
 
   .drawer--top {
@@ -99,7 +124,7 @@
     block-size: var(--_size);
     max-block-size: var(--_max-size);
 
-    box-shadow: 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+    box-shadow: 0 var(--_border-width-sm) 0 var(--_border-color);
   }
 
   .drawer--bottom {
@@ -109,40 +134,40 @@
     block-size: var(--_size);
     max-block-size: var(--_max-size);
 
-    box-shadow: 0 calc(var(--ui-border-width-sm, 1px) * -1) 0 var(--_border-color);
+    box-shadow: 0 calc(var(--_border-width-sm) * -1) 0 var(--_border-color);
   }
 
   // Animation states
   .drawer--end[data-state="open"] {
-    animation: drawer-slide-in-end var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-end var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--end[data-state="closed"] {
-    animation: drawer-slide-out-end var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-end var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--start[data-state="open"] {
-    animation: drawer-slide-in-start var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-start var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--start[data-state="closed"] {
-    animation: drawer-slide-out-start var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-start var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--top[data-state="open"] {
-    animation: drawer-slide-in-top var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-top var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--top[data-state="closed"] {
-    animation: drawer-slide-out-top var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-top var(--_duration-fast) var(--_ease-in);
   }
 
   .drawer--bottom[data-state="open"] {
-    animation: drawer-slide-in-bottom var(--ui-duration-normal, 200ms) var(--ui-ease-out, ease-out);
+    animation: drawer-slide-in-bottom var(--_duration-normal) var(--_ease-out);
   }
 
   .drawer--bottom[data-state="closed"] {
-    animation: drawer-slide-out-bottom var(--ui-duration-fast, 100ms) var(--ui-ease-in, ease-in);
+    animation: drawer-slide-out-bottom var(--_duration-fast) var(--_ease-in);
   }
 
   @keyframes drawer-slide-in-end {
@@ -203,23 +228,23 @@
 
     padding: var(--_header-padding);
 
-    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);
   }
 
   .drawer__title {
     margin: 0;
 
-    font-size: var(--ui-font-size-lg, #{t.$font-size-lg});
-    font-weight: var(--ui-weight-semibold, 600);
-    line-height: var(--ui-row-1, #{t.$row});
+    font-size: var(--_font-size-lg);
+    font-weight: var(--_weight-semibold);
+    line-height: var(--_row-1);
   }
 
   .drawer__description {
     margin: 0;
 
-    font-size: var(--ui-font-size-sm, #{t.$font-size-sm});
-    line-height: var(--ui-row-1, #{t.$row});
-    color: var(--ui-color-text-muted, #{t.$color-text-muted});
+    font-size: var(--_font-size-sm);
+    line-height: var(--_row-1);
+    color: var(--_color-text-muted);
   }
 
   .drawer__close {
@@ -234,7 +259,7 @@
     padding: var(--_body-padding);
     overflow-y: auto;
 
-    line-height: var(--ui-row-1, #{t.$row});
+    line-height: var(--_row-1);
   }
 
   .drawer__footer {
@@ -246,6 +271,13 @@
 
     padding: var(--_footer-padding);
 
-    box-shadow: inset 0 var(--ui-border-width-sm, 1px) 0 var(--_border-color);
+    box-shadow: inset 0 var(--_border-width-sm) 0 var(--_border-color);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .drawer-overlay[data-state],
+    .drawer[data-state] {
+      animation: none;
+    }
   }
 }

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

@@ -1,24 +1,38 @@
-@use '../../../00-config/tokens/variables' as t;
+@use '../../../config/tokens/variables' as t;
+// @component modal
+// @element div
 
 // Modal - container for modal dialogs
 // Centered container with backdrop that appears over page content
 
 @layer components.tokens {
   .modal {
-    --_bg: var(--ui-modal-bg, var(--ui-color-bg, white));
+    --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
+    --_ease-default: var(--ui-ease-default, ease);
+    // @desc Background color
+    --_bg: var(--ui-modal-bg, var(--ui-color-bg, #{t.$color-bg}));
+    // @desc Corner radius
     --_radius: var(--ui-modal-radius, var(--ui-radius-lg, calc(#{t.$unit} * 1.5)));
+    // @desc Box shadow
     --_shadow: var(--ui-modal-shadow, 0 calc(#{t.$unit} * 3) calc(#{t.$unit} * 6) rgb(0 0 0 / 0.25));
+    // @desc Padding on all sides
     --_padding: var(--ui-modal-padding, calc(#{t.$unit} * 3));
+    // @desc Maximum width
     --_max-width: var(--ui-modal-max-width, calc(#{t.$unit} * 60));
+    // @desc Maximum height
     --_max-height: var(--ui-modal-max-height, calc(100vh - #{t.$unit} * 8));
-    --_z: var(--ui-modal-z, var(--ui-z-modal, 400));
+    // @desc Z-index stacking order
+    --_z: var(--ui-modal-z, var(--ui-z-modal, #{t.$z-modal}));
   }
 
+  // @modifier size
   .modal--sm {
+    // @desc Maximum width at small size
     --_max-width: var(--ui-modal-max-width-sm, calc(#{t.$unit} * 40));
   }
 
   .modal--lg {
+    // @desc Maximum width at large size
     --_max-width: var(--ui-modal-max-width-lg, calc(#{t.$unit} * 80));
   }
 
@@ -68,6 +82,7 @@
 
   // Animation states
   .modal--entering .modal__content,
+  // @modifier boolean visible
   .modal--visible .modal__content {
     opacity: 1;
     transform: scale(1);
@@ -81,8 +96,8 @@
 
   .modal--animate .modal__content {
     transition:
-      opacity var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease),
-      transform var(--ui-duration-normal, 200ms) var(--ui-ease-default, ease);
+      opacity var(--_duration-normal) var(--_ease-default),
+      transform var(--_duration-normal) var(--_ease-default);
   }
 
   // Hidden state hides entire modal

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

@@ -0,0 +1,64 @@
+{
+  "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
+  "name": "modal",
+  "element": "div",
+  "modifiers": {
+    "size": {
+      "values": ["sm", "lg", "full", "entering"]
+    },
+    "visible": {
+      "type": "boolean"
+    }
+  },
+  "elements": {
+    "content": {},
+    "body": {}
+  },
+  "cssVars": [
+    {
+      "name": "--ui-modal-bg",
+      "default": "var(--ui-color-bg)",
+      "description": "Background color"
+    },
+    {
+      "name": "--ui-modal-radius",
+      "default": "var(--ui-radius-lg)",
+      "description": "Corner radius"
+    },
+    {
+      "name": "--ui-modal-shadow",
+      "default": "0 calc(var(--ui-unit) * 3) calc(var(--ui-unit) * 6) rgb(0 0 0 / 0.25)",
+      "description": "Box shadow"
+    },
+    {
+      "name": "--ui-modal-padding",
+      "default": "calc(var(--ui-unit) * 3)",
+      "description": "Padding on all sides"
+    },
+    {
+      "name": "--ui-modal-max-width",
+      "default": "calc(var(--ui-unit) * 60)",
+      "description": "Maximum width"
+    },
+    {
+      "name": "--ui-modal-max-height",
+      "default": "calc(100vh - var(--ui-unit) * 8)",
+      "description": "Maximum height"
+    },
+    {
+      "name": "--ui-modal-z",
+      "default": "var(--ui-z-modal)",
+      "description": "Z-index stacking order"
+    },
+    {
+      "name": "--ui-modal-max-width-sm",
+      "default": "calc(var(--ui-unit) * 40)",
+      "description": "Maximum width at small size"
+    },
+    {
+      "name": "--ui-modal-max-width-lg",
+      "default": "calc(var(--ui-unit) * 80)",
+      "description": "Maximum width at large size"
+    }
+  ]
+}