@teseor/css 1.11.0 → 1.13.0

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

@@ -52,7 +52,7 @@
       ]
     },
     {
-      "title": "With Arrow",
+      "title": "Positions",
       "examples": [
         {
           "items": [
@@ -64,12 +64,55 @@
                   "tag": "div",
                   "class": "ui-popover ui-popover--top",
                   "attrs": { "style": "position: relative;" },
-                  "children": [{ "tag": "p", "text": "Popover with arrow pointing down" }]
+                  "children": [{ "tag": "p", "text": "Top (arrow down)" }]
                 }
               ]
             }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "padding: var(--ui-space-4);" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-popover ui-popover--bottom",
+                  "attrs": { "style": "position: relative;" },
+                  "children": [{ "tag": "p", "text": "Bottom (arrow up)" }]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-popover ui-popover--top\">...</div>\n<div class=\"ui-popover ui-popover--bottom\">...</div>"
+        }
+      ]
+    },
+    {
+      "title": "Visibility",
+      "description": "Control popover visibility and animation.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover ui-popover--visible ui-popover--animate",
+              "attrs": { "style": "position: relative;" },
+              "children": [{ "tag": "p", "text": "Visible and animated" }]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-popover ui-popover--hidden",
+              "attrs": { "style": "position: relative;" },
+              "children": [{ "tag": "p", "text": "Hidden popover" }]
+            }
           ],
-          "code": "<div class=\"ui-popover ui-popover--top\">\n  <p>Popover with arrow pointing down</p>\n</div>"
+          "code": "<div class=\"ui-popover ui-popover--visible ui-popover--animate\">...</div>\n<div class=\"ui-popover ui-popover--hidden\">...</div>"
         }
       ]
     }

package/src/config/tokens/semantic/colors/index.scss

@@ -1,15 +1,17 @@
 @layer tokens {
   :root {
-    --ui-color-text: var(--ui-color-neutral-900);
-    --ui-color-text-muted: var(--ui-color-neutral-500);
-    --ui-color-text-inverse: var(--ui-color-neutral-50);
+    color-scheme: light dark;
 
-    --ui-color-bg: var(--ui-color-neutral-50);
-    --ui-color-bg-subtle: var(--ui-color-neutral-100);
-    --ui-color-bg-muted: var(--ui-color-neutral-200);
+    --ui-color-text: light-dark(var(--ui-color-neutral-900), var(--ui-color-neutral-100));
+    --ui-color-text-muted: light-dark(var(--ui-color-neutral-500), var(--ui-color-neutral-400));
+    --ui-color-text-inverse: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
 
-    --ui-color-border: var(--ui-color-neutral-200);
-    --ui-color-border-strong: var(--ui-color-neutral-300);
+    --ui-color-bg: light-dark(var(--ui-color-neutral-50), var(--ui-color-neutral-900));
+    --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-100), var(--ui-color-neutral-800));
+    --ui-color-bg-muted: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
+
+    --ui-color-border: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
+    --ui-color-border-strong: light-dark(var(--ui-color-neutral-300), var(--ui-color-neutral-600));
 
     --ui-color-interactive: var(--ui-color-primary);
     --ui-color-interactive-hover: var(--ui-color-primary-dark);
