@teseor/css 1.10.1 → 1.12.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/components/typography/heading/index.scss

@@ -70,6 +70,7 @@
 @layer components.styles {
   .heading {
     margin: 0;
+    text-wrap: balance;
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);

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

@@ -84,6 +84,27 @@
         }
       ]
     },
+    {
+      "title": "Contrast Preference",
+      "description": "Adapts border visibility, muted text, and subtle backgrounds when users request more or less contrast via OS settings.",
+      "examples": [
+        {
+          "title": "High contrast",
+          "description": "When prefers-contrast: more is active, borders become stronger, muted text becomes more readable, and subtle backgrounds become more distinct.",
+          "code": "@media (prefers-contrast: more) {\n  :root {\n    --ui-color-border: var(--ui-color-neutral-400);\n    --ui-color-border-strong: var(--ui-color-neutral-600);\n    --ui-color-text-muted: var(--ui-color-neutral-600);\n    --ui-color-bg-subtle: var(--ui-color-neutral-200);\n  }\n}"
+        },
+        {
+          "title": "Low contrast",
+          "description": "When prefers-contrast: less is active, borders become softer.",
+          "code": "@media (prefers-contrast: less) {\n  :root {\n    --ui-color-border: var(--ui-color-neutral-150);\n    --ui-color-border-strong: var(--ui-color-neutral-200);\n  }\n}"
+        },
+        {
+          "title": "Affected tokens",
+          "description": "Overrides apply to semantic color tokens. All components using these tokens automatically adapt: cards, inputs, buttons, dividers, and any element with borders or muted text.",
+          "code": "// Tokens affected by prefers-contrast:\n// --ui-color-border (default: neutral-200 -> more: neutral-400)\n// --ui-color-border-strong (default: neutral-300 -> more: neutral-600)\n// --ui-color-text-muted (default: neutral-500 -> more: neutral-600)\n// --ui-color-bg-subtle (default: neutral-100 -> more: neutral-200)"
+        }
+      ]
+    },
     {
       "title": "Forced Colors (High Contrast)",
       "description": "Windows High Contrast Mode support. Focus rings use transparent outlines that become visible in forced-colors mode, and the focus color maps to the system Highlight color.",

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
@@ -64,4 +47,22 @@
       --ui-color-focus: Highlight;
     }
   }
+
+  // Increased contrast preference
+  @media (prefers-contrast: more) {
+    :root {
+      --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));
+    }
+  }
+
+  // Decreased contrast preference
+  @media (prefers-contrast: less) {
+    :root {
+      --ui-color-border: var(--ui-color-neutral-150);
+      --ui-color-border-strong: var(--ui-color-neutral-200);
+    }
+  }
 }

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.docs.json

@@ -109,6 +109,40 @@
               ]
             }
           ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-grid ui-grid--auto",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "Auto",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-2)"
+                  }
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/src/layout/row/row.docs.json

@@ -122,6 +122,114 @@
               ]
             }
           ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--sm",
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                },
+                {
+                  "tag": "div",
+                  "text": "sm",
+                  "style": {
+                    "background": "var(--ui-color-bg-muted)",
+                    "padding": "var(--ui-space-1)"
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Alignment",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--start",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Start",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--center",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Center",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--end",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "End",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-row ui-row--between",
+              "style": { "background": "var(--ui-color-bg-muted)" },
+              "children": [
+                {
+                  "tag": "div",
+                  "text": "Between A",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                },
+                {
+                  "tag": "div",
+                  "text": "Between B",
+                  "style": { "background": "var(--ui-color-bg)", "padding": "var(--ui-space-2)" }
+                }
+              ]
+            }
+          ]
         }
       ]
     }