@teseor/css 1.14.3 → 1.15.0

package/src/components/typography/list/list.docs.json

@@ -1,296 +0,0 @@
-{
-  "id": "list",
-  "type": "component",
-  "title": "List",
-  "description": "Ordered and unordered lists with spacing control, inline layout, and marker customization.",
-  "api": "./list.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "description": "Unordered list with default bullet markers.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "ul",
-              "class": "ui-list",
-              "children": [
-                {
-                  "tag": "li",
-                  "class": "ui-list__item",
-                  "text": "First item in the list"
-                },
-                {
-                  "tag": "li",
-                  "class": "ui-list__item",
-                  "text": "Second item in the list"
-                },
-                {
-                  "tag": "li",
-                  "class": "ui-list__item",
-                  "text": "Third item in the list"
-                }
-              ]
-            }
-          ],
-          "code": "<ul class=\"ui-list\">\n  <li>First item</li>\n  <li>Second item</li>\n  <li>Third item</li>\n</ul>"
-        }
-      ]
-    },
-    {
-      "title": "Ordered",
-      "description": "Use on ol for numbered markers.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "ol",
-              "class": "ui-list",
-              "children": [
-                {
-                  "tag": "li",
-                  "text": "Create the branch"
-                },
-                {
-                  "tag": "li",
-                  "text": "Implement the feature"
-                },
-                {
-                  "tag": "li",
-                  "text": "Open a pull request"
-                },
-                {
-                  "tag": "li",
-                  "text": "Merge after review"
-                }
-              ]
-            }
-          ],
-          "code": "<ol class=\"ui-list\">\n  <li>Create the branch</li>\n  <li>Implement the feature</li>\n  <li>Open a pull request</li>\n  <li>Merge after review</li>\n</ol>"
-        }
-      ]
-    },
-    {
-      "title": "Unstyled",
-      "description": "Removes markers and indent for nav or custom lists.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "ul",
-              "class": "ui-list ui-list--unstyled",
-              "children": [
-                {
-                  "tag": "li",
-                  "text": "No bullet markers"
-                },
-                {
-                  "tag": "li",
-                  "text": "No inline padding"
-                },
-                {
-                  "tag": "li",
-                  "text": "Clean vertical stack"
-                }
-              ]
-            }
-          ],
-          "code": "<ul class=\"ui-list ui-list--unstyled\">\n  <li>No bullet markers</li>\n  <li>No inline padding</li>\n</ul>"
-        }
-      ]
-    },
-    {
-      "title": "Inline",
-      "description": "Horizontal flow with wrapping. Markers removed.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "ul",
-              "class": "ui-list ui-list--inline",
-              "children": [
-                {
-                  "tag": "li",
-                  "text": "HTML"
-                },
-                {
-                  "tag": "li",
-                  "text": "CSS"
-                },
-                {
-                  "tag": "li",
-                  "text": "JavaScript"
-                },
-                {
-                  "tag": "li",
-                  "text": "TypeScript"
-                },
-                {
-                  "tag": "li",
-                  "text": "React"
-                }
-              ]
-            }
-          ],
-          "code": "<ul class=\"ui-list ui-list--inline\">\n  <li>HTML</li>\n  <li>CSS</li>\n  <li>JavaScript</li>\n</ul>"
-        }
-      ]
-    },
-    {
-      "title": "Spacing",
-      "description": "Control gap between items with compact or loose variants.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-column",
-              "style": {
-                "gap": "var(--ui-space-2)"
-              },
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "Compact"
-                },
-                {
-                  "tag": "ul",
-                  "class": "ui-list ui-list--compact",
-                  "children": [
-                    {
-                      "tag": "li",
-                      "text": "Tight spacing"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "No gap between items"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "Dense content"
-                    }
-                  ]
-                },
-                {
-                  "tag": "p",
-                  "text": "Default"
-                },
-                {
-                  "tag": "ul",
-                  "class": "ui-list",
-                  "children": [
-                    {
-                      "tag": "li",
-                      "text": "Standard spacing"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "One grid unit gap"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "Balanced readability"
-                    }
-                  ]
-                },
-                {
-                  "tag": "p",
-                  "text": "Loose"
-                },
-                {
-                  "tag": "ul",
-                  "class": "ui-list ui-list--loose",
-                  "children": [
-                    {
-                      "tag": "li",
-                      "text": "Extra breathing room"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "Two grid units gap"
-                    },
-                    {
-                      "tag": "li",
-                      "text": "Prominent separation"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<ul class=\"ui-list ui-list--compact\">...</ul>\n<ul class=\"ui-list\">...</ul>\n<ul class=\"ui-list ui-list--loose\">...</ul>"
-        }
-      ]
-    },
-    {
-      "title": "Nested",
-      "description": "Lists inside lists inherit spacing and show sub-level markers.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "ul",
-              "class": "ui-list",
-              "children": [
-                {
-                  "tag": "li",
-                  "text": "Top-level item"
-                },
-                {
-                  "tag": "li",
-                  "children": [
-                    {
-                      "tag": "span",
-                      "text": "Parent with children"
-                    },
-                    {
-                      "tag": "ul",
-                      "class": "ui-list",
-                      "children": [
-                        {
-                          "tag": "li",
-                          "text": "Nested child"
-                        },
-                        {
-                          "tag": "li",
-                          "text": "Another nested child"
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  "tag": "li",
-                  "text": "Back to top level"
-                }
-              ]
-            }
-          ],
-          "code": "<ul class=\"ui-list\">\n  <li>Top-level item</li>\n  <li>\n    Parent with children\n    <ul class=\"ui-list\">\n      <li>Nested child</li>\n    </ul>\n  </li>\n</ul>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-list-spacing",
-      "default": "var(--ui-unit)",
-      "description": "Gap between items"
-    },
-    {
-      "token": "--ui-list-marker-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Bullet or number color"
-    },
-    {
-      "token": "--ui-list-indent",
-      "default": "var(--ui-space-3)",
-      "description": "Inline-start padding for markers"
-    },
-    {
-      "token": "--ui-list-line-height",
-      "default": "var(--ui-leading-md)",
-      "description": "Item line height"
-    }
-  ]
-}