@@ -29,33 +31,14 @@
 }
 
 @layer themes {
-  [data-theme="dark"] {
-    --ui-color-text: var(--ui-color-neutral-100);
-    --ui-color-text-muted: var(--ui-color-neutral-400);
-    --ui-color-text-inverse: var(--ui-color-neutral-900);
-
-    --ui-color-bg: var(--ui-color-neutral-900);
-    --ui-color-bg-subtle: var(--ui-color-neutral-800);
-    --ui-color-bg-muted: var(--ui-color-neutral-700);
-
-    --ui-color-border: var(--ui-color-neutral-700);
-    --ui-color-border-strong: var(--ui-color-neutral-600);
+  // Explicit light mode override
+  [data-theme="light"] {
+    color-scheme: light;
   }
 
-  // Auto-detect system dark mode when no explicit data-theme is set
-  @media (prefers-color-scheme: dark) {
-    :root:not([data-theme]) {
-      --ui-color-text: var(--ui-color-neutral-100);
-      --ui-color-text-muted: var(--ui-color-neutral-400);
-      --ui-color-text-inverse: var(--ui-color-neutral-900);
-
-      --ui-color-bg: var(--ui-color-neutral-900);
-      --ui-color-bg-subtle: var(--ui-color-neutral-800);
-      --ui-color-bg-muted: var(--ui-color-neutral-700);
-
-      --ui-color-border: var(--ui-color-neutral-700);
-      --ui-color-border-strong: var(--ui-color-neutral-600);
-    }
+  // Explicit dark mode override
+  [data-theme="dark"] {
+    color-scheme: dark;
   }
 
   // Windows high contrast mode
@@ -68,17 +51,10 @@
   // Increased contrast preference
   @media (prefers-contrast: more) {
     :root {
-      --ui-color-border: var(--ui-color-neutral-400);
-      --ui-color-border-strong: var(--ui-color-neutral-600);
-      --ui-color-text-muted: var(--ui-color-neutral-600);
-      --ui-color-bg-subtle: var(--ui-color-neutral-200);
-    }
-
-    [data-theme="dark"] {
-      --ui-color-border: var(--ui-color-neutral-400);
-      --ui-color-border-strong: var(--ui-color-neutral-300);
-      --ui-color-text-muted: var(--ui-color-neutral-300);
-      --ui-color-bg-subtle: var(--ui-color-neutral-700);
+      --ui-color-border: light-dark(var(--ui-color-neutral-400), var(--ui-color-neutral-400));
+      --ui-color-border-strong: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));
+      --ui-color-text-muted: light-dark(var(--ui-color-neutral-600), var(--ui-color-neutral-300));
+      --ui-color-bg-subtle: light-dark(var(--ui-color-neutral-200), var(--ui-color-neutral-700));
     }
   }
 

package/src/config/tokens/theming.docs.json

@@ -16,9 +16,21 @@
               "tag": "div",
               "class": "theme-demo",
               "children": [
-                { "tag": "button", "class": "ui-button", "text": "Primary" },
-                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Primary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--secondary",
+                  "text": "Secondary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--danger",
+                  "text": "Danger"
+                }
               ]
             }
           ],
@@ -31,9 +43,21 @@
               "tag": "div",
               "class": "theme-demo theme-purple",
               "children": [
-                { "tag": "button", "class": "ui-button", "text": "Primary" },
-                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Primary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--secondary",
+                  "text": "Secondary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--danger",
+                  "text": "Danger"
+                }
               ]
             }
           ],
@@ -46,9 +70,21 @@
               "tag": "div",
               "class": "theme-demo theme-teal",
               "children": [
-                { "tag": "button", "class": "ui-button", "text": "Primary" },
-                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Primary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--secondary",
+                  "text": "Secondary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--danger",
+                  "text": "Danger"
+                }
               ]
             }
           ],
@@ -61,9 +97,21 @@
               "tag": "div",
               "class": "theme-demo theme-orange",
               "children": [
-                { "tag": "button", "class": "ui-button", "text": "Primary" },
-                { "tag": "button", "class": "ui-button ui-button--secondary", "text": "Secondary" },
-                { "tag": "button", "class": "ui-button ui-button--danger", "text": "Danger" }
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Primary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--secondary",
+                  "text": "Secondary"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--danger",
+                  "text": "Danger"
+                }
               ]
             }
           ],
