@teseor/css 1.14.2 → 1.15.0

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

@@ -1,154 +0,0 @@
-{
-  "id": "popover",
-  "type": "component",
-  "title": "Popover",
-  "description": "Floating panel for additional content. Larger than tooltip, can contain structured content.",
-  "api": "./popover.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "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>"
-        }
-      ]
-    },
-    {
-      "title": "With Header",
-      "examples": [
-        {
-          "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>"
-        }
-      ]
-    },
-    {
-      "title": "Positions",
-      "examples": [
-        {
-          "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": "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--visible ui-popover--animate\">...</div>\n<div class=\"ui-popover ui-popover--hidden\">...</div>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-popover-bg",
-      "default": "var(--ui-color-bg)",
-      "description": "Background color"
-    },
-    {
-      "token": "--ui-popover-border-color",
-      "default": "var(--ui-color-border)",
-      "description": "Border color"
-    },
-    {
-      "token": "--ui-popover-radius",
-      "default": "var(--ui-radius-md)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-popover-shadow",
-      "default": "0 4px 16px rgb(0 0 0 / 0.15)",
-      "description": "Box shadow"
-    },
-    {
-      "token": "--ui-popover-padding",
-      "default": "calc(var(--ui-unit) * 2)",
-      "description": "Content padding"
-    },
-    {
-      "token": "--ui-popover-max-width",
-      "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(--ui-unit)", "description": "Arrow size" }
-  ]
-}

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

@@ -1,133 +0,0 @@
-{
-  "id": "tooltip",
-  "type": "component",
-  "title": "Tooltip",
-  "description": "Small informational popup for additional context. Position via JS.",
-  "api": "./tooltip.api.json",
-  "sections": [
-    {
-      "title": "Positions",
-      "description": "Arrow indicates where tooltip is relative to trigger",
-      "api": "./tooltip.api.json",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "display: flex; gap: var(--ui-space-4); padding: var(--ui-space-4);"
-              },
-              "children": [
-                {
-                  "tag": "div",
-                  "attrs": { "style": "position: relative;" },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "class": "ui-tooltip ui-tooltip--top",
-                      "attrs": { "style": "position: relative;" },
-                      "text": "Top tooltip"
-                    }
-                  ]
-                },
-                {
-                  "tag": "div",
-                  "attrs": { "style": "position: relative;" },
-                  "children": [
-                    {
-                      "tag": "span",
-                      "class": "ui-tooltip ui-tooltip--bottom",
-                      "attrs": { "style": "position: relative;" },
-                      "text": "Bottom tooltip"
-                    }
-                  ]
-                }
-              ]
-            }
-          ],
-          "code": "<span class=\"ui-tooltip ui-tooltip--top\">Top tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--bottom\">Bottom tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--start\">Start tooltip</span>\n<span class=\"ui-tooltip ui-tooltip--end\">End tooltip</span>"
-        }
-      ]
-    },
-    {
-      "title": "With Animation",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "span",
-              "class": "ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible",
-              "attrs": { "style": "position: relative;" },
-              "text": "Animated tooltip"
-            }
-          ],
-          "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
-        }
-      ]
-    },
-    {
-      "title": "Anchor Positioned",
-      "description": "Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers.",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "div",
-              "attrs": {
-                "style": "position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);"
-              },
-              "children": [
-                {
-                  "tag": "button",
-                  "class": "ui-button",
-                  "attrs": { "style": "anchor-name: --tooltip;" },
-                  "text": "Hover me"
-                },
-                {
-                  "tag": "span",
-                  "class": "ui-tooltip ui-tooltip--anchored ui-tooltip--visible",
-                  "text": "Anchored tooltip"
-                }
-              ]
-            }
-          ],
-          "code": "<!-- Add anchor-name: --tooltip to trigger -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Hover me</button>\n<span class=\"ui-tooltip ui-tooltip--anchored ui-tooltip--visible\">\n  Anchored tooltip\n</span>\n\n<!-- Or use the helper class -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Trigger</button>"
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-tooltip-bg",
-      "default": "var(--ui-color-text)",
-      "description": "Background color"
-    },
-    { "token": "--ui-tooltip-color", "default": "var(--ui-color-bg)", "description": "Text color" },
-    {
-      "token": "--ui-tooltip-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Border radius"
-    },
-    {
-      "token": "--ui-tooltip-padding-x",
-      "default": "calc(var(--ui-unit) * 1)",
-      "description": "Horizontal padding"
-    },
-    {
-      "token": "--ui-tooltip-padding-y",
-      "default": "calc(var(--ui-unit) / 2)",
-      "description": "Vertical padding"
-    },
-    {
-      "token": "--ui-tooltip-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Font size"
-    },
-    {
-      "token": "--ui-tooltip-arrow-size",
-      "default": "calc(var(--ui-unit) / 2)",
-      "description": "Arrow size"
-    },
-    { "token": "--ui-tooltip-z", "default": "var(--ui-z-tooltip)", "description": "Z-index" }
-  ]
-}

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