package/src/components/typography/mark/mark.docs.json

@@ -1,60 +0,0 @@
-{
-  "id": "mark",
-  "type": "component",
-  "title": "Mark",
-  "description": "Highlighted text for search results, emphasis, or annotations.",
-  "api": "./mark.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "tag": "span", "text": "The " },
-                { "tag": "mark", "class": "ui-mark", "text": "highlighted" },
-                { "tag": "span", "text": " text stands out from surrounding content." }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Search results",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "tag": "span", "text": "Results for " },
-                { "tag": "mark", "class": "ui-mark", "text": "design tokens" },
-                { "tag": "span", "text": ": CSS custom properties that store " },
-                { "tag": "mark", "class": "ui-mark", "text": "design" },
-                { "tag": "span", "text": " decisions as reusable " },
-                { "tag": "mark", "class": "ui-mark", "text": "tokens" },
-                { "tag": "span", "text": "." }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-mark-bg",
-      "default": "var(--ui-color-warning)",
-      "description": "Highlight color"
-    },
-    { "token": "--ui-mark-color", "default": "var(--ui-color-text)", "description": "Text color" },
-    {
-      "token": "--ui-mark-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Border radius"
-    }
-  ]
-}

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

@@ -1,126 +0,0 @@
-{
-  "id": "accessibility",
-  "type": "guide",
-  "title": "Accessibility",
-  "description": "Built-in accessibility features: reduced motion, system theme detection, high contrast, and keyboard focus indicators",
-  "weight": 3,
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Reduced Motion",
-      "description": "All animations and transitions respect prefers-reduced-motion. Duration tokens are set to 0ms, and component animations are disabled with animation: none.",
-      "examples": [
-        {
-          "title": "Duration tokens",
-          "code": "// Motion tokens (config/tokens/motion)\n:root {\n  --ui-duration-fast: 100ms;\n  --ui-duration-base: 150ms;\n  --ui-duration-slow: 250ms;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --ui-duration-fast: 0ms;\n    --ui-duration-base: 0ms;\n    --ui-duration-slow: 0ms;\n  }\n}"
-        },
-        {
-          "title": "Component animations",
-          "description": "Components with keyframe animations add explicit animation: none. Affected: spinner, skeleton, progress, progress-circle, toast, drawer, disclosure, button (loading), icon (spin), status (pulse).",
-          "code": "// Example: spinner\n@media (prefers-reduced-motion: reduce) {\n  .spinner {\n    animation: none;\n  }\n}"
-        }
-      ]
-    },
-    {
-      "title": "System Theme Detection",
-      "description": "Dark mode activates automatically when the OS is set to dark and no explicit data-theme attribute is present. Set data-theme to override.",
-      "examples": [
-        {
-          "title": "Automatic (default)",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "children": [
-                { "tag": "p", "text": "Follows system preference when no data-theme is set" }
-              ]
-            }
-          ],
-          "code": "<!-- Auto-detects system preference -->\n<html>\n  ...\n</html>"
-        },
-        {
-          "title": "Explicit override",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "attrs": { "data-theme": "dark" },
-              "children": [{ "tag": "p", "text": "Forced dark regardless of system preference" }]
-            }
-          ],
-          "code": "<!-- Always dark, ignores system preference -->\n<html data-theme=\"dark\">\n  ...\n</html>"
-        },
-        {
-          "title": "How it works",
-          "code": "// Explicit toggle (highest priority)\n[data-theme=\"dark\"] {\n  --ui-color-bg: var(--ui-color-neutral-900);\n  ...\n}\n\n// Auto-detect (only when no data-theme is set)\n@media (prefers-color-scheme: dark) {\n  :root:not([data-theme]) {\n    --ui-color-bg: var(--ui-color-neutral-900);\n    ...\n  }\n}"
-        }
-      ]
-    },
-    {
-      "title": "Focus Indicators",
-      "description": "All interactive elements use :focus-visible for keyboard-only focus rings. Mouse clicks do not show focus outlines.",
-      "examples": [
-        {
-          "title": "Keyboard focus",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "children": [
-                { "tag": "button", "class": "ui-button ui-button--focus", "text": "Button" },
-                {
-                  "tag": "input",
-                  "class": "ui-input ui-input--focus",
-                  "attrs": { "placeholder": "Input" }
-                },
-                {
-                  "tag": "select",
-                  "class": "ui-select ui-select--focus",
-                  "children": [{ "tag": "option", "text": "Select" }]
-                }
-              ]
-            }
-          ],
-          "code": "// :focus-visible only triggers on keyboard navigation\n.input:focus-visible {\n  border-color: var(--_border-color-focus);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}"
-        }
-      ]
-    },
-    {
-      "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.",
-      "examples": [
-        {
-          "title": "Focus ring technique",
-          "description": "Components use box-shadow for focus rings in normal mode. A transparent outline provides the visible focus indicator in forced-colors mode (where box-shadow is removed by the browser).",
-          "code": "// Normal mode: box-shadow visible, outline transparent\n.input:focus-visible {\n  outline: var(--ui-border-width-md) solid transparent;\n  outline-offset: var(--ui-border-width-sm);\n  box-shadow: 0 0 0 var(--ui-border-width-md)\n    var(--ui-color-focus);\n}\n\n// Forced colors: browser removes box-shadow,\n// transparent outline becomes system-colored\n@media (forced-colors: active) {\n  :root {\n    --ui-color-focus: Highlight;\n  }\n}"
-        },
-        {
-          "title": "Affected components",
-          "description": "All form controls (input, select, checkbox, radio, slider) and interactive components (button, link, tabs) use this pattern.",
-          "code": "// Components with forced-colors support:\n// Forms: input, select, checkbox, radio, slider\n// Actions: button, close-button\n// Navigation: tabs, breadcrumb, pagination\n// Overlays: modal, drawer, dialog"
-        }
-      ]
-    }
-  ]
-}

