{ "entries": [ { "a11y": "error tone uses role=alert; other tones use role=status; dismiss is named.", "agentEmittable": false, "dontUseWhen": ["A full-page failure (use error-state)", "A quiet tip in docs (use callout)"], "emit": [], "examples": [ { "id": "warning", "props": { "text": "Three SKUs are low.", "title": "Check inventory", "tone": "warning" }, "title": "Warning alert" } ], "group": "display", "id": "alert", "label": "Alert", "package": "texuli", "props": [ { "default": "info", "enumValues": ["info", "success", "warning", "error", "brand", "neutral"], "kind": "enum", "name": "tone" }, { "description": "Optional heading", "kind": "string", "name": "title" }, { "description": "Body copy", "kind": "string", "name": "text", "trust": "untrusted" }, { "default": false, "kind": "boolean", "name": "hideIcon" }, { "description": "Custom icon snippet", "kind": "slot", "name": "icon" }, { "kind": "string", "name": "actionLabel" }, { "description": "Optional action link (URL policy)", "kind": "string", "name": "actionHref", "trust": "developer" }, { "kind": "event", "name": "onAction" }, { "default": false, "kind": "boolean", "name": "dismissible" }, { "default": "Dismiss", "kind": "string", "name": "dismissLabel" }, { "kind": "event", "name": "onDismiss" }, { "kind": "string", "name": "class" } ], "related": ["callout", "banner", "error-state"], "summary": "Inline feedback for a page section (status or error).", "tier": "app", "useWhen": ["Report a result or problem next to the related content"] }, { "a11y": [ "Role alertdialog; focus trapped until confirm or cancel", "Destructive mode styles the confirm action and warning icon" ], "agentEmittable": false, "dontUseWhen": ["Informational copy without a choice (use dialog or toast)"], "emit": [], "examples": [ { "id": "delete", "props": { "confirmLabel": "Delete", "description": "This cannot be undone.", "destructive": true, "open": true, "title": "Delete note?" }, "title": "Destructive confirm" } ], "group": "overlays", "id": "alert-dialog", "label": "AlertDialog", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "default": "Confirm", "kind": "string", "name": "confirmLabel" }, { "default": "Cancel", "kind": "string", "name": "cancelLabel" }, { "default": false, "kind": "boolean", "name": "destructive" }, { "kind": "event", "name": "onConfirm" }, { "kind": "event", "name": "onCancel" }, { "kind": "slot", "name": "trigger" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "errorFallback" }, { "kind": "event", "name": "onOpenChange" } ], "related": ["dialog", "toaster"], "summary": "Modal confirm/cancel dialog for consequential actions.", "tier": "app", "useWhen": ["Confirm delete or irreversible actions", "Require an explicit choice"] }, { "a11y": "Optional region label names the metrics group.", "agentEmittable": false, "dontUseWhen": ["Single full-bleed chart"], "emit": [], "examples": [ { "id": "kpis", "props": { "columns": 3, "label": "Key metrics" }, "title": "Three columns" } ], "group": "layouts", "id": "analytics-grid", "label": "AnalyticsGrid", "package": "texuli", "props": [ { "default": 3, "description": "Preferred column count (1–4)", "kind": "number", "name": "columns" }, { "default": 280, "kind": "number", "name": "minItem" }, { "default": "1rem", "kind": "string", "name": "gap" }, { "default": false, "kind": "boolean", "name": "dense" }, { "kind": "string", "name": "label" }, { "kind": "slot", "name": "children", "required": true }, { "kind": "string", "name": "class" } ], "related": ["layout-dashboard-grid"], "summary": "Auto-fit KPI and widget grid for dashboard screens.", "tier": "app", "useWhen": ["KPI tiles and chart cards inside a dashboard"] }, { "a11y": "Menu button opens a labelled sheet; main has a stable id.", "agentEmittable": false, "dontUseWhen": ["Sidebar alone inside a custom shell"], "emit": [], "examples": [{ "id": "shell", "props": { "label": "Main" }, "title": "App shell" }], "group": "overlays", "id": "app-nav", "label": "AppNav", "package": "texuli", "props": [ { "kind": "array", "name": "items" }, { "kind": "array", "name": "sections" }, { "default": false, "kind": "boolean", "name": "collapsed" }, { "default": true, "kind": "boolean", "name": "collapsible" }, { "default": "default", "enumValues": ["default", "inset"], "kind": "enum", "name": "variant" }, { "kind": "slot", "name": "header" }, { "kind": "slot", "name": "footer" }, { "kind": "slot", "name": "itemIcon" }, { "kind": "slot", "name": "children" }, { "kind": "slot", "name": "topBar" }, { "default": "Main", "kind": "string", "name": "label" }, { "default": "Open navigation", "kind": "string", "name": "menuLabel" }, { "default": "Navigation", "kind": "string", "name": "drawerTitle" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust", "trust": "developer" }, { "default": false, "kind": "boolean", "name": "mobileOpen" }, { "kind": "string", "name": "class" } ], "related": ["sidebar", "sheet"], "summary": "Desktop sidebar shell with mobile sheet drawer and main slot.", "tier": "app", "useWhen": ["Full app chrome with responsive navigation"] }, { "a11y": [ "Never convey meaning by color alone; pair with a word.", "In a catalog tree, set label (or put the word in an inline-text child)." ], "agentEmittable": false, "dontUseWhen": ["A removable filter (use tag)", "A toggleable filter chip (use chip)"], "emit": [], "examples": [ { "id": "success", "props": { "variant": "success" }, "title": "Success badge" }, { "id": "labelled", "props": { "label": "Shipped", "variant": "info" }, "title": "Labelled badge" } ], "group": "display", "id": "badge", "label": "Badge", "package": "texuli", "props": [ { "default": "default", "enumValues": [ "default", "secondary", "outline", "success", "warning", "destructive", "info", "neutral" ], "kind": "enum", "name": "variant" }, { "description": "Plain-text badge word, escaped; replaces children when both are given", "kind": "string", "name": "label" }, { "kind": "string", "name": "class" }, { "description": "The badge word (an inline-text node in a tree)", "kind": "slot", "name": "children" } ], "related": ["tag", "chip", "inline-text"], "summary": "A compact status or category label.", "tier": "app", "useWhen": ["Show a short status or category next to a title"] }, { "a11y": "Same tone roles as Alert; dismiss control is optional and named.", "agentEmittable": false, "dontUseWhen": ["Inline field errors (use alert near the field)"], "emit": [], "examples": [ { "id": "brand", "props": { "dismissible": true, "text": "Invite teammates from Settings.", "title": "New workspace", "tone": "brand" }, "title": "Brand banner" } ], "group": "display", "id": "banner", "label": "Banner", "package": "texuli", "props": [ { "default": "info", "enumValues": ["info", "success", "warning", "error", "brand", "neutral"], "kind": "enum", "name": "tone" }, { "description": "Optional heading", "kind": "string", "name": "title" }, { "description": "Body copy", "kind": "string", "name": "text", "trust": "untrusted" }, { "default": false, "kind": "boolean", "name": "hideIcon" }, { "description": "Custom icon snippet", "kind": "slot", "name": "icon" }, { "kind": "string", "name": "actionLabel" }, { "description": "Optional action link (URL policy)", "kind": "string", "name": "actionHref", "trust": "developer" }, { "kind": "event", "name": "onAction" }, { "default": false, "kind": "boolean", "name": "dismissible" }, { "default": "Dismiss", "kind": "string", "name": "dismissLabel" }, { "kind": "event", "name": "onDismiss" }, { "kind": "string", "name": "class" } ], "related": ["alert", "callout"], "summary": "Full-width notice across a page or app shell.", "tier": "app", "useWhen": ["Announce a global condition (maintenance, trial)"] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "code": "n = 1", "type": "code" } }, "title": "Code blocks example" } ], "group": "content", "id": "blocks-code", "label": "Code blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" }, { "kind": "boolean", "name": "lineNumbers" }, { "kind": "array", "name": "highlights" }, { "kind": "number", "name": "hostStep" }, { "kind": "number", "name": "step" }, { "kind": "boolean", "name": "copyable" } ], "summary": "Validated, highlighted code.", "tier": "content", "useWhen": ["Render code blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "items": [{ "label": "Active", "value": "128" }], "type": "stat" } }, "title": "Data blocks example" } ], "group": "content", "id": "blocks-data", "label": "Data blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" } ], "summary": "Validated tables, statistics, key metrics and chart content blocks.", "tier": "content", "useWhen": ["Render data blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "edges": [], "nodes": [{ "id": "plan", "label": "Plan" }], "type": "flow" } }, "title": "Diagram blocks example" } ], "group": "content", "id": "blocks-diagram", "label": "Diagram blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated flow, tree, board and terminal diagrams.", "tier": "content", "useWhen": ["Render diagram blocks from structured content data."] }, { "a11y": [ "Start control is a real button; nothing loads until activation.", "Iframe title (when used) names the embedded app; host must keep keyboard access inside the frame.", "Link previews use rel=noopener noreferrer on new-window links." ], "agentEmittable": true, "dontUseWhen": [ "Application navigation, account controls or mutations.", "Running untrusted app JSON with innerHTML, eval, or an unsandboxed iframe.", "Relaxing iframe sandbox (especially adding allow-same-origin) or skipping CSP frame-src / postMessage origin checks." ], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "href": "https://example.com/guide", "title": "Product guide", "type": "link-preview" } }, "title": "Embed blocks example" } ], "group": "content", "id": "blocks-embed", "label": "Embed blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "description": "Host runtime after user Start. Prefer createSandboxedEmbedMount (sandbox without allow-same-origin, referrerpolicy=no-referrer, HTTPS allowlist). Host CSP frame-src + postMessage origin checks required; never relax sandbox or inject HTML from app data.", "kind": "event", "name": "mountEmbed" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated link previews (URL policy) and embed-app shells. Texuli never runs app JSON; hosts mount via mountEmbed with a sandboxed iframe contract.", "tier": "content", "useWhen": [ "Show a deferred mini-app shell where the host mounts after user Start.", "Show an offline link preview with HTTPS-only href (URL policy)." ] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "items": [{ "id": "a", "label": "Plan" }], "type": "checklist" } }, "title": "Interactive blocks example" } ], "group": "content", "id": "blocks-interactive", "label": "Interactive blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated polls, quizzes, calculators and checklists.", "tier": "content", "useWhen": ["Render interactive blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "label": "Depot", "points": [{ "id": "a", "label": "Depot", "lat": 0, "lng": 0 }], "type": "map" } }, "title": "Map blocks example" } ], "group": "content", "id": "blocks-map", "label": "Map blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "kind": "string", "name": "locale" }, { "kind": "number", "name": "headingLevel" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated map points and routes.", "tier": "content", "useWhen": ["Render map blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "alt": "A team planning together", "height": 540, "src": "images/team.webp", "type": "image", "width": 960 } }, "title": "Media blocks example" } ], "group": "content", "id": "blocks-media", "label": "Media blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "resolveAvatar" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated image, figure, video and gallery content blocks.", "tier": "content", "useWhen": ["Render media blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "actions": [{ "href": "https://example.com", "label": "Docs" }], "type": "cta" } }, "title": "Structure blocks example" } ], "group": "content", "id": "blocks-structure", "label": "Structure blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated layouts and calls to action.", "tier": "content", "useWhen": ["Render structure blocks from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "block": { "level": 2, "text": "Quarterly update", "type": "heading" } }, "title": "Text blocks example" } ], "group": "content", "id": "blocks-text", "label": "Text blocks", "package": "@texuli/blocks", "props": [ { "description": "Untrusted block data validated by the component before rendering.", "kind": "object", "name": "block", "required": true, "trust": "untrusted" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "oninvalid" } ], "summary": "Validated heading, paragraph, list, quote and callout content.", "tier": "content", "useWhen": ["Render text blocks from structured content data."] }, { "a11y": "nav landmark; current page is not a link.", "agentEmittable": false, "dontUseWhen": ["Primary navigation (use navigation-menu or sidebar)"], "emit": [], "examples": [ { "id": "trail", "props": { "items": [ { "href": "https://example.com", "label": "Workspace" }, { "href": "https://example.com/notes", "label": "Notes" }, { "label": "Harbor" } ] }, "title": "Trail" } ], "group": "overlays", "id": "breadcrumb", "label": "Breadcrumb", "package": "texuli", "props": [ { "description": "BreadcrumbItem[]", "kind": "array", "name": "items", "required": true }, { "default": "Breadcrumb", "kind": "string", "name": "label" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "Separator", "kind": "string", "name": "separatorLabel" }, { "kind": "slot", "name": "separator" }, { "default": 0, "kind": "number", "name": "maxItems" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust", "trust": "developer" }, { "kind": "string", "name": "class" } ], "related": ["navigation-menu", "pagination"], "summary": "Hierarchy trail with URL-policy links.", "tier": "app", "useWhen": ["Show location in a hierarchy"] }, { "a11y": [ "Real button or link element with an accessible name", "Busy state exposes aria-busy and disables further activation", "Rejected href schemes render as a non-interactive control" ], "agentEmittable": false, "dontUseWhen": [ "An icon-only control (use icon-button)", "A toggleable filter chip (use chip)", "Navigation that is not an action (use a link or nav item)" ], "emit": [], "examples": [ { "id": "default", "props": { "variant": "default" }, "title": "Default button" }, { "id": "loading", "props": { "loading": true, "loadingLabel": "Saving" }, "title": "Loading button" }, { "id": "labelled", "props": { "label": "Save changes", "type": "submit" }, "title": "Labelled submit button" } ], "group": "forms", "id": "button", "label": "Button", "package": "texuli", "props": [ { "default": "default", "enumValues": ["default", "secondary", "outline", "ghost", "destructive", "link"], "kind": "enum", "name": "variant" }, { "default": "md", "enumValues": ["sm", "md", "lg", "icon"], "kind": "enum", "name": "size" }, { "description": "Optional link target (URL policy)", "kind": "string", "name": "href", "trust": "developer" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust" }, { "default": "button", "enumValues": ["button", "submit", "reset"], "kind": "enum", "name": "type" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "loading" }, { "description": "Accessible name while loading", "kind": "string", "name": "loadingLabel" }, { "default": true, "description": "Show pending when onclick returns a promise", "kind": "boolean", "name": "autoLoading" }, { "description": "Plain-text label, escaped; replaces children when both are given", "kind": "string", "name": "label" }, { "description": "Activated handler; may return a promise", "kind": "event", "name": "onclick" }, { "kind": "string", "name": "class" }, { "description": "The visible label (an inline-text node in a tree)", "kind": "slot", "name": "children" } ], "related": ["icon-button", "button-group", "form", "inline-text"], "summary": "A pressable action control with loading and optional link rendering.", "tier": "app", "useWhen": ["Primary and secondary actions", "Submit and reset controls in forms"] }, { "a11y": "role=group with an optional accessible label.", "agentEmittable": false, "dontUseWhen": ["Unrelated actions across a toolbar (use a plain flex row)"], "emit": [], "examples": [ { "id": "attached", "props": { "attached": true, "label": "View mode", "orientation": "horizontal" }, "title": "Attached horizontal group" } ], "group": "forms", "id": "button-group", "label": "ButtonGroup", "package": "texuli", "props": [ { "default": "horizontal", "enumValues": ["horizontal", "vertical"], "kind": "enum", "name": "orientation" }, { "default": true, "description": "Share borders between buttons", "kind": "boolean", "name": "attached" }, { "description": "Accessible name for the group", "kind": "string", "name": "label" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["button", "icon-button"], "summary": "Groups related buttons with shared borders and orientation.", "tier": "app", "useWhen": ["Cluster related actions that share a single decision"] }, { "a11y": "Same tone roles as Alert; never color-only meaning.", "agentEmittable": false, "dontUseWhen": [ "A blocking error (use alert with error tone)", "A site-wide notice (use banner)" ], "emit": [], "examples": [ { "id": "info-tip", "props": { "text": "Export works offline in this prototype.", "title": "Tip", "tone": "info" }, "title": "Info callout" } ], "group": "display", "id": "callout", "label": "Callout", "package": "texuli", "props": [ { "default": "info", "enumValues": ["info", "success", "warning", "error", "brand", "neutral"], "kind": "enum", "name": "tone" }, { "description": "Optional heading", "kind": "string", "name": "title" }, { "description": "Body copy", "kind": "string", "name": "text", "trust": "untrusted" }, { "default": false, "kind": "boolean", "name": "hideIcon" }, { "description": "Custom icon snippet", "kind": "slot", "name": "icon" }, { "kind": "string", "name": "actionLabel" }, { "description": "Optional action link (URL policy)", "kind": "string", "name": "actionHref", "trust": "developer" }, { "kind": "event", "name": "onAction" }, { "default": false, "kind": "boolean", "name": "dismissible" }, { "default": "Dismiss", "kind": "string", "name": "dismissLabel" }, { "kind": "event", "name": "onDismiss" }, { "kind": "string", "name": "class" } ], "related": ["alert", "banner"], "summary": "Emphasized documentation-style tip with a strong start edge.", "tier": "app", "useWhen": ["Highlight a tip or note beside prose"] }, { "a11y": [ "When href is set, the card is a real link with an accessible name", "Rejected href schemes render as a non-interactive surface" ], "agentEmittable": false, "dontUseWhen": [ "A single line of chrome (use badge or button)", "A data grid of many rows (use table)" ], "emit": [], "examples": [ { "id": "elevated", "props": { "variant": "elevated" }, "title": "Elevated card" }, { "id": "linked", "props": { "href": "https://example.com/docs", "linkLabel": "Open documentation", "variant": "flat" }, "title": "Linked card" } ], "group": "display", "id": "card", "label": "Card", "package": "texuli", "props": [ { "default": "elevated", "description": "Visual elevation", "enumValues": ["elevated", "flat"], "kind": "enum", "name": "variant" }, { "description": "Optional link target (URL policy)", "kind": "string", "name": "href", "trust": "developer" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust" }, { "description": "Accessible name when the card is a link", "kind": "string", "name": "linkLabel" }, { "description": "Extra classes", "kind": "string", "name": "class" } ], "related": ["button", "stat"], "summary": "A surface for grouping related content with optional link behavior.", "tier": "app", "useWhen": ["Group related content in a bordered surface", "Make a whole tile a single link"] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Activity by week", "series": [], "title": "Weekly activity" }, "title": "Area chart example" } ], "group": "content", "id": "charts-area", "label": "Area chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "A categorical area chart with an accessible data table.", "tier": "content", "useWhen": ["Render area chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Activity by week", "series": [], "title": "Weekly activity" }, "title": "Bar chart example" } ], "group": "content", "id": "charts-bar", "label": "Bar chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "A categorical bar chart with a zero baseline and accessible data table.", "tier": "content", "useWhen": ["Render bar chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Usage compared with reach", "points": [], "title": "Usage and reach" }, "title": "Bubble chart example" } ], "group": "content", "id": "charts-bubble", "label": "Bubble chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "points", "required": true }, { "kind": "array", "name": "series" }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "class" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "string", "name": "annotations" } ], "summary": "A scatter plot where point size can encode another measure.", "tier": "content", "useWhen": ["Render bubble chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "label": "Release progress", "max": 100, "target": 75, "value": 68 }, "title": "Bullet chart example" } ], "group": "content", "id": "charts-bullet", "label": "Bullet chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "label", "required": true }, { "kind": "string", "name": "description" }, { "kind": "number", "name": "value", "required": true }, { "kind": "number", "name": "max" }, { "kind": "number", "name": "target" }, { "kind": "array", "name": "ranges" }, { "kind": "object", "name": "format" }, { "kind": "object", "name": "labels" } ], "summary": "A compact value, range and target comparison.", "tier": "content", "useWhen": ["Render bullet chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "height": 320, "kind": "line", "series": [], "width": 640 }, "title": "Canvas chart renderer example" } ], "group": "content", "id": "charts-canvas-renderer", "label": "Canvas chart renderer", "package": "@texuli/charts", "props": [ { "enumValues": ["line", "area", "bar", "stacked-bar", "combo"], "kind": "enum", "name": "kind", "required": true }, { "kind": "array", "name": "series", "required": true }, { "kind": "number", "name": "width", "required": true }, { "kind": "number", "name": "height", "required": true } ], "summary": "A low-level canvas mark renderer for dense chart series.", "tier": "content", "useWhen": ["Render canvas chart renderer from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Activity by week", "kind": "line", "series": [], "title": "Weekly activity" }, "title": "Cartesian chart example" } ], "group": "content", "id": "charts-cartesian", "label": "Cartesian chart", "package": "@texuli/charts", "props": [ { "enumValues": ["line", "area", "bar", "stacked-bar", "combo"], "kind": "enum", "name": "kind", "required": true }, { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "kind": "string", "name": "class" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "The general line, area, bar, stacked bar or combo chart renderer.", "tier": "content", "useWhen": ["Render cartesian chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Revenue and orders by month", "series": [], "title": "Revenue and orders" }, "title": "Combo chart example" } ], "group": "content", "id": "charts-combo", "label": "Combo chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "A categorical chart that combines bar and line series.", "tier": "content", "useWhen": ["Render combo chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "data": [], "description": "Ticket distribution", "labels": {}, "title": "Tickets by status" }, "title": "Donut chart example" } ], "group": "content", "id": "charts-donut", "label": "Donut chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "data", "required": true }, { "kind": "object", "name": "labels", "required": true }, { "kind": "number", "name": "size" }, { "kind": "string", "name": "innerRatio" }, { "kind": "string", "name": "padAngle" } ], "summary": "A part-to-whole chart with a central opening and data table.", "tier": "content", "useWhen": ["Render donut chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "steps": [{ "id": "visit", "label": "Visits", "value": 800 }], "title": "Signup conversion" }, "title": "Funnel chart example" } ], "group": "content", "id": "charts-funnel", "label": "Funnel chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "kind": "array", "name": "steps", "required": true }, { "enumValues": ["vertical", "horizontal"], "kind": "enum", "name": "orientation" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "object", "name": "labels" }, { "kind": "string", "name": "class" } ], "summary": "A conversion funnel with step values and accessible table.", "tier": "content", "useWhen": ["Render funnel chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "label": "Service health", "max": 100, "min": 0, "value": 92 }, "title": "Gauge chart example" } ], "group": "content", "id": "charts-gauge", "label": "Gauge chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "label", "required": true }, { "kind": "string", "name": "description" }, { "kind": "number", "name": "value", "required": true }, { "kind": "number", "name": "min" }, { "kind": "number", "name": "max" }, { "kind": "array", "name": "thresholds" }, { "kind": "array", "name": "bandLabels" }, { "kind": "object", "name": "format" }, { "kind": "number", "name": "size" }, { "kind": "number", "name": "thickness" }, { "kind": "object", "name": "labels" } ], "summary": "A radial value gauge with thresholds and an accessible data table.", "tier": "content", "useWhen": ["Render gauge chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "data": {}, "description": "Regional order totals", "title": "Orders by region" }, "title": "Geographic map example" } ], "group": "content", "id": "charts-geo-map", "label": "Geographic map", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "object", "name": "data", "required": true }, { "kind": "array", "name": "shape" }, { "kind": "object", "name": "labels" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" } ], "summary": "A tiled geographic choropleth with a tabular data alternative.", "tier": "content", "useWhen": ["Render geographic map from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Sample locations", "points": [], "title": "Locations" }, "title": "Geographic point map example" } ], "group": "content", "id": "charts-geo-point-map", "label": "Geographic point map", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "points", "required": true }, { "kind": "array", "name": "shape" }, { "kind": "object", "name": "labels" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" } ], "summary": "Geographic points positioned on a tiled map.", "tier": "content", "useWhen": ["Render geographic point map from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "cells": [], "description": "Volume by day and hour", "title": "Weekly volume" }, "title": "Heatmap example" } ], "group": "content", "id": "charts-heatmap", "label": "Heatmap", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "cells", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "class" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "string", "name": "annotations" } ], "summary": "A matrix of labeled cells with an accessible data table.", "tier": "content", "useWhen": ["Render heatmap from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Activity by week", "series": [], "title": "Weekly activity" }, "title": "Line chart example" } ], "group": "content", "id": "charts-line", "label": "Line chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "A categorical line chart with accessible values.", "tier": "content", "useWhen": ["Render line chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "links": [], "nodes": [], "title": "Team dependencies" }, "title": "Network graph example" } ], "group": "content", "id": "charts-network", "label": "Network graph", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "kind": "array", "name": "nodes", "required": true }, { "kind": "array", "name": "links", "required": true }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "object", "name": "labels" }, { "kind": "string", "name": "class" } ], "summary": "A node and connection graph with an accessible table.", "tier": "content", "useWhen": ["Render network graph from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "data": [], "description": "Ticket distribution", "labels": {}, "title": "Tickets by status" }, "title": "Pie chart example" } ], "group": "content", "id": "charts-pie", "label": "Pie chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "data", "required": true }, { "kind": "object", "name": "labels", "required": true }, { "kind": "number", "name": "size" }, { "kind": "string", "name": "innerRatio" }, { "kind": "string", "name": "padAngle" } ], "summary": "A part-to-whole chart with an accessible data table.", "tier": "content", "useWhen": ["Render pie chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "label": "Tasks complete", "max": 10, "value": 8 }, "title": "Progress ring example" } ], "group": "content", "id": "charts-progress-ring", "label": "Progress ring", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "label", "required": true }, { "kind": "string", "name": "description" }, { "kind": "number", "name": "value", "required": true }, { "kind": "number", "name": "max" }, { "kind": "object", "name": "format" }, { "kind": "number", "name": "size" }, { "kind": "number", "name": "thickness" }, { "kind": "object", "name": "labels" } ], "summary": "A compact radial progress indicator with a data table.", "tier": "content", "useWhen": ["Render progress ring from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "links": [], "nodes": [], "title": "Traffic sources" }, "title": "Sankey chart example" } ], "group": "content", "id": "charts-sankey", "label": "Sankey chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "kind": "array", "name": "nodes", "required": true }, { "kind": "array", "name": "links", "required": true }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "object", "name": "labels" }, { "kind": "string", "name": "class" } ], "summary": "A weighted flow diagram with an accessible table.", "tier": "content", "useWhen": ["Render sankey chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Usage compared with reach", "points": [], "title": "Usage and reach" }, "title": "Scatter chart example" } ], "group": "content", "id": "charts-scatter", "label": "Scatter chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "points", "required": true }, { "kind": "array", "name": "series" }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "class" }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "string", "name": "annotations" } ], "summary": "A quantitative scatter plot with an accessible data table.", "tier": "content", "useWhen": ["Render scatter chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "label": "Daily active users", "values": [18, 21, 19, 26] }, "title": "Sparkline example" } ], "group": "content", "id": "charts-sparkline", "label": "Sparkline", "package": "@texuli/charts", "props": [ { "kind": "array", "name": "values", "required": true }, { "kind": "string", "name": "label", "required": true }, { "kind": "string", "name": "description" }, { "kind": "string", "name": "period" }, { "enumValues": ["line", "area", "bar"], "kind": "enum", "name": "variant" }, { "kind": "object", "name": "format" }, { "kind": "number", "name": "height" }, { "kind": "boolean", "name": "showLast" }, { "kind": "object", "name": "labels" } ], "summary": "A compact line, area or bar trend chart.", "tier": "content", "useWhen": ["Render sparkline from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Activity by week", "series": [], "title": "Weekly activity" }, "title": "Stacked bar chart example" } ], "group": "content", "id": "charts-stacked-bar", "label": "Stacked bar chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "array", "name": "series", "required": true }, { "enumValues": ["light", "dark"], "kind": "enum", "name": "mode" }, { "enumValues": ["svg", "canvas", "auto"], "kind": "enum", "name": "renderer" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "interactive" }, { "kind": "string", "name": "fullDomain" }, { "kind": "string", "name": "visibleDomain" }, { "kind": "string", "name": "annotations" } ], "summary": "A categorical stacked bar chart with accessible values.", "tier": "content", "useWhen": ["Render stacked bar chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Revenue by product group", "labels": {}, "root": { "id": "root", "value": 0 }, "title": "Revenue structure" }, "title": "Sunburst chart example" } ], "group": "content", "id": "charts-sunburst", "label": "Sunburst chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "object", "name": "root", "required": true }, { "kind": "object", "name": "labels", "required": true }, { "kind": "number", "name": "size" }, { "kind": "string", "name": "innerRatio" }, { "kind": "string", "name": "padAngle" } ], "summary": "A hierarchical part-to-whole chart with an accessible table.", "tier": "content", "useWhen": ["Render sunburst chart from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Revenue by product group", "labels": {}, "root": { "id": "root", "value": 0 }, "title": "Revenue structure" }, "title": "Treemap chart example" } ], "group": "content", "id": "charts-treemap", "label": "Treemap chart", "package": "@texuli/charts", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description", "required": true }, { "kind": "object", "name": "root", "required": true }, { "kind": "object", "name": "labels", "required": true }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "kind": "number", "name": "padding" } ], "summary": "A hierarchical part-to-whole chart with an accessible table.", "tier": "content", "useWhen": ["Render treemap chart from structured content data."] }, { "a11y": "Visible label is wired with for; description uses aria-describedby.", "agentEmittable": false, "dontUseWhen": [ "A single exclusive choice in a set (use radio-group)", "A switch-style setting (use switch)" ], "emit": [], "examples": [ { "id": "labeled", "props": { "label": "Subscribe to updates" }, "title": "Labeled checkbox" }, { "id": "indeterminate", "props": { "indeterminate": true, "label": "Select all" }, "title": "Indeterminate" } ], "group": "forms", "id": "checkbox", "label": "Checkbox", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "checked" }, { "default": false, "kind": "boolean", "name": "defaultChecked" }, { "default": false, "kind": "boolean", "name": "indeterminate" }, { "default": false, "kind": "boolean", "name": "defaultIndeterminate" }, { "kind": "string", "name": "name" }, { "default": "on", "kind": "string", "name": "value" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "required" }, { "kind": "string", "name": "id" }, { "kind": "string", "name": "label" }, { "kind": "string", "name": "description" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "kind": "event", "name": "onCheckedChange" }, { "kind": "event", "name": "onIndeterminateChange" }, { "kind": "string", "name": "class" } ], "related": ["switch", "radio-group"], "summary": "A binary or indeterminate checkbox with optional label.", "tier": "app", "useWhen": ["Independent on/off choices", "Select-all with indeterminate"] }, { "a11y": "Uses aria-pressed for selection; must be a real button.", "agentEmittable": false, "dontUseWhen": ["Navigation (use a link)", "A one-shot action (use button)"], "emit": [], "examples": [ { "id": "selected", "props": { "label": "Active", "selected": true }, "title": "Selected chip" } ], "group": "display", "id": "chip", "label": "Chip", "package": "texuli", "props": [ { "kind": "string", "name": "label", "required": true }, { "default": "outline", "enumValues": [ "default", "secondary", "outline", "success", "warning", "destructive", "info", "neutral" ], "kind": "enum", "name": "variant" }, { "default": false, "kind": "boolean", "name": "selected" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": "button", "enumValues": ["button", "submit", "reset"], "kind": "enum", "name": "type" }, { "kind": "string", "name": "class" } ], "related": ["badge", "tag", "button"], "summary": "A toggleable filter chip (pressed state).", "tier": "app", "useWhen": ["Filter toggles in a toolbar or facet list"] }, { "a11y": "Text is always escaped; language is display-only metadata.", "agentEmittable": false, "dontUseWhen": ["A full syntax-highlighted editor"], "emit": [], "examples": [ { "id": "block-ts", "props": { "language": "ts", "value": "const n = 1;", "variant": "block" }, "title": "TypeScript block" } ], "group": "display", "id": "code", "label": "Code", "package": "texuli", "props": [ { "description": "Plain source (preferred for agent/user content)", "kind": "string", "name": "value", "trust": "untrusted" }, { "default": "inline", "enumValues": ["inline", "block"], "kind": "enum", "name": "variant" }, { "description": "Optional language hint", "kind": "string", "name": "language" }, { "kind": "string", "name": "class" } ], "related": ["kbd"], "summary": "Inline or block code with escaped text (no HTML).", "tier": "app", "useWhen": ["Show a short code sample or token"] }, { "a11y": [ "The input keeps focus; aria-activedescendant tracks the highlighted option", "Arrow keys move, Enter selects, Escape closes; empty, loading and error states are announced", "With required, a rejected form moves focus to the input" ], "agentEmittable": false, "dontUseWhen": [ "A short closed list (use select or radio-group)", "Several values shown as chips (use multi-select)" ], "emit": [], "examples": [ { "id": "form-field", "props": { "name": "city", "required": true, "requiredMessage": "Choose a city.", "size": "md" }, "title": "Required form field" } ], "group": "forms", "id": "combobox", "label": "Combobox", "package": "texuli", "props": [ { "description": "Selected value (a string, or a string array when multiple)", "kind": "unknown", "name": "value" }, { "description": "Starting selection; a form reset restores it", "kind": "unknown", "name": "defaultValue" }, { "description": "Text in the input (bindable)", "kind": "string", "name": "inputValue" }, { "default": "", "kind": "string", "name": "defaultInputValue" }, { "description": "Options as { value, label, disabled? }", "kind": "array", "name": "items" }, { "description": "Function prop the host passes: (query, signal) => Promise for remote options. Not agent-emittable (functions are not data).", "kind": "unknown", "name": "loadOptions" }, { "description": "Function prop the host passes: (item, query) => boolean. Replaces the default match (label contains the query, ignoring case); runs on the trimmed, non-empty query; unused with loadOptions. createFoldedFilter builds an accent-insensitive one. Not agent-emittable (functions are not data).", "kind": "unknown", "name": "filter" }, { "default": false, "kind": "boolean", "name": "multiple" }, { "default": false, "description": "Not interactive, not submitted, not validated", "kind": "boolean", "name": "disabled" }, { "description": "Form field name: submits the value (one entry per value when multiple)", "kind": "string", "name": "name" }, { "default": false, "description": "Blocks form submission until a value is selected", "kind": "boolean", "name": "required" }, { "description": "Translated message when required blocks submission (default: the browser message)", "kind": "string", "name": "requiredMessage" }, { "description": "Associated form id", "kind": "string", "name": "form" }, { "default": false, "kind": "boolean", "name": "open" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "outline", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "event", "name": "onValueChange" }, { "kind": "event", "name": "onInputValueChange" }, { "kind": "event", "name": "onOpenChange" }, { "kind": "slot", "name": "children" } ], "related": ["multi-select", "select", "field", "form"], "summary": "A text input that filters a list of options, for one value or several.", "tier": "app", "useWhen": [ "Pick from a long list by typing to filter", "Options loaded from a server as the user types" ] }, { "a11y": "Dialog title/description; listbox keyboard for results.", "agentEmittable": false, "dontUseWhen": ["Simple select lists (use select or combobox)"], "emit": [], "examples": [ { "id": "palette", "props": { "open": true, "placeholder": "Search…", "title": "Command palette" }, "title": "Open palette" } ], "group": "overlays", "id": "command-palette", "label": "CommandPalette", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "event", "name": "onOpenChange" }, { "description": "Sync or async search function", "kind": "unknown", "name": "search" }, { "kind": "event", "name": "onSelect" }, { "kind": "array", "name": "recentItems" }, { "kind": "number", "name": "debounceMs" }, { "kind": "string", "name": "placeholder" }, { "default": true, "kind": "boolean", "name": "shortcut" }, { "kind": "string", "name": "recentLabel" }, { "kind": "string", "name": "title" }, { "kind": "string", "name": "description" }, { "kind": "string", "name": "emptyLabel" }, { "kind": "string", "name": "recentEmptyLabel" }, { "kind": "string", "name": "loadingLabel" }, { "kind": "string", "name": "errorLabel" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "default", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" } ], "related": ["dialog", "dropdown-menu"], "summary": "Dialog-hosted command palette with search and recent items.", "tier": "app", "useWhen": ["App-wide jump-to and actions (⌘K)"] }, { "a11y": ["Main landmark holds the article", "TOC links are in-page anchors"], "agentEmittable": false, "dontUseWhen": ["App chrome shells"], "emit": [], "examples": [ { "id": "docs", "props": { "kind": "docs", "options": { "title": "Guides" } }, "title": "Docs" } ], "group": "layouts", "id": "content-layout", "label": "ContentLayout", "package": "texuli", "props": [ { "enumValues": ["docs", "blog", "editorial"], "kind": "enum", "name": "kind", "required": true }, { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" } ], "related": ["layout-docs", "layout-blog"], "summary": "Shared docs/blog/editorial reading frame with optional TOC.", "tier": "app", "useWhen": ["Long-form content with a table of contents"] }, { "a11y": "Opens at the pointer; keyboard Menu/Shift+F10 supported on the region.", "agentEmittable": false, "dontUseWhen": ["A visible button trigger (use dropdown-menu)"], "emit": [], "examples": [{ "id": "region", "props": {}, "title": "Context region" }], "group": "overlays", "id": "context-menu", "label": "ContextMenu", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["dropdown-menu", "context-menu-trigger"], "summary": "Pointer-anchored menu (right-click, long-press, Menu key).", "tier": "app", "useWhen": ["Actions on a canvas or list row via context click"] }, { "a11y": "Region text names the menu; long-press suppresses iOS callout.", "agentEmittable": false, "dontUseWhen": ["Button menus"], "emit": [], "examples": [{ "id": "canvas", "props": {}, "title": "Canvas region" }], "group": "overlays", "id": "context-menu-trigger", "label": "ContextMenu.Trigger", "package": "texuli", "props": [ { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "default": false, "kind": "boolean", "name": "disabled" } ], "related": ["context-menu"], "summary": "Region that opens the context menu.", "tier": "app", "useWhen": ["Define the hit target for a context menu"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "slideId": "opening", "title": "Opening" }, "title": "Deck slide" } ], "group": "layouts", "id": "deck-slide", "label": "Deck slide", "package": "texuli", "props": [ { "description": "Stable slide id (lowercase letters, digits and hyphens)", "kind": "string", "name": "slideId", "required": true }, { "kind": "string", "name": "title", "trust": "untrusted" }, { "description": "Plain-text speaker notes", "kind": "string", "name": "notes", "trust": "untrusted" }, { "enumValues": [ "title", "section", "content", "two-column", "media-left", "media-right", "quote", "closing" ], "kind": "enum", "name": "master" }, { "enumValues": ["none", "fade", "fade-up"], "kind": "enum", "name": "transition" }, { "description": "Overrides the deck theme for this slide", "kind": "unknown", "name": "themeRef" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-page", "layout-doc", "layout-grid"], "summary": "One slide in a deck: a title, content blocks and speaker notes.", "tier": "content", "useWhen": ["Compose deck slide structure in agent-authored trees"] }, { "a11y": "Wire via aria-describedby from Field or the host.", "agentEmittable": false, "dontUseWhen": ["An error message (use field-error)"], "emit": [], "examples": [{ "id": "help", "props": {}, "title": "Help text" }], "group": "forms", "id": "description", "label": "Description", "package": "texuli", "props": [{ "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }], "related": ["field", "label", "field-error"], "summary": "Help text associated with a field control.", "tier": "app", "useWhen": ["Short guidance under a label"] }, { "a11y": "Keep a visible heading; do not trap focus unless modal.", "agentEmittable": false, "dontUseWhen": ["Full-page blocking flows (use dialog)"], "emit": [], "examples": [{ "id": "end", "props": { "side": "end" }, "title": "End panel" }], "group": "overlays", "id": "detail-panel", "label": "DetailPanel", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg", "xl"], "kind": "enum", "name": "size" }, { "default": "end", "enumValues": ["top", "right", "bottom", "left", "start", "end", "center"], "kind": "enum", "name": "side" }, { "default": false, "description": "Non-modal only: close on a press or focus outside (never on the trigger)", "kind": "boolean", "name": "dismissOutside" }, { "default": false, "description": "Non-modal only: close on Escape anywhere, not just from inside", "kind": "boolean", "name": "closeOnEscape" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["sheet", "drawer"], "summary": "Non-modal detail panel alongside content.", "tier": "app", "useWhen": ["Inspect a selected row without leaving the list"] }, { "a11y": [ "Focus moves into the dialog and returns on close", "Title is required; Escape dismisses unless prevented" ], "agentEmittable": false, "dontUseWhen": [ "A destructive confirm that must trap attention (use alert-dialog)", "Non-modal hints (use popover or tooltip)" ], "emit": [], "examples": [ { "id": "basic", "props": { "description": "Harbor Notes settings", "open": true, "title": "Edit note" }, "title": "Basic dialog" } ], "group": "overlays", "id": "dialog", "label": "Dialog", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "description": "Accessible dialog title", "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "default": "md", "enumValues": ["sm", "md", "lg", "xl"], "kind": "enum", "name": "size" }, { "description": "Trigger snippet receiving { props }", "kind": "slot", "name": "trigger" }, { "kind": "slot", "name": "footer" }, { "kind": "slot", "name": "children" }, { "default": false, "kind": "boolean", "name": "hideClose" }, { "default": "Close", "kind": "string", "name": "closeLabel" }, { "kind": "event", "name": "onOpenChange" }, { "kind": "string", "name": "class" } ], "related": ["alert-dialog", "sheet"], "summary": "Modal dialog with title, optional description, body and footer.", "tier": "app", "useWhen": ["Confirm multi-step flows", "Show focused detail without leaving the page"] }, { "a11y": "Same focus model as sheet; prefer labelled titles.", "agentEmittable": false, "dontUseWhen": ["Desktop side navigation (use sidebar)"], "emit": [], "examples": [{ "id": "bottom", "props": { "side": "bottom" }, "title": "Bottom drawer" }], "group": "overlays", "id": "drawer", "label": "Drawer", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg", "xl"], "kind": "enum", "name": "size" }, { "default": "bottom", "enumValues": ["top", "right", "bottom", "left", "start", "end", "center"], "kind": "enum", "name": "side" }, { "default": false, "description": "Non-modal panels only; a Drawer is modal and always dismisses outside", "kind": "boolean", "name": "dismissOutside" }, { "default": false, "description": "Non-modal panels only; a Drawer is modal and always closes on Escape", "kind": "boolean", "name": "closeOnEscape" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["sheet", "responsive-modal"], "summary": "Bottom or edge drawer with optional drag dismiss.", "tier": "app", "useWhen": ["Mobile sheets that feel like drawers"] }, { "a11y": "APG menu button: arrow keys, typeahead, Escape closes and restores focus.", "agentEmittable": false, "dontUseWhen": [ "Top-level app menus (use menubar)", "Pointer-anchored region menus (use context-menu)" ], "emit": [], "examples": [{ "id": "actions", "props": { "open": true }, "title": "Actions menu" }], "group": "overlays", "id": "dropdown-menu", "label": "DropdownMenu", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["context-menu", "menubar", "dropdown-menu-item"], "summary": "Menu button pattern with items, checkboxes, radios and submenus.", "tier": "app", "useWhen": ["Actions behind a button trigger", "Menus with keyboard typeahead"] }, { "a11y": "role=menu; labelled by the trigger.", "agentEmittable": false, "dontUseWhen": ["Non-menu floating panels (use popover)"], "emit": [], "examples": [{ "id": "panel", "props": { "size": "md" }, "title": "Content" }], "group": "overlays", "id": "dropdown-menu-content", "label": "DropdownMenu.Content", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "default", "enumValues": ["default", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "default": "bottom", "enumValues": ["top", "right", "bottom", "left"], "kind": "enum", "name": "side" }, { "default": "start", "enumValues": ["start", "center", "end"], "kind": "enum", "name": "align" }, { "default": 4, "kind": "number", "name": "sideOffset" } ], "related": ["dropdown-menu", "dropdown-menu-item"], "summary": "Floating menu surface for dropdown items.", "tier": "app", "useWhen": ["Host menu items under a dropdown trigger"] }, { "a11y": "role=menuitem; shortcuts are visual only.", "agentEmittable": false, "dontUseWhen": ["Standalone buttons outside a menu"], "emit": [], "examples": [ { "id": "with-shortcut", "props": { "shortcut": "⌘N" }, "title": "Item with shortcut" } ], "group": "overlays", "id": "dropdown-menu-item", "label": "DropdownMenu.Item", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "disabled" }, { "description": "Typeahead text override", "kind": "string", "name": "textValue" }, { "kind": "event", "name": "onSelect" }, { "default": true, "kind": "boolean", "name": "closeOnSelect" }, { "kind": "slot", "name": "icon" }, { "description": "Displayed keyboard hint", "kind": "string", "name": "shortcut" }, { "default": false, "kind": "boolean", "name": "inset" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["dropdown-menu", "context-menu"], "summary": "Menu item with optional icon and shortcut chrome.", "tier": "app", "useWhen": ["A single actionable row inside a menu"] }, { "a11y": "aria-haspopup=menu and aria-expanded track open state.", "agentEmittable": false, "dontUseWhen": ["Context or menubar triggers"], "emit": [], "examples": [{ "id": "default", "props": { "variant": "default" }, "title": "Trigger" }], "group": "overlays", "id": "dropdown-menu-trigger", "label": "DropdownMenu.Trigger", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "default", "enumValues": ["default", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["dropdown-menu"], "summary": "Styled button that opens a dropdown menu.", "tier": "app", "useWhen": ["Label the control that opens DropdownMenu"] }, { "a11y": "Title is required text; illustration is decorative (aria-hidden).", "agentEmittable": false, "dontUseWhen": ["A failure after a request (use error-state)"], "emit": [], "examples": [ { "id": "no-orders", "props": { "description": "Create an order to get started.", "size": "md", "title": "No orders yet" }, "title": "No orders" } ], "group": "display", "id": "empty-state", "label": "Empty state", "package": "texuli", "props": [ { "kind": "string", "name": "title", "required": true }, { "kind": "string", "name": "description" }, { "kind": "slot", "name": "illustration" }, { "kind": "slot", "name": "action" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "kind": "string", "name": "class" } ], "related": ["error-state", "table"], "summary": "Placeholder when a list or panel has nothing to show yet.", "tier": "app", "useWhen": ["First-run or filtered-empty lists"] }, { "a11y": "Uses role=alert; retry is a real button with pending support.", "agentEmittable": false, "dontUseWhen": ["A soft warning inline (use alert)"], "emit": [], "examples": [ { "id": "retry", "props": { "message": "Check your connection.", "retryLabel": "Retry", "title": "Could not load orders" }, "title": "Retry error" } ], "group": "display", "id": "error-state", "label": "Error state", "package": "texuli", "props": [ { "default": "Something went wrong", "kind": "string", "name": "title" }, { "kind": "string", "name": "message" }, { "kind": "event", "name": "onRetry" }, { "default": "Try again", "kind": "string", "name": "retryLabel" }, { "kind": "slot", "name": "action" }, { "kind": "string", "name": "class" } ], "related": ["empty-state", "alert"], "summary": "Full-panel failure with optional retry.", "tier": "app", "useWhen": ["A view failed to load and the user can retry"] }, { "a11y": [ "Generates id and aria-describedby for the control snippet", "Marks aria-invalid when error is present", "hideLabel keeps the label available to assistive tech" ], "agentEmittable": false, "dontUseWhen": ["Standalone chrome without a form control"], "emit": [], "examples": [ { "id": "vertical", "props": { "description": "Work address", "label": "Email", "required": true }, "title": "Vertical field" } ], "group": "forms", "id": "field", "label": "Field", "package": "texuli", "props": [ { "kind": "string", "name": "label", "required": true }, { "kind": "string", "name": "description" }, { "description": "Error message; marks the control invalid", "kind": "string", "name": "error" }, { "default": false, "kind": "boolean", "name": "required" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "kind": "string", "name": "id" }, { "default": false, "kind": "boolean", "name": "hideLabel" }, { "default": "vertical", "enumValues": ["vertical", "horizontal"], "kind": "enum", "name": "orientation" }, { "kind": "string", "name": "class" }, { "description": "Control snippet receiving FieldControl", "kind": "slot", "name": "children", "required": true } ], "related": ["label", "description", "field-error", "form", "input"], "summary": "Label, description and error wiring for a single control.", "tier": "app", "useWhen": ["Compose a labeled control with optional help and error text"] }, { "a11y": "role=alert; show=false renders nothing while the host keeps aria wiring.", "agentEmittable": false, "dontUseWhen": ["Help text that is not an error (use description)"], "emit": [], "examples": [{ "id": "message", "props": { "show": true }, "title": "Error message" }], "group": "forms", "id": "field-error", "label": "FieldError", "package": "texuli", "props": [ { "default": true, "kind": "boolean", "name": "show" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["field", "form"], "summary": "An alert-role error message for a field.", "tier": "app", "useWhen": ["Surface a validation error next to a control"] }, { "a11y": [ "Native constraint validation runs unless noValidate is set", "Field errors map back onto controls after onValidate" ], "agentEmittable": false, "dontUseWhen": ["A single control with no submit (use field alone)"], "emit": [], "examples": [{ "id": "stack", "props": { "layout": "stack" }, "title": "Stacked form" }], "group": "forms", "id": "form", "label": "Form", "package": "texuli", "props": [ { "default": "stack", "enumValues": ["stack", "grid"], "kind": "enum", "name": "layout" }, { "default": false, "kind": "boolean", "name": "noValidate" }, { "description": "Return a field→message map (or Promise) to block submit", "kind": "event", "name": "onValidate" }, { "description": "Called after validation succeeds with FormData values", "kind": "event", "name": "onSubmitValues" }, { "description": "Controlled field→message map (bind:errors)", "kind": "object", "name": "errors" }, { "kind": "event", "name": "onErrorsChange" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "description": "Form-level error snippet (e.g. _form message)", "kind": "slot", "name": "formError" } ], "related": ["field", "button", "input"], "summary": "A form shell with layout, validation hook and error map.", "tier": "app", "useWhen": ["Collect and validate a set of fields before submit"] }, { "a11y": "Opens on focus as well as hover; dismissible.", "agentEmittable": false, "dontUseWhen": ["Required interactions (use popover or dialog)"], "emit": [], "examples": [{ "id": "preview", "props": {}, "title": "Preview" }], "group": "overlays", "id": "hover-card", "label": "HoverCard", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "slot", "name": "children" } ], "related": ["popover", "tooltip"], "summary": "Preview panel that opens on hover or focus.", "tier": "app", "useWhen": ["Rich previews without a click"] }, { "a11y": "Same surface tokens as popover for contrast.", "agentEmittable": false, "dontUseWhen": ["Click-toggled panels (use popover-content)"], "emit": [], "examples": [{ "id": "body", "props": {}, "title": "Content" }], "group": "overlays", "id": "hover-card-content", "label": "HoverCard.Content", "package": "texuli", "props": [ { "default": "elevated", "enumValues": ["elevated", "flat"], "kind": "enum", "name": "variant" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": true, "kind": "boolean", "name": "arrow" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["hover-card"], "summary": "Styled hover-card surface.", "tier": "app", "useWhen": ["Body of a hover card"] }, { "a11y": "label is required and becomes aria-label on the control.", "agentEmittable": false, "dontUseWhen": ["Actions with a visible text label (use button)"], "emit": [], "examples": [{ "id": "close", "props": { "label": "Close" }, "title": "Close icon button" }], "group": "forms", "id": "icon-button", "label": "IconButton", "package": "texuli", "props": [ { "description": "Accessible name", "kind": "string", "name": "label", "required": true }, { "default": "ghost", "enumValues": ["default", "secondary", "outline", "ghost", "destructive", "link"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "href", "trust": "developer" }, { "default": false, "kind": "boolean", "name": "loading" }, { "default": true, "kind": "boolean", "name": "autoLoading" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "kind": "string", "name": "class" }, { "description": "Icon content", "kind": "slot", "name": "children" } ], "related": ["button", "button-group"], "summary": "An icon-only button that requires an accessible name.", "tier": "app", "useWhen": ["Toolbar and dense chrome actions that are icon-only"] }, { "a11y": [ "Painted as one escaped text node, so it names the parent control (a button label)", "A leaf: children are dropped" ], "agentEmittable": false, "dontUseWhen": [ "A paragraph, heading or list (use blocks-text)", "Text that needs formatting or links (use blocks-text)", "A component that already has a label or title prop (set that prop)" ], "emit": [], "examples": [ { "id": "button-label", "props": { "text": "Save changes" }, "title": "Button label" }, { "id": "badge-word", "props": { "text": "Shipped" }, "title": "Badge word" } ], "group": "display", "id": "inline-text", "label": "Inline text", "package": "@texuli/catalog", "props": [ { "description": "Plain text; the renderer refuses markup-like strings", "kind": "string", "name": "text", "required": true } ], "related": ["button", "label", "badge", "kbd"], "summary": "A plain text run for the slot of a slot-only component (button, label, badge).", "tier": "app", "useWhen": [ "Give a form label, description, field error or menu trigger its visible text", "Text for a button, badge or kbd when the tree prefers a child to the label prop", "Any slot that needs a short phrase rather than a block" ] }, { "a11y": [ "Pair with Field or an external label via id/for", "Clear control has an accessible name when clearable" ], "agentEmittable": false, "dontUseWhen": [ "Multi-line text (use textarea)", "A labeled field with description and error (wrap in field)" ], "emit": [], "examples": [ { "id": "text", "props": { "clearable": true, "type": "text" }, "title": "Text input" }, { "id": "email", "props": { "type": "email" }, "title": "Email input" } ], "group": "forms", "id": "input", "label": "Input", "package": "texuli", "props": [ { "default": "text", "description": "Native input type", "kind": "string", "name": "type" }, { "description": "Controlled value (bind:value)", "kind": "string", "name": "value" }, { "description": "FileList when type=file (bind:files)", "kind": "unknown", "name": "files" }, { "description": "Element ref for the native input", "kind": "unknown", "name": "ref" }, { "default": false, "kind": "boolean", "name": "clearable" }, { "default": "Clear", "kind": "string", "name": "clearLabel" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "readonly" }, { "kind": "event", "name": "onValueChange" }, { "kind": "event", "name": "onClear" }, { "kind": "string", "name": "class" } ], "related": ["input-group", "textarea", "field", "text-counter"], "summary": "A single-line text (or file) control with optional clear.", "tier": "app", "useWhen": ["Short free-text fields", "Native file selection"] }, { "a11y": "Invalid state marks the control aria-invalid; clear has an accessible name.", "agentEmittable": false, "dontUseWhen": ["A bare input with no adornment (use input)"], "emit": [], "examples": [{ "id": "search", "props": { "clearable": true }, "title": "Search group" }], "group": "forms", "id": "input-group", "label": "InputGroup", "package": "texuli", "props": [ { "description": "Start adornment", "kind": "slot", "name": "start" }, { "description": "End adornment", "kind": "slot", "name": "end" }, { "description": "Native attributes for the inner input", "kind": "object", "name": "inputProps" }, { "kind": "string", "name": "value" }, { "kind": "unknown", "name": "ref" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "readonly" }, { "default": false, "kind": "boolean", "name": "invalid" }, { "default": false, "kind": "boolean", "name": "clearable" }, { "default": "Clear", "kind": "string", "name": "clearLabel" }, { "kind": "event", "name": "onValueChange" }, { "kind": "event", "name": "onClear" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["input", "field"], "summary": "An input with start/end adornments and optional clear.", "tier": "app", "useWhen": ["Inputs with a unit, icon or trailing action"] }, { "a11y": "Rendered as a real kbd element; text is escaped.", "agentEmittable": false, "dontUseWhen": ["Multi-line code (use code with variant block)"], "emit": [], "examples": [ { "id": "save", "props": {}, "title": "Save shortcut" }, { "id": "labelled", "props": { "label": "Ctrl" }, "title": "Labelled key" } ], "group": "display", "id": "kbd", "label": "Kbd", "package": "texuli", "props": [ { "description": "Plain-text key name, escaped; replaces children when both are given", "kind": "string", "name": "label" }, { "kind": "string", "name": "class" }, { "description": "The key name (an inline-text node in a tree)", "kind": "slot", "name": "children" } ], "related": ["code", "inline-text"], "summary": "Inline keyboard key affordance.", "tier": "app", "useWhen": ["Document a shortcut next to a control"] }, { "a11y": "Loading and empty states are announced; linked tiles use real anchors after URL policy.", "agentEmittable": false, "dontUseWhen": ["A free-form already-formatted string (use stat)"], "emit": [], "examples": [ { "id": "orders", "props": { "comparisonLabel": "vs last week", "label": "Orders", "previous": 1100, "unit": "compact", "value": 1280 }, "title": "Orders KPI" } ], "group": "display", "id": "kpi", "label": "KPI", "package": "texuli", "props": [ { "kind": "string", "name": "label", "required": true }, { "description": "Current numeric value (nullable)", "kind": "number", "name": "value" }, { "default": "number", "enumValues": ["number", "compact", "cents", "percent"], "kind": "enum", "name": "unit" }, { "description": "ISO currency when unit is cents", "kind": "string", "name": "currency" }, { "kind": "number", "name": "previous" }, { "kind": "string", "name": "comparisonLabel" }, { "default": "up", "enumValues": ["up", "down"], "kind": "enum", "name": "positive" }, { "kind": "slot", "name": "sparkline" }, { "kind": "string", "name": "href", "trust": "developer" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust" }, { "default": false, "kind": "boolean", "name": "loading" }, { "description": "true or empty message string", "kind": "unknown", "name": "empty" }, { "default": "elevated", "enumValues": ["elevated", "flat"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" } ], "related": ["stat", "card"], "summary": "A formatted metric with unit, previous-period delta and optional link.", "tier": "app", "useWhen": ["Show a numeric KPI with unit formatting and comparison"] }, { "a11y": "srOnly keeps the label for assistive tech while hiding it visually.", "agentEmittable": false, "dontUseWhen": ["A full field stack (use field)"], "emit": [], "examples": [{ "id": "required", "props": { "required": true }, "title": "Required label" }], "group": "forms", "id": "label", "label": "Label", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "required" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "default": false, "kind": "boolean", "name": "srOnly" }, { "kind": "string", "name": "class" }, { "description": "The label text (an inline-text node in a tree)", "kind": "slot", "name": "children" } ], "related": ["field", "description", "inline-text"], "summary": "A form label with optional required marker and sr-only mode.", "tier": "app", "useWhen": ["Label a control outside Field"] }, { "a11y": ["Form and brand panels are labelled", "Brand copy is author-provided"], "agentEmittable": false, "dontUseWhen": ["Post-auth app chrome"], "emit": [], "examples": [ { "id": "sign-in", "props": { "brandTitle": "Harbor", "formLabel": "Sign in" }, "title": "Sign in" } ], "group": "layouts", "id": "layout-auth-split", "label": "Auth split layout", "package": "texuli", "props": [ { "kind": "slot", "name": "form" }, { "kind": "event", "name": "mountScreen" }, { "kind": "slot", "name": "brand" }, { "kind": "slot", "name": "panel" }, { "kind": "string", "name": "brandTitle" }, { "kind": "string", "name": "brandDescription" }, { "kind": "string", "name": "brandEyebrow" }, { "kind": "string", "name": "formLabel" }, { "kind": "string", "name": "panelLabel" }, { "kind": "string", "name": "class" } ], "related": ["layout-wizard"], "summary": "Sign-in form column plus brand panel.", "tier": "app", "useWhen": ["Sign-in and account entry pages"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Settings shells"], "emit": [], "examples": [ { "id": "default", "props": { "options": { "author": "Ada Example", "title": "Field notes" } }, "title": "Blog layout" } ], "group": "layouts", "id": "layout-blog", "label": "Blog layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" } ], "related": ["layout-host", "layout-chrome"], "summary": "Blog/post reading layout (content-layout kind blog).", "tier": "app", "useWhen": ["Blog posts and field notes"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [{ "id": "basic", "props": { "title": "Summary" }, "title": "Card layout" }], "group": "layouts", "id": "layout-card", "label": "Card layout", "package": "texuli", "props": [ { "kind": "string", "name": "title", "trust": "untrusted" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-page", "layout-doc", "layout-grid"], "summary": "Content card frame for grouped agent-authored blocks.", "tier": "content", "useWhen": ["Compose card layout structure in agent-authored trees"] }, { "a11y": ["Skip link targets the main region", "Every href passes the URL policy"], "agentEmittable": false, "dontUseWhen": ["Standalone navigation without a layout host"], "emit": [], "examples": [{ "id": "brand", "props": { "part": "brand" }, "title": "Brand chrome" }], "group": "layouts", "id": "layout-chrome", "label": "LayoutChrome", "package": "texuli", "props": [ { "enumValues": ["skip", "brand", "actions", "user"], "kind": "enum", "name": "part", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Main region id for the skip link", "kind": "string", "name": "mainId" }, { "default": false, "kind": "boolean", "name": "compact" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust", "trust": "developer" }, { "default": "Skip to content", "kind": "string", "name": "skipLabel" }, { "kind": "string", "name": "class" } ], "related": ["layout-host", "nav-icon"], "summary": "Shared brand, actions, user and skip-link chrome for desktop layouts.", "tier": "app", "useWhen": ["Layout frames that share brand and user chrome"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Long-form reading"], "emit": [], "examples": [ { "id": "default", "props": { "options": { "dense": false, "title": "Overview" } }, "title": "Dashboard grid layout" } ], "group": "layouts", "id": "layout-dashboard-grid", "label": "Dashboard grid layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust", "trust": "developer" } ], "related": ["layout-host", "layout-chrome"], "summary": "Top chrome plus container-query widget grid.", "tier": "app", "useWhen": ["Analytics and operations dashboards"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "aspect": "16:9", "title": "Pitch" }, "title": "Deck layout" } ], "group": "layouts", "id": "layout-deck", "label": "Deck layout", "package": "texuli", "props": [ { "kind": "string", "name": "title", "trust": "untrusted" }, { "kind": "string", "name": "description", "trust": "untrusted" }, { "description": "Language tag such as en or en-GB", "kind": "string", "name": "locale" }, { "default": "16:9", "enumValues": ["16:9", "4:3", "1:1"], "kind": "enum", "name": "aspect" }, { "description": "Catalog theme id, or a catalog or embedded theme reference object", "kind": "unknown", "name": "themeRef" }, { "description": "Built-in slide master ids the slides may use", "kind": "array", "name": "masters" }, { "description": "startIndex, loop, showProgress and defaultTransition", "kind": "object", "name": "settings" }, { "description": "Structured slide objects (@texuli/slides grammar); prefer deck-slide children", "kind": "array", "name": "slides" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-page", "layout-doc", "layout-grid"], "summary": "Slide deck frame for sequenced content.", "tier": "content", "useWhen": ["Compose deck layout structure in agent-authored trees"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "title": "Guide", "toc": true }, "title": "Doc layout" } ], "group": "layouts", "id": "layout-doc", "label": "Doc layout", "package": "texuli", "props": [ { "kind": "string", "name": "title", "trust": "untrusted" }, { "default": true, "kind": "boolean", "name": "toc" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-page", "layout-grid"], "summary": "Document frame with optional table of contents.", "tier": "content", "useWhen": ["Compose doc layout structure in agent-authored trees"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["App dashboards"], "emit": [], "examples": [ { "id": "default", "props": { "options": { "title": "Guides" } }, "title": "Docs layout" } ], "group": "layouts", "id": "layout-docs", "label": "Docs layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" } ], "related": ["layout-host", "layout-chrome"], "summary": "Documentation reading layout (content-layout kind docs).", "tier": "app", "useWhen": ["Product docs and guides"] }, { "a11y": ["Drawer is a labelled dialog", "Close control is named"], "agentEmittable": false, "dontUseWhen": ["Desktop-only sidebars"], "emit": [], "examples": [ { "id": "open", "props": { "label": "Navigation", "open": true }, "title": "Open drawer" } ], "group": "layouts", "id": "layout-drawer", "label": "LayoutDrawer", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "description": "Accessible drawer name", "kind": "string", "name": "label", "required": true }, { "default": "Close navigation", "kind": "string", "name": "closeLabel" }, { "kind": "slot", "name": "children" } ], "related": ["layout-sidebar", "dialog"], "summary": "Mobile navigation drawer built on the dialog primitive.", "tier": "app", "useWhen": ["Narrow layouts that hide primary nav behind a menu"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Single-column reading layouts"], "emit": [], "examples": [{ "id": "default", "props": {}, "title": "Dual sidebar layout" }], "group": "layouts", "id": "layout-dual-sidebar", "label": "Dual sidebar layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "skipLabel" }, { "kind": "string", "name": "menuLabel" }, { "kind": "string", "name": "closeLabel" } ], "related": ["layout-host", "layout-chrome"], "summary": "Primary nav plus optional context aside.", "tier": "app", "useWhen": ["Tools that need nav and a context rail"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Dense data grids"], "emit": [], "examples": [ { "id": "default", "props": { "options": { "title": "The long read" } }, "title": "Editorial layout" } ], "group": "layouts", "id": "layout-editorial", "label": "Editorial layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" } ], "related": ["layout-host", "layout-chrome"], "summary": "Long-read editorial layout (content-layout kind editorial).", "tier": "app", "useWhen": ["Magazine-style long reads"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "columns": 2, "gap": "1rem" }, "title": "Grid layout" } ], "group": "layouts", "id": "layout-grid", "label": "Grid layout", "package": "texuli", "props": [ { "default": 2, "kind": "number", "name": "columns" }, { "default": "1rem", "kind": "string", "name": "gap" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-page", "layout-doc"], "summary": "Responsive content grid for agent-authored tiles.", "tier": "content", "useWhen": ["Compose grid layout structure in agent-authored trees"] }, { "a11y": [ "Loading state is named for assistive tech", "Screen outlet stays stable across layout switches" ], "agentEmittable": false, "dontUseWhen": ["A single fixed page frame with no layout catalog"], "emit": [], "examples": [{ "id": "sidebar", "props": { "layout": "sidebar" }, "title": "Sidebar host" }], "group": "layouts", "id": "layout-host", "label": "LayoutHost", "package": "texuli", "props": [ { "description": "Layout catalog id", "enumValues": [ "sidebar", "rail", "top-nav", "dual-sidebar", "master-detail", "dashboard-grid", "docs", "blog", "editorial", "marketing", "mobile-tabs", "mobile-drawer", "wizard", "auth-split", "custom" ], "kind": "enum", "name": "layout", "required": true }, { "description": "Screen content", "kind": "slot", "name": "children", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "description": "Document direction", "enumValues": ["ltr", "rtl"], "kind": "enum", "name": "dir" }, { "default": "Loading layout", "kind": "string", "name": "loadingLabel" }, { "kind": "string", "name": "class" } ], "related": ["layout-sidebar", "layout-chrome"], "summary": "Resolves a layout id, applies width fallbacks, and keeps one stable screen outlet.", "tier": "app", "useWhen": ["Apps that switch between shared layouts without remounting the screen"] }, { "a11y": "Author-provided landmarks; no default product copy.", "agentEmittable": false, "dontUseWhen": ["Routed app shells"], "emit": [], "examples": [{ "id": "basic", "props": {}, "title": "Landing" }], "group": "layouts", "id": "layout-landing", "label": "Landing layout", "package": "texuli", "props": [ { "kind": "slot", "name": "brand" }, { "kind": "slot", "name": "navigation" }, { "kind": "slot", "name": "actions" }, { "kind": "slot", "name": "hero" }, { "kind": "slot", "name": "sections" }, { "kind": "slot", "name": "footer" }, { "kind": "string", "name": "class" } ], "related": ["layout-marketing"], "summary": "Standalone marketing landing composition.", "tier": "app", "useWhen": ["Static landing pages without LayoutHost"] }, { "a11y": ["Hero and content regions can be labelled", "Navigation is a landmark"], "agentEmittable": false, "dontUseWhen": ["Authenticated app chrome"], "emit": [], "examples": [{ "id": "landing", "props": {}, "title": "Marketing" }], "group": "layouts", "id": "layout-marketing", "label": "Marketing layout", "package": "texuli", "props": [ { "description": "Optional LayoutHost screen mount", "kind": "event", "name": "mountScreen" }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "slot", "name": "brand" }, { "kind": "slot", "name": "navigation" }, { "kind": "slot", "name": "actions" }, { "kind": "slot", "name": "hero" }, { "kind": "slot", "name": "sections" }, { "kind": "slot", "name": "footer" }, { "kind": "string", "name": "navigationLabel" }, { "kind": "string", "name": "heroLabel" }, { "kind": "string", "name": "contentLabel" }, { "kind": "string", "name": "class" } ], "related": ["layout-landing", "layout-pricing"], "summary": "Marketing page frame with hero, sections and footer slots.", "tier": "app", "useWhen": ["Landing and product marketing pages"] }, { "a11y": [ "Structure is semantic regions the host maps to real layout components", "No HTML strings; children are nested catalog nodes" ], "agentEmittable": true, "dontUseWhen": ["App chrome shells (sidebar, top-nav, dialogs)"], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "description": "Quarterly update", "title": "Overview" }, "title": "Page layout" } ], "group": "layouts", "id": "layout-page", "label": "Page layout", "package": "texuli", "props": [ { "kind": "string", "name": "title", "trust": "untrusted" }, { "kind": "string", "name": "description", "trust": "untrusted" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "class" } ], "related": ["layout-doc", "layout-grid"], "summary": "Full page content frame for agent-authored documents.", "tier": "content", "useWhen": ["Compose page layout structure in agent-authored trees"] }, { "a11y": "Plans are a list of cards; title names the section.", "agentEmittable": false, "dontUseWhen": ["In-app billing settings (use settings layout)"], "emit": [], "examples": [ { "id": "plans", "props": { "plans": [{ "id": "free", "name": "Free" }], "title": "Plans" }, "title": "Three plans" } ], "group": "layouts", "id": "layout-pricing", "label": "Pricing layout", "package": "texuli", "props": [ { "kind": "string", "name": "title" }, { "kind": "string", "name": "description" }, { "description": "Plan cards data", "kind": "array", "name": "plans" }, { "kind": "string", "name": "footnote" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["layout-marketing"], "summary": "Pricing plans grid with title and footnote.", "tier": "app", "useWhen": ["Pricing tables on marketing pages"] }, { "a11y": ["Section list is labelled", "Phone back control is named"], "agentEmittable": false, "dontUseWhen": ["Primary app navigation"], "emit": [], "examples": [ { "id": "account", "props": { "active": "profile", "sections": [{ "id": "profile", "label": "Profile" }] }, "title": "Account settings" } ], "group": "layouts", "id": "layout-settings", "label": "Settings layout", "package": "texuli", "props": [ { "default": "Settings", "kind": "string", "name": "title" }, { "kind": "string", "name": "description" }, { "kind": "array", "name": "sections", "required": true }, { "kind": "string", "name": "active" }, { "kind": "event", "name": "onSelect" }, { "kind": "boolean", "name": "startWithList" }, { "kind": "slot", "name": "children" }, { "kind": "event", "name": "mountScreen" }, { "kind": "string", "name": "navLabel" }, { "kind": "string", "name": "backLabel" }, { "kind": "string", "name": "class" } ], "related": ["layout-wizard"], "summary": "Settings section list plus detail pane.", "tier": "app", "useWhen": ["Account and workspace settings"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Marketing landing pages"], "emit": [], "examples": [{ "id": "default", "props": {}, "title": "Sidebar layout" }], "group": "layouts", "id": "layout-sidebar", "label": "Sidebar layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "skipLabel" }, { "kind": "string", "name": "menuLabel" }, { "kind": "string", "name": "closeLabel" } ], "related": ["layout-host", "layout-chrome"], "summary": "App sidebar column with responsive drawer fallback.", "tier": "app", "useWhen": ["Desktop apps with persistent primary navigation"] }, { "a11y": [ "Skip link targets main when chrome is present", "Primary navigation is a labelled landmark" ], "agentEmittable": false, "dontUseWhen": ["Dense multi-section sidebars"], "emit": [], "examples": [{ "id": "default", "props": {}, "title": "Top navigation layout" }], "group": "layouts", "id": "layout-top-nav", "label": "Top navigation layout", "package": "texuli", "props": [ { "description": "Host callback that mounts the stable routed screen node", "kind": "event", "name": "mountScreen", "required": true }, { "description": "NavModel for chrome links", "kind": "object", "name": "nav" }, { "description": "Current hash path", "kind": "string", "name": "path" }, { "description": "Flat data-only layout knobs", "kind": "object", "name": "options" }, { "description": "Scope for persisted UI flags", "kind": "string", "name": "storageKey" }, { "description": "Optional context panel", "kind": "slot", "name": "aside" }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "skipLabel" }, { "kind": "string", "name": "menuLabel" }, { "kind": "string", "name": "closeLabel" } ], "related": ["layout-host", "layout-chrome"], "summary": "Horizontal top navigation with optional mobile menu.", "tier": "app", "useWhen": ["Product shells with a top bar"] }, { "a11y": ["Steps expose current position", "Back and next controls are named"], "agentEmittable": false, "dontUseWhen": ["Single-page forms"], "emit": [], "examples": [ { "id": "onboarding", "props": { "current": 0, "steps": [{ "id": "profile", "label": "Profile" }], "title": "Welcome" }, "title": "Onboarding" } ], "group": "layouts", "id": "layout-wizard", "label": "Wizard layout", "package": "texuli", "props": [ { "kind": "array", "name": "steps" }, { "kind": "slot", "name": "content" }, { "kind": "event", "name": "mountScreen" }, { "default": 0, "kind": "number", "name": "current" }, { "kind": "string", "name": "title" }, { "kind": "string", "name": "description" }, { "kind": "event", "name": "canAdvance" }, { "kind": "event", "name": "validate" }, { "kind": "event", "name": "onFinish" }, { "kind": "event", "name": "onStepChange" }, { "kind": "string", "name": "backLabel" }, { "kind": "string", "name": "nextLabel" }, { "kind": "string", "name": "finishLabel" }, { "kind": "slot", "name": "secondaryActions" }, { "kind": "slot", "name": "brand" }, { "kind": "string", "name": "class" } ], "related": ["layout-auth-split", "layout-settings"], "summary": "Centered onboarding wizard frame with steps.", "tier": "app", "useWhen": ["Multi-step setup and onboarding"] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "composition": { "height": 180, "layers": [], "width": 320 } }, "title": "Canvas composition example" } ], "group": "content", "id": "media-composition-canvas", "label": "Canvas composition", "package": "@texuli/media", "props": [ { "kind": "object", "name": "composition", "required": true }, { "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "trust" }, { "kind": "string", "name": "label" }, { "kind": "object", "name": "labels" }, { "kind": "number", "name": "pixelRatio" }, { "enumValues": ["ltr", "rtl"], "kind": "enum", "name": "dir" }, { "kind": "string", "name": "fontFamily" }, { "kind": "string", "name": "background" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "loadImage" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "onrender" } ], "summary": "A validated layered composition rendered to a canvas.", "tier": "content", "useWhen": ["Render canvas composition from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "composition": { "height": 180, "layers": [], "width": 320 } }, "title": "SVG composition example" } ], "group": "content", "id": "media-composition-svg", "label": "SVG composition", "package": "@texuli/media", "props": [ { "kind": "object", "name": "composition", "required": true }, { "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "trust" }, { "kind": "string", "name": "title" }, { "kind": "string", "name": "description" }, { "kind": "boolean", "name": "validate" }, { "kind": "boolean", "name": "focusable" }, { "kind": "string", "name": "className" }, { "kind": "string", "name": "class" } ], "summary": "A validated, structured vector composition.", "tier": "content", "useWhen": ["Render svg composition from structured content data."] }, { "a11y": [ "Provide the required accessible title, description or text alternatives.", "Keep data available in the component-provided text or table alternative." ], "agentEmittable": true, "dontUseWhen": ["Application navigation, account controls or mutations."], "emit": ["developer", "untrusted"], "examples": [ { "id": "basic", "props": { "alt": "A team planning together", "src": "images/team.webp" }, "title": "Responsive image example" } ], "group": "content", "id": "media-image", "label": "Responsive image", "package": "@texuli/media", "props": [ { "description": "URL input is checked by the package URL policy.", "kind": "string", "name": "src", "required": true, "trust": "untrusted" }, { "kind": "string", "name": "srcset" }, { "kind": "string", "name": "sizes" }, { "kind": "array", "name": "widths" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "loader" }, { "kind": "string", "name": "alt", "required": true }, { "kind": "number", "name": "width" }, { "kind": "number", "name": "height" }, { "enumValues": ["cover", "contain", "fill", "none", "scale-down"], "kind": "enum", "name": "fit" }, { "kind": "object", "name": "focalPoint" }, { "kind": "object", "name": "placeholder" }, { "enumValues": ["eager", "lazy"], "kind": "enum", "name": "loading" }, { "enumValues": ["high", "low", "auto"], "kind": "enum", "name": "fetchPriority" }, { "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "trust" }, { "description": "URL input is checked by the package URL policy.", "kind": "string", "name": "href", "trust": "untrusted" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "onactivate" }, { "kind": "string", "name": "actionLabel" }, { "kind": "object", "name": "labels" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "onload" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "onerror" }, { "description": "Host-provided callback; omit when no host behavior is needed.", "kind": "event", "name": "onstatus" }, { "kind": "string", "name": "class" } ], "summary": "A responsive image with URL validation, loading states and actions.", "tier": "content", "useWhen": ["Render responsive image from structured content data."] }, { "a11y": "role=menubar; one Tab stop; arrows move between menus.", "agentEmittable": false, "dontUseWhen": ["A single actions button (use dropdown-menu)"], "emit": [], "examples": [{ "id": "app", "props": { "value": "file" }, "title": "Application bar" }], "group": "overlays", "id": "menubar", "label": "Menubar", "package": "texuli", "props": [ { "description": "Open menu value or empty", "kind": "string", "name": "value" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "default": true, "kind": "boolean", "name": "loop" }, { "enumValues": ["ltr", "rtl"], "kind": "enum", "name": "dir" } ], "related": ["menubar-trigger", "dropdown-menu"], "summary": "Application menubar with roving top-level items.", "tier": "app", "useWhen": ["Desktop-style File/Edit/View bars"] }, { "a11y": "role=menuitem with aria-haspopup=menu.", "agentEmittable": false, "dontUseWhen": ["Dropdown button triggers"], "emit": [], "examples": [{ "id": "file", "props": {}, "title": "File" }], "group": "overlays", "id": "menubar-trigger", "label": "Menubar.Trigger", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "default", "enumValues": ["default", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "default": false, "kind": "boolean", "name": "disabled" } ], "related": ["menubar"], "summary": "Top-level menubar item that opens a menu.", "tier": "app", "useWhen": ["Label a menubar menu"] }, { "a11y": [ "Chips can be removed with their button or Backspace from an empty input", "Submits one form entry per selected value" ], "agentEmittable": false, "dontUseWhen": [ "One value (use combobox or select)", "A few independent options (use checkbox)" ], "emit": [], "examples": [ { "id": "tags", "props": { "name": "tags", "size": "md", "variant": "outline" }, "title": "Tags field" } ], "group": "forms", "id": "multi-select", "label": "MultiSelect", "package": "texuli", "props": [ { "description": "Selected value (a string, or a string array when multiple)", "kind": "unknown", "name": "value" }, { "description": "Starting selection; a form reset restores it", "kind": "unknown", "name": "defaultValue" }, { "description": "Text in the input (bindable)", "kind": "string", "name": "inputValue" }, { "default": "", "kind": "string", "name": "defaultInputValue" }, { "description": "Options as { value, label, disabled? }", "kind": "array", "name": "items" }, { "description": "Function prop the host passes: (query, signal) => Promise for remote options. Not agent-emittable (functions are not data).", "kind": "unknown", "name": "loadOptions" }, { "description": "Function prop the host passes: (item, query) => boolean. Replaces the default match (label contains the query, ignoring case); runs on the trimmed, non-empty query; unused with loadOptions. createFoldedFilter builds an accent-insensitive one. Not agent-emittable (functions are not data).", "kind": "unknown", "name": "filter" }, { "default": false, "description": "Not interactive, not submitted, not validated", "kind": "boolean", "name": "disabled" }, { "description": "Form field name: submits the value (one entry per value when multiple)", "kind": "string", "name": "name" }, { "default": false, "description": "Blocks form submission until a value is selected", "kind": "boolean", "name": "required" }, { "description": "Translated message when required blocks submission (default: the browser message)", "kind": "string", "name": "requiredMessage" }, { "description": "Associated form id", "kind": "string", "name": "form" }, { "default": false, "kind": "boolean", "name": "open" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "outline", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "event", "name": "onValueChange" }, { "kind": "event", "name": "onInputValueChange" }, { "kind": "event", "name": "onOpenChange" }, { "kind": "slot", "name": "children" } ], "related": ["combobox", "checkbox", "field", "form"], "summary": "A combobox for several values, shown as removable chips.", "tier": "app", "useWhen": ["Choose several values from a long list by typing"] }, { "a11y": "Decorative by default; pass label when the icon is the only name.", "agentEmittable": false, "dontUseWhen": ["Arbitrary illustration outside nav"], "emit": [], "examples": [{ "id": "home", "props": { "icon": "home" }, "title": "Home icon" }], "group": "layouts", "id": "nav-icon", "label": "NavIcon", "package": "texuli", "props": [ { "description": "Icon name or component", "kind": "unknown", "name": "icon", "required": true }, { "kind": "string", "name": "class" }, { "kind": "string", "name": "label" } ], "related": ["layout-chrome"], "summary": "Renders a nav model icon by name or component.", "tier": "app", "useWhen": ["Layout chrome needs a consistent nav icon"] }, { "a11y": "Landmarks and link semantics; triggers expose expanded state.", "agentEmittable": false, "dontUseWhen": ["In-page tabs (use tabs)", "App menubar (use menubar)"], "emit": [], "examples": [{ "id": "main", "props": { "orientation": "horizontal" }, "title": "Main nav" }], "group": "overlays", "id": "navigation-menu", "label": "NavigationMenu", "package": "texuli", "props": [ { "kind": "string", "name": "value" }, { "default": "horizontal", "enumValues": ["horizontal", "vertical"], "kind": "enum", "name": "orientation" }, { "enumValues": ["ltr", "rtl"], "kind": "enum", "name": "dir" }, { "kind": "number", "name": "delayDuration" }, { "kind": "event", "name": "onValueChange" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["menubar", "breadcrumb", "sidebar"], "summary": "Site or app navigation with expandable triggers and links.", "tier": "app", "useWhen": ["Primary site navigation with flyouts"] }, { "a11y": "Named navigation; previous/next buttons disabled at ends.", "agentEmittable": false, "dontUseWhen": ["Infinite scroll only feeds"], "emit": [], "examples": [ { "id": "pages", "props": { "page": 1, "pageCount": 12 }, "title": "Twelve pages" } ], "group": "overlays", "id": "pagination", "label": "Pagination", "package": "texuli", "props": [ { "default": 1, "kind": "number", "name": "page" }, { "kind": "number", "name": "pageCount", "required": true }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "outline", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "event", "name": "onPageChange" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "kind": "string", "name": "label" } ], "related": ["breadcrumb", "table"], "summary": "Page controls for long lists.", "tier": "app", "useWhen": ["Paging tables or search results"] }, { "a11y": "Focus can move into the panel; Escape dismisses.", "agentEmittable": false, "dontUseWhen": ["Modal workflows (use dialog)", "Single-line hints (use tooltip)"], "emit": [], "examples": [{ "id": "open", "props": { "open": true }, "title": "Open popover" }], "group": "overlays", "id": "popover", "label": "Popover", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "event", "name": "onOpenChange" }, { "kind": "slot", "name": "children" } ], "related": ["hover-card", "tooltip", "dialog"], "summary": "Non-modal floating panel anchored to a trigger.", "tier": "app", "useWhen": ["Lightweight detail next to a control", "Pickers that are not full dialogs"] }, { "a11y": "Provide a visible heading or aria-label when needed.", "agentEmittable": false, "dontUseWhen": ["Menu lists (use dropdown-menu-content)"], "emit": [], "examples": [{ "id": "elevated", "props": { "variant": "elevated" }, "title": "Elevated" }], "group": "overlays", "id": "popover-content", "label": "Popover.Content", "package": "texuli", "props": [ { "default": "elevated", "enumValues": ["elevated", "flat"], "kind": "enum", "name": "variant" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": true, "kind": "boolean", "name": "arrow" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }, { "default": "bottom", "enumValues": ["top", "right", "bottom", "left"], "kind": "enum", "name": "side" }, { "default": "center", "enumValues": ["start", "center", "end"], "kind": "enum", "name": "align" }, { "default": 8, "kind": "number", "name": "sideOffset" }, { "description": "An element inside the content, or a function returning one, to focus on open (for example the selected date). Falls back to the first control, else the content. Host-only: not agent-emittable (elements and functions are not data).", "kind": "unknown", "name": "initialFocus" } ], "related": ["popover"], "summary": "Styled popover surface with optional arrow.", "tier": "app", "useWhen": ["Body of a popover"] }, { "a11y": "value is required; card layout keeps the label associated with the control.", "agentEmittable": false, "dontUseWhen": ["Independent toggles (use checkbox or switch)"], "emit": [], "examples": [ { "id": "option", "props": { "label": "Email", "value": "mail" }, "title": "Radio option" } ], "group": "forms", "id": "radio", "label": "Radio", "package": "texuli", "props": [ { "kind": "string", "name": "value", "required": true }, { "default": false, "kind": "boolean", "name": "disabled" }, { "kind": "string", "name": "id" }, { "kind": "string", "name": "label" }, { "kind": "string", "name": "description" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "default": false, "kind": "boolean", "name": "card" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["radio-group", "checkbox"], "summary": "One option inside a RadioGroup.", "tier": "app", "useWhen": ["A single exclusive option inside radio-group"] }, { "a11y": "Arrow keys move focus; Space selects; loop wraps at the ends.", "agentEmittable": false, "dontUseWhen": ["Many options with search (use select or combobox)", "Independent toggles"], "emit": [], "examples": [ { "id": "vertical", "props": { "items": [{ "label": "Email", "value": "mail" }, { "label": "SMS", "value": "sms" }], "orientation": "vertical" }, "title": "Vertical group" } ], "group": "forms", "id": "radio-group", "label": "RadioGroup", "package": "texuli", "props": [ { "kind": "string", "name": "value" }, { "kind": "event", "name": "onValueChange" }, { "kind": "string", "name": "name" }, { "default": false, "kind": "boolean", "name": "required" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "readonly" }, { "default": "vertical", "enumValues": ["vertical", "horizontal"], "kind": "enum", "name": "orientation" }, { "default": "default", "enumValues": ["default", "card"], "kind": "enum", "name": "variant" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "description": "Convenience option list; use children with Radio for custom layouts", "kind": "array", "name": "items" }, { "default": true, "kind": "boolean", "name": "loop" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["radio", "select", "checkbox"], "summary": "A set of exclusive radio options with keyboard roving.", "tier": "app", "useWhen": ["Pick exactly one option from a short closed set"] }, { "a11y": "Preserves dialog semantics on large viewports.", "agentEmittable": false, "dontUseWhen": ["Fixed desktop-only dialogs"], "emit": [], "examples": [{ "id": "adaptive", "props": { "size": "md" }, "title": "Adaptive" }], "group": "overlays", "id": "responsive-modal", "label": "ResponsiveModal", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg", "xl"], "kind": "enum", "name": "size" }, { "default": "bottom", "enumValues": ["top", "right", "bottom", "left", "start", "end", "center"], "kind": "enum", "name": "side" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["dialog", "drawer"], "summary": "Dialog on large screens, drawer/sheet on small screens.", "tier": "app", "useWhen": ["One flow that should adapt across breakpoints"] }, { "a11y": "Outlet is a plain region; screen content supplies its own landmarks.", "agentEmittable": false, "dontUseWhen": ["Static pages without layout switching"], "emit": [], "examples": [{ "id": "basic", "props": {}, "title": "Outlet" }], "group": "layouts", "id": "screen-outlet", "label": "ScreenOutlet", "package": "texuli", "props": [ { "kind": "slot", "name": "children", "required": true }, { "description": "Fires with the outlet element", "kind": "event", "name": "onready" } ], "related": ["layout-host"], "summary": "Stable screen mount point that survives layout switches.", "tier": "app", "useWhen": ["LayoutHost needs a durable screen node"] }, { "a11y": [ "Trigger is a real button; listbox opens on ArrowDown/Enter/Space", "Typeahead highlights matching items; Escape closes and restores focus" ], "agentEmittable": false, "dontUseWhen": [ "A short exclusive set that fits on the page (use radio-group)", "Free text with suggestions (use combobox)" ], "emit": [], "examples": [ { "id": "outline", "props": { "defaultValue": "", "size": "md", "variant": "outline" }, "title": "Outline select" } ], "group": "forms", "id": "select", "label": "Select", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "open" }, { "kind": "string", "name": "value" }, { "kind": "string", "name": "defaultValue" }, { "kind": "string", "name": "name" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "required" }, { "description": "Associated form id", "kind": "string", "name": "form" }, { "default": "single", "enumValues": ["single"], "kind": "enum", "name": "type" }, { "description": "Optional value/label catalog when items are not registered by Select.Item", "kind": "array", "name": "items" }, { "default": 4, "kind": "number", "name": "sideOffset" }, { "default": true, "kind": "boolean", "name": "positioning" }, { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "outline", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "event", "name": "onOpenChange" }, { "kind": "event", "name": "onValueChange" }, { "kind": "slot", "name": "children" } ], "related": [ "select-trigger", "select-value", "select-content", "select-item", "radio-group", "field" ], "summary": "A single-value select root with size and variant chrome.", "tier": "app", "useWhen": ["Pick one value from a moderate closed list"] }, { "a11y": "role=listbox; focus stays in the trigger while the list is open.", "agentEmittable": false, "dontUseWhen": ["A free-floating popover (use popover)"], "emit": [], "examples": [{ "id": "md", "props": { "size": "md" }, "title": "Medium content" }], "group": "forms", "id": "select-content", "label": "Select.Content", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["select", "select-item", "select-viewport"], "summary": "The positioned listbox surface for Select items.", "tier": "app", "useWhen": ["Wrap Select items and groups"] }, { "a11y": "role=group; pair with Select.Label for an accessible name.", "agentEmittable": false, "dontUseWhen": ["A single flat list of options"], "emit": [], "examples": [{ "id": "group", "props": {}, "title": "Group" }], "group": "forms", "id": "select-group", "label": "Select.Group", "package": "texuli", "props": [{ "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }], "related": ["select-label", "select-item"], "summary": "Groups related Select items under an optional label.", "tier": "app", "useWhen": ["Cluster related options inside a long Select"] }, { "a11y": "role=option; disabled items are skipped by keyboard.", "agentEmittable": false, "dontUseWhen": ["A radio option outside Select (use radio)"], "emit": [], "examples": [ { "id": "option", "props": { "description": "For growing teams", "label": "Pro", "value": "pro" }, "title": "Option" } ], "group": "forms", "id": "select-item", "label": "Select.Item", "package": "texuli", "props": [ { "kind": "string", "name": "value", "required": true }, { "description": "Accessible and display label when children omitted", "kind": "string", "name": "label" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "kind": "slot", "name": "icon" }, { "kind": "string", "name": "description" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["select", "select-content", "select-group"], "summary": "One selectable option inside Select.Content.", "tier": "app", "useWhen": ["Declare a Select option with value and label"] }, { "a11y": "Not focusable; provides visible structure only.", "agentEmittable": false, "dontUseWhen": ["A selectable option (use select-item)"], "emit": [], "examples": [{ "id": "label", "props": {}, "title": "Group label" }], "group": "forms", "id": "select-label", "label": "Select.Label", "package": "texuli", "props": [{ "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }], "related": ["select-group"], "summary": "A non-interactive heading inside a Select group.", "tier": "app", "useWhen": ["Name a Select.Group"] }, { "a11y": "Does not change roles; children keep listbox semantics.", "agentEmittable": false, "dontUseWhen": ["Inline content that fits in-flow"], "emit": [], "examples": [{ "id": "portal", "props": {}, "title": "Portal" }], "group": "forms", "id": "select-portal", "label": "Select.Portal", "package": "texuli", "props": [{ "kind": "slot", "name": "children" }], "related": ["select-content"], "summary": "Portals Select.Content out of overflow-clipped ancestors.", "tier": "app", "useWhen": ["Select must escape a scroll or overflow container"] }, { "a11y": "Decorative separator; not in the tab order.", "agentEmittable": false, "dontUseWhen": ["Page-level section breaks"], "emit": [], "examples": [{ "id": "divider", "props": {}, "title": "Divider" }], "group": "forms", "id": "select-separator", "label": "Select.Separator", "package": "texuli", "props": [{ "kind": "string", "name": "class" }], "related": ["select-group", "select-content"], "summary": "A visual divider between Select groups or items.", "tier": "app", "useWhen": ["Separate option clusters inside Select"] }, { "a11y": "aria-haspopup=listbox and aria-expanded reflect open state.", "agentEmittable": false, "dontUseWhen": ["A standalone button outside Select"], "emit": [], "examples": [ { "id": "default", "props": { "size": "md", "variant": "outline" }, "title": "Default trigger" } ], "group": "forms", "id": "select-trigger", "label": "Select.Trigger", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg"], "kind": "enum", "name": "size" }, { "default": "outline", "enumValues": ["outline", "soft"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["select", "select-value"], "summary": "The button that opens a Select listbox.", "tier": "app", "useWhen": ["Compose a Select with custom trigger content"] }, { "a11y": "Placeholder is visible text inside the trigger name.", "agentEmittable": false, "dontUseWhen": ["Static text outside Select"], "emit": [], "examples": [ { "id": "placeholder", "props": { "placeholder": "Choose a plan" }, "title": "Placeholder" } ], "group": "forms", "id": "select-value", "label": "Select.Value", "package": "texuli", "props": [ { "default": "Select…", "kind": "string", "name": "placeholder" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["select", "select-trigger"], "summary": "Shows the selected label or a placeholder inside the trigger.", "tier": "app", "useWhen": ["Display the current Select value"] }, { "a11y": "Keeps option focus management inside the listbox.", "agentEmittable": false, "dontUseWhen": ["Short lists that fit without scrolling"], "emit": [], "examples": [{ "id": "viewport", "props": {}, "title": "Viewport" }], "group": "forms", "id": "select-viewport", "label": "Select.Viewport", "package": "texuli", "props": [{ "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" }], "related": ["select-content", "select-item"], "summary": "Scrollable viewport inside Select.Content.", "tier": "app", "useWhen": ["Long option lists that need an internal scroll region"] }, { "a11y": "Focus trapped while open; Escape dismisses.", "agentEmittable": false, "dontUseWhen": ["Centered modal forms (use dialog)"], "emit": [], "examples": [ { "id": "start", "props": { "side": "start", "size": "md" }, "title": "Start edge" } ], "group": "overlays", "id": "sheet", "label": "Sheet", "package": "texuli", "props": [ { "default": "md", "enumValues": ["sm", "md", "lg", "xl"], "kind": "enum", "name": "size" }, { "default": "start", "enumValues": ["top", "right", "bottom", "left", "start", "end", "center"], "kind": "enum", "name": "side" }, { "default": true, "description": "false: a non-modal panel (no focus trap, inert or scroll lock)", "kind": "boolean", "name": "modal" }, { "default": false, "description": "Non-modal only: close on a press or focus outside (never on the trigger)", "kind": "boolean", "name": "dismissOutside" }, { "default": false, "description": "Non-modal only: close on Escape anywhere, not just from inside", "kind": "boolean", "name": "closeOnEscape" }, { "kind": "string", "name": "class" }, { "kind": "slot", "name": "children" } ], "related": ["drawer", "dialog", "sidebar"], "summary": "Edge-anchored modal panel (drawer-like sheet).", "tier": "app", "useWhen": ["Mobile filters, detail rails, edge panels"] }, { "a11y": "nav landmark; collapsed items keep accessible names via tooltips.", "agentEmittable": false, "dontUseWhen": ["Marketing site nav (use navigation-menu)"], "emit": [], "examples": [ { "id": "workspace", "props": { "label": "Main", "sections": [ { "items": [ { "active": true, "href": "https://example.com/inbox", "label": "Inbox" } ], "label": "Workspace" } ] }, "title": "Workspace rail" } ], "group": "overlays", "id": "sidebar", "label": "Sidebar", "package": "texuli", "props": [ { "kind": "array", "name": "items" }, { "kind": "array", "name": "sections" }, { "default": false, "kind": "boolean", "name": "collapsed" }, { "default": true, "kind": "boolean", "name": "collapsible" }, { "default": false, "kind": "boolean", "name": "drawer" }, { "default": "default", "enumValues": ["default", "inset"], "kind": "enum", "name": "variant" }, { "kind": "slot", "name": "header" }, { "kind": "slot", "name": "footer" }, { "kind": "slot", "name": "itemIcon" }, { "default": "Main", "kind": "string", "name": "label" }, { "kind": "string", "name": "collapseLabel" }, { "kind": "string", "name": "expandLabel" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust", "trust": "developer" }, { "kind": "string", "name": "class" } ], "related": ["app-nav", "navigation-menu", "sheet"], "summary": "Collapsible app rail with sections, badges and safe links.", "tier": "app", "useWhen": ["Primary app navigation rail"] }, { "a11y": ["List and detail regions are labelled", "Narrow containers show one pane at a time"], "agentEmittable": false, "dontUseWhen": ["Single-stream feeds"], "emit": [], "examples": [{ "id": "basic", "props": { "listLabel": "Inbox" }, "title": "Split" }], "group": "layouts", "id": "split-view", "label": "SplitView", "package": "texuli", "props": [ { "kind": "slot", "name": "list", "required": true }, { "kind": "slot", "name": "detail" }, { "kind": "slot", "name": "empty" }, { "default": "List", "kind": "string", "name": "listLabel" }, { "default": "Details", "kind": "string", "name": "detailLabel" }, { "default": false, "kind": "boolean", "name": "detailActive" }, { "kind": "string", "name": "class" } ], "related": ["layout-dual-sidebar"], "summary": "Master-detail split with list and detail panes.", "tier": "app", "useWhen": ["List/detail workflows on wide screens"] }, { "a11y": "Label and value are text; trend has a spoken word, not color alone.", "agentEmittable": false, "dontUseWhen": ["A currency/percent KPI with previous period math (use kpi)"], "emit": [], "examples": [ { "id": "revenue", "props": { "delta": "+8%", "label": "Revenue", "trend": "up", "value": "$12.4k" }, "title": "Revenue up" } ], "group": "display", "id": "stat", "label": "Stat", "package": "texuli", "props": [ { "kind": "string", "name": "label", "required": true }, { "description": "string or number", "kind": "unknown", "name": "value", "required": true }, { "description": "string or number change", "kind": "unknown", "name": "delta" }, { "enumValues": ["up", "down", "neutral"], "kind": "enum", "name": "trend" }, { "default": "up", "description": "Which direction is good", "enumValues": ["up", "down"], "kind": "enum", "name": "positive" }, { "kind": "string", "name": "hint" }, { "kind": "slot", "name": "icon" }, { "kind": "slot", "name": "sparkline" }, { "default": "elevated", "enumValues": ["elevated", "flat"], "kind": "enum", "name": "variant" }, { "kind": "string", "name": "class" } ], "related": ["kpi", "card"], "summary": "A single metric with optional delta, trend and sparkline slot.", "tier": "app", "useWhen": ["Show one KPI with a human-formatted value"] }, { "a11y": "nav with an accessible name; current step is announced; completed steps may be activatable.", "agentEmittable": false, "dontUseWhen": ["A chronological event log (use timeline)"], "emit": [], "examples": [ { "id": "checkout", "props": { "current": 1, "orientation": "horizontal", "steps": [ { "id": "cart", "label": "Cart" }, { "id": "ship", "label": "Shipping" }, { "id": "pay", "label": "Payment" } ] }, "title": "Checkout steps" } ], "group": "display", "id": "stepper", "label": "Stepper", "package": "texuli", "props": [ { "description": "Array of { id, label, description? }", "kind": "array", "name": "steps", "required": true }, { "description": "0-based active index", "kind": "number", "name": "current", "required": true }, { "description": "Ids of completed steps", "kind": "array", "name": "completed" }, { "default": "horizontal", "enumValues": ["horizontal", "vertical"], "kind": "enum", "name": "orientation" }, { "kind": "event", "name": "onStepClick" }, { "default": "Progress", "kind": "string", "name": "label" }, { "kind": "string", "name": "class" } ], "related": ["timeline", "layout-wizard"], "summary": "Horizontal or vertical progress through ordered steps.", "tier": "app", "useWhen": ["Show multi-step onboarding or checkout progress"] }, { "a11y": "role=switch with aria-checked; label wires the accessible name.", "agentEmittable": false, "dontUseWhen": ["A form agreement that must be submitted (use checkbox)"], "emit": [], "examples": [ { "id": "labeled", "props": { "checked": true, "label": "Dark mode" }, "title": "Labeled switch" } ], "group": "forms", "id": "switch", "label": "Switch", "package": "texuli", "props": [ { "default": false, "kind": "boolean", "name": "checked" }, { "default": false, "kind": "boolean", "name": "defaultChecked" }, { "kind": "string", "name": "name" }, { "default": "on", "kind": "string", "name": "value" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "required" }, { "kind": "string", "name": "id" }, { "kind": "string", "name": "label" }, { "kind": "string", "name": "description" }, { "default": "md", "enumValues": ["sm", "md"], "kind": "enum", "name": "size" }, { "kind": "event", "name": "onCheckedChange" }, { "kind": "string", "name": "class" } ], "related": ["checkbox"], "summary": "An immediate on/off setting control.", "tier": "app", "useWhen": ["Settings that take effect immediately"] }, { "a11y": [ "Real table markup with caption or label for the scroll region", "Stacked mode keeps labels associated with cells", "busy sets aria-busy on the table" ], "agentEmittable": false, "dontUseWhen": ["A single metric (use stat or kpi)", "A free-form card layout"], "emit": [], "examples": [ { "id": "striped-sticky", "props": { "label": "Orders", "stack": "sm", "stickyHeader": true, "variant": "striped" }, "title": "Striped sticky header" } ], "group": "display", "id": "table", "label": "Table", "package": "texuli", "props": [ { "default": "plain", "enumValues": ["plain", "striped", "grid"], "kind": "enum", "name": "variant" }, { "default": "default", "enumValues": ["compact", "default", "comfortable"], "kind": "enum", "name": "density" }, { "default": "never", "description": "Stack rows into labelled cards when the container is narrow", "enumValues": ["never", "sm", "md"], "kind": "enum", "name": "stack" }, { "default": false, "kind": "boolean", "name": "stickyHeader" }, { "description": "CSS length capping height so the body scrolls", "kind": "string", "name": "maxBlockSize" }, { "description": "Accessible name for the scroll area", "kind": "string", "name": "label" }, { "default": false, "kind": "boolean", "name": "busy" }, { "kind": "string", "name": "wrapperClass" }, { "kind": "string", "name": "class" } ], "related": ["stat", "empty-state"], "summary": "A responsive data table with density, stacking and sticky header options.", "tier": "app", "useWhen": ["Tabular comparison of many rows and columns"] }, { "a11y": "Remove control has an accessible name; pending remove is disabled.", "agentEmittable": false, "dontUseWhen": ["Static status (use badge)", "A pressed filter control (use chip)"], "emit": [], "examples": [ { "id": "removable", "props": { "label": "Logistics", "variant": "info" }, "title": "Removable tag" } ], "group": "display", "id": "tag", "label": "Tag", "package": "texuli", "props": [ { "description": "Visible label", "kind": "string", "name": "label", "required": true }, { "default": "secondary", "enumValues": [ "default", "secondary", "outline", "success", "warning", "destructive", "info", "neutral" ], "kind": "enum", "name": "variant" }, { "default": "Remove", "kind": "string", "name": "removeLabel" }, { "description": "Called when remove is activated", "kind": "event", "name": "onRemove" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "kind": "string", "name": "class" } ], "related": ["badge", "chip"], "summary": "A labeled chip that can be removed.", "tier": "app", "useWhen": ["Show a selected filter or category the user can remove"] }, { "a11y": "Remaining count is exposed via aria-describedby while focused near the limit.", "agentEmittable": false, "dontUseWhen": ["Unbounded text without a max length"], "emit": [], "examples": [ { "id": "near-limit", "props": { "label": "Summary", "maxlength": 80, "showAfter": 20 }, "title": "Near limit" } ], "group": "forms", "id": "text-counter", "label": "TextCounter", "package": "texuli", "props": [ { "kind": "string", "name": "value" }, { "default": "input", "enumValues": ["input", "textarea"], "kind": "enum", "name": "tag" }, { "default": "text", "kind": "string", "name": "type" }, { "kind": "string", "name": "id" }, { "kind": "string", "name": "name" }, { "kind": "string", "name": "label" }, { "kind": "string", "name": "placeholder" }, { "default": 256, "kind": "number", "name": "maxlength" }, { "default": 20, "description": "Show the count once this many characters remain", "kind": "number", "name": "showAfter" }, { "default": 3, "kind": "number", "name": "rows" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "readonly" }, { "default": false, "kind": "boolean", "name": "required" }, { "default": false, "kind": "boolean", "name": "invalid" }, { "default": false, "kind": "boolean", "name": "autosize" }, { "default": "characters left", "kind": "string", "name": "remainingLabel" }, { "kind": "event", "name": "onValueChange" }, { "kind": "string", "name": "class" } ], "related": ["input", "textarea", "field"], "summary": "An input or textarea that shows remaining characters near the limit.", "tier": "app", "useWhen": ["Bounded free-text with a visible remaining count"] }, { "a11y": "Pair with Field or an external label; autosize disables manual resize.", "agentEmittable": false, "dontUseWhen": ["A single-line value (use input)"], "emit": [], "examples": [ { "id": "autosize", "props": { "autosize": true, "rows": 3 }, "title": "Autosize textarea" } ], "group": "forms", "id": "textarea", "label": "Textarea", "package": "texuli", "props": [ { "kind": "string", "name": "value" }, { "kind": "unknown", "name": "ref" }, { "default": false, "kind": "boolean", "name": "autosize" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "readonly" }, { "default": 3, "kind": "number", "name": "rows" }, { "kind": "event", "name": "onValueChange" }, { "kind": "string", "name": "class" } ], "related": ["input", "text-counter", "field"], "summary": "A multi-line text control with optional autosize.", "tier": "app", "useWhen": ["Longer free-text fields (notes, comments, descriptions)"] }, { "a11y": [ "Ordered list with an accessible name", "Status has a spoken word and marker shape, not color alone", "Item links pass the URL policy" ], "agentEmittable": false, "dontUseWhen": ["A Gantt schedule with dependencies (use @texuli/data/timeline)"], "emit": [], "examples": [ { "id": "shipment", "props": { "items": [ { "id": "1", "status": "complete", "time": "Mon", "title": "Packed" }, { "id": "2", "status": "current", "time": "Tue", "title": "In transit" }, { "id": "3", "status": "upcoming", "time": "Wed", "title": "Delivered" } ], "orientation": "vertical" }, "title": "Shipment timeline" } ], "group": "display", "id": "timeline", "label": "Timeline", "package": "texuli", "props": [ { "description": "Data-driven items (or compose TimelineItem children)", "kind": "array", "name": "items" }, { "default": "vertical", "enumValues": ["vertical", "horizontal"], "kind": "enum", "name": "orientation" }, { "kind": "string", "name": "label" }, { "description": "Localized label/status words", "kind": "object", "name": "messages" }, { "default": "developer", "enumValues": ["developer", "untrusted"], "kind": "enum", "name": "hrefTrust" }, { "description": "Extra content under each data item", "kind": "slot", "name": "item" }, { "kind": "string", "name": "class" } ], "related": ["stepper"], "summary": "Vertical or horizontal chronological list of events.", "tier": "app", "useWhen": ["Show a sequence of events with status"] }, { "a11y": "role=region with polite live updates; dismiss controls are labelled.", "agentEmittable": false, "dontUseWhen": ["Blocking errors that need a decision (use alert-dialog)"], "emit": [], "examples": [ { "id": "region", "props": { "label": "Notifications" }, "title": "Toaster region" } ], "group": "overlays", "id": "toaster", "label": "Toaster", "package": "texuli", "props": [ { "default": "Notifications", "kind": "string", "name": "label" }, { "default": "bottom-end", "description": "Block edge and logical inline position; narrow screens center the stack", "enumValues": [ "top-start", "top-center", "top-end", "bottom-start", "bottom-center", "bottom-end" ], "kind": "enum", "name": "position" }, { "description": "CSS length or px number from the stack edge", "kind": "string", "name": "offset" }, { "description": "Optional ToastStore inject (tests)", "kind": "unknown", "name": "store" }, { "default": "Dismiss notification", "kind": "string", "name": "dismissLabel" }, { "kind": "string", "name": "class" } ], "related": ["alert-dialog", "banner"], "summary": "Live region that renders toast notifications from the shared store.", "tier": "app", "useWhen": ["Transient success/error feedback after an action"] }, { "a11y": "Shows on focus; content is plain text or a snippet, never a sink.", "agentEmittable": false, "dontUseWhen": ["Essential instructions (put them in visible copy)"], "emit": [], "examples": [ { "id": "basic", "props": { "content": "Save note", "side": "top" }, "title": "Basic tooltip" } ], "group": "overlays", "id": "tooltip", "label": "Tooltip", "package": "texuli", "props": [ { "description": "Hint text or rich snippet", "kind": "string", "name": "content", "required": true }, { "description": "Trigger snippet { props }", "kind": "slot", "name": "children", "required": true }, { "description": "Shortcut string or list shown as Kbd", "kind": "string", "name": "shortcut" }, { "default": "top", "enumValues": ["top", "right", "bottom", "left"], "kind": "enum", "name": "side" }, { "default": "center", "enumValues": ["start", "center", "end"], "kind": "enum", "name": "align" }, { "default": 6, "kind": "number", "name": "sideOffset" }, { "default": 300, "kind": "number", "name": "delayDuration" }, { "default": false, "kind": "boolean", "name": "disabled" }, { "default": false, "kind": "boolean", "name": "open" }, { "kind": "string", "name": "class" } ], "related": ["popover", "hover-card"], "summary": "Short delayed hint on hover or focus.", "tier": "app", "useWhen": ["Icon-only controls need a name", "Optional keyboard shortcut hints"] } ], "format": "texuli-catalog", "groups": { "content": [ "blocks-code", "blocks-data", "blocks-diagram", "blocks-embed", "blocks-interactive", "blocks-map", "blocks-media", "blocks-structure", "blocks-text", "charts-area", "charts-bar", "charts-bubble", "charts-bullet", "charts-canvas-renderer", "charts-cartesian", "charts-combo", "charts-donut", "charts-funnel", "charts-gauge", "charts-geo-map", "charts-geo-point-map", "charts-heatmap", "charts-line", "charts-network", "charts-pie", "charts-progress-ring", "charts-sankey", "charts-scatter", "charts-sparkline", "charts-stacked-bar", "charts-sunburst", "charts-treemap", "media-composition-canvas", "media-composition-svg", "media-image" ], "display": [ "alert", "badge", "banner", "callout", "card", "chip", "code", "empty-state", "error-state", "inline-text", "kbd", "kpi", "stat", "stepper", "table", "tag", "timeline" ], "forms": [ "button", "button-group", "checkbox", "combobox", "description", "field", "field-error", "form", "icon-button", "input", "input-group", "label", "multi-select", "radio", "radio-group", "select", "select-content", "select-group", "select-item", "select-label", "select-portal", "select-separator", "select-trigger", "select-value", "select-viewport", "switch", "text-counter", "textarea" ], "layouts": [ "analytics-grid", "content-layout", "deck-slide", "layout-auth-split", "layout-blog", "layout-card", "layout-chrome", "layout-dashboard-grid", "layout-deck", "layout-doc", "layout-docs", "layout-drawer", "layout-dual-sidebar", "layout-editorial", "layout-grid", "layout-host", "layout-landing", "layout-marketing", "layout-page", "layout-pricing", "layout-settings", "layout-sidebar", "layout-top-nav", "layout-wizard", "nav-icon", "screen-outlet", "split-view" ], "overlays": [ "alert-dialog", "app-nav", "breadcrumb", "command-palette", "context-menu", "context-menu-trigger", "detail-panel", "dialog", "drawer", "dropdown-menu", "dropdown-menu-content", "dropdown-menu-item", "dropdown-menu-trigger", "hover-card", "hover-card-content", "menubar", "menubar-trigger", "navigation-menu", "pagination", "popover", "popover-content", "responsive-modal", "sheet", "sidebar", "toaster", "tooltip" ] }, "tiers": { "developer": [ "blocks-code", "blocks-data", "blocks-diagram", "blocks-embed", "blocks-interactive", "blocks-map", "blocks-media", "blocks-structure", "blocks-text", "charts-area", "charts-bar", "charts-bubble", "charts-bullet", "charts-canvas-renderer", "charts-cartesian", "charts-combo", "charts-donut", "charts-funnel", "charts-gauge", "charts-geo-map", "charts-geo-point-map", "charts-heatmap", "charts-line", "charts-network", "charts-pie", "charts-progress-ring", "charts-sankey", "charts-scatter", "charts-sparkline", "charts-stacked-bar", "charts-sunburst", "charts-treemap", "deck-slide", "layout-card", "layout-deck", "layout-doc", "layout-grid", "layout-page", "media-composition-canvas", "media-composition-svg", "media-image" ], "untrusted": [ "blocks-code", "blocks-data", "blocks-diagram", "blocks-embed", "blocks-interactive", "blocks-map", "blocks-media", "blocks-structure", "blocks-text", "charts-area", "charts-bar", "charts-bubble", "charts-bullet", "charts-canvas-renderer", "charts-cartesian", "charts-combo", "charts-donut", "charts-funnel", "charts-gauge", "charts-geo-map", "charts-geo-point-map", "charts-heatmap", "charts-line", "charts-network", "charts-pie", "charts-progress-ring", "charts-sankey", "charts-scatter", "charts-sparkline", "charts-stacked-bar", "charts-sunburst", "charts-treemap", "deck-slide", "layout-card", "layout-deck", "layout-doc", "layout-grid", "layout-page", "media-composition-canvas", "media-composition-svg", "media-image" ] }, "version": 1 }