@@ -1,89 +0,0 @@
-{
-  "id": "blockquote",
-  "type": "component",
-  "title": "Blockquote",
-  "description": "Quote block with left border and optional citation.",
-  "api": "./blockquote.api.json",
-  "sections": [
-    {
-      "title": "Default",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "blockquote",
-              "class": "ui-blockquote",
-              "children": [
-                {
-                  "tag": "p",
-                  "text": "Design is not just what it looks like and feels like. Design is how it works."
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "With citation",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "blockquote",
-              "class": "ui-blockquote",
-              "children": [
-                { "tag": "p", "text": "The best way to predict the future is to invent it." },
-                { "tag": "cite", "class": "ui-blockquote__cite", "text": "Alan Kay" }
-              ]
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Accent variant",
-      "examples": [
-        {
-          "items": [
-            {
-              "tag": "blockquote",
-              "class": "ui-blockquote ui-blockquote--accent",
-              "children": [
-                { "tag": "p", "text": "Simplicity is the ultimate sophistication." },
-                { "tag": "cite", "class": "ui-blockquote__cite", "text": "Leonardo da Vinci" }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-blockquote-border-color",
-      "default": "var(--ui-color-border-strong)",
-      "description": "Left border color"
-    },
-    {
-      "token": "--ui-blockquote-border-width",
-      "default": "var(--ui-border-width-lg)",
-      "description": "Left border width"
-    },
-    {
-      "token": "--ui-blockquote-padding-inline",
-      "default": "var(--ui-space-3)",
-      "description": "Inline padding"
-    },
-    {
-      "token": "--ui-blockquote-color",
-      "default": "var(--ui-color-text-muted)",
-      "description": "Text color"
-    },
-    {
-      "token": "--ui-blockquote-font-size",
-      "default": "var(--ui-font-size-lg)",
-      "description": "Font size"
-    }
-  ]
-}

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

@@ -1,104 +0,0 @@
-{
-  "id": "code",
-  "type": "component",
-  "title": "Code",
-  "description": "Inline code and code blocks with monospace font.",
-  "api": "./code.api.json",
-  "componentName": "code",
-  "sections": [
-    {
-      "title": "Inline code",
-      "examples": [
-        {
-          "title": "Default",
-          "items": [
-            {
-              "tag": "p",
-              "children": [
-                { "text": "Use the " },
-                { "tag": "code", "class": "ui-code", "text": "--space-2" },
-                { "text": " token for padding." }
-              ]
-            }
-          ]
-        },
-        {
-          "title": "Small (for tables)",
-          "items": [{ "tag": "code", "class": "ui-code ui-code--sm", "text": "--button-height" }]
-        }
-      ]
-    },
-    {
-      "title": "Code block",
-      "examples": [
-        {
-          "title": "Default",
-          "items": [
-            {
-              "tag": "pre",
-              "class": "ui-code-block",
-              "children": [
-                {
-                  "tag": "code",
-                  "text": ".button {\n  display: inline-flex;\n  align-items: center;\n}"
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ],
-  "customization": [
-    {
-      "token": "--ui-code-font-size",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Inline code font size"
-    },
-    {
-      "token": "--ui-code-bg",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Inline code background"
-    },
-    {
-      "token": "--ui-code-padding-x",
-      "default": "var(--ui-space-1)",
-      "description": "Inline code horizontal padding"
-    },
-    {
-      "token": "--ui-code-padding-y",
-      "default": "var(--ui-space-0)",
-      "description": "Inline code vertical padding"
-    },
-    {
-      "token": "--ui-code-radius",
-      "default": "var(--ui-radius-sm)",
-      "description": "Inline code border radius"
-    },
-    {
-      "token": "--ui-code-font-size-block",
-      "default": "var(--ui-font-size-sm)",
-      "description": "Code block font size"
-    },
-    {
-      "token": "--ui-code-bg-block",
-      "default": "var(--ui-color-bg-muted)",
-      "description": "Code block background"
-    },
-    {
-      "token": "--ui-code-padding-block",
-      "default": "var(--ui-space-3)",
-      "description": "Code block padding"
-    },
-    {
-      "token": "--ui-code-radius-block",
-      "default": "var(--ui-radius-md)",
-      "description": "Code block border radius"
-    },
-    {
-      "token": "--ui-code-border-color-block",
-      "default": "var(--ui-color-border)",
-      "description": "Code block border color"
-    }
-  ]
-}