package/src/config/guides/getting-started.docs.json

@@ -1,106 +0,0 @@
-{
-  "id": "getting-started",
-  "type": "guide",
-  "title": "Getting Started",
-  "description": "Install, import, and start using the CSS library in your project",
-  "weight": 1,
-  "skipValidation": true,
-  "sections": [
-    {
-      "title": "Installation",
-      "description": "Install the package from npm.",
-      "examples": [
-        {
-          "title": "npm / pnpm / yarn",
-          "code": "npm install @teseor/css\n# or\npnpm add @teseor/css\n# or\nyarn add @teseor/css"
-        }
-      ]
-    },
-    {
-      "title": "Import",
-      "description": "Import the compiled CSS in your app entry point.",
-      "examples": [
-        {
-          "title": "JS / TS entry",
-          "code": "import '@teseor/css';\n// or\nimport '@teseor/css/dist/index.css';"
-        },
-        {
-          "title": "HTML link",
-          "code": "<link rel=\"stylesheet\" href=\"node_modules/@teseor/css/dist/index.css\">"
-        }
-      ]
-    },
-    {
-      "title": "Root Class",
-      "description": "Add the .ui-root class to set baseline typography and colors.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-root",
-              "children": [{ "tag": "p", "text": "Text inherits font, size, color from .ui-root" }]
-            }
-          ],
-          "code": "<html class=\"ui-root\">\n  <body>\n    <!-- All children inherit base styles -->\n  </body>\n</html>"
-        }
-      ]
-    },
-    {
-      "title": "First Component",
-      "description": "Use any component by adding its class. No JS required.",
-      "examples": [
-        {
-          "title": "Button",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-row ui-row--sm",
-              "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" }
-              ]
-            }
-          ],
-          "code": "<button class=\"ui-button\">Primary</button>\n<button class=\"ui-button ui-button--secondary\">Secondary</button>\n<button class=\"ui-button ui-button--danger\">Danger</button>"
-        },
-        {
-          "title": "Card",
-          "items": [
-            {
-              "tag": "div",
-              "class": "ui-card",
-              "children": [
-                { "tag": "h3", "class": "ui-heading ui-heading--4", "text": "Card Title" },
-                {
-                  "tag": "p",
-                  "text": "Cards use semantic tokens for padding, border, and background."
-                }
-              ]
-            }
-          ],
-          "code": "<div class=\"ui-card\">\n  <h3 class=\"ui-heading ui-heading--4\">Card Title</h3>\n  <p>Content goes here.</p>\n</div>"
-        }
-      ]
-    },
-    {
-      "title": "Customize",
-      "description": "Override design tokens with CSS custom properties. No build step required.",
-      "examples": [
-        {
-          "title": "Change brand color",
-          "items": [
-            {
-              "tag": "div",
-              "class": "theme-demo",
-              "style": { "--ui-hue-primary": "270" },
-              "children": [{ "tag": "button", "class": "ui-button", "text": "Purple brand" }]
-            }
-          ],
-          "code": ":root {\n  --ui-hue-primary: 270; /* purple */\n}"
-        }
-      ]
-    }
-  ]
-}