@@ -73,10 +121,10 @@
     },
     {
       "title": "Dark Mode",
-      "description": "Toggle dark mode with data-theme attribute",
+      "description": "Dark mode uses the CSS light-dark() function. Tokens resolve automatically based on color-scheme. Override with data-theme attribute.",
       "examples": [
         {
-          "title": "Light Mode",
+          "title": "Automatic (system preference)",
           "items": [
             {
               "tag": "div",
@@ -85,30 +133,67 @@
                 {
                   "tag": "div",
                   "class": "ui-card",
-                  "children": [{ "tag": "p", "text": "Light mode card" }]
+                  "children": [
+                    {
+                      "tag": "p",
+                      "text": "Follows OS color scheme"
+                    }
+                  ]
                 }
               ]
             }
           ],
-          "code": "<html>\n  <!-- Light mode (default) -->\n</html>"
+          "code": ":root {\n  color-scheme: light dark;\n  --ui-color-bg: light-dark(\n    var(--ui-color-neutral-50),\n    var(--ui-color-neutral-900)\n  );\n}"
         },
         {
-          "title": "Dark Mode",
+          "title": "Force Light Mode",
           "items": [
             {
               "tag": "div",
               "class": "theme-demo",
-              "attrs": { "data-theme": "dark" },
+              "attrs": {
+                "data-theme": "light"
+              },
               "children": [
                 {
                   "tag": "div",
                   "class": "ui-card",
-                  "children": [{ "tag": "p", "text": "Dark mode card" }]
+                  "children": [
+                    {
+                      "tag": "p",
+                      "text": "Always light"
+                    }
+                  ]
                 }
               ]
             }
           ],
-          "code": "<html data-theme=\"dark\">\n  <!-- Dark mode enabled -->\n</html>"
+          "code": "<html data-theme=\"light\">\n  <!-- Forces light mode regardless of OS setting -->\n</html>"
+        },
+        {
+          "title": "Force Dark Mode",
+          "items": [
+            {
+              "tag": "div",
+              "class": "theme-demo",
+              "attrs": {
+                "data-theme": "dark"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-card",
+                  "children": [
+                    {
+                      "tag": "p",
+                      "text": "Always dark"
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<html data-theme=\"dark\">\n  <!-- Forces dark mode regardless of OS setting -->\n</html>"
         }
       ]
     },
@@ -123,9 +208,21 @@
               "tag": "div",
               "class": "theme-demo custom-buttons",
               "children": [
-                { "tag": "button", "class": "ui-button ui-button--sm", "text": "Small" },
-                { "tag": "button", "class": "ui-button", "text": "Default" },
-                { "tag": "button", "class": "ui-button ui-button--lg", "text": "Large" }
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--sm",
+                  "text": "Small"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Default"
+                },
+                {
+                  "tag": "button",
+                  "class": "ui-button ui-button--lg",
+                  "text": "Large"
+                }
               ]
             }
           ],
@@ -141,7 +238,12 @@
                 {
                   "tag": "div",
                   "class": "ui-card",
-                  "children": [{ "tag": "p", "text": "Card with custom padding" }]
+                  "children": [
+                    {
+                      "tag": "p",
+                      "text": "Card with custom padding"
+                    }
+                  ]
                 }
               ]
             }
@@ -160,12 +262,19 @@
               "tag": "div",
               "class": "theme-demo theme-corporate",
               "children": [
-                { "tag": "button", "class": "ui-button", "text": "Action" },
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "text": "Action"
+                },
                 {
                   "tag": "div",
                   "class": "ui-card",
                   "children": [
-                    { "tag": "p", "text": "Corporate theme with teal accent and sharp corners" }
+                    {
+                      "tag": "p",
+                      "text": "Corporate theme with teal accent and sharp corners"
+                    }
                   ]
                 }
               ]

package/src/layout/center/center.api.json

@@ -2,6 +2,10 @@
   "$schema": "Auto-generated from index.scss annotations. Do not edit manually — run: pnpm generate:api",
   "name": "center",
   "element": "div",
-  "modifiers": {},
+  "modifiers": {
+    "column": {
+      "type": "boolean"
+    }
+  },
   "cssVars": []
 }

package/src/layout/center/index.scss

@@ -8,6 +8,7 @@
     justify-content: center;
   }
 
+  // @modifier boolean column
   .center--column {
     flex-direction: column;
   }

package/src/layout/column/column.docs.json

@@ -124,6 +124,32 @@
               ]
             }
           ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-column ui-column--xl",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "xl gap",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "xl gap",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/layout/grid/grid.api.json

@@ -5,6 +5,15 @@
   "modifiers": {
     "columns": {
       "values": ["2", "3", "4", "auto"]
+    },
+    "subgrid": {
+      "type": "boolean"
+    },
+    "subgrid-rows": {
+      "type": "boolean"
+    },
+    "subgrid-both": {
+      "type": "boolean"
     }
   },
   "cssVars": []