{
  "schemaVersion": 1,
  "library": {
    "name": "@h0nio/ui",
    "version": "1.3.0"
  },
  "components": [
    {
      "schemaVersion": 1,
      "component": "H0Accordion",
      "status": "migrated",
      "summary": "Uncontrolled stack of accessible disclosure sections for progressively revealing related content.",
      "imports": {
        "components": [
          "H0Accordion"
        ],
        "types": [
          "H0AccordionItem",
          "H0AccordionProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "items",
            "type": "H0AccordionItem[]",
            "description": "Ordered disclosure items rendered by the component."
          },
          {
            "name": "id",
            "type": "string",
            "default": "Generated with useId()",
            "description": "Stable prefix for trigger and panel IDs. Must be unique when supplied."
          },
          {
            "name": "multiple",
            "type": "boolean",
            "default": "false",
            "description": "Allows more than one panel to remain open."
          },
          {
            "name": "defaultOpen",
            "type": "number[]",
            "default": "[]",
            "description": "Zero-based indexes opened only during initialization. Single mode uses only the first index."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "item",
            "type": "{ item: H0AccordionItem & { title: string; content: string }; index: number; open: boolean }",
            "description": "Replaces panel content and receives the normalized item, its index, and current open state."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0AccordionItem",
            "description": "Content and availability for one disclosure section.",
            "fields": [
              {
                "name": "title",
                "type": "string",
                "default": "''",
                "description": "Preferred visible label for the disclosure trigger. Required unless question provides the label."
              },
              {
                "name": "content",
                "type": "string",
                "default": "''",
                "description": "Preferred fallback panel content when the item slot is not used."
              },
              {
                "name": "question",
                "type": "string",
                "default": "undefined",
                "description": "Compatibility label alias used when title is absent."
              },
              {
                "name": "answer",
                "type": "string",
                "default": "undefined",
                "description": "Compatibility alias used when content is absent."
              },
              {
                "name": "disabled",
                "type": "boolean",
                "default": "false",
                "description": "Disables the native trigger and prevents state changes."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Related supporting content should be progressively disclosed.",
        "An FAQ or settings surface benefits from compact stacked sections.",
        "Users may need to compare multiple sections by enabling multiple mode."
      ],
      "avoidWhen": [
        "Content is essential and should remain continuously visible.",
        "The interface requires externally controlled open state or change events.",
        "The content represents navigation between peer views; use H0Tabs instead."
      ],
      "accessibility": [
        "Use concise, distinguishable item titles.",
        "Triggers expose aria-expanded and aria-controls; panels expose role=region and aria-labelledby.",
        "Closed panels are aria-hidden and inert so custom controls cannot receive focus.",
        "Place the component under an appropriate page heading because item triggers do not create heading levels."
      ],
      "styling": [
        "Use a wrapper or H0Card when a bordered surface is required.",
        "Use public H0N tokens and treat .h-accordion selectors as implementation details."
      ],
      "responsive": [
        "Let Accordion fill a fluid container on narrow screens.",
        "Ensure custom slot content wraps without horizontal scrolling."
      ],
      "performance": [
        "Keep the items array stable when its data has not changed.",
        "Collapsed content remains mounted, so avoid many expensive panel subtrees.",
        "Avoid reordering open index-based items unless disclosure state is intentionally reassigned."
      ],
      "examples": [
        {
          "key": "components/accordion/BasicExample",
          "purpose": "Single-open FAQ with an initial panel."
        },
        {
          "key": "components/accordion/MultipleExample",
          "purpose": "Multiple panels initialized in the open state."
        },
        {
          "key": "components/accordion/StatesExample",
          "purpose": "Native disabled disclosure item."
        },
        {
          "key": "components/accordion/CustomContentExample",
          "purpose": "Structured slot content and open slot state."
        }
      ],
      "relatedComponents": [
        "H0Card",
        "H0Tabs"
      ],
      "manifest": {
        "family": "Accordion",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/accordion",
        "styleEntry": "components/Accordion/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Alert",
      "status": "migrated",
      "summary": "Persistent assertive inline feedback with semantic tones, compact and loading states, actions, dismissal, and rich content.",
      "imports": {
        "components": [
          "H0Alert"
        ],
        "types": [
          "H0AlertEmits",
          "H0AlertProps",
          "H0AlertTone",
          "H0AlertVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0AlertTone",
            "default": "'default'",
            "description": "Semantic visual intent and default icon; meaning must also be present in text."
          },
          {
            "name": "variant",
            "type": "H0AlertVariant",
            "default": "'surface'",
            "description": "Surface, secondary, or outline container appearance, independent from semantic tone."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Applies loading visual treatment without disabling action or close controls."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Primary alert message and fallback for the title slot."
          },
          {
            "name": "text",
            "type": "string",
            "default": "''",
            "description": "Secondary plain-text description and fallback for the default slot."
          },
          {
            "name": "closable",
            "type": "boolean",
            "default": "false",
            "description": "Shows the close control without owning visibility state."
          },
          {
            "name": "actionText",
            "type": "string",
            "default": "''",
            "description": "Shows the component-owned action button and supplies fallback action content."
          },
          {
            "name": "closeAriaLabel",
            "type": "string",
            "default": "'Close alert'",
            "description": "Non-localized accessible close-control label; override with contextual product copy."
          }
        ],
        "events": [
          {
            "name": "action",
            "type": "—",
            "description": "Reports component-owned action-button activation without a payload."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Requests parent-owned dismissal without a payload."
          }
        ],
        "slots": [
          {
            "name": "icon",
            "type": "—",
            "description": "Replaces the tone or loading icon with decorative custom content."
          },
          {
            "name": "title",
            "type": "—",
            "description": "Replaces title content inside component-owned strong typography."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Rich description inside component-owned description typography."
          },
          {
            "name": "action",
            "type": "—",
            "description": "Replaces only the content of the component-owned action button; interactive descendants are invalid."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0AlertTone",
            "fields": [
              {
                "name": "H0AlertTone",
                "type": "'default' | 'info' | 'success' | 'warning' | 'danger'",
                "description": "Available semantic visual tones."
              }
            ]
          },
          {
            "name": "H0AlertVariant",
            "fields": [
              {
                "name": "H0AlertVariant",
                "type": "'secondary' | 'surface' | 'outline'",
                "description": "Supported container appearances."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Important feedback should remain in the page flow.",
        "A warning or error needs context and an optional recovery action."
      ],
      "avoidWhen": [
        "Feedback is transient and global; use H0Toast.",
        "The message requires a blocking decision; use H0AlertDialog.",
        "Routine background progress does not justify an assertive role=alert announcement."
      ],
      "accessibility": [
        "Use alerts deliberately because role=alert is assertive, including during loading.",
        "Pair tone with explicit text.",
        "Loading rotation runs in effective Medium or High; Off, Low, and the system reduced-motion preference retain a static status.",
        "Give repeated close controls contextual localized labels.",
        "Restore focus after removing a focused close control.",
        "Keep action-slot content non-interactive and handle activation through the action event."
      ],
      "styling": [
        "Use variant for container appearance and tone for semantic intent.",
        "Provide text and actionText fallbacks when rich slots require non-compact layout.",
        "Treat the alert grid and state selectors as implementation details."
      ],
      "responsive": [
        "Actions and close controls move below content on narrow screens.",
        "Allow the alert to fill a fluid container."
      ],
      "performance": [
        "Avoid mounting many alerts for one validation group.",
        "Keep rich slot trees lightweight."
      ],
      "examples": [
        {
          "key": "components/alert/VariantsExample",
          "purpose": "Surface, secondary, and outline container appearances."
        },
        {
          "key": "components/alert/TonesExample",
          "purpose": "All semantic visual tones with explicit textual meaning."
        },
        {
          "key": "components/alert/ActionsExample",
          "purpose": "Component-owned action, parent-owned dismissal, and focus restoration."
        },
        {
          "key": "components/alert/ContentStatesExample",
          "purpose": "Compact, rich, custom icon and action content, and controlled loading states."
        }
      ],
      "relatedComponents": [
        "H0Toast",
        "H0AlertDialog",
        "H0Icon"
      ],
      "manifest": {
        "family": "Alert",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/alert",
        "styleEntry": "components/Alert/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0AlertDialog",
      "status": "migrated",
      "summary": "Blocking alert dialog for explicit confirmation or cancellation of a consequential action.",
      "imports": {
        "components": [
          "H0AlertDialog"
        ],
        "types": [
          "H0AlertDialogBackdrop",
          "H0AlertDialogEmits",
          "H0AlertDialogProps",
          "H0AlertDialogTone"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state used by v-model."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial open state when the component is uncontrolled."
          },
          {
            "name": "tone",
            "type": "H0AlertDialogTone",
            "default": "'info'",
            "description": "Semantic treatment: 'info', 'success', 'warning', or 'danger'."
          },
          {
            "name": "backdrop",
            "type": "H0AlertDialogBackdrop",
            "default": "'opaque'",
            "description": "Backdrop appearance: 'opaque', 'blur', or 'transparent'; backdrop clicks never dismiss this critical dialog."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Visible title and preferred accessible dialog name."
          },
          {
            "name": "text",
            "type": "string",
            "default": "''",
            "description": "Fallback description rendered when the default slot is absent."
          },
          {
            "name": "confirmText",
            "type": "string",
            "default": "''",
            "description": "Confirmation label; falls back to locale text."
          },
          {
            "name": "cancelText",
            "type": "string",
            "default": "''",
            "description": "Cancellation label; falls back to locale text."
          },
          {
            "name": "closeOnEsc",
            "type": "boolean",
            "default": "true",
            "description": "Allows Escape to close the dialog."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name used when title is empty before the locale fallback."
          },
          {
            "name": "closeAriaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label for the icon-only close button."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Teleport destination for the overlay root."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the overlay in place instead of teleporting it."
          },
          {
            "name": "initialFocus",
            "type": "string | HTMLElement",
            "default": "undefined",
            "description": "Selector or element to focus when opened."
          },
          {
            "name": "returnFocus",
            "type": "boolean | HTMLElement",
            "default": "true",
            "description": "Returns focus to the opener or a supplied element after closing."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while open."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests a controlled open-state update."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports every committed open-state change."
          },
          {
            "name": "confirm",
            "type": "—",
            "description": "Reports confirmation before the dialog closes."
          },
          {
            "name": "cancel",
            "type": "—",
            "description": "Reports cancellation before the dialog closes."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports any close path."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Structured description replacing text."
          },
          {
            "name": "title",
            "type": "—",
            "description": "Structured visible title replacing title text."
          },
          {
            "name": "actions",
            "type": "{ cancel: () => void; confirm: () => void; close: () => void }",
            "description": "Replaces default actions and receives decision callbacks."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0AlertDialogTone",
            "fields": [
              {
                "name": "H0AlertDialogTone",
                "type": "'danger' | 'info' | 'success' | 'warning'",
                "description": "Semantic intent used for the icon, accent, and default confirmation tone."
              }
            ]
          },
          {
            "name": "H0AlertDialogBackdrop",
            "fields": [
              {
                "name": "H0AlertDialogBackdrop",
                "type": "'opaque' | 'blur' | 'transparent'",
                "description": "Available backdrop appearances; backdrop clicks never dismiss an alert dialog."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A destructive or consequential action requires an explicit decision.",
        "The user must acknowledge risk before a workflow continues."
      ],
      "avoidWhen": [
        "Feedback is informational or non-blocking.",
        "The workflow is a general form better suited to H0Modal."
      ],
      "accessibility": [
        "Use a specific title.",
        "Keep a clear cancellation path.",
        "Choose initial focus conservatively for destructive actions."
      ],
      "styling": [
        "Use semantic tone and public H0N tokens.",
        "The built-in header, content, and footer follow the shared overlay section layout.",
        "Treat internal alert-dialog selectors as implementation details."
      ],
      "responsive": [
        "Keep copy and actions concise so they wrap on narrow screens."
      ],
      "performance": [
        "Keep blocking content small; it mounts only while open."
      ],
      "examples": [
        {
          "key": "components/alert-dialog/BasicExample",
          "purpose": "Controlled destructive confirmation and decision events."
        },
        {
          "key": "components/alert-dialog/TonesExample",
          "purpose": "Information, success, warning, and danger decision contexts."
        },
        {
          "key": "components/alert-dialog/CustomActionsExample",
          "purpose": "Slotted title, description, custom actions, and conservative initial focus."
        },
        {
          "key": "components/alert-dialog/BackdropsExample",
          "purpose": "Opaque, blurred, and transparent backdrop treatments."
        }
      ],
      "relatedComponents": [
        "H0Alert",
        "H0Button",
        "H0Modal",
        "H0Toast"
      ],
      "manifest": {
        "family": "Alert",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/alertdialog",
        "styleEntry": "components/Alert/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Avatar",
      "status": "migrated",
      "summary": "User or account image with skeleton loading, deterministic color, and initials fallback.",
      "imports": {
        "components": [
          "H0Avatar"
        ],
        "types": [
          "H0AvatarColor",
          "H0AvatarProps",
          "H0AvatarStatus"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "alt",
            "type": "string",
            "default": "''",
            "description": "Accessible image description and highest-priority wrapper label."
          },
          {
            "name": "cache",
            "type": "boolean",
            "default": "true",
            "description": "Caches loaded or failed status per source in sessionStorage."
          },
          {
            "name": "color",
            "type": "H0AvatarColor | null",
            "default": "null",
            "description": "Explicit initials background color; otherwise derived from identity text."
          },
          {
            "name": "fallback",
            "type": "string | null",
            "default": "null",
            "description": "Highest-priority initials source, trimmed to two uppercase characters."
          },
          {
            "name": "name",
            "type": "string | null",
            "default": "''",
            "description": "Name used for initials, automatic color, and accessible labeling."
          },
          {
            "name": "radius",
            "type": "string",
            "default": "'50%'",
            "description": "CSS border radius for the wrapper and skeleton."
          },
          {
            "name": "size",
            "type": "number | string",
            "default": "38",
            "description": "Equal width and height; numbers are converted to pixels."
          },
          {
            "name": "src",
            "type": "string | null",
            "default": "''",
            "description": "Image source loaded before replacing the skeleton or fallback."
          },
          {
            "name": "username",
            "type": "string | null",
            "default": "''",
            "description": "Secondary identity source for initials, color, and labeling."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0AvatarColor",
            "fields": [
              {
                "name": "H0AvatarColor",
                "type": "'blue' | 'red' | 'green' | 'purple' | 'pink' | 'cyan' | 'orange'",
                "description": "Supported fallback color names."
              }
            ]
          },
          {
            "name": "H0AvatarStatus",
            "fields": [
              {
                "name": "H0AvatarStatus",
                "type": "'failed' | 'loaded' | 'pending'",
                "description": "Exported union used internally for image loading and cached source status."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A person, team, or account needs a compact visual identity.",
        "An image requires initials fallback and loading feedback."
      ],
      "avoidWhen": [
        "The image is content rather than identity; use H0Image.",
        "A decorative shape does not need an image role."
      ],
      "accessibility": [
        "Provide meaningful alt or identity text.",
        "The wrapper always exposes role=img, including fallback initials."
      ],
      "styling": [
        "Use size, radius, and color before local styles.",
        "Treat .h-avatar and --h-avatar-* as implementation details."
      ],
      "responsive": [
        "Choose a size appropriate to the surrounding density.",
        "Keep avatars fixed-size inside flexible layouts."
      ],
      "performance": [
        "Keep cache enabled for stable repeated URLs.",
        "Disable status caching when content changes behind an unchanged URL."
      ],
      "examples": [
        {
          "key": "components/avatar/BasicExample",
          "purpose": "Image and initials fallback sources."
        },
        {
          "key": "components/avatar/ColorsExample",
          "purpose": "All explicit fallback color options."
        },
        {
          "key": "components/avatar/SizingExample",
          "purpose": "Numeric and CSS-string dimensions with custom radius."
        }
      ],
      "relatedComponents": [
        "H0Image",
        "H0Skeleton"
      ],
      "manifest": {
        "family": "Avatar",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/avatar",
        "styleEntry": "components/Avatar/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Badge",
      "status": "migrated",
      "summary": "Compact non-interactive status, category, or metadata label.",
      "imports": {
        "components": [
          "H0Badge"
        ],
        "types": [
          "H0BadgeProps",
          "H0BadgeSize",
          "H0BadgeTone"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0BadgeTone",
            "default": "'default'",
            "description": "Semantic or neutral color treatment."
          },
          {
            "name": "size",
            "type": "H0BadgeSize",
            "default": "'md'",
            "description": "Compact small or medium sizing."
          },
          {
            "name": "dot",
            "type": "boolean",
            "default": "false",
            "description": "Adds a decorative leading status dot."
          },
          {
            "name": "text",
            "type": "string",
            "default": "''",
            "description": "Fallback content when the default slot is empty."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible badge label, overriding text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0BadgeTone",
            "fields": [
              {
                "name": "H0BadgeTone",
                "type": "'default' | 'primary' | 'success' | 'warning' | 'danger' | 'neutral'",
                "description": "Supported badge tones."
              }
            ]
          },
          {
            "name": "H0BadgeSize",
            "fields": [
              {
                "name": "H0BadgeSize",
                "type": "'sm' | 'md'",
                "description": "Shared H0Size scale without the large option."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A status, category, or count needs compact emphasis."
      ],
      "avoidWhen": [
        "The label must be interactive.",
        "A filter must expose selected state; use H0Chip."
      ],
      "accessibility": [
        "Keep explicit visible text.",
        "Do not rely on color or the dot alone."
      ],
      "styling": [
        "Use tone and size.",
        "Treat .h-badge selectors as implementation details."
      ],
      "responsive": [
        "Keep labels short and place groups in a wrapping container."
      ],
      "performance": [
        "Prefer simple text slot content for large badge collections."
      ],
      "examples": [
        {
          "key": "components/badge/AppearanceExample",
          "purpose": "All semantic and neutral tones."
        },
        {
          "key": "components/badge/SizesExample",
          "purpose": "Small and medium badges with a status dot."
        }
      ],
      "relatedComponents": [
        "H0Chip"
      ],
      "manifest": {
        "family": "Badge",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/badge",
        "styleEntry": "components/Badge/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Breadcrumbs",
      "status": "migrated",
      "summary": "Ordered location trail with native or router-compatible ancestor links and current-page semantics.",
      "imports": {
        "components": [
          "H0Breadcrumbs"
        ],
        "types": [
          "H0BreadcrumbItem",
          "H0BreadcrumbsProps",
          "H0BreadcrumbTarget"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "items",
            "type": "H0BreadcrumbItem[]",
            "description": "Ordered ancestors followed by the current page."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "'Breadcrumbs'",
            "description": "Accessible navigation name."
          },
          {
            "name": "linkComponent",
            "type": "string | Component",
            "default": "'a'",
            "description": "Native anchor or router-compatible component for ancestor links."
          },
          {
            "name": "separator",
            "type": "string",
            "default": "'›'",
            "description": "Decorative separator text."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "item",
            "type": "{ item: H0BreadcrumbItem; index: number; current: boolean }",
            "description": "Custom content for every path item."
          },
          {
            "name": "separator",
            "type": "{ item: H0BreadcrumbItem; index: number }",
            "description": "Custom decorative separator after an ancestor."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0BreadcrumbTarget",
            "fields": [
              {
                "name": "H0BreadcrumbTarget",
                "type": "string | Record<string, unknown>",
                "description": "Router-compatible destination."
              }
            ]
          },
          {
            "name": "H0BreadcrumbItem",
            "fields": [
              {
                "name": "label",
                "type": "string",
                "description": "Visible item label."
              },
              {
                "name": "to",
                "type": "H0BreadcrumbTarget | undefined",
                "description": "Router-compatible target."
              },
              {
                "name": "href",
                "type": "string | undefined",
                "description": "Native anchor destination."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Renders an ancestor as non-interactive."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A page belongs to a meaningful navigable hierarchy."
      ],
      "avoidWhen": [
        "The interface represents sequential progress rather than location; use H0Stepper."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Long paths remain in one horizontal scroll row.",
        "Keep the current item and nearest useful ancestors visible when space is constrained."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/breadcrumbs/BasicExample",
          "purpose": "Hierarchical documentation location."
        },
        {
          "key": "components/breadcrumbs/SlotsExample",
          "purpose": "Custom content and disabled ancestor."
        },
        {
          "key": "components/breadcrumbs/LongPathExample",
          "purpose": "Long horizontally scrollable path."
        }
      ],
      "relatedComponents": [
        "H0Link"
      ],
      "manifest": {
        "family": "Breadcrumbs",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/breadcrumbs",
        "styleEntry": "components/Breadcrumbs/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Button",
      "status": "migrated",
      "summary": "Base action control for forms, toolbars, dialogs, command surfaces, and link-like actions.",
      "imports": {
        "components": [
          "H0Button"
        ],
        "types": [
          "H0ButtonProps",
          "H0ButtonSize",
          "H0ButtonTone",
          "H0ButtonTypeVariant",
          "H0ButtonVariant",
          "H0IconSource"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0ButtonTone",
            "default": "'default'",
            "description": "Semantic intent used by solid and soft appearances."
          },
          {
            "name": "variant",
            "type": "H0ButtonVariant",
            "default": "'solid'",
            "description": "Visual emphasis of the button."
          },
          {
            "name": "size",
            "type": "H0ButtonSize",
            "default": "'md'",
            "description": "Controls height, horizontal padding, font size, and icon-only dimensions."
          },
          {
            "name": "buttonType",
            "type": "H0ButtonTypeVariant",
            "default": "'default'",
            "description": "Selects text-only, icon-with-text, or icon-only content."
          },
          {
            "name": "icon",
            "type": "H0IconSource",
            "default": "undefined",
            "description": "Legacy node definition or body definition imported from an individual @h0nio/icons subpath."
          },
          {
            "name": "iconTitle",
            "type": "string",
            "default": "''",
            "description": "Optional accessible SVG title. It does not replace ariaLabel on icon-only controls."
          },
          {
            "name": "type",
            "type": "'button' | 'submit' | 'reset'",
            "default": "'button'",
            "description": "Native button type when the root is a button element."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents pointer and keyboard activation."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Disables interaction, displays a spinner, and sets aria-busy."
          },
          {
            "name": "loadingText",
            "type": "string",
            "default": "undefined",
            "description": "Replaces slot content with a loading message."
          },
          {
            "name": "fullWidth",
            "type": "boolean",
            "default": "false",
            "description": "Makes the control fill its container width."
          },
          {
            "name": "rounded",
            "type": "boolean",
            "default": "true",
            "description": "Removes the radius when false. Icon-only buttons stay circular."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label. Required when no visible text identifies the action."
          },
          {
            "name": "as",
            "type": "string | Component",
            "default": "'button'",
            "description": "Element tag or Vue component used as the root."
          },
          {
            "name": "href",
            "type": "string",
            "default": "undefined",
            "description": "Destination for anchor-style buttons."
          },
          {
            "name": "to",
            "type": "unknown",
            "default": "undefined",
            "description": "Destination intended for compatible custom link components."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Advanced root attributes merged after ordinary fallthrough attributes."
          }
        ],
        "events": [
          {
            "name": "click",
            "type": "MouseEvent",
            "description": "Native event from the rendered root. Suppressed while disabled or loading."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Native focus event from the rendered root."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Native blur event from the rendered root."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible button label. Hidden for onlyIcon; retained beside the spinner while loading unless loadingText is provided."
          },
          {
            "name": "icon",
            "type": "—",
            "description": "Custom Vue component, SVG, or other icon content. Takes precedence over the icon prop."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ButtonTone",
            "fields": [
              {
                "name": "H0ButtonTone",
                "type": "'default' | 'primary' | 'success' | 'warning' | 'danger'",
                "description": "Supported semantic button tones."
              }
            ]
          },
          {
            "name": "H0ButtonVariant",
            "fields": [
              {
                "name": "H0ButtonVariant",
                "type": "'solid' | 'soft' | 'outline' | 'ghost'",
                "description": "Supported visual emphasis variants."
              }
            ]
          },
          {
            "name": "H0ButtonSize",
            "fields": [
              {
                "name": "H0ButtonSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported button sizes. Alias of the shared H0Size type."
              }
            ]
          },
          {
            "name": "H0ButtonTypeVariant",
            "fields": [
              {
                "name": "H0ButtonTypeVariant",
                "type": "'default' | 'withIcon' | 'onlyIcon'",
                "description": "Supported text and icon content layouts."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Triggering an action in a form, toolbar, dialog, or command surface.",
        "Rendering a visually button-like semantic link with as=\"a\" and href."
      ],
      "avoidWhen": [
        "Navigation should use a normal link when button styling is unnecessary.",
        "A set of adjacent related actions should use H0ButtonGroup.",
        "A selected state is required; use a selection control instead."
      ],
      "accessibility": [
        "Use a concise, action-oriented visible label.",
        "Provide ariaLabel for every icon-only button.",
        "Keep type=\"button\" unless the action intentionally submits or resets a form.",
        "Do not communicate destructive or status meaning through color alone."
      ],
      "styling": [
        "Prefer tone, variant, size, and public design tokens over internal selectors.",
        "Treat .h-button and --h-button-* variables as implementation details."
      ],
      "responsive": [
        "Use fullWidth for stacked mobile actions and narrow containers.",
        "Keep labels short enough to avoid overflow at small widths."
      ],
      "performance": [
        "Avoid recreating icon definitions and rootAttrs objects on every render when they can remain stable."
      ],
      "examples": [
        {
          "key": "components/button/BasicExample",
          "purpose": "Basic primary action."
        },
        {
          "key": "components/button/AppearanceExample",
          "purpose": "All supported tones and variants."
        },
        {
          "key": "components/button/SizesExample",
          "purpose": "Small, medium, and large sizes."
        },
        {
          "key": "components/button/WithIconExample",
          "purpose": "Visible labels paired with icons."
        },
        {
          "key": "components/button/IconOnlyExample",
          "purpose": "Accessible icon-only actions."
        },
        {
          "key": "components/button/StatesExample",
          "purpose": "Disabled and loading states."
        },
        {
          "key": "components/button/FullWidthExample",
          "purpose": "Full-width layout."
        },
        {
          "key": "components/button/LinksExample",
          "purpose": "Anchor rendering for navigation."
        },
        {
          "key": "components/button/ClickExample",
          "purpose": "Native click event handling."
        }
      ],
      "relatedComponents": [
        "H0Icon",
        "H0ButtonGroup",
        "H0Segment"
      ],
      "manifest": {
        "family": "Button",
        "familyRole": "root",
        "category": "actions",
        "docsPath": "/components/button",
        "styleEntry": "components/Button/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ButtonGroup",
      "status": "migrated",
      "summary": "Accessible group of adjacent H0Button controls for a short set of closely related actions.",
      "imports": {
        "components": [
          "H0ButtonGroup"
        ],
        "types": [
          "H0ButtonGroupEmits",
          "H0ButtonGroupItem",
          "H0ButtonGroupProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "variant",
            "type": "H0ButtonVariant",
            "default": "'solid'",
            "description": "Shared visual emphasis passed to each button."
          },
          {
            "name": "tone",
            "type": "H0ButtonTone",
            "default": "'default'",
            "description": "Shared semantic intent passed to each button."
          },
          {
            "name": "size",
            "type": "H0ButtonSize",
            "default": "'md'",
            "description": "Shared size passed to each button."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables items that do not provide their own disabled value."
          },
          {
            "name": "fullWidth",
            "type": "boolean",
            "default": "false",
            "description": "Makes the group fill its container and distributes items evenly."
          },
          {
            "name": "buttons",
            "type": "H0ButtonGroupItem[]",
            "default": "[{}, {}, {}]",
            "description": "Defines item count, fallback labels, slot names, keys, and per-item overrides."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "'Button group'",
            "description": "Accessible name applied to the root role=\"group\"."
          }
        ],
        "events": [
          {
            "name": "button-click",
            "type": "[button: H0ButtonGroupItem, index: number]",
            "description": "Emitted after an enabled, non-loading button is activated."
          }
        ],
        "slots": [
          {
            "name": "btn-1, btn-2, btn-3",
            "type": "{ button: H0ButtonGroupItem, index: number }",
            "description": "Default named slots created by the default three-item configuration."
          },
          {
            "name": "Custom item slot",
            "type": "{ button: H0ButtonGroupItem, index: number }",
            "description": "Any name assigned through an item's slot field."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ButtonGroupItem",
            "description": "Configuration for one rendered button.",
            "fields": [
              {
                "name": "key",
                "type": "string",
                "default": "Generated slot name",
                "description": "Stable Vue key for the item."
              },
              {
                "name": "label",
                "type": "string",
                "default": "'Button 1', …",
                "description": "One-based fallback label when the matching slot is not provided."
              },
              {
                "name": "slot",
                "type": "string",
                "default": "'btn-1', …",
                "description": "One-based generated slot name used to render the item content."
              },
              {
                "name": "variant",
                "type": "H0ButtonVariant",
                "default": "Group variant",
                "description": "Overrides the group appearance for this item."
              },
              {
                "name": "tone",
                "type": "H0ButtonTone",
                "default": "Group tone",
                "description": "Overrides the group semantic tone for this item."
              },
              {
                "name": "size",
                "type": "H0ButtonSize",
                "default": "Group size",
                "description": "Overrides the group size for this item."
              },
              {
                "name": "disabled",
                "type": "boolean",
                "default": "Group disabled",
                "description": "Overrides the inherited disabled state."
              },
              {
                "name": "loading",
                "type": "boolean",
                "default": "false",
                "description": "Displays the button spinner and prevents interaction."
              },
              {
                "name": "loadingText",
                "type": "string",
                "default": "undefined",
                "description": "Replaces the item content while loading."
              },
              {
                "name": "fullWidth",
                "type": "boolean",
                "default": "Group fullWidth",
                "description": "Overrides the inherited full-width behavior."
              }
            ]
          },
          {
            "name": "H0ButtonGroupEmits",
            "description": "Named events emitted by the group.",
            "fields": [
              {
                "name": "button-click",
                "type": "[button: H0ButtonGroupItem, index: number]",
                "description": "Payload emitted when an enabled, non-loading item is activated."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A short row of actions belongs to the same task or object.",
        "Actions need connected edges, shared appearance, and coordinated sizing."
      ],
      "avoidWhen": [
        "Commands are unrelated.",
        "The control represents a single selected value; use H0Segment, radio controls, or another selection component.",
        "Only one action is present."
      ],
      "accessibility": [
        "Provide a concise ariaLabel describing the relationship between actions.",
        "Keep every visible item label clear and action-oriented.",
        "Preserve the logical order of the buttons array because it defines keyboard order."
      ],
      "styling": [
        "Use group props and public H0N design tokens before local styles.",
        "Treat .h-button-group, its elements, and --h-button-group-separator as implementation details."
      ],
      "responsive": [
        "Use fullWidth when the group should fill a narrow container.",
        "Keep the number of adjacent actions small enough to fit without clipping."
      ],
      "performance": [
        "Keep the buttons array stable when its contents have not changed.",
        "Use stable item keys for data-driven groups."
      ],
      "examples": [
        {
          "key": "components/button-group/BasicExample",
          "purpose": "Default connected action group."
        },
        {
          "key": "components/button-group/AppearanceExample",
          "purpose": "Supported tones and variants."
        },
        {
          "key": "components/button-group/SizesExample",
          "purpose": "Shared size propagation."
        },
        {
          "key": "components/button-group/ConfigurationExample",
          "purpose": "Data-driven items, named slots, and emitted actions."
        },
        {
          "key": "components/button-group/StatesExample",
          "purpose": "Inherited and item-level disabled and loading states."
        },
        {
          "key": "components/button-group/FullWidthExample",
          "purpose": "Equal-width actions in a fluid group."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Segment"
      ],
      "manifest": {
        "family": "ButtonGroup",
        "familyRole": "root",
        "category": "actions",
        "docsPath": "/components/buttongroup",
        "styleEntry": "components/ButtonGroup/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Card",
      "status": "migrated",
      "summary": "Composable surface for grouped content, metadata, and actions with optional interactivity.",
      "imports": {
        "components": [
          "H0Card"
        ],
        "types": [
          "H0CardElement",
          "H0CardProps",
          "H0CardRadius",
          "H0CardRadiusCorner",
          "H0CardVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "H0CardElement",
            "default": "'div'",
            "description": "Rendered root element, including semantic containers, button, or anchor."
          },
          {
            "name": "variant",
            "type": "H0CardVariant",
            "default": "'surface'",
            "description": "Surface, secondary, or outline appearance."
          },
          {
            "name": "radius",
            "type": "H0CardRadius",
            "default": "'all'",
            "description": "Rounded corners applied to all, none, one, or several corners."
          },
          {
            "name": "padding",
            "type": "boolean",
            "default": "false",
            "description": "Adds standard padding to the main content region."
          },
          {
            "name": "shadow",
            "type": "boolean",
            "default": "false",
            "description": "Adds the theme shadow."
          },
          {
            "name": "interactive",
            "type": "boolean",
            "default": "false",
            "description": "Enables focus, hover, pointer, and ripple feedback."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "header",
            "type": "—",
            "description": "Top title or metadata row."
          },
          {
            "name": "description",
            "type": "—",
            "description": "Muted supporting text below the header."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Primary card content."
          },
          {
            "name": "content",
            "type": "—",
            "description": "Named fallback used when the default slot is absent."
          },
          {
            "name": "footer",
            "type": "—",
            "description": "Bottom action or metadata row with a separator."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0CardElement",
            "fields": [
              {
                "name": "H0CardElement",
                "type": "'div' | 'article' | 'section' | 'aside' | 'button' | 'a'",
                "description": "Supported root elements."
              }
            ]
          },
          {
            "name": "H0CardVariant",
            "fields": [
              {
                "name": "H0CardVariant",
                "type": "'secondary' | 'surface' | 'outline'",
                "description": "Supported visual variants."
              }
            ]
          },
          {
            "name": "H0CardRadiusCorner",
            "fields": [
              {
                "name": "H0CardRadiusCorner",
                "type": "'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'",
                "description": "Individually configurable card corners."
              }
            ]
          },
          {
            "name": "H0CardRadius",
            "fields": [
              {
                "name": "H0CardRadius",
                "type": "'all' | 'none' | H0CardRadiusCorner | H0CardRadiusCorner[]",
                "description": "Public rounded-corner configuration."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Related content and actions need one surface.",
        "A semantic article, section, aside, or navigational link needs card styling."
      ],
      "avoidWhen": [
        "Content does not form a meaningful group.",
        "A simple action can use H0Button.",
        "The whole card performs an action; the current button-root markup limitation should be resolved first.",
        "Nested interactive controls would be placed inside an interactive card."
      ],
      "accessibility": [
        "Match as to semantics and behavior.",
        "Provide href and an accessible destination label for anchor cards.",
        "Avoid nested controls inside interactive cards."
      ],
      "styling": [
        "Use variant, radius, padding, and shadow.",
        "Treat card selectors and radius variables as implementation details."
      ],
      "responsive": [
        "Control columns and stacking from the parent layout."
      ],
      "performance": [
        "Avoid unnecessary interactive ripple behavior on static cards."
      ],
      "examples": [
        {
          "key": "components/card/CompositionExample",
          "purpose": "Semantic article with header, description, content, and footer composition."
        },
        {
          "key": "components/card/VariantsExample",
          "purpose": "All public surface variants."
        },
        {
          "key": "components/card/RadiusExample",
          "purpose": "All, none, single-corner, and multi-corner radius configuration."
        },
        {
          "key": "components/card/InteractiveExample",
          "purpose": "Native anchor card with navigation and interaction feedback."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Typography"
      ],
      "manifest": {
        "family": "Card",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/card",
        "styleEntry": "components/Card/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Carousel",
      "status": "migrated",
      "summary": "Generic controlled or uncontrolled carousel with drag, keyboard, pagination, autoplay, and imperative navigation.",
      "imports": {
        "components": [
          "H0Carousel"
        ],
        "types": [
          "H0CarouselControlsPosition",
          "H0CarouselEffect",
          "H0CarouselEmits",
          "H0CarouselItem",
          "H0CarouselPaginationVariant",
          "H0CarouselProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "items",
            "type": "Item[]",
            "default": "[]",
            "description": "Generic slide source rendered through the default slot."
          },
          {
            "name": "modelValue",
            "type": "number",
            "default": "undefined",
            "description": "Controlled zero-based active index."
          },
          {
            "name": "defaultValue",
            "type": "number",
            "default": "0",
            "description": "Initial uncontrolled index."
          },
          {
            "name": "width",
            "type": "number | string",
            "default": "undefined",
            "description": "Explicit root width; numbers become pixels."
          },
          {
            "name": "height",
            "type": "number | string",
            "default": "undefined",
            "description": "Explicit root height; numbers become pixels."
          },
          {
            "name": "fullWidth",
            "type": "boolean",
            "default": "true",
            "description": "Fills available width when width is absent."
          },
          {
            "name": "fullHeight",
            "type": "boolean",
            "default": "false",
            "description": "Fills an established parent height when height is absent."
          },
          {
            "name": "slideWidth",
            "type": "number | string",
            "default": "'100%'",
            "description": "Width of each slide."
          },
          {
            "name": "gap",
            "type": "number | string",
            "default": "12",
            "description": "Gap between slides."
          },
          {
            "name": "showPagination",
            "type": "boolean",
            "default": "false",
            "description": "Renders interactive pagination."
          },
          {
            "name": "paginationVariant",
            "type": "H0CarouselPaginationVariant",
            "default": "'dots'",
            "description": "Dot or pill active pagination style."
          },
          {
            "name": "showControls",
            "type": "boolean",
            "default": "true",
            "description": "Renders previous and next controls when multiple slides exist."
          },
          {
            "name": "controlsPosition",
            "type": "H0CarouselControlsPosition",
            "default": "'inside'",
            "description": "Places controls over the viewport or below it."
          },
          {
            "name": "showCounter",
            "type": "boolean",
            "default": "false",
            "description": "Displays localized slide position text."
          },
          {
            "name": "draggable",
            "type": "boolean",
            "default": "true",
            "description": "Enables pointer drag gestures outside interactive descendants."
          },
          {
            "name": "keyboard",
            "type": "boolean",
            "default": "true",
            "description": "Enables Left and Right Arrow navigation on the viewport."
          },
          {
            "name": "effect",
            "type": "H0CarouselEffect",
            "default": "'elastic'",
            "description": "Track follows drag movement or remains static until selection."
          },
          {
            "name": "loop",
            "type": "boolean",
            "default": "false",
            "description": "Wraps navigation at the first and last slide."
          },
          {
            "name": "autoplay",
            "type": "boolean",
            "default": "false",
            "description": "Requests automatic advancement."
          },
          {
            "name": "autoplayInterval",
            "type": "number",
            "default": "5000",
            "description": "Autoplay delay in milliseconds, clamped to at least 250."
          },
          {
            "name": "pauseOnHover",
            "type": "boolean",
            "default": "true",
            "description": "Pauses autoplay while hovered."
          },
          {
            "name": "pauseOnFocus",
            "type": "boolean",
            "default": "true",
            "description": "Pauses autoplay while focus is within the carousel."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "Localized carousel label",
            "description": "Accessible name for the carousel region."
          },
          {
            "name": "hideInactiveSlidesFromAccessibility",
            "type": "boolean",
            "default": "true",
            "description": "Makes inactive slides aria-hidden and inert."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "number",
            "description": "Requests a controlled active-index update when the selected index changes."
          },
          {
            "name": "change",
            "type": "number",
            "description": "Reports a newly selected index when navigation changes the selection."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "{ item: Item; index: number; active: boolean }",
            "description": "Slide content."
          },
          {
            "name": "previous-control",
            "type": "—",
            "description": "Custom previous icon/content inside the labeled button."
          },
          {
            "name": "next-control",
            "type": "—",
            "description": "Custom next icon/content inside the labeled button."
          }
        ],
        "exposed": [
          {
            "name": "previous",
            "type": "() => void",
            "description": "Selects the previous slide."
          },
          {
            "name": "next",
            "type": "() => void",
            "description": "Selects the next slide."
          },
          {
            "name": "goTo",
            "type": "(index: number) => void",
            "description": "Selects a zero-based index."
          },
          {
            "name": "play",
            "type": "() => void",
            "description": "Requests autoplay and schedules it when possible."
          },
          {
            "name": "pause",
            "type": "() => void",
            "description": "Stops requested autoplay and clears its timer."
          }
        ],
        "types": [
          {
            "name": "H0CarouselItem",
            "fields": [
              {
                "name": "H0CarouselItem",
                "type": "Record<string, unknown> | string | number | boolean | null",
                "description": "Allowed generic slide item base."
              }
            ]
          },
          {
            "name": "H0CarouselEffect",
            "fields": [
              {
                "name": "H0CarouselEffect",
                "type": "'static' | 'elastic'",
                "description": "Drag feedback modes."
              }
            ]
          },
          {
            "name": "H0CarouselControlsPosition",
            "fields": [
              {
                "name": "H0CarouselControlsPosition",
                "type": "'inside' | 'outside'",
                "description": "Control placement."
              }
            ]
          },
          {
            "name": "H0CarouselPaginationVariant",
            "fields": [
              {
                "name": "H0CarouselPaginationVariant",
                "type": "'dots' | 'pills'",
                "description": "Pagination appearance."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A compact viewport presents several peer cards, images, or panels.",
        "Users need drag, keyboard, pagination, autoplay, or imperative slide control."
      ],
      "avoidWhen": [
        "All content should remain visible for scanning.",
        "The content is primary navigation between application views.",
        "Autoplay would distract from a task."
      ],
      "accessibility": [
        "Provide a specific ariaLabel.",
        "Keep pauseOnFocus enabled and provide a persistent Play/Pause control for autoplay.",
        "Keep inactive slides hidden and inert unless simultaneous accessibility is intentional.",
        "Preserve visible controls or another clear navigation mechanism."
      ],
      "styling": [
        "Style slides through the default slot.",
        "Treat track transforms and carousel selectors as implementation details.",
        "Effective Off or system reduced motion pauses autoplay; explicit navigation remains available and uses the current animation quality."
      ],
      "responsive": [
        "Use fullWidth and CSS slideWidth values for fluid and peek layouts.",
        "Avoid explicit widths wider than the container."
      ],
      "performance": [
        "Keep item arrays stable.",
        "Keep inactive slide trees lightweight.",
        "Avoid short autoplay intervals and excessive slides."
      ],
      "examples": [
        {
          "key": "components/carousel/BasicExample",
          "purpose": "Generic peek layout with inside controls."
        },
        {
          "key": "components/carousel/ControlledExample",
          "purpose": "v-model, outside controls, pills, and counter."
        },
        {
          "key": "components/carousel/AutoplayExample",
          "purpose": "Looping autoplay with hover, focus, and explicit Play/Pause controls."
        },
        {
          "key": "components/carousel/ProgrammaticExample",
          "purpose": "All exposed navigation and playback methods."
        },
        {
          "key": "components/carousel/CustomControlsExample",
          "purpose": "Custom labeled-button content with static drag feedback."
        }
      ],
      "relatedComponents": [
        "H0Image",
        "H0Button"
      ],
      "manifest": {
        "family": "Carousel",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/carousel",
        "styleEntry": "components/Carousel/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0CellColorPicker",
      "status": "migrated",
      "summary": "Custom HEX color picker with standard or minimal triggers, controlled state, and keyboard-operable saturation, brightness, and hue controls.",
      "imports": {
        "components": [
          "H0CellColorPicker"
        ],
        "types": [
          "H0CellColorPickerDisplay",
          "H0CellColorPickerEmits",
          "H0CellColorPickerProps",
          "H0CellColorPickerSize",
          "H0CellColorPickerSwatchPosition",
          "H0CellColorPickerVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled HEX color, normalized to #RRGGBB."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "'#3B82F6'",
            "description": "Initial uncontrolled HEX color."
          },
          {
            "name": "label",
            "type": "string",
            "default": "'Color'",
            "description": "Standard-trigger label and accessible-name fallback."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible trigger name, especially useful for minimal display."
          },
          {
            "name": "display",
            "type": "H0CellColorPickerDisplay",
            "default": "'standard'",
            "description": "Standard labeled or minimal compact trigger."
          },
          {
            "name": "swatchPosition",
            "type": "H0CellColorPickerSwatchPosition",
            "default": "'right'",
            "description": "Places the swatch before or after the HEX code."
          },
          {
            "name": "variant",
            "type": "H0CellColorPickerVariant",
            "default": "'surface'",
            "description": "Trigger background treatment."
          },
          {
            "name": "size",
            "type": "H0CellColorPickerSize",
            "default": "'md'",
            "description": "Trigger size."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents opening and color changes."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Trigger identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Hidden form field name."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Popup teleport target."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Keeps the popup beside the trigger in the DOM."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the root wrapper."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Native and ARIA attributes for the trigger button."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests a normalized HEX value update."
          },
          {
            "name": "change",
            "type": "string",
            "description": "Reports each committed picker or exposed-API change."
          },
          {
            "name": "open",
            "type": "—",
            "description": "Reports popup opening."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports popup closing."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom standard-trigger label."
          }
        ],
        "exposed": [
          {
            "name": "open",
            "type": "() => void",
            "description": "Opens the picker when enabled."
          },
          {
            "name": "close",
            "type": "(options?: { restoreFocus?: boolean }) => void",
            "description": "Closes the picker and optionally restores trigger focus."
          },
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the trigger."
          },
          {
            "name": "setValue",
            "type": "(value: string) => void",
            "description": "Normalizes and applies a HEX color."
          }
        ],
        "types": [
          {
            "name": "H0CellColorPickerDisplay",
            "fields": [
              {
                "name": "H0CellColorPickerDisplay",
                "type": "'standard' | 'minimal'",
                "description": "Supported trigger layouts."
              }
            ]
          },
          {
            "name": "H0CellColorPickerSwatchPosition",
            "fields": [
              {
                "name": "H0CellColorPickerSwatchPosition",
                "type": "'left' | 'right'",
                "description": "Swatch placement relative to the HEX code."
              }
            ]
          },
          {
            "name": "H0CellColorPickerVariant",
            "fields": [
              {
                "name": "H0CellColorPickerVariant",
                "type": "'secondary' | 'surface' | 'ghost'",
                "description": "Supported trigger backgrounds."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A compact H0N-styled control should edit a single opaque color."
      ],
      "avoidWhen": [
        "The value requires alpha, gradients, named colors, or a multi-stop palette editor."
      ],
      "accessibility": [
        "Give minimal triggers a purpose-specific accessible name.",
        "Use arrow keys in the saturation/brightness plane and hue strip; Shift changes by ten units.",
        "Do not rely on the swatch alone because the HEX value remains visible."
      ],
      "styling": [
        "Use the public variant, display, swatchPosition, and size props.",
        "Treat popup geometry and internal HSV controls as implementation details."
      ],
      "responsive": [
        "Allow the standard trigger to shrink with its container; the popup flips and shifts inside the viewport."
      ],
      "performance": [
        "The picker performs local color conversion and positions only while open."
      ],
      "examples": [
        {
          "key": "components/cell-color-picker/BasicExample",
          "purpose": "Controlled standard picker."
        },
        {
          "key": "components/cell-color-picker/DisplaysExample",
          "purpose": "Standard, minimal, and swatch-position layouts."
        },
        {
          "key": "components/cell-color-picker/VariantsExample",
          "purpose": "Surface, secondary, and ghost trigger treatments."
        },
        {
          "key": "components/cell-color-picker/SizesExample",
          "purpose": "Small, medium, and large trigger sizes."
        },
        {
          "key": "components/cell-color-picker/DisabledExample",
          "purpose": "Disabled standard and minimal triggers."
        },
        {
          "key": "components/cell-color-picker/ControlledExample",
          "purpose": "Programmatic controlled color changes."
        }
      ],
      "relatedComponents": [
        "H0Input",
        "H0Button"
      ],
      "manifest": {
        "family": "CellColorPicker",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/cellcolorpicker",
        "styleEntry": "components/CellColorPicker/style.css",
        "localeSection": "colorPicker"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Checkbox",
      "status": "migrated",
      "summary": "Controlled or uncontrolled native boolean checkbox with surface variants, indeterminate, validation, sizing, and Form integration.",
      "imports": {
        "components": [
          "H0Checkbox"
        ],
        "types": [
          "H0CheckboxEmits",
          "H0CheckboxProps",
          "H0CheckboxSize",
          "H0CheckboxVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled checked state."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled state."
          },
          {
            "name": "size",
            "type": "H0CheckboxSize",
            "default": "'md'",
            "description": "Checkbox and label size."
          },
          {
            "name": "variant",
            "type": "H0CheckboxVariant",
            "default": "'surface'",
            "description": "Unchecked box surface treatment."
          },
          {
            "name": "indeterminate",
            "type": "boolean",
            "default": "false",
            "description": "Visual mixed state."
          },
          {
            "name": "value",
            "type": "string",
            "default": "'on'",
            "description": "Native submitted checked value."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests checked-state update."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports user change."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Custom label content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0CheckboxSize",
            "fields": [
              {
                "name": "H0CheckboxSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported standalone checkbox sizes."
              }
            ]
          },
          {
            "name": "H0CheckboxVariant",
            "fields": [
              {
                "name": "H0CheckboxVariant",
                "type": "'surface' | 'secondary'",
                "description": "Unchecked box surface treatment."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "One independent boolean choice is required."
      ],
      "avoidWhen": [
        "A setting takes effect immediately; consider H0Switch."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/checkbox/BasicExample",
          "purpose": "Controlled checkbox and group."
        },
        {
          "key": "components/checkbox/VariantsExample",
          "purpose": "Surface and secondary standalone checkboxes."
        },
        {
          "key": "components/checkbox/SizesExample",
          "purpose": "Small, medium, and large standalone checkboxes."
        },
        {
          "key": "components/checkbox/StatesExample",
          "purpose": "Indeterminate aggregate and field states."
        },
        {
          "key": "components/checkbox/GroupExample",
          "purpose": "Multiple values with H0CheckboxGroup."
        }
      ],
      "relatedComponents": [
        "H0CheckboxGroup",
        "H0Switch",
        "H0Form"
      ],
      "manifest": {
        "family": "Checkbox",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/checkbox",
        "styleEntry": "components/Checkbox/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0CheckboxGroup",
      "status": "migrated",
      "summary": "Labeled multi-choice checkbox set backed by an array of string option values.",
      "imports": {
        "components": [
          "H0CheckboxGroup"
        ],
        "types": [
          "H0CheckboxGroupEmits",
          "H0CheckboxGroupProps",
          "H0CheckboxOption"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string[]",
            "default": "undefined",
            "description": "Controlled selected values."
          },
          {
            "name": "defaultValue",
            "type": "string[]",
            "default": "[]",
            "description": "Initial uncontrolled values."
          },
          {
            "name": "options",
            "type": "H0CheckboxOption[]",
            "description": "Uniform checkbox options."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string[]",
            "description": "Requests selected-values update."
          },
          {
            "name": "change",
            "type": "string[]",
            "description": "Reports user selection."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom group legend."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0CheckboxOption",
            "fields": [
              {
                "name": "label",
                "type": "string",
                "description": "Visible option label."
              },
              {
                "name": "value",
                "type": "string",
                "description": "Submitted and model value."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Disables the option."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Several independent values share one question."
      ],
      "avoidWhen": [
        "Only one option may be chosen; use H0RadioGroup."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/checkbox/GroupExample",
          "purpose": "Multiple values with a disabled option."
        }
      ],
      "relatedComponents": [
        "H0Checkbox",
        "H0RadioGroup",
        "H0Form"
      ],
      "manifest": {
        "family": "Checkbox",
        "familyRole": "member",
        "category": "forms",
        "docsPath": "/components/checkbox",
        "docsAnchor": "h0checkboxgroup",
        "styleEntry": "components/Checkbox/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Chip",
      "status": "migrated",
      "summary": "Selectable and optionally removable token with separate primary and remove actions.",
      "imports": {
        "components": [
          "H0Chip"
        ],
        "types": [
          "H0ChipEmits",
          "H0ChipProps",
          "H0ChipTone"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0ChipTone",
            "default": "'default'",
            "description": "Color intent used most visibly when selected."
          },
          {
            "name": "selected",
            "type": "boolean",
            "default": "false",
            "description": "Controls aria-pressed and selected appearance."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables primary and remove buttons."
          },
          {
            "name": "removable",
            "type": "boolean",
            "default": "false",
            "description": "Renders a separate remove button."
          },
          {
            "name": "text",
            "type": "string",
            "default": "''",
            "description": "Fallback primary label used when the default slot is absent."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Optional accessible name for the primary button."
          },
          {
            "name": "removeAriaLabel",
            "type": "string",
            "default": "'Remove'",
            "description": "Accessible name for the remove button."
          }
        ],
        "events": [
          {
            "name": "click",
            "type": "MouseEvent",
            "description": "Emitted from the primary action without changing selected automatically."
          },
          {
            "name": "remove",
            "type": "MouseEvent",
            "description": "Emitted after propagation is stopped, without also emitting click or updating the collection."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible primary button content, overriding text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ChipTone",
            "fields": [
              {
                "name": "H0ChipTone",
                "type": "'default' | 'primary' | 'success' | 'warning' | 'danger'",
                "description": "Supported chip tones."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A filter or token needs selected state.",
        "A token can be removed from a collection."
      ],
      "avoidWhen": [
        "The label is purely informational; use H0Badge.",
        "Only one binary setting exists; use H0Switch.",
        "Exactly one option must remain selected; use H0RadioGroup or H0Segment."
      ],
      "accessibility": [
        "Keep the visible label descriptive.",
        "Give remove buttons contextual removeAriaLabel values.",
        "Selected state is exposed through aria-pressed.",
        "A removable chip has two separately focusable buttons."
      ],
      "styling": [
        "Use tone and selected.",
        "Treat chip element selectors as implementation details."
      ],
      "responsive": [
        "Wrap chip collections in consumer layout."
      ],
      "performance": [
        "Use stable keys when rendering removable collections."
      ],
      "examples": [
        {
          "key": "components/chip/SelectionExample",
          "purpose": "Application-owned independent filters across all tones."
        },
        {
          "key": "components/chip/RemovalExample",
          "purpose": "Contextual removal and disabled state."
        }
      ],
      "relatedComponents": [
        "H0Badge",
        "H0RadioGroup",
        "H0Segment",
        "H0Switch"
      ],
      "manifest": {
        "family": "Chip",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/chip",
        "styleEntry": "components/Chip/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Command",
      "status": "migrated",
      "summary": "Modal command menu with a configurable trigger, hotkey opening, searchable grouped items, and keyboard selection.",
      "imports": {
        "components": [
          "H0Command"
        ],
        "types": [
          "H0CommandBackdrop",
          "H0CommandEmits",
          "H0CommandItem",
          "H0CommandProps",
          "H0CommandSize",
          "H0CommandVariant",
          "H0CommandWindowSize",
          "H0IconSource"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state used by v-model."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled open state."
          },
          {
            "name": "query",
            "type": "string",
            "default": "undefined",
            "description": "Controlled search query used by v-model:query."
          },
          {
            "name": "defaultQuery",
            "type": "string",
            "default": "''",
            "description": "Initial uncontrolled search query."
          },
          {
            "name": "items",
            "type": "readonly H0CommandItem[]",
            "default": "[]",
            "description": "Commands filtered and rendered in the list."
          },
          {
            "name": "variant",
            "type": "H0CommandVariant",
            "default": "'surface'",
            "description": "Built-in trigger appearance."
          },
          {
            "name": "backdrop",
            "type": "H0CommandBackdrop",
            "default": "'opaque'",
            "description": "Modal backdrop appearance."
          },
          {
            "name": "size",
            "type": "H0CommandSize",
            "default": "'md'",
            "description": "Built-in trigger size."
          },
          {
            "name": "windowSize",
            "type": "H0CommandWindowSize",
            "default": "'md'",
            "description": "Command window width and result-list height."
          },
          {
            "name": "hotkey",
            "type": "string",
            "default": "''",
            "description": "Global key combination such as 'mod+k', 'ctrl+shift+p', or '/'."
          },
          {
            "name": "triggerLabel",
            "type": "string",
            "default": "''",
            "description": "Built-in trigger text before locale fallback."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "''",
            "description": "Search placeholder before locale fallback."
          },
          {
            "name": "emptyText",
            "type": "string",
            "default": "''",
            "description": "Empty-result text before locale fallback."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Command dialog accessible name before locale fallback."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables trigger and hotkey opening."
          },
          {
            "name": "closeOnSelect",
            "type": "boolean",
            "default": "true",
            "description": "Closes the window after selecting an enabled command."
          },
          {
            "name": "closeOnBackdrop",
            "type": "boolean",
            "default": "true",
            "description": "Allows backdrop dismissal."
          },
          {
            "name": "closeOnEsc",
            "type": "boolean",
            "default": "true",
            "description": "Allows Escape dismissal."
          },
          {
            "name": "resetQueryOnClose",
            "type": "boolean",
            "default": "true",
            "description": "Clears search text after the window closes."
          },
          {
            "name": "showFooter",
            "type": "boolean",
            "default": "true",
            "description": "Shows built-in keyboard hints when no custom footer is supplied."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Overlay teleport destination."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the overlay beside the trigger in the DOM."
          },
          {
            "name": "returnFocus",
            "type": "boolean | HTMLElement",
            "default": "true",
            "description": "Controls focus restoration after closing."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while open."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the root wrapper."
          },
          {
            "name": "triggerAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Native and ARIA attributes for the built-in trigger."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests controlled open-state changes."
          },
          {
            "name": "update:query",
            "type": "string",
            "description": "Requests controlled query changes."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports committed open-state changes."
          },
          {
            "name": "open",
            "type": "—",
            "description": "Reports the component opening."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports any close path."
          },
          {
            "name": "search",
            "type": "string",
            "description": "Reports user or exposed-API query changes."
          },
          {
            "name": "select",
            "type": "H0CommandItem",
            "description": "Reports selection of an enabled command."
          }
        ],
        "slots": [
          {
            "name": "trigger",
            "type": "{ open; close; toggle; isOpen; disabled }",
            "description": "Replaces the built-in trigger and receives state callbacks."
          },
          {
            "name": "header",
            "type": "{ query: string; close: () => void }",
            "description": "Content placed above the search field."
          },
          {
            "name": "group-label",
            "type": "{ group: string }",
            "description": "Custom group label."
          },
          {
            "name": "item",
            "type": "{ item: H0CommandItem; active: boolean; query: string }",
            "description": "Replaces the complete command item content."
          },
          {
            "name": "item-start",
            "type": "{ item: H0CommandItem; active: boolean }",
            "description": "Custom leading item visual."
          },
          {
            "name": "item-end",
            "type": "{ item: H0CommandItem; active: boolean }",
            "description": "Custom trailing item content."
          },
          {
            "name": "empty",
            "type": "{ query: string }",
            "description": "Empty search result."
          },
          {
            "name": "footer",
            "type": "{ activeItem?: H0CommandItem; close: () => void }",
            "description": "Replaces built-in keyboard hints."
          }
        ],
        "exposed": [
          {
            "name": "open",
            "type": "() => void",
            "description": "Opens the command window when enabled."
          },
          {
            "name": "close",
            "type": "() => void",
            "description": "Closes the command window."
          },
          {
            "name": "toggle",
            "type": "() => void",
            "description": "Toggles the command window."
          },
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the built-in trigger."
          },
          {
            "name": "setQuery",
            "type": "(value: string) => void",
            "description": "Sets the query and emits search."
          }
        ],
        "types": [
          {
            "name": "H0CommandItem",
            "fields": [
              {
                "name": "value",
                "type": "string | number",
                "description": "Stable command value."
              },
              {
                "name": "label",
                "type": "string",
                "description": "Visible command label."
              },
              {
                "name": "description",
                "type": "string",
                "description": "Optional supporting copy."
              },
              {
                "name": "group",
                "type": "string",
                "description": "Optional group heading."
              },
              {
                "name": "keywords",
                "type": "readonly string[]",
                "description": "Additional searchable terms."
              },
              {
                "name": "icon",
                "type": "H0IconSource",
                "description": "Optional legacy node or @h0nio/icons body definition."
              },
              {
                "name": "shortcut",
                "type": "string",
                "description": "Optional displayed command shortcut."
              },
              {
                "name": "disabled",
                "type": "boolean",
                "description": "Prevents navigation and selection."
              }
            ]
          },
          {
            "name": "H0CommandVariant",
            "fields": [
              {
                "name": "H0CommandVariant",
                "type": "'surface' | 'secondary' | 'ghost' | 'outline'",
                "description": "Built-in trigger appearances."
              }
            ]
          },
          {
            "name": "H0CommandBackdrop",
            "fields": [
              {
                "name": "H0CommandBackdrop",
                "type": "'opaque' | 'blur' | 'transparent'",
                "description": "Shared modal backdrop appearances."
              }
            ]
          },
          {
            "name": "H0CommandSize",
            "fields": [
              {
                "name": "H0CommandSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Built-in trigger sizes."
              }
            ]
          },
          {
            "name": "H0CommandWindowSize",
            "fields": [
              {
                "name": "H0CommandWindowSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Command window sizes."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Users need fast keyboard access to application actions or navigation.",
        "A searchable grouped action list should open in a modal surface."
      ],
      "avoidWhen": [
        "A standard select field represents form data.",
        "Only one immediate button action is available."
      ],
      "accessibility": [
        "Keep labels concise and provide a specific ariaLabel when needed.",
        "Disabled items are skipped by Arrow, Home, End, and Enter navigation.",
        "Preserve the built-in combobox/listbox relationship when customizing item content."
      ],
      "styling": [
        "Use variant and size for the trigger, windowSize for the panel, and backdrop for the interaction layer.",
        "Treat internal search and result selectors as implementation details."
      ],
      "responsive": [
        "All window sizes retain viewport insets and a separately scrolling result region."
      ],
      "performance": [
        "Filtering is synchronous; supply a reduced externally filtered collection for very large datasets."
      ],
      "examples": [
        {
          "key": "components/command/BasicExample",
          "purpose": "Grouped commands, icons, selection, and a mod+k hotkey."
        },
        {
          "key": "components/command/VariantsExample",
          "purpose": "Surface, secondary, ghost, and outline triggers."
        },
        {
          "key": "components/command/TriggerSizesExample",
          "purpose": "Small, medium, and large trigger controls."
        },
        {
          "key": "components/command/WindowSizesExample",
          "purpose": "Independent small, medium, and large command windows."
        },
        {
          "key": "components/command/BackdropsExample",
          "purpose": "Opaque, blurred, and transparent overlay backdrops."
        }
      ],
      "relatedComponents": [
        "H0Modal",
        "H0SearchField",
        "H0List"
      ],
      "manifest": {
        "family": "Command",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/command",
        "styleEntry": "components/Command/style.css",
        "localeSection": "command"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Container",
      "status": "migrated",
      "summary": "Polymorphic full-width page container with a maximum width, optional centering, and responsive token gutters.",
      "imports": {
        "components": [
          "H0Container"
        ],
        "types": [
          "H0ContainerProps",
          "H0ContainerSize",
          "H0ResponsiveValue",
          "H0Space"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "string | Component",
            "default": "'div'",
            "description": "Semantic root element or Vue component."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
            "default": "'lg'",
            "description": "Maximum content width."
          },
          {
            "name": "gutter",
            "type": "H0ResponsiveValue<H0Space>",
            "default": "'lg'",
            "description": "Responsive inline padding."
          },
          {
            "name": "centered",
            "type": "boolean",
            "default": "true",
            "description": "Centers the bounded container."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Content rendered inside the selected semantic root."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ContainerSize",
            "fields": [
              {
                "name": "H0ContainerSize",
                "type": "'sm' | 'md' | 'lg' | 'xl' | 'full'",
                "description": "Supported maximum-width presets."
              }
            ]
          },
          {
            "name": "H0Space",
            "fields": [
              {
                "name": "H0Space",
                "type": "'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'",
                "description": "Public spacing-token names."
              }
            ]
          },
          {
            "name": "H0ResponsiveValue",
            "description": "A direct value or an object of mobile-first breakpoint overrides.",
            "fields": [
              {
                "name": "value",
                "type": "T",
                "description": "Direct value applied at every size."
              },
              {
                "name": "base",
                "type": "T | undefined",
                "description": "Smallest-size value."
              },
              {
                "name": "xs",
                "type": "T | undefined",
                "description": "Extra-small breakpoint override."
              },
              {
                "name": "sm",
                "type": "T | undefined",
                "description": "Small breakpoint override."
              },
              {
                "name": "md",
                "type": "T | undefined",
                "description": "Medium breakpoint override."
              },
              {
                "name": "lg",
                "type": "T | undefined",
                "description": "Large breakpoint override."
              },
              {
                "name": "xl",
                "type": "T | undefined",
                "description": "Extra-large breakpoint override."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Page content needs a consistent maximum width and responsive gutters."
      ],
      "avoidWhen": [
        "A local wrapper needs spacing but no page-width constraint."
      ],
      "accessibility": [
        "Choose semantic roots that match the document structure.",
        "Keep visual and DOM order aligned.",
        "Do not use spacing alone to communicate relationships."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/layout/BasicExample",
          "purpose": "Bounded page-section composition."
        },
        {
          "key": "components/layout/ContainerSizesExample",
          "purpose": "All maximum-width presets."
        },
        {
          "key": "components/layout/ContainerResponsiveExample",
          "purpose": "Semantic root and responsive gutters."
        }
      ],
      "relatedComponents": [
        "H0Stack",
        "H0Grid"
      ],
      "manifest": {
        "family": "Layout",
        "familyRole": "root",
        "category": "layout",
        "docsPath": "/components/layout",
        "styleEntry": "components/Layout/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ContentState",
      "status": "migrated",
      "summary": "Controlled state region that transitions between loading, error, empty, and resolved content slots.",
      "imports": {
        "components": [
          "H0ContentState"
        ],
        "types": [
          "H0ContentStateProps",
          "H0ContentStateValue"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "state",
            "type": "H0ContentStateValue",
            "description": "Controlled state whose matching slot is mounted."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "loading",
            "type": "—",
            "description": "Loading feedback such as labeled skeletons or a spinner."
          },
          {
            "name": "error",
            "type": "—",
            "description": "Failure feedback and an optional recovery action."
          },
          {
            "name": "empty",
            "type": "—",
            "description": "Successful no-results or no-content feedback."
          },
          {
            "name": "content",
            "type": "—",
            "description": "Successfully resolved content."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Fallback used for content when no content slot exists."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ContentStateValue",
            "fields": [
              {
                "name": "H0ContentStateValue",
                "type": "'loading' | 'error' | 'empty' | 'content'",
                "description": "Mutually exclusive content-region states."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "One region replaces request feedback with an empty result or resolved content.",
        "The parent already owns the asynchronous or application state."
      ],
      "avoidWhen": [
        "Multiple states need to remain visible simultaneously.",
        "Inactive stateful content must remain mounted without lifting its state to the parent."
      ],
      "accessibility": [
        "The component marks the region busy only during loading.",
        "Give loading feedback one concise accessible name.",
        "Use an alert role only for failures that require immediate announcement.",
        "Do not move focus solely because the visual state changed."
      ],
      "styling": [
        "Compose slots from public components and semantic tokens.",
        "Treat transition selectors as implementation details."
      ],
      "responsive": [
        "The region and active view fill the available inline width.",
        "Reserve an application-appropriate min-block-size when differently sized states must not move surrounding layout.",
        "Define responsive layout inside each slot."
      ],
      "performance": [
        "Inactive slots are unmounted after the transition.",
        "Keep persistent state and expensive resources outside replaceable slots."
      ],
      "examples": [
        {
          "key": "components/content-state/StatesExample",
          "purpose": "All four states composed from feedback and content components."
        },
        {
          "key": "components/content-state/AsyncExample",
          "purpose": "Parent-controlled loading, success, retry, and failure flow."
        }
      ],
      "relatedComponents": [
        "H0Skeleton",
        "H0Spinner",
        "H0Alert",
        "H0EmptyState"
      ],
      "manifest": {
        "family": "ContentState",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/contentstate",
        "styleEntry": "components/ContentState/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0DataTable",
      "status": "migrated",
      "summary": "Data-driven table with client or server state, filters, sorting, selection, pagination, infinite loading, and fixed-row virtualization.",
      "imports": {
        "components": [
          "H0DataTable"
        ],
        "types": [
          "H0DataTableColumn",
          "H0DataTableEmits",
          "H0DataTableFilter",
          "H0DataTableFilters",
          "H0DataTableFilterValue",
          "H0DataTableMode",
          "H0DataTablePaginationMode",
          "H0DataTableProps",
          "H0DataTableSelectFilter",
          "H0DataTableSelection",
          "H0DataTableSelectionMode",
          "H0DataTableSort",
          "H0DataTableSortDirection",
          "H0DataTableTextFilter"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "columns",
            "type": "H0DataTableColumn<Row>[]",
            "description": "Table columns plus optional sorting and filtering behavior."
          },
          {
            "name": "rows",
            "type": "Row[]",
            "default": "[]",
            "description": "Complete client dataset or current server page/chunk."
          },
          {
            "name": "getRowKey",
            "type": "(row: Row, index: number) => H0TableRowKey",
            "description": "Required stable and unique row identity."
          },
          {
            "name": "mode",
            "type": "H0DataTableMode",
            "default": "'client'",
            "description": "Selects local transformation or externally managed data."
          },
          {
            "name": "paginationMode",
            "type": "H0DataTablePaginationMode",
            "default": "'none'",
            "description": "Selects no paging, page controls, or infinite load-more behavior."
          },
          {
            "name": "page",
            "type": "number",
            "default": "undefined",
            "description": "Controlled one-based page."
          },
          {
            "name": "defaultPage",
            "type": "number",
            "default": "1",
            "description": "Initial uncontrolled page."
          },
          {
            "name": "pageSize",
            "type": "number",
            "default": "undefined",
            "description": "Controlled items per page; no built-in page-size control is rendered."
          },
          {
            "name": "defaultPageSize",
            "type": "number",
            "default": "10",
            "description": "Initial uncontrolled items per page."
          },
          {
            "name": "totalItems",
            "type": "number",
            "default": "0",
            "description": "Complete server count used by page pagination; ignored by the client pipeline."
          },
          {
            "name": "sort",
            "type": "H0DataTableSort",
            "default": "undefined",
            "description": "Controlled sort model."
          },
          {
            "name": "defaultSort",
            "type": "H0DataTableSort",
            "default": "null",
            "description": "Initial uncontrolled sort."
          },
          {
            "name": "filters",
            "type": "H0DataTableFilters",
            "default": "undefined",
            "description": "Controlled filter values by column key."
          },
          {
            "name": "defaultFilters",
            "type": "H0DataTableFilters",
            "default": "{}",
            "description": "Initial uncontrolled filters."
          },
          {
            "name": "selection",
            "type": "H0DataTableSelection",
            "default": "undefined",
            "description": "Controlled selected row keys."
          },
          {
            "name": "defaultSelection",
            "type": "H0DataTableSelection",
            "default": "[]",
            "description": "Initial uncontrolled selected keys."
          },
          {
            "name": "selectionMode",
            "type": "H0DataTableSelectionMode",
            "default": "'none'",
            "description": "Disables selection or adds single or multiple key selection."
          },
          {
            "name": "isRowSelectable",
            "type": "(row: Row) => boolean",
            "default": "() => true",
            "description": "Disables selection controls for chosen rows without suppressing row-click."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Marks initial, server-page, or incremental infinite loading."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Shows an empty error state or an alert above retained rows."
          },
          {
            "name": "hasMore",
            "type": "boolean",
            "default": "false",
            "description": "Allows additional infinite load-more requests."
          },
          {
            "name": "virtual",
            "type": "boolean",
            "default": "false",
            "description": "Enables fixed-row windowing outside page mode."
          },
          {
            "name": "rowHeight",
            "type": "number",
            "default": "48",
            "description": "Finite positive fixed virtual row height and infinite trigger unit in pixels. Invalid heights disable virtualization."
          },
          {
            "name": "overscan",
            "type": "number",
            "default": "5",
            "description": "Virtual rows rendered before and after the visible window, rounded down; negative or non-finite values act as zero."
          },
          {
            "name": "scrollHeight",
            "type": "string | number",
            "default": "undefined",
            "description": "Maximum table viewport height; required for virtualization and numbers become pixels."
          },
          {
            "name": "minWidth",
            "type": "string | number",
            "default": "undefined",
            "description": "Minimum table width before horizontal scrolling; numbers become pixels."
          },
          {
            "name": "density",
            "type": "H0TableDensity",
            "default": "'default'",
            "description": "Cell spacing forwarded to H0Table."
          },
          {
            "name": "striped",
            "type": "boolean",
            "default": "false",
            "description": "Alternates row surfaces."
          },
          {
            "name": "hoverable",
            "type": "boolean",
            "default": "true",
            "description": "Highlights hovered rows without changing interaction."
          },
          {
            "name": "bordered",
            "type": "boolean",
            "default": "true",
            "description": "Adds table border treatment."
          },
          {
            "name": "stickyHeader",
            "type": "boolean",
            "default": "true",
            "description": "Keeps headers visible while scrolling."
          },
          {
            "name": "emptyText",
            "type": "string",
            "default": "Localized empty text",
            "description": "A non-empty value overrides localized empty-state copy."
          },
          {
            "name": "loadingText",
            "type": "string",
            "default": "Localized loading text",
            "description": "A non-empty value overrides localized loading-state copy."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "Localized data-table label",
            "description": "Accessible dataset name."
          }
        ],
        "events": [
          {
            "name": "update:sort",
            "type": "H0DataTableSort",
            "description": "Requests a controlled sort update; sorting also requests page 1."
          },
          {
            "name": "update:filters",
            "type": "H0DataTableFilters",
            "description": "Requests a controlled filter update; filtering also requests page 1."
          },
          {
            "name": "update:selection",
            "type": "H0DataTableSelection",
            "description": "Requests a controlled selected-key update."
          },
          {
            "name": "update:page",
            "type": "number",
            "description": "Requests a controlled one-based page update."
          },
          {
            "name": "update:pageSize",
            "type": "number",
            "description": "Declared page-size model event; no built-in interaction currently emits it."
          },
          {
            "name": "load-more",
            "type": "—",
            "description": "Requests the next infinite chunk near the viewport end."
          },
          {
            "name": "row-click",
            "type": "[row: Row, index: number, event: MouseEvent]",
            "description": "Reports a clicked displayed row; index is page- or virtual-window-relative and is not identity."
          }
        ],
        "slots": [
          {
            "name": "toolbar",
            "type": "{ filters: H0DataTableFilters | undefined; setFilter: (key: string, value: H0DataTableFilterValue) => void }",
            "description": "Controls above the table; filters reflects the controlled prop and can be undefined."
          },
          {
            "name": "filter-[key]",
            "type": "{ column: H0DataTableColumn<Row>; value: H0DataTableFilterValue; setFilter: (value: H0DataTableFilterValue) => void }",
            "description": "Custom filter control with resolved state for a column key."
          },
          {
            "name": "cell-[key]",
            "type": "{ row: Row; column: H0DataTableColumn<Row>; value: unknown; rowIndex: number }",
            "description": "Custom body-cell content for a column key."
          },
          {
            "name": "empty",
            "type": "—",
            "description": "Replacement empty state when no error exists."
          },
          {
            "name": "error",
            "type": "{ error: string }",
            "description": "Replacement error state used only when no rows exist."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0DataTableMode",
            "fields": [
              {
                "name": "H0DataTableMode",
                "type": "'client' | 'server'",
                "description": "Local transformation or externally prepared rows."
              }
            ]
          },
          {
            "name": "H0DataTablePaginationMode",
            "fields": [
              {
                "name": "H0DataTablePaginationMode",
                "type": "'none' | 'page' | 'infinite'",
                "description": "Supported pagination and loading strategies."
              }
            ]
          },
          {
            "name": "H0DataTableSelectionMode",
            "fields": [
              {
                "name": "H0DataTableSelectionMode",
                "type": "'none' | 'single' | 'multiple'",
                "description": "Supported row-key selection behaviors."
              }
            ]
          },
          {
            "name": "H0DataTableSortDirection",
            "fields": [
              {
                "name": "H0DataTableSortDirection",
                "type": "'asc' | 'desc'",
                "description": "Supported sort directions."
              }
            ]
          },
          {
            "name": "H0DataTableSort",
            "fields": [
              {
                "name": "H0DataTableSort",
                "type": "{ key: string; direction: H0DataTableSortDirection } | null",
                "description": "Active sort column and direction, or no sorting."
              }
            ]
          },
          {
            "name": "H0DataTableFilterValue",
            "fields": [
              {
                "name": "H0DataTableFilterValue",
                "type": "string | number | boolean | null",
                "description": "Supported filter model values."
              }
            ]
          },
          {
            "name": "H0DataTableFilters",
            "fields": [
              {
                "name": "H0DataTableFilters",
                "type": "Record<string, H0DataTableFilterValue>",
                "description": "Filter values indexed by column key."
              }
            ]
          },
          {
            "name": "H0DataTableTextFilter",
            "fields": [
              {
                "name": "type",
                "type": "'text'",
                "description": "Selects the built-in text search field."
              },
              {
                "name": "placeholder",
                "type": "string",
                "description": "Optional search placeholder overriding localized copy."
              }
            ]
          },
          {
            "name": "H0DataTableSelectFilter",
            "fields": [
              {
                "name": "type",
                "type": "'select'",
                "description": "Selects the built-in select control."
              },
              {
                "name": "options",
                "type": "H0SelectOption[]",
                "description": "Public H0Select options."
              },
              {
                "name": "placeholder",
                "type": "string",
                "description": "Optional select placeholder overriding localized copy."
              }
            ]
          },
          {
            "name": "H0DataTableFilter",
            "fields": [
              {
                "name": "H0DataTableFilter",
                "type": "H0DataTableTextFilter | H0DataTableSelectFilter",
                "description": "Built-in filter configuration union."
              }
            ]
          },
          {
            "name": "H0DataTableSelection",
            "fields": [
              {
                "name": "H0DataTableSelection",
                "type": "H0TableRowKey[]",
                "description": "Selected stable row keys."
              }
            ]
          },
          {
            "name": "H0DataTableColumn",
            "description": "H0TableColumn<Row> plus data transformation behavior.",
            "fields": [
              {
                "name": "sortable",
                "type": "boolean",
                "description": "Enables the built-in sort trigger."
              },
              {
                "name": "sortValue",
                "type": "(row: Row) => unknown",
                "description": "Resolves the scalar sorting value before base column value."
              },
              {
                "name": "compare",
                "type": "(left: Row, right: Row) => number",
                "description": "Custom comparison whose result is adjusted for direction."
              },
              {
                "name": "filter",
                "type": "H0DataTableFilter",
                "description": "Built-in text or select filter control."
              },
              {
                "name": "filterValue",
                "type": "(row: Row) => unknown",
                "description": "Resolves the value used by built-in filtering before base column value."
              },
              {
                "name": "filterPredicate",
                "type": "(row: Row, value: H0DataTableFilterValue) => boolean",
                "description": "Custom client filter predicate taking precedence over built-in matching."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A dataset needs built-in sorting, filtering, selection, pagination, infinite loading, or virtualization.",
        "Client and server data flows should share one table interface."
      ],
      "avoidWhen": [
        "A simple presentational table is enough; use H0Table.",
        "Rows have variable height but virtualization is required."
      ],
      "accessibility": [
        "Provide a specific ariaLabel.",
        "Keep row keys unique and stable.",
        "Preserve labeled filters, selection controls, alerts, and visible status text.",
        "Do not treat row-click as a keyboard-accessible primary action.",
        "Prefer pagination when virtualized windowing would hide required table context from assistive technology."
      ],
      "styling": [
        "Use density, striped, hoverable, bordered, and stickyHeader before local overrides.",
        "Use cell and toolbar slots with public tokens.",
        "Treat sorting, selection, and virtualization selectors as implementation details."
      ],
      "responsive": [
        "Use column minimum widths and minWidth for horizontal overflow.",
        "Consider fewer columns or a summary layout on narrow screens."
      ],
      "performance": [
        "Prefer server mode for remote or expensive datasets.",
        "Use fixed-row virtualization for large local collections.",
        "Tune overscan conservatively.",
        "Keep columns, rows, key functions, and transformation callbacks stable."
      ],
      "examples": [
        {
          "key": "components/data-table/ClientExample",
          "purpose": "Controlled client sorting, filtering, page selection, and pagination."
        },
        {
          "key": "components/data-table/ServerExample",
          "purpose": "Externally managed page and sort state with simulated loading."
        },
        {
          "key": "components/data-table/InfiniteLoadingExample",
          "purpose": "Locked incremental loading that appends chunks near the viewport end."
        },
        {
          "key": "components/data-table/VirtualExample",
          "purpose": "Ten-thousand-row fixed-height virtualization with bounded DOM."
        },
        {
          "key": "components/data-table/SlotsAndErrorsExample",
          "purpose": "Toolbar, custom filter and cell slots, disabled selection, and both error presentations."
        }
      ],
      "relatedComponents": [
        "H0Table",
        "H0Pagination",
        "H0InfiniteScroll",
        "H0Select"
      ],
      "manifest": {
        "family": "DataTable",
        "familyRole": "root",
        "category": "data",
        "docsPath": "/components/datatable",
        "styleEntry": "components/DataTable/style.css",
        "localeSection": "dataTable"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Description",
      "status": "migrated",
      "summary": "Muted regular-weight supporting text preset for fields, cards, and metadata.",
      "imports": {
        "components": [
          "H0Description"
        ],
        "types": [
          "H0DescriptionElement",
          "H0DescriptionProps",
          "H0DescriptionVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "H0DescriptionElement",
            "default": "'p'",
            "description": "Rendered paragraph, inline span, or neutral block div."
          },
          {
            "name": "text",
            "type": "string | number",
            "default": "''",
            "description": "String or numeric fallback used when the default slot is absent."
          },
          {
            "name": "variant",
            "type": "H0DescriptionVariant",
            "default": "'body-sm'",
            "description": "Body-small or body-extra-small presentation."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Supporting content that takes precedence over text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0DescriptionElement",
            "fields": [
              {
                "name": "H0DescriptionElement",
                "type": "'p' | 'span' | 'div'",
                "description": "Supported semantic and neutral container elements."
              }
            ]
          },
          {
            "name": "H0DescriptionVariant",
            "fields": [
              {
                "name": "H0DescriptionVariant",
                "type": "'body-sm' | 'body-xs'",
                "description": "Supported compact typography variants."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Secondary copy supports a field, card, or value."
      ],
      "avoidWhen": [
        "Text is a heading or primary body content.",
        "The text is a validation error."
      ],
      "accessibility": [
        "Use p for paragraphs, span for inline context, and div only as a neutral block.",
        "Give the description an id and reference it explicitly with aria-describedby."
      ],
      "styling": [
        "Use variant for density.",
        "Use H0Typography for broader control."
      ],
      "responsive": [
        "Allow supporting text to wrap."
      ],
      "performance": [
        "Keep repeated descriptions concise."
      ],
      "examples": [
        {
          "key": "components/description/BasicExample",
          "purpose": "Both sizes, all supported elements, and numeric text fallback."
        },
        {
          "key": "components/description/FieldDescriptionExample",
          "purpose": "H0Input hint integration with an automatically connected H0Description."
        }
      ],
      "relatedComponents": [
        "H0Typography",
        "H0Label",
        "H0ErrorMessage"
      ],
      "manifest": {
        "family": "Typography",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/description",
        "styleEntry": "components/Typography/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Divider",
      "status": "migrated",
      "summary": "Horizontal or vertical separator with optional label content, responsive inset, and decorative mode.",
      "imports": {
        "components": [
          "H0Divider"
        ],
        "types": [
          "H0DividerProps",
          "H0Orientation",
          "H0ResponsiveValue",
          "H0Space"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "orientation",
            "type": "'horizontal' | 'vertical'",
            "default": "'horizontal'",
            "description": "Separator and layout direction."
          },
          {
            "name": "inset",
            "type": "H0ResponsiveValue<H0Space>",
            "default": "'none'",
            "description": "Responsive logical inset."
          },
          {
            "name": "decorative",
            "type": "boolean",
            "default": "false",
            "description": "Removes separator semantics when the line is purely visual."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Optional label between the two line segments."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Adjacent content groups need a meaningful or visual boundary."
      ],
      "avoidWhen": [
        "Spacing alone already communicates the grouping."
      ],
      "accessibility": [
        "Keep meaningful boundaries as separators.",
        "Set decorative when the line adds no structural information.",
        "Do not place essential content in a decorative divider."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/layout/BasicExample",
          "purpose": "Meaningful boundary in a composed page section."
        },
        {
          "key": "components/layout/DividerExample",
          "purpose": "Labeled, inset, decorative, and vertical separators."
        }
      ],
      "relatedComponents": [
        "H0Stack"
      ],
      "manifest": {
        "family": "Layout",
        "familyRole": "member",
        "category": "layout",
        "docsPath": "/components/layout",
        "docsAnchor": "h0divider",
        "styleEntry": "components/Layout/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Drawer",
      "status": "migrated",
      "summary": "Modal edge panel for navigation, filters, and supporting workflows.",
      "imports": {
        "components": [
          "H0Drawer"
        ],
        "types": [
          "H0DrawerBackdrop",
          "H0DrawerEmits",
          "H0DrawerProps",
          "H0DrawerSide"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state used by v-model."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial open state in uncontrolled mode."
          },
          {
            "name": "side",
            "type": "H0DrawerSide",
            "default": "'right'",
            "description": "Entering viewport edge: 'top', 'right', 'bottom', or 'left'."
          },
          {
            "name": "backdrop",
            "type": "H0DrawerBackdrop",
            "default": "'opaque'",
            "description": "Backdrop appearance: 'opaque', 'blur', or 'transparent'."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Visible header title and preferred accessible name."
          },
          {
            "name": "subtitle",
            "type": "string",
            "default": "''",
            "description": "Supporting text displayed above the standard header title."
          },
          {
            "name": "closeOnBackdrop",
            "type": "boolean",
            "default": "true",
            "description": "Closes after a backdrop click."
          },
          {
            "name": "closeOnEsc",
            "type": "boolean",
            "default": "true",
            "description": "Closes when Escape is pressed."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name used when title is empty before locale fallback."
          },
          {
            "name": "closeAriaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label for the header close button."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Teleport destination."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the overlay in place."
          },
          {
            "name": "initialFocus",
            "type": "string | HTMLElement",
            "default": "undefined",
            "description": "Selector or element focused after opening."
          },
          {
            "name": "returnFocus",
            "type": "boolean | HTMLElement",
            "default": "true",
            "description": "Controls focus restoration after closing."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while open."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests controlled state changes."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports committed open-state changes."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports any close path."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Scrollable drawer content."
          },
          {
            "name": "header",
            "type": "—",
            "description": "Replaces the built-in title and subtitle content; the close button remains available."
          },
          {
            "name": "footer",
            "type": "{ close: () => void }",
            "description": "Footer actions with a close callback."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0DrawerSide",
            "fields": [
              {
                "name": "H0DrawerSide",
                "type": "'top' | 'right' | 'bottom' | 'left'",
                "description": "Viewport edge from which the drawer enters."
              }
            ]
          },
          {
            "name": "H0DrawerBackdrop",
            "fields": [
              {
                "name": "H0DrawerBackdrop",
                "type": "'opaque' | 'blur' | 'transparent'",
                "description": "Available backdrop appearances."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Navigation or filters need a full-height supporting surface.",
        "A secondary workflow should enter from a viewport edge."
      ],
      "avoidWhen": [
        "The task needs a compact centered dialog.",
        "The content is short contextual help."
      ],
      "accessibility": [
        "Provide a visible title or ariaLabel.",
        "Retain a clear dismissal action.",
        "Let focus return to the opener."
      ],
      "styling": [
        "Style slot wrappers with public tokens.",
        "Treat drawer classes as implementation details."
      ],
      "responsive": [
        "Prefer bottom placement for short mobile actions.",
        "Allow long content to scroll inside the drawer."
      ],
      "performance": [
        "Avoid duplicating a full application shell in the mounted overlay."
      ],
      "examples": [
        {
          "key": "components/drawer/BasicExample",
          "purpose": "Controlled navigation drawer with a footer close callback."
        },
        {
          "key": "components/drawer/FiltersExample",
          "purpose": "Filter workflow composed from H0N form controls with initial focus and footer actions."
        },
        {
          "key": "components/drawer/SidesExample",
          "purpose": "Drawer entering from each viewport edge."
        },
        {
          "key": "components/drawer/BackdropsExample",
          "purpose": "Opaque, blurred, and transparent backdrop treatments."
        }
      ],
      "relatedComponents": [
        "H0Modal",
        "H0Sheet",
        "H0SideNav"
      ],
      "manifest": {
        "family": "Drawer",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/drawer",
        "styleEntry": "components/Drawer/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Dropdown",
      "status": "migrated",
      "summary": "Floating disclosure with a consumer-owned trigger and arbitrary interactive content.",
      "imports": {
        "components": [
          "H0Dropdown"
        ],
        "types": [
          "H0DropdownProps",
          "H0DropdownExpose",
          "H0FloatingPlacement"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state; update:modelValue must be applied by the owner."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled open state."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents opening and hides the surface. Does not disable unrelated trigger actions."
          },
          {
            "name": "placement",
            "type": "H0FloatingPlacement",
            "default": "'bottom-start'",
            "description": "Preferred position; flips and shifts at viewport boundaries."
          },
          {
            "name": "offset",
            "type": "number",
            "default": "6",
            "description": "Distance from the trigger in pixels."
          },
          {
            "name": "minWidth",
            "type": "H0CssSize",
            "default": "160",
            "description": "Minimum container width; number is pixels, string is a CSS length. Clamped to maxWidth and viewport."
          },
          {
            "name": "maxWidth",
            "type": "H0CssSize",
            "default": "360",
            "description": "Maximum container width, also limited by viewport space."
          },
          {
            "name": "minHeight",
            "type": "H0CssSize",
            "default": "0",
            "description": "Minimum container height, capped by maxHeight and available space."
          },
          {
            "name": "maxHeight",
            "type": "H0CssSize",
            "default": "320",
            "description": "Maximum container height; overflow scrolls within the available space."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Destination for the floating surface; must exist when mounted."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders content locally, subject to ancestor overflow and stacking contexts."
          },
          {
            "name": "id",
            "type": "string",
            "default": "Generated with useId()",
            "description": "Stable surface ID referenced by aria-controls."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible surface name; otherwise uses the trigger label."
          },
          {
            "name": "contentAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Native/ARIA attributes, classes and styles routed to the content container. Keep role dialog unless implementing a complete custom keyboard model."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests a change in open state."
          },
          {
            "name": "open",
            "type": "—",
            "description": "The rendered disclosure opened."
          },
          {
            "name": "close",
            "type": "—",
            "description": "The rendered disclosure closed."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "{ open: boolean; close: () => void; toggle: () => void }",
            "description": "Exactly one native element or component which forwards attributes and events to one focusable root. Interaction and ARIA are applied automatically."
          },
          {
            "name": "content",
            "type": "{ open: boolean; close: () => void; toggle: () => void }",
            "description": "Arbitrary content. Call close after actions when desired; content clicks do not close automatically."
          }
        ],
        "exposed": [
          {
            "name": "open",
            "type": "() => void",
            "description": "Requests opening unless disabled."
          },
          {
            "name": "close",
            "type": "() => void",
            "description": "Requests closing and restores focus when it was inside."
          },
          {
            "name": "toggle",
            "type": "() => void",
            "description": "Requests the opposite open state."
          }
        ],
        "types": [
          {
            "name": "H0DropdownProps",
            "fields": [
              {
                "name": "H0DropdownProps",
                "type": "object",
                "description": "Complete public props contract, including open state, positioning and container constraints."
              }
            ]
          },
          {
            "name": "H0DropdownExpose",
            "fields": [
              {
                "name": "open / close / toggle",
                "type": "() => void",
                "description": "Imperative requests; controlled state remains owned by the parent."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A button, image or other control reveals custom actions or a compact form.",
        "Content needs a floating container without a built-in trigger or item layout."
      ],
      "avoidWhen": [
        "Selecting a value from options requires H0Select.",
        "A modal task requires focus containment and background scroll locking."
      ],
      "accessibility": [
        "Give every trigger an accessible name; native non-interactive elements receive role button and tabindex.",
        "Custom trigger components must forward attributes and events to their actual control.",
        "Initial focus enters the first enabled control or the panel. Escape closes and restores focus.",
        "Tab traverses content and exits at its boundary; clicking or focusing elsewhere dismisses without stealing focus.",
        "Custom semantic menus must implement their own menuitem roles and arrow-key model."
      ],
      "styling": [
        "Use contentAttrs for container classes/styles and layout your own slot content.",
        "Colors, radius, spacing, shadows and motion use shared tokens; internal selectors are private."
      ],
      "responsive": [
        "Width and height constraints yield to available viewport space.",
        "Logical start/end placement follows trigger direction; resize and scrolling update position."
      ],
      "performance": [
        "Closed content is unmounted; position observers and dismissal listeners are cleaned up.",
        "Use lightweight content for frequently repeated triggers."
      ],
      "examples": [
        {
          "key": "components/dropdown/BasicExample",
          "purpose": "Custom actions and explicit close after selection."
        },
        {
          "key": "components/dropdown/CustomExample",
          "purpose": "Image trigger, arbitrary form content, controlled state and size limits."
        },
        {
          "key": "components/dropdown/OverlayExample",
          "purpose": "Nested modal/Select layering, constrained scrolling and disabled trigger."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Select",
        "H0Modal",
        "H0Tooltip",
        "H0Input"
      ],
      "manifest": {
        "family": "Dropdown",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/dropdown",
        "styleEntry": "components/Dropdown/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0EmptyState",
      "status": "migrated",
      "summary": "Centered empty-content explanation with visual, description, actions, and inline, surface, or page layout.",
      "imports": {
        "components": [
          "H0EmptyState"
        ],
        "types": [
          "H0EmptyStateProps",
          "H0EmptyStateVariant",
          "H0IconSource"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "title",
            "type": "string",
            "default": "Localized empty-state title",
            "description": "Primary explanation."
          },
          {
            "name": "description",
            "type": "string",
            "default": "''",
            "description": "Supporting explanation."
          },
          {
            "name": "icon",
            "type": "H0IconSource",
            "default": "undefined",
            "description": "Imported legacy node or @h0nio/icons body definition shown when no image or visual slot exists."
          },
          {
            "name": "image",
            "type": "string",
            "default": "''",
            "description": "Image URL for the visual."
          },
          {
            "name": "imageAlt",
            "type": "string",
            "default": "''",
            "description": "Alternative text for the image."
          },
          {
            "name": "primaryAction",
            "type": "string",
            "default": "''",
            "description": "Primary action label."
          },
          {
            "name": "secondaryAction",
            "type": "string",
            "default": "''",
            "description": "Secondary action label."
          },
          {
            "name": "variant",
            "type": "H0EmptyStateVariant",
            "default": "'inline'",
            "description": "Container and page-height treatment."
          }
        ],
        "events": [
          {
            "name": "primaryAction",
            "type": "—",
            "description": "Reports primary action activation."
          },
          {
            "name": "secondaryAction",
            "type": "—",
            "description": "Reports secondary action activation."
          }
        ],
        "slots": [
          {
            "name": "visual",
            "type": "—",
            "description": "Replaces image or icon."
          },
          {
            "name": "title",
            "type": "—",
            "description": "Replaces title content."
          },
          {
            "name": "description",
            "type": "—",
            "description": "Replaces description content."
          },
          {
            "name": "actions",
            "type": "—",
            "description": "Replaces generated action buttons."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0EmptyStateVariant",
            "fields": [
              {
                "name": "H0EmptyStateVariant",
                "type": "'inline' | 'surface' | 'page'",
                "description": "Empty-state layout treatments."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A collection or page has no content and needs explanation.",
        "Users can take a clear next step."
      ],
      "avoidWhen": [
        "Data is still loading; use H0Skeleton or H0Spinner.",
        "A request failed; use an error alert with recovery guidance."
      ],
      "accessibility": [
        "Use a meaningful title.",
        "Hide decorative custom visuals.",
        "Provide useful alt text only for informative images.",
        "Use specific action labels."
      ],
      "styling": [
        "Choose a variant before custom styling.",
        "Use public tokens in slots."
      ],
      "responsive": [
        "Actions wrap and images remain within the container."
      ],
      "performance": [
        "Prefer imported icons or optimized images.",
        "Do not retain hidden data-heavy content."
      ],
      "examples": [
        {
          "key": "components/empty-state/BasicExample",
          "purpose": "Generated actions with parent-owned event handling."
        },
        {
          "key": "components/empty-state/VariantsExample",
          "purpose": "Inline, surface, and page layout treatments."
        },
        {
          "key": "components/empty-state/CustomExample",
          "purpose": "Custom slots composed from H0N icon, typography, and button components."
        }
      ],
      "relatedComponents": [
        "H0Alert",
        "H0Skeleton",
        "H0Spinner",
        "H0Button",
        "H0Icon",
        "H0Typography"
      ],
      "manifest": {
        "family": "EmptyState",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/emptystate",
        "styleEntry": "components/EmptyState/style.css",
        "localeSection": "emptyState"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ErrorMessage",
      "status": "migrated",
      "summary": "Danger-colored text preset for persistent validation and action errors.",
      "imports": {
        "components": [
          "H0ErrorMessage"
        ],
        "types": [
          "H0ErrorMessageElement",
          "H0ErrorMessageProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "H0ErrorMessageElement",
            "default": "'p'",
            "description": "Rendered paragraph, inline span, or neutral block div."
          },
          {
            "name": "text",
            "type": "string | number",
            "default": "''",
            "description": "String or numeric fallback used when the default slot is absent."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Error content that takes precedence over text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ErrorMessageElement",
            "fields": [
              {
                "name": "H0ErrorMessageElement",
                "type": "'p' | 'span' | 'div'",
                "description": "Supported standalone, inline, and neutral block elements."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A field or action needs concise dedicated error text."
      ],
      "avoidWhen": [
        "A broader status message with an icon is needed.",
        "The message is not an error."
      ],
      "accessibility": [
        "Reference persistent errors from their controls.",
        "Use aria-errormessage together with aria-invalid=true.",
        "Add role=alert only for newly rendered urgent errors.",
        "Use recovery-oriented language."
      ],
      "styling": [
        "The error preset is intentionally fixed.",
        "Use H0Typography for custom presentation."
      ],
      "responsive": [
        "Allow errors to wrap near their related control."
      ],
      "performance": [
        "Avoid repeatedly recreating live alerts on every keystroke."
      ],
      "examples": [
        {
          "key": "components/error-message/BasicExample",
          "purpose": "Supported elements, text fallback, and an opt-in dynamic alert."
        },
        {
          "key": "components/error-message/InputIntegrationExample",
          "purpose": "H0Input validation with automatically connected and announced error text."
        }
      ],
      "relatedComponents": [
        "H0Description",
        "H0Field",
        "H0Input",
        "H0Label",
        "H0Message"
      ],
      "manifest": {
        "family": "Typography",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/errormessage",
        "styleEntry": "components/Typography/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Field",
      "status": "migrated",
      "summary": "Form layout primitive that connects a label, control, hint, and validation error through accessible attributes.",
      "imports": {
        "components": [
          "H0Field"
        ],
        "types": [
          "H0FieldProps",
          "H0Orientation"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Identifier shared with the slotted control."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Field name exposed to the slot."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as disabled."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting description."
          },
          {
            "name": "orientation",
            "type": "'vertical' | 'horizontal'",
            "default": "'vertical'",
            "description": "Label and control layout."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "{ controlAttrs, id, messageId, invalid }",
            "description": "Form control with generated accessibility attributes."
          },
          {
            "name": "label",
            "type": "—",
            "description": "Custom label."
          },
          {
            "name": "error",
            "type": "—",
            "description": "Custom error content."
          },
          {
            "name": "hint",
            "type": "—",
            "description": "Custom hint content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0Orientation",
            "fields": [
              {
                "name": "H0Orientation",
                "type": "'horizontal' | 'vertical'",
                "description": "Shared layout orientation accepted by Field."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A custom control needs the same label, hint, and error contract as built-in fields."
      ],
      "avoidWhen": [
        "A built-in H0N form control already provides the complete field shell."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/field/BasicExample",
          "purpose": "Context composition with H0Input."
        },
        {
          "key": "components/field/LayoutExample",
          "purpose": "Vertical, horizontal, and validation layouts."
        },
        {
          "key": "components/field/SlotsExample",
          "purpose": "Custom label and hint content."
        }
      ],
      "relatedComponents": [
        "H0Form",
        "H0Input",
        "H0Label"
      ],
      "manifest": {
        "family": "Field",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/field",
        "styleEntry": "components/Field/style.css",
        "localeSection": "field"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0FileUpload",
      "status": "migrated",
      "summary": "Accessible file picker and drop zone with validation, upload queue state, progress, retry, cancellation, and optional reordering.",
      "imports": {
        "components": [
          "H0FileUpload"
        ],
        "types": [
          "H0FileUploadEmits",
          "H0FileUploadProps",
          "H0FileUploadValidationError",
          "H0FileUploadVariant",
          "H0UploadAdapter",
          "H0UploadAdapterContext",
          "H0UploadItem",
          "H0UploadStatus"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "File[]",
            "default": "undefined",
            "description": "Controlled selected files."
          },
          {
            "name": "defaultValue",
            "type": "File[]",
            "default": "[]",
            "description": "Initial files."
          },
          {
            "name": "accept",
            "type": "string",
            "default": "''",
            "description": "Native file accept filter."
          },
          {
            "name": "multiple",
            "type": "boolean",
            "default": "false",
            "description": "Allows multiple files."
          },
          {
            "name": "maxFiles",
            "type": "number",
            "default": "undefined",
            "description": "Maximum file count."
          },
          {
            "name": "maxSize",
            "type": "number",
            "default": "undefined",
            "description": "Maximum bytes per file."
          },
          {
            "name": "validator",
            "type": "(file: File, files: readonly File[]) => string | null | undefined | Promise<string | null | undefined>",
            "default": "undefined",
            "description": "Custom validation callback."
          },
          {
            "name": "upload",
            "type": "H0UploadAdapter<Result>",
            "default": "undefined",
            "description": "Async upload adapter."
          },
          {
            "name": "autoUpload",
            "type": "boolean",
            "default": "false",
            "description": "Starts uploads after selection."
          },
          {
            "name": "concurrency",
            "type": "number",
            "default": "3",
            "description": "Maximum simultaneous uploads, rounded down and clamped to one. Non-finite input uses one; lowering the limit does not abort existing transfers."
          },
          {
            "name": "reorderable",
            "type": "boolean",
            "default": "false",
            "description": "Enables queue reordering."
          },
          {
            "name": "variant",
            "type": "H0FileUploadVariant",
            "default": "'surface'",
            "description": "Drop-area background treatment."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "File[]",
            "description": "Requests file value update."
          },
          {
            "name": "change",
            "type": "File[]",
            "description": "Reports the complete file list."
          },
          {
            "name": "add",
            "type": "File[]",
            "description": "Reports accepted files."
          },
          {
            "name": "remove",
            "type": "File",
            "description": "Reports a removed file."
          },
          {
            "name": "clear",
            "type": "—",
            "description": "Reports clearing the queue."
          },
          {
            "name": "invalid",
            "type": "H0FileUploadValidationError",
            "description": "Reports rejected input."
          },
          {
            "name": "upload-start",
            "type": "H0UploadItem<Result>",
            "description": "Reports an upload start."
          },
          {
            "name": "progress",
            "type": "H0UploadItem<Result>",
            "description": "Reports upload progress."
          },
          {
            "name": "success",
            "type": "H0UploadItem<Result>",
            "description": "Reports upload completion."
          },
          {
            "name": "error",
            "type": "H0UploadItem<Result>",
            "description": "Reports upload failure."
          },
          {
            "name": "cancel",
            "type": "H0UploadItem<Result>",
            "description": "Reports cancellation."
          },
          {
            "name": "reorder",
            "type": "File[]",
            "description": "Reports queue order."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "drop",
            "type": "{ open }",
            "description": "Drop-zone content and picker action."
          },
          {
            "name": "item",
            "type": "{ item, index, remove, retry, cancel }",
            "description": "Custom queue item."
          }
        ],
        "exposed": [
          {
            "name": "open",
            "type": "() => void",
            "description": "Opens the native file picker."
          },
          {
            "name": "start",
            "type": "(id?: string) => Promise<void>",
            "description": "Starts queued uploads."
          },
          {
            "name": "retry",
            "type": "(id: string) => void",
            "description": "Retries an item; ignores an already running upload."
          },
          {
            "name": "cancel",
            "type": "(id: string) => void",
            "description": "Aborts an upload. Cancellation settles with the adapter; late progress and successful results after abort are ignored."
          },
          {
            "name": "remove",
            "type": "(target: File | string) => void",
            "description": "Removes an item by its file or generated ID."
          },
          {
            "name": "clear",
            "type": "() => void",
            "description": "Clears all items."
          },
          {
            "name": "reorder",
            "type": "(from: number, to: number) => void",
            "description": "Moves an item."
          },
          {
            "name": "queue",
            "type": "H0UploadItem<Result>[]",
            "description": "Reactive upload queue."
          }
        ],
        "types": [
          {
            "name": "H0FileUploadVariant",
            "fields": [
              {
                "name": "H0FileUploadVariant",
                "type": "'secondary' | 'surface'",
                "description": "Supported drop-area surface treatments."
              }
            ]
          },
          {
            "name": "H0FileUploadValidationError",
            "fields": [
              {
                "name": "code",
                "type": "'accept' | 'size' | 'count' | 'custom'",
                "description": "Validation category."
              },
              {
                "name": "file",
                "type": "File | undefined",
                "description": "Rejected file, when available."
              },
              {
                "name": "message",
                "type": "string",
                "description": "Human-readable reason."
              }
            ]
          },
          {
            "name": "H0UploadStatus",
            "fields": [
              {
                "name": "H0UploadStatus",
                "type": "'idle' | 'uploading' | 'success' | 'error' | 'cancelled'",
                "description": "Lifecycle state of one queued upload."
              }
            ]
          },
          {
            "name": "H0UploadAdapterContext",
            "fields": [
              {
                "name": "signal",
                "type": "AbortSignal",
                "description": "Aborts the transfer when the item is cancelled or removed."
              },
              {
                "name": "onProgress",
                "type": "(progress: number) => void",
                "description": "Reports progress from zero to one hundred."
              }
            ]
          },
          {
            "name": "H0UploadAdapter",
            "fields": [
              {
                "name": "H0UploadAdapter<Result>",
                "type": "(file: File, context: H0UploadAdapterContext) => Promise<Result>",
                "description": "Application-owned asynchronous transfer function."
              }
            ]
          },
          {
            "name": "H0UploadItem",
            "fields": [
              {
                "name": "id",
                "type": "string",
                "description": "Generated queue identifier."
              },
              {
                "name": "file",
                "type": "File",
                "description": "Source file."
              },
              {
                "name": "status",
                "type": "H0UploadStatus",
                "description": "Current lifecycle state."
              },
              {
                "name": "progress",
                "type": "number",
                "description": "Current progress from zero to one hundred."
              },
              {
                "name": "result",
                "type": "Result | undefined",
                "description": "Resolved adapter result."
              },
              {
                "name": "error",
                "type": "string | undefined",
                "description": "Transfer failure message."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Users select or upload one or more files with visible validation and progress."
      ],
      "avoidWhen": [
        "Only one image preview is needed; use H0ImageUpload."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/file-upload/BasicExample",
          "purpose": "Validated multi-file selection."
        },
        {
          "key": "components/file-upload/VariantsExample",
          "purpose": "Surface and secondary drop-area treatments."
        },
        {
          "key": "components/file-upload/ValidationExample",
          "purpose": "Built-in and custom rejection feedback."
        },
        {
          "key": "components/file-upload/QueueExample",
          "purpose": "Manual upload adapter, progress, and queue controls."
        }
      ],
      "relatedComponents": [
        "H0Form",
        "H0ImageUpload"
      ],
      "manifest": {
        "family": "FileUpload",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/fileupload",
        "styleEntry": "components/FileUpload/style.css",
        "localeSection": "fileUpload"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Form",
      "status": "migrated",
      "summary": "Form coordinator for H0N fields with shared values, validation errors, reset behavior, and typed submit payloads.",
      "imports": {
        "components": [
          "H0Form"
        ],
        "types": [
          "H0FormEmits",
          "H0FormErrors",
          "H0FormInvalidPayload",
          "H0FormProps",
          "H0FormSubmitPayload",
          "H0FormValue",
          "H0FormValues"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "H0FormValues",
            "default": "{}",
            "description": "Aggregate form values synchronized by field name."
          },
          {
            "name": "errors",
            "type": "H0FormErrors",
            "default": "{}",
            "description": "Controlled field errors, including server errors."
          },
          {
            "name": "validateOnSubmit",
            "type": "boolean",
            "default": "true",
            "description": "Runs registered and native constraint validation on submit."
          },
          {
            "name": "clearErrorOnInput",
            "type": "boolean",
            "default": "true",
            "description": "Clears a field error when its value changes."
          },
          {
            "name": "novalidate",
            "type": "boolean",
            "default": "true",
            "description": "Disables native browser validation UI."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Native form id."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form name."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "H0FormValues",
            "description": "Requests an aggregate values update when collected values differ."
          },
          {
            "name": "update:errors",
            "type": "H0FormErrors",
            "description": "Requests an error map update when errors differ."
          },
          {
            "name": "change",
            "type": "H0FormValues",
            "description": "Reports one normalized aggregate update per field change or completed reset, but not submit."
          },
          {
            "name": "invalid",
            "type": "H0FormInvalidPayload",
            "description": "Reports failed validation."
          },
          {
            "name": "reset",
            "type": "Event",
            "description": "Reports the native reset event; preventing it cancels coordinated reset."
          },
          {
            "name": "submit",
            "type": "H0FormSubmitPayload",
            "description": "Reports a valid submit."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "{ errors, hasErrors, values, submit, reset, setErrors, clearFieldError }",
            "description": "Form contents and coordinator state."
          }
        ],
        "exposed": [
          {
            "name": "submit",
            "type": "() => void",
            "description": "Requests native form submission and coordinated validation."
          },
          {
            "name": "reset",
            "type": "() => void",
            "description": "Requests native reset of registered and unregistered controls."
          },
          {
            "name": "setErrors",
            "type": "(errors: H0FormErrors) => H0FormErrors",
            "description": "Replaces field errors and returns the current map."
          },
          {
            "name": "clearFieldError",
            "type": "(name: string) => void",
            "description": "Clears one error."
          },
          {
            "name": "setFieldValue",
            "type": "(name: string, value: H0FormValue) => void",
            "description": "Updates one value."
          },
          {
            "name": "getFieldError",
            "type": "(name: string) => string | undefined",
            "description": "Reads one error."
          },
          {
            "name": "collectValues",
            "type": "() => H0FormValues",
            "description": "Collects registered and native values and synchronizes the model when they differ."
          },
          {
            "name": "registerField",
            "type": "(name: string, getState: () => H0FormFieldState) => () => void",
            "description": "Registers a form-aware control and returns its cleanup function."
          },
          {
            "name": "values",
            "type": "H0FormValues",
            "description": "Reactive values."
          },
          {
            "name": "errors",
            "type": "H0FormErrors",
            "description": "Reactive errors."
          },
          {
            "name": "hasErrors",
            "type": "boolean",
            "description": "Whether errors exist."
          }
        ],
        "types": [
          {
            "name": "H0FormValue",
            "fields": [
              {
                "name": "H0FormValue",
                "type": "string | number | boolean | File | null | Array<string | number | boolean | File | null>",
                "description": "One scalar or multi-value field."
              }
            ]
          },
          {
            "name": "H0FormValues",
            "fields": [
              {
                "name": "H0FormValues",
                "type": "Record<string, H0FormValue>",
                "description": "Normalized values keyed by field name."
              }
            ]
          },
          {
            "name": "H0FormErrors",
            "fields": [
              {
                "name": "H0FormErrors",
                "type": "Record<string, string>",
                "description": "Validation messages keyed by field name."
              }
            ]
          },
          {
            "name": "H0FormSubmitPayload",
            "fields": [
              {
                "name": "event",
                "type": "SubmitEvent",
                "description": "Native submit event."
              },
              {
                "name": "errors",
                "type": "H0FormErrors",
                "description": "Current validation errors."
              },
              {
                "name": "formData",
                "type": "FormData",
                "description": "Native serialized form data."
              },
              {
                "name": "valid",
                "type": "boolean",
                "description": "Whether validation passed."
              },
              {
                "name": "values",
                "type": "H0FormValues",
                "description": "Normalized field values."
              }
            ]
          },
          {
            "name": "H0FormInvalidPayload",
            "fields": [
              {
                "name": "H0FormInvalidPayload",
                "type": "H0FormSubmitPayload",
                "description": "Alias used by the invalid event."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Several H0N controls need coordinated validation, reset, and submit state."
      ],
      "avoidWhen": [
        "A native form without coordinated state is sufficient."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/form/BasicExample",
          "purpose": "Coordinated values and submit."
        },
        {
          "key": "components/form/ValidationExample",
          "purpose": "Valid and invalid submission flows."
        },
        {
          "key": "components/form/ServerErrorsExample",
          "purpose": "Controlled server errors and reset."
        }
      ],
      "relatedComponents": [
        "H0Field",
        "H0Input",
        "H0Button"
      ],
      "manifest": {
        "family": "Form",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/form",
        "styleEntry": "components/Form/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Grid",
      "status": "migrated",
      "summary": "Polymorphic CSS grid with common page and collection presets plus explicit column and row templates.",
      "imports": {
        "components": [
          "H0Grid"
        ],
        "types": [
          "H0GridGap",
          "H0GridProps",
          "H0GridVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "'div' | 'section' | 'article' | 'main'",
            "default": "'div'",
            "description": "Semantic root element."
          },
          {
            "name": "variant",
            "type": "H0GridVariant",
            "default": "'auto-fit'",
            "description": "Named grid-template preset."
          },
          {
            "name": "gap",
            "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
            "default": "'md'",
            "description": "Token gap between rows and columns."
          },
          {
            "name": "columns",
            "type": "string",
            "default": "undefined",
            "description": "Explicit grid-template-columns value or declaration."
          },
          {
            "name": "rows",
            "type": "string",
            "default": "undefined",
            "description": "Explicit grid-template-rows value or declaration."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Content rendered inside the selected semantic root."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0GridVariant",
            "fields": [
              {
                "name": "default",
                "type": "'default'",
                "description": "Unopinionated grid for explicit templates."
              },
              {
                "name": "auto-fit",
                "type": "'auto-fit'",
                "description": "Fluid columns with a 220px minimum."
              },
              {
                "name": "vertical",
                "type": "'vertical'",
                "description": "Single-column grid."
              },
              {
                "name": "three",
                "type": "'three'",
                "description": "Three equal columns."
              },
              {
                "name": "center-wide",
                "type": "'center-wide'",
                "description": "Wide center column between fluid side columns."
              },
              {
                "name": "sidebar-left",
                "type": "'sidebar-left'",
                "description": "Fixed left sidebar and fluid content."
              },
              {
                "name": "sidebar-right",
                "type": "'sidebar-right'",
                "description": "Fluid content and fixed right sidebar."
              }
            ]
          },
          {
            "name": "H0GridGap",
            "fields": [
              {
                "name": "H0GridGap",
                "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl'",
                "description": "Supported spacing-token gaps."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Content needs two-dimensional alignment or a reusable page-shell template."
      ],
      "avoidWhen": [
        "Only one row or column relationship exists; use H0Inline or H0Stack."
      ],
      "accessibility": [
        "Choose semantic roots that match the document structure.",
        "Keep visual and DOM order aligned.",
        "Do not use spacing alone to communicate relationships."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Auto-fit adapts naturally to available width.",
        "Fixed three-column and sidebar presets need an appropriate container or explicit responsive override."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/grid/BasicExample",
          "purpose": "Fluid auto-fit card collection."
        },
        {
          "key": "components/grid/VariantsExample",
          "purpose": "Named content and page-shell presets."
        },
        {
          "key": "components/grid/TemplatesExample",
          "purpose": "Explicit column and row templates."
        }
      ],
      "relatedComponents": [
        "H0Container",
        "H0Stack",
        "H0Inline"
      ],
      "manifest": {
        "family": "Grid",
        "familyRole": "root",
        "category": "layout",
        "docsPath": "/components/grid",
        "styleEntry": "components/Grid/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Icon",
      "status": "migrated",
      "summary": "SVG renderer for legacy node definitions and trusted tree-shakeable body definitions from @h0nio/icons.",
      "imports": {
        "components": [
          "H0Icon"
        ],
        "types": [
          "H0IconBodyDefinition",
          "H0IconDefinition",
          "H0IconNode",
          "H0IconProps",
          "H0IconSource",
          "H0IconStrokeLinecap",
          "H0IconStrokeLinejoin"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "icon",
            "type": "H0IconSource",
            "description": "Legacy node definition or trusted body definition imported from an individual @h0nio/icons subpath."
          },
          {
            "name": "size",
            "type": "number | string",
            "default": "20",
            "description": "Equal SVG width and height; numbers become pixels."
          },
          {
            "name": "strokeWidth",
            "type": "number | string",
            "default": "2",
            "description": "SVG stroke width for legacy node definitions; body definitions preserve authored geometry."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Accessible SVG title; empty icons are aria-hidden."
          },
          {
            "name": "strokeLinecap",
            "type": "H0IconStrokeLinecap",
            "default": "'round'",
            "description": "SVG line cap style for legacy node definitions."
          },
          {
            "name": "strokeLinejoin",
            "type": "H0IconStrokeLinejoin",
            "default": "'round'",
            "description": "SVG line join style for legacy node definitions."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0IconSource",
            "fields": [
              {
                "name": "H0IconSource",
                "type": "H0IconDefinition | H0IconBodyDefinition",
                "description": "Union accepted by H0Icon and public component icon props."
              }
            ]
          },
          {
            "name": "H0IconBodyDefinition",
            "fields": [
              {
                "name": "name",
                "type": "string",
                "description": "Stable icon name exposed as data-icon."
              },
              {
                "name": "body",
                "type": "string",
                "description": "Trusted SVG body markup from a reviewed definition source."
              },
              {
                "name": "viewBox",
                "type": "string",
                "description": "SVG coordinate system authored by the icon package."
              }
            ]
          },
          {
            "name": "H0IconDefinition",
            "fields": [
              {
                "name": "name",
                "type": "string",
                "description": "Stable icon name exposed as data-icon."
              },
              {
                "name": "nodes",
                "type": "readonly H0IconNode[]",
                "description": "SVG path, circle, line, or polyline nodes."
              },
              {
                "name": "viewBox",
                "type": "string",
                "default": "'0 0 24 24'",
                "description": "Optional SVG view box; the component supplies the documented fallback."
              }
            ]
          },
          {
            "name": "H0IconNode",
            "fields": [
              {
                "name": "H0IconNode",
                "type": "readonly ['path', { readonly d: string }] | readonly ['circle', { readonly cx: number; readonly cy: number; readonly r: number }] | readonly ['line', { readonly x1: number; readonly y1: number; readonly x2: number; readonly y2: number }] | readonly ['polyline', { readonly points: string }]",
                "description": "Supported readonly SVG node tuple union."
              }
            ]
          },
          {
            "name": "H0IconStrokeLinecap",
            "fields": [
              {
                "name": "H0IconStrokeLinecap",
                "type": "'butt' | 'round' | 'square'",
                "description": "Supported SVG stroke-linecap values."
              }
            ]
          },
          {
            "name": "H0IconStrokeLinejoin",
            "fields": [
              {
                "name": "H0IconStrokeLinejoin",
                "type": "'bevel' | 'miter' | 'round'",
                "description": "Supported SVG stroke-linejoin values."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A system SVG icon is needed inside text or a control."
      ],
      "avoidWhen": [
        "A bitmap or content image is required.",
        "Visible text already communicates the information and no decorative icon is needed."
      ],
      "accessibility": [
        "Omit title for decorative icons.",
        "Provide title for standalone meaningful icons.",
        "Name icon-only parent controls separately."
      ],
      "styling": [
        "Icons inherit currentColor.",
        "Use size for both formats and stroke props only for node-based compatibility definitions.",
        "Body definitions preserve their authored solid, stroke, and duotone geometry."
      ],
      "responsive": [
        "Choose size relative to nearby text or controls."
      ],
      "performance": [
        "Import individual definitions from @h0nio/icons/<name>.",
        "Do not import @h0nio/icons/all or catalog in product runtime code.",
        "Treat @h0nio/ui/icons as a compatibility facade, not the primary icon catalog."
      ],
      "examples": [
        {
          "key": "components/icon/GalleryExample",
          "purpose": "Tree-shakeable solid, stroke, and duotone definitions imported from individual @h0nio/icons subpaths."
        },
        {
          "key": "components/icon/SizeExample",
          "purpose": "Numeric pixel sizes and unchanged CSS size values using settings-minimalistic-stroke."
        },
        {
          "key": "components/icon/StrokeExample",
          "purpose": "Authored stroke-style geometry from the settings-minimalistic-stroke definition."
        },
        {
          "key": "components/icon/ColorExample",
          "purpose": "Inherited currentColor with default and semantic colors."
        },
        {
          "key": "components/icon/AccessibilityExample",
          "purpose": "Decorative, titled, and icon-only button semantics."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Image",
        "H0Spinner"
      ],
      "manifest": {
        "family": "Icon",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/icon",
        "styleEntry": "components/Icon/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Image",
      "status": "migrated",
      "summary": "Responsive image with intersection-based lazy loading, skeleton state, sizing, and fallback content.",
      "imports": {
        "components": [
          "H0Image"
        ],
        "types": [
          "H0ImageEmits",
          "H0ImageFit",
          "H0ImageLoading",
          "H0ImageProps",
          "H0ImageStatus"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "alt",
            "type": "string",
            "default": "''",
            "description": "Native image alternative text and default fallback label."
          },
          {
            "name": "aspectRatio",
            "type": "number | string",
            "default": "'16 / 9'",
            "description": "CSS aspect-ratio reserved by the figure."
          },
          {
            "name": "crossorigin",
            "type": "'' | 'anonymous' | 'use-credentials'",
            "default": "undefined",
            "description": "Native CORS credentials mode."
          },
          {
            "name": "decoding",
            "type": "'async' | 'auto' | 'sync'",
            "default": "'async'",
            "description": "Native decoding hint."
          },
          {
            "name": "draggable",
            "type": "boolean",
            "default": "false",
            "description": "Native image draggable state."
          },
          {
            "name": "fetchpriority",
            "type": "'high' | 'low' | 'auto'",
            "default": "'auto'",
            "description": "Native fetch priority."
          },
          {
            "name": "fit",
            "type": "H0ImageFit",
            "default": "'cover'",
            "description": "CSS object-fit value."
          },
          {
            "name": "height",
            "type": "number | string",
            "default": "undefined",
            "description": "Wrapper height; numbers also set the native img height."
          },
          {
            "name": "lazy",
            "type": "boolean",
            "default": "true",
            "description": "Uses IntersectionObserver before assigning src unless loading overrides it."
          },
          {
            "name": "loading",
            "type": "H0ImageLoading",
            "default": "undefined",
            "description": "Explicit native loading hint overriding lazy."
          },
          {
            "name": "objectPosition",
            "type": "string",
            "default": "'center'",
            "description": "CSS object-position."
          },
          {
            "name": "radius",
            "type": "string",
            "default": "'var(--h0n-ui-radius-lg)'",
            "description": "Wrapper, skeleton, and fallback radius."
          },
          {
            "name": "referrerpolicy",
            "type": "'' | 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url'",
            "default": "undefined",
            "description": "Native referrer policy."
          },
          {
            "name": "rootMargin",
            "type": "string",
            "default": "'200px'",
            "description": "IntersectionObserver CSS margin syntax."
          },
          {
            "name": "showSkeleton",
            "type": "boolean",
            "default": "undefined",
            "description": "Explicit skeleton visibility setting overriding skeleton."
          },
          {
            "name": "sizes",
            "type": "string",
            "default": "undefined",
            "description": "Native responsive sizes attribute."
          },
          {
            "name": "skeleton",
            "type": "boolean",
            "default": "true",
            "description": "Default skeleton preference."
          },
          {
            "name": "src",
            "type": "string | null",
            "default": "''",
            "description": "Image source; empty or failed sources render fallback."
          },
          {
            "name": "srcset",
            "type": "string",
            "default": "undefined",
            "description": "Native responsive source candidates."
          },
          {
            "name": "threshold",
            "type": "number",
            "default": "0",
            "description": "IntersectionObserver threshold from 0 to 1."
          },
          {
            "name": "width",
            "type": "number | string",
            "default": "'100%'",
            "description": "Wrapper width; numbers also set the native img width."
          }
        ],
        "events": [
          {
            "name": "error",
            "type": "Event",
            "description": "Native image error."
          },
          {
            "name": "load",
            "type": "Event",
            "description": "Native image load."
          },
          {
            "name": "status-change",
            "type": "H0ImageStatus",
            "description": "Emitted when idle, loading, loaded, or error status changes."
          }
        ],
        "slots": [
          {
            "name": "skeleton",
            "type": "{ status: H0ImageStatus }",
            "description": "Custom waiting state."
          },
          {
            "name": "fallback",
            "type": "{ status: H0ImageStatus }",
            "description": "Custom empty or failed state."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ImageFit",
            "fields": [
              {
                "name": "H0ImageFit",
                "type": "'contain' | 'cover' | 'fill' | 'none' | 'scale-down'",
                "description": "Supported CSS object-fit values."
              }
            ]
          },
          {
            "name": "H0ImageLoading",
            "fields": [
              {
                "name": "H0ImageLoading",
                "type": "'eager' | 'lazy'",
                "description": "Supported native loading modes."
              }
            ]
          },
          {
            "name": "H0ImageStatus",
            "fields": [
              {
                "name": "H0ImageStatus",
                "type": "'idle' | 'loading' | 'loaded' | 'error'",
                "description": "Observable image lifecycle status."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Media needs lazy loading, reserved sizing, skeleton, or fallback behavior."
      ],
      "avoidWhen": [
        "A user identity image needs initials fallback; use H0Avatar.",
        "A CSS background is purely decorative."
      ],
      "accessibility": [
        "Provide purpose-appropriate alt text.",
        "Use empty alt for decorative successful images.",
        "The default failed-image fallback is announced even when alt is empty.",
        "Ensure custom fallback content communicates failure, or hide it when the image is decorative."
      ],
      "styling": [
        "Use public sizing, fit, radius, skeleton, and slots.",
        "Treat image selectors as implementation details."
      ],
      "responsive": [
        "Use aspectRatio, srcset, and sizes.",
        "Avoid fixed widths wider than narrow containers."
      ],
      "performance": [
        "Reserve dimensions to prevent layout shift.",
        "Use eager/high priority only for critical above-the-fold media.",
        "Prefer correctly sized responsive sources."
      ],
      "examples": [
        {
          "key": "components/image/BasicExample",
          "purpose": "Responsive image with reserved ratio and observable status."
        },
        {
          "key": "components/image/SizingExample",
          "purpose": "All object-fit values with numeric and CSS dimensions."
        },
        {
          "key": "components/image/FallbackExample",
          "purpose": "Default and custom failed-image fallbacks."
        },
        {
          "key": "components/image/LoadingExample",
          "purpose": "Default skeleton while a lazy image waits to load."
        },
        {
          "key": "components/image/LifecycleExample",
          "purpose": "Successful and failed reloads with status-change, load, and error telemetry."
        }
      ],
      "relatedComponents": [
        "H0Avatar",
        "H0Skeleton"
      ],
      "manifest": {
        "family": "Image",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/image",
        "styleEntry": "components/Image/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ImageUpload",
      "status": "migrated",
      "summary": "Single-image picker with preview, drag and drop, preset dimensions, validation, and removable controlled state.",
      "imports": {
        "components": [
          "H0ImageUpload"
        ],
        "types": [
          "H0ImageUploadEmits",
          "H0ImageUploadError",
          "H0ImageUploadErrorCode",
          "H0ImageUploadFit",
          "H0ImageUploadPreset",
          "H0ImageUploadProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "File | null",
            "default": "undefined",
            "description": "Controlled selected file."
          },
          {
            "name": "defaultValue",
            "type": "File | null",
            "default": "null",
            "description": "Initial file."
          },
          {
            "name": "src",
            "type": "string",
            "default": "''",
            "description": "Controlled preview URL."
          },
          {
            "name": "accept",
            "type": "string",
            "default": "'image/png,image/jpeg,image/webp'",
            "description": "Accepted image MIME types."
          },
          {
            "name": "maxSize",
            "type": "number",
            "default": "5242880",
            "description": "Maximum bytes."
          },
          {
            "name": "preset",
            "type": "H0ImageUploadPreset",
            "default": "'banner'",
            "description": "Preview shape preset."
          },
          {
            "name": "width",
            "type": "string | number",
            "default": "undefined",
            "description": "Custom preview width."
          },
          {
            "name": "height",
            "type": "string | number",
            "default": "undefined",
            "description": "Custom preview height."
          },
          {
            "name": "radius",
            "type": "string | number",
            "default": "undefined",
            "description": "Custom preview radius."
          },
          {
            "name": "fit",
            "type": "H0ImageUploadFit",
            "default": "'cover'",
            "description": "Preview object-fit."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Shows pending state."
          },
          {
            "name": "dropLabel",
            "type": "string",
            "default": "Localized",
            "description": "Drop-zone instruction."
          },
          {
            "name": "browseLabel",
            "type": "string",
            "default": "Localized",
            "description": "Browse action text."
          },
          {
            "name": "removeLabel",
            "type": "string",
            "default": "Localized",
            "description": "Remove action label."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "File | null",
            "description": "Requests file update."
          },
          {
            "name": "update:src",
            "type": "string",
            "description": "Requests preview URL update."
          },
          {
            "name": "change",
            "type": "File | null",
            "description": "Reports committed image."
          },
          {
            "name": "drop",
            "type": "File",
            "description": "Reports a dropped image."
          },
          {
            "name": "invalid",
            "type": "H0ImageUploadError",
            "description": "Reports invalid input."
          },
          {
            "name": "remove",
            "type": "—",
            "description": "Reports removal."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0ImageUploadPreset",
            "fields": [
              {
                "name": "H0ImageUploadPreset",
                "type": "'avatar' | 'banner' | 'square' | 'vertical' | 'custom'",
                "description": "Supported preview geometry presets."
              }
            ]
          },
          {
            "name": "H0ImageUploadFit",
            "fields": [
              {
                "name": "H0ImageUploadFit",
                "type": "'contain' | 'cover'",
                "description": "Supported image object-fit modes."
              }
            ]
          },
          {
            "name": "H0ImageUploadErrorCode",
            "fields": [
              {
                "name": "H0ImageUploadErrorCode",
                "type": "'format' | 'size' | 'empty'",
                "description": "Supported validation categories."
              }
            ]
          },
          {
            "name": "H0ImageUploadError",
            "fields": [
              {
                "name": "code",
                "type": "H0ImageUploadErrorCode",
                "description": "Validation category."
              },
              {
                "name": "file",
                "type": "File | undefined",
                "description": "Rejected file, when available."
              },
              {
                "name": "message",
                "type": "string",
                "description": "Human-readable reason."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A form accepts one image and should preview it before upload."
      ],
      "avoidWhen": [
        "Multiple arbitrary files or upload progress are needed; use H0FileUpload."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/image-upload/BasicExample",
          "purpose": "Single-image selection and preview."
        },
        {
          "key": "components/image-upload/PresetsExample",
          "purpose": "Avatar, square, and custom empty upload surfaces."
        },
        {
          "key": "components/image-upload/BannerPresetExample",
          "purpose": "Fluid banner upload surface."
        },
        {
          "key": "components/image-upload/VerticalPresetExample",
          "purpose": "Tall portrait upload surface."
        },
        {
          "key": "components/image-upload/LoadingExample",
          "purpose": "Centered spinner-only pending state."
        },
        {
          "key": "components/image-upload/DisabledExample",
          "purpose": "Unavailable avatar upload."
        },
        {
          "key": "components/image-upload/ErrorExample",
          "purpose": "Banner upload with external validation feedback."
        }
      ],
      "relatedComponents": [
        "H0FileUpload",
        "H0Image",
        "H0Form"
      ],
      "manifest": {
        "family": "ImageUpload",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/imageupload",
        "styleEntry": "components/ImageUpload/style.css",
        "localeSection": "imageUpload"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0InfiniteScroll",
      "status": "migrated",
      "summary": "IntersectionObserver sentinel that requests bounded chunks in a page viewport or nearest scrollable ancestor.",
      "imports": {
        "components": [
          "H0InfiniteScroll"
        ],
        "types": [
          "H0InfiniteScrollEmits",
          "H0InfiniteScrollProps",
          "H0InfiniteScrollRoot"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Blocks duplicate requests and shows loading content; a true-to-false cycle unlocks the next request."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents load requests and reduces component opacity while preserving content."
          },
          {
            "name": "hasMore",
            "type": "boolean",
            "default": "true",
            "description": "Allows load requests; false shows terminal completion content."
          },
          {
            "name": "root",
            "type": "H0InfiniteScrollRoot",
            "default": "'nearest'",
            "description": "Uses the nearest vertical scroll ancestor with viewport fallback, or always uses the viewport."
          },
          {
            "name": "rootMargin",
            "type": "string",
            "default": "'0px 0px 160px 0px'",
            "description": "IntersectionObserver CSS margin used to prefetch before the boundary."
          },
          {
            "name": "threshold",
            "type": "number",
            "default": "0",
            "description": "Unvalidated IntersectionObserver ratio from 0 to 1 required to request loading."
          },
          {
            "name": "loadingText",
            "type": "string",
            "default": "Localized loading text",
            "description": "Accessible status label and default loader copy; an empty value uses locale fallback."
          },
          {
            "name": "observeOnMount",
            "type": "boolean",
            "default": "true",
            "description": "Enable automatic observation. Runtime changes disconnect or resume the observer; no imperative start method is exposed."
          }
        ],
        "events": [
          {
            "name": "load",
            "type": "—",
            "description": "Requests the next chunk without a payload when the sentinel intersects."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Loaded collection content placed before the sentinel."
          },
          {
            "name": "loading",
            "type": "—",
            "description": "Custom content inside the component-owned labeled status while loading is true."
          },
          {
            "name": "complete",
            "type": "—",
            "description": "Custom terminal content when hasMore is false; not announced automatically."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0InfiniteScrollRoot",
            "fields": [
              {
                "name": "H0InfiniteScrollRoot",
                "type": "'nearest' | 'viewport'",
                "description": "Nearest vertical scroll ancestor with viewport fallback, or the page viewport."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A list or feed should append data near its scroll boundary.",
        "The collection layout is owned by another component."
      ],
      "avoidWhen": [
        "Users need numbered navigation or stable URLs for pages.",
        "A huge retained collection lacks virtualization or another DOM-bounding strategy.",
        "IntersectionObserver is unavailable and no separate loading control exists."
      ],
      "accessibility": [
        "Use loadingText to label the component-owned status and avoid nested status regions.",
        "Keep focus stable as items append.",
        "Make custom overflow containers focusable and label them.",
        "Provide an alternative to extremely long feeds when appropriate.",
        "Announce completion explicitly only when required."
      ],
      "styling": [
        "Style loaded and state content through slots.",
        "Disabled state reduces opacity of the entire component.",
        "Treat the sentinel and observer geometry as implementation details."
      ],
      "responsive": [
        "The component follows its container; consumers own scroll height and content layout."
      ],
      "performance": [
        "Append bounded chunks.",
        "Keep loading true for the full request so the lock resets.",
        "Expect automatic consecutive requests while the sentinel remains in the prefetch area.",
        "Combine with virtualization for very large retained collections."
      ],
      "examples": [
        {
          "key": "components/infinite-scroll/BasicExample",
          "purpose": "Keyboard-accessible nearest-container loading with progress and completion state."
        },
        {
          "key": "components/infinite-scroll/ViewportExample",
          "purpose": "Viewport observation with custom geometry, request count, disabled control, and completion."
        },
        {
          "key": "components/infinite-scroll/CustomStatesExample",
          "purpose": "Custom loading content using the component-owned status and custom completion content."
        }
      ],
      "relatedComponents": [
        "H0List",
        "H0DataTable",
        "H0Skeleton"
      ],
      "manifest": {
        "family": "InfiniteScroll",
        "familyRole": "root",
        "category": "data",
        "docsPath": "/components/infinitescroll",
        "styleEntry": "components/InfiniteScroll/style.css",
        "localeSection": "infiniteScroll"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Inline",
      "status": "migrated",
      "summary": "Polymorphic horizontal flex layout with responsive gap, alignment, distribution, and wrapping.",
      "imports": {
        "components": [
          "H0Inline"
        ],
        "types": [
          "H0InlineProps",
          "H0LayoutAlign",
          "H0LayoutJustify",
          "H0ResponsiveValue",
          "H0Space"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "string | Component",
            "default": "'div'",
            "description": "Semantic root element or Vue component."
          },
          {
            "name": "gap",
            "type": "H0ResponsiveValue<H0Space>",
            "default": "'md'",
            "description": "Responsive space between children."
          },
          {
            "name": "align",
            "type": "H0ResponsiveValue<H0LayoutAlign>",
            "default": "'center'",
            "description": "Responsive cross-axis alignment."
          },
          {
            "name": "justify",
            "type": "H0ResponsiveValue<H0LayoutJustify>",
            "default": "'start'",
            "description": "Responsive main-axis distribution."
          },
          {
            "name": "wrap",
            "type": "H0ResponsiveValue<boolean>",
            "default": "true",
            "description": "Responsive flex wrapping."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Content rendered inside the selected semantic root."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Sibling elements form a horizontal row that may wrap."
      ],
      "avoidWhen": [
        "Children form a vertical sequence; use H0Stack."
      ],
      "accessibility": [
        "Choose semantic roots that match the document structure.",
        "Keep visual and DOM order aligned.",
        "Do not use spacing alone to communicate relationships."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/layout/BasicExample",
          "purpose": "Nested page-section composition."
        },
        {
          "key": "components/layout/InlineExample",
          "purpose": "Wrapping status and action groups with space-between distribution."
        }
      ],
      "relatedComponents": [
        "H0Stack",
        "H0Grid"
      ],
      "manifest": {
        "family": "Layout",
        "familyRole": "member",
        "category": "layout",
        "docsPath": "/components/layout",
        "docsAnchor": "h0inline",
        "styleEntry": "components/Layout/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Input",
      "status": "migrated",
      "summary": "General-purpose single-line input with adornments, clear action, native attributes, and shared H0N field feedback.",
      "imports": {
        "components": [
          "H0Input"
        ],
        "types": [
          "H0AttributeRoutingProps",
          "H0IconSource",
          "H0InputEmits",
          "H0InputInputMode",
          "H0InputProps",
          "H0InputSize",
          "H0InputVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled input value."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "''",
            "description": "Initial uncontrolled value."
          },
          {
            "name": "type",
            "type": "string",
            "default": "'text'",
            "description": "Native input type."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Control size."
          },
          {
            "name": "variant",
            "type": "'surface' | 'secondary'",
            "default": "'surface'",
            "description": "Field background treatment shared by specialized inputs."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name override."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "''",
            "description": "Empty input copy."
          },
          {
            "name": "prefix",
            "type": "string",
            "default": "''",
            "description": "Text before the value."
          },
          {
            "name": "suffix",
            "type": "string",
            "default": "''",
            "description": "Text after the value."
          },
          {
            "name": "prefixIcon",
            "type": "H0IconSource",
            "default": "undefined",
            "description": "Leading legacy node or @h0nio/icons body definition."
          },
          {
            "name": "suffixIcon",
            "type": "H0IconSource",
            "default": "undefined",
            "description": "Trailing legacy node or @h0nio/icons body definition."
          },
          {
            "name": "readonly",
            "type": "boolean",
            "default": "false",
            "description": "Prevents editing while preserving focus."
          },
          {
            "name": "clearable",
            "type": "boolean",
            "default": "false",
            "description": "Shows a clear action for an editable non-empty value."
          },
          {
            "name": "autocomplete",
            "type": "string",
            "default": "''",
            "description": "Native autocomplete hint."
          },
          {
            "name": "inputmode",
            "type": "H0InputInputMode",
            "default": "undefined",
            "description": "Virtual keyboard hint."
          },
          {
            "name": "min",
            "type": "string | number",
            "default": "undefined",
            "description": "Native minimum."
          },
          {
            "name": "max",
            "type": "string | number",
            "default": "undefined",
            "description": "Native maximum."
          },
          {
            "name": "step",
            "type": "string | number",
            "default": "undefined",
            "description": "Native numeric step."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests value update."
          },
          {
            "name": "change",
            "type": "string",
            "description": "Reports a committed native change."
          },
          {
            "name": "input",
            "type": "[string, Event]",
            "description": "Reports the current value and native input event."
          },
          {
            "name": "clear",
            "type": "—",
            "description": "Reports clearing the value."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom label."
          },
          {
            "name": "start",
            "type": "—",
            "description": "Leading control content around the prefix."
          },
          {
            "name": "prefix",
            "type": "—",
            "description": "Custom prefix."
          },
          {
            "name": "end",
            "type": "—",
            "description": "Trailing control content around the suffix."
          },
          {
            "name": "suffix",
            "type": "—",
            "description": "Custom suffix."
          }
        ],
        "exposed": [
          {
            "name": "clear",
            "type": "() => void",
            "description": "Clears the value."
          },
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the native input."
          },
          {
            "name": "setValue",
            "type": "(value: string) => void",
            "description": "Sets the field value."
          }
        ],
        "types": [
          {
            "name": "H0AttributeRoutingProps",
            "fields": [
              {
                "name": "rootAttrs",
                "type": "Record<string, unknown> | undefined",
                "description": "Explicit root attributes merged after ordinary fallthrough attributes."
              },
              {
                "name": "controlAttrs",
                "type": "Record<string, unknown> | undefined",
                "description": "Additional attributes for the actual interactive control."
              }
            ]
          },
          {
            "name": "H0InputInputMode",
            "fields": [
              {
                "name": "H0InputInputMode",
                "type": "'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'",
                "description": "Supported native virtual-keyboard hints."
              }
            ]
          },
          {
            "name": "H0InputSize",
            "fields": [
              {
                "name": "H0InputSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported control sizes."
              }
            ]
          },
          {
            "name": "H0InputVariant",
            "fields": [
              {
                "name": "H0InputVariant",
                "type": "'surface' | 'secondary'",
                "description": "Shared input background treatments."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A form needs a standard single-line native input."
      ],
      "avoidWhen": [
        "The value needs domain-specific parsing such as dates or numbers."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/input/BasicExample",
          "purpose": "Labeled clearable input with an icon."
        },
        {
          "key": "components/input/VariantsExample",
          "purpose": "Surface and secondary field variants."
        },
        {
          "key": "components/input/AppearanceExample",
          "purpose": "Sizes and text or icon adornments."
        },
        {
          "key": "components/input/StatesExample",
          "purpose": "Read-only, disabled, invalid, and clear states."
        }
      ],
      "relatedComponents": [
        "H0Field",
        "H0Form",
        "H0Textarea"
      ],
      "manifest": {
        "family": "Input",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/input",
        "styleEntry": "components/Input/style.css",
        "localeSection": "common"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "secondary",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0InputOTP",
      "status": "migrated",
      "summary": "Segmented one-time-code input with paste distribution, validation, completion events, and accessible grouped semantics.",
      "imports": {
        "components": [
          "H0InputOTP"
        ],
        "types": [
          "H0InputOTPEmits",
          "H0InputOTPLength",
          "H0InputOTPProps",
          "H0InputOTPSize",
          "H0InputOTPValidation",
          "H0InputOTPValidator",
          "H0InputOTPVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled code."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "''",
            "description": "Initial code."
          },
          {
            "name": "length",
            "type": "4 | 6",
            "default": "6",
            "description": "Number of cells."
          },
          {
            "name": "size",
            "type": "H0InputOTPSize",
            "default": "'md'",
            "description": "Cell size."
          },
          {
            "name": "variant",
            "type": "'secondary' | 'surface'",
            "default": "'secondary'",
            "description": "Visual treatment."
          },
          {
            "name": "validation",
            "type": "'numeric' | 'alphanumeric'",
            "default": "'numeric'",
            "description": "Built-in character rule."
          },
          {
            "name": "validator",
            "type": "H0InputOTPValidator",
            "default": "undefined",
            "description": "Custom code validator."
          },
          {
            "name": "invalidText",
            "type": "string",
            "default": "Localized",
            "description": "Validation message."
          },
          {
            "name": "autoComplete",
            "type": "boolean",
            "default": "true",
            "description": "Enables one-time-code autocomplete."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests code update."
          },
          {
            "name": "change",
            "type": "string",
            "description": "Reports code changes."
          },
          {
            "name": "complete",
            "type": "string",
            "description": "Reports a filled valid code."
          },
          {
            "name": "invalid",
            "type": "[string, string]",
            "description": "Reports the rejected code and validation message."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom group label."
          }
        ],
        "exposed": [
          {
            "name": "confirm",
            "type": "() => boolean",
            "description": "Validates and emits completion when valid."
          },
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the next available cell."
          },
          {
            "name": "validate",
            "type": "() => boolean",
            "description": "Runs current validation."
          }
        ],
        "types": [
          {
            "name": "H0InputOTPLength",
            "fields": [
              {
                "name": "H0InputOTPLength",
                "type": "4 | 6",
                "description": "Supported verification-code lengths."
              }
            ]
          },
          {
            "name": "H0InputOTPSize",
            "fields": [
              {
                "name": "H0InputOTPSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported cell sizes."
              }
            ]
          },
          {
            "name": "H0InputOTPVariant",
            "fields": [
              {
                "name": "H0InputOTPVariant",
                "type": "'secondary' | 'surface'",
                "description": "Supported cell surface variants."
              }
            ]
          },
          {
            "name": "H0InputOTPValidation",
            "fields": [
              {
                "name": "H0InputOTPValidation",
                "type": "'numeric' | 'alphanumeric'",
                "description": "Built-in character normalization rule."
              }
            ]
          },
          {
            "name": "H0InputOTPValidator",
            "fields": [
              {
                "name": "H0InputOTPValidator",
                "type": "(value: string) => boolean | string",
                "description": "Returns true for a valid code, false for the fallback message, or a custom message."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A verification flow requests a short one-time code."
      ],
      "avoidWhen": [
        "The value is an ordinary password or arbitrary text."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/input-otp/BasicExample",
          "purpose": "Six-digit verification code."
        },
        {
          "key": "components/input-otp/VariantsExample",
          "purpose": "Four and six cells with both validation modes."
        },
        {
          "key": "components/input-otp/SizesExample",
          "purpose": "Small, medium, and large OTP cells."
        },
        {
          "key": "components/input-otp/ValidationExample",
          "purpose": "Custom validation and manual confirmation."
        }
      ],
      "relatedComponents": [
        "H0Input",
        "H0Form"
      ],
      "manifest": {
        "family": "InputOTP",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/inputotp",
        "styleEntry": "components/InputOTP/style.css",
        "localeSection": "inputOtp"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Label",
      "status": "migrated",
      "summary": "Consistent form label preset supporting label, legend, and span semantics.",
      "imports": {
        "components": [
          "H0Label"
        ],
        "types": [
          "H0LabelElement",
          "H0LabelProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "H0LabelElement",
            "default": "'label'",
            "description": "Rendered label, legend, or span."
          },
          {
            "name": "htmlFor",
            "type": "string",
            "default": "''",
            "description": "Control ID applied only when rendering label; ignored for legend and span."
          },
          {
            "name": "text",
            "type": "string | number",
            "default": "''",
            "description": "String or numeric fallback used when the default slot is absent."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Adds an aria-hidden visual asterisk without changing control state."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible label content that takes precedence over text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0LabelElement",
            "fields": [
              {
                "name": "H0LabelElement",
                "type": "'label' | 'legend' | 'span'",
                "description": "Supported control, group, and component-owned label elements."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A form control or fieldset needs a visible label.",
        "A component-owned relationship needs consistent label typography."
      ],
      "avoidWhen": [
        "Text is a page heading or arbitrary caption."
      ],
      "accessibility": [
        "Associate label with exactly one labelable control.",
        "Keep legend directly inside fieldset for groups.",
        "Reference span labels explicitly through aria-labelledby.",
        "Required is visual only; set control required or aria-required separately."
      ],
      "styling": [
        "Label presentation is intentionally constrained."
      ],
      "responsive": [
        "Allow long labels to wrap."
      ],
      "performance": [
        "Use stable unique control IDs."
      ],
      "examples": [
        {
          "key": "components/label/SemanticsExample",
          "purpose": "label, legend, and span usage."
        }
      ],
      "relatedComponents": [
        "H0Description",
        "H0ErrorMessage",
        "H0Field",
        "H0Input",
        "H0RadioGroup",
        "H0Typography"
      ],
      "manifest": {
        "family": "Typography",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/label",
        "styleEntry": "components/Typography/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Link",
      "status": "migrated",
      "summary": "Polymorphic navigation link with semantic tones, external disclosure, disabled behavior, and attribute forwarding.",
      "imports": {
        "components": [
          "H0Link"
        ],
        "types": [
          "H0LinkProps",
          "H0LinkTone",
          "H0LinkVariant",
          "H0Size"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "string | Component",
            "default": "'a'",
            "description": "Native anchor or router-compatible component."
          },
          {
            "name": "href",
            "type": "string",
            "default": "undefined",
            "description": "Native anchor destination."
          },
          {
            "name": "to",
            "type": "unknown",
            "default": "undefined",
            "description": "Router-compatible destination."
          },
          {
            "name": "external",
            "type": "boolean",
            "default": "false",
            "description": "Shows an external indicator and accessible suffix."
          },
          {
            "name": "externalText",
            "type": "string",
            "default": "''",
            "description": "External-link accessible suffix override."
          },
          {
            "name": "download",
            "type": "boolean | string",
            "default": "undefined",
            "description": "Native download behavior."
          },
          {
            "name": "target",
            "type": "string",
            "default": "undefined",
            "description": "Browsing-context target."
          },
          {
            "name": "rel",
            "type": "string",
            "default": "noopener noreferrer for external or blank targets",
            "description": "Link relationship override."
          },
          {
            "name": "tone",
            "type": "H0LinkTone",
            "default": "'primary'",
            "description": "Semantic link color."
          },
          {
            "name": "variant",
            "type": "'default' | 'subtle' | 'standalone'",
            "default": "'default'",
            "description": "Underline and emphasis treatment."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Typography size."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Removes navigation and focus."
          },
          {
            "name": "ariaCurrent",
            "type": "'page' | 'step' | 'location' | 'date' | 'time' | true",
            "default": "undefined",
            "description": "Current-item relationship."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes merged onto the rendered root."
          }
        ],
        "events": [
          {
            "name": "click",
            "type": "MouseEvent",
            "description": "Reports an enabled click."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports blur."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible destination label."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0LinkTone",
            "fields": [
              {
                "name": "H0LinkTone",
                "type": "'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger'",
                "description": "Supported semantic link colors."
              }
            ]
          },
          {
            "name": "H0LinkVariant",
            "fields": [
              {
                "name": "H0LinkVariant",
                "type": "'default' | 'subtle' | 'standalone'",
                "description": "Supported underline and emphasis treatments."
              }
            ]
          },
          {
            "name": "H0Size",
            "fields": [
              {
                "name": "H0Size",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Shared component size scale."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Activating text navigates to another location or resource."
      ],
      "avoidWhen": [
        "Activation performs an action without navigation; use H0Button."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/link/BasicExample",
          "purpose": "Internal, external, semantic, and disabled links."
        },
        {
          "key": "components/link/AppearanceExample",
          "purpose": "Tones, variants, and sizes."
        },
        {
          "key": "components/link/EventsExample",
          "purpose": "Enabled events and disabled behavior."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Breadcrumbs"
      ],
      "manifest": {
        "family": "Link",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/link",
        "styleEntry": "components/Link/style.css",
        "localeSection": "link"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0List",
      "status": "migrated",
      "summary": "Grouped collection wrapper with optional accessible label, spacing, and item separators.",
      "imports": {
        "components": [
          "H0List"
        ],
        "types": [
          "H0ListGap",
          "H0ListProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "divided",
            "type": "boolean",
            "default": "true",
            "description": "Adds separators between H0ListItem children."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible label that also names the group."
          },
          {
            "name": "gap",
            "type": "H0ListGap",
            "default": "'none'",
            "description": "Spacing between label and rows and between rows."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom visible group label."
          },
          {
            "name": "default",
            "type": "—",
            "description": "H0ListItem children or other row content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ListGap",
            "fields": [
              {
                "name": "H0ListGap",
                "type": "'none' | 'sm' | 'md'",
                "description": "Supported spacing presets between labels and rows."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Actions, navigation, or rich rows form a visual group."
      ],
      "avoidWhen": [
        "Label/value metadata belongs in a semantic definition list.",
        "Native ordered or unordered prose lists are sufficient."
      ],
      "accessibility": [
        "Provide label when the collection needs a group name.",
        "The root is a div and does not provide ul or ol semantics.",
        "Choose correct semantics on each item."
      ],
      "styling": [
        "Use gap and divided.",
        "Treat list selectors as implementation details."
      ],
      "responsive": [
        "Let the list fill its container."
      ],
      "performance": [
        "Keep long item collections virtualized outside the component when necessary."
      ],
      "examples": [
        {
          "key": "components/list/ContentExample",
          "purpose": "Labeled list of navigational rows with primary, secondary, and end content."
        },
        {
          "key": "components/list/NavigationExample",
          "purpose": "Native anchor and RouterLink navigation roots."
        }
      ],
      "relatedComponents": [
        "H0ListItem"
      ],
      "manifest": {
        "family": "List",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/list",
        "styleEntry": "components/List/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ListItem",
      "status": "migrated",
      "summary": "Interactive or static polymorphic row with structured text, start/end slots, state, and sizing.",
      "imports": {
        "components": [
          "H0ListItem"
        ],
        "types": [
          "H0ListItemBorderRadius",
          "H0ListItemElement",
          "H0ListItemProps",
          "H0ListItemSize"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Fallback primary text."
          },
          {
            "name": "description",
            "type": "string",
            "default": "''",
            "description": "Fallback secondary text."
          },
          {
            "name": "value",
            "type": "string",
            "default": "''",
            "description": "Fallback trailing text."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables native buttons or applies blocked aria-disabled behavior to other roots."
          },
          {
            "name": "active",
            "type": "boolean",
            "default": "false",
            "description": "Applies visual active state without adding selection semantics."
          },
          {
            "name": "interactive",
            "type": "boolean",
            "default": "true",
            "description": "Enables button default, focus, hover, pointer, and ripple behavior."
          },
          {
            "name": "as",
            "type": "H0ListItemElement",
            "default": "button when interactive, otherwise div",
            "description": "Polymorphic root element or component."
          },
          {
            "name": "size",
            "type": "H0ListItemSize",
            "default": "'md'",
            "description": "Small, medium, or large minimum row height."
          },
          {
            "name": "borderRadius",
            "type": "H0ListItemBorderRadius",
            "default": "0",
            "description": "CSS radius; numbers become pixels."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "start",
            "type": "—",
            "description": "Leading icon, avatar, or media."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Custom main content replacing built-in title and description."
          },
          {
            "name": "title",
            "type": "—",
            "description": "Custom primary content."
          },
          {
            "name": "description",
            "type": "—",
            "description": "Custom secondary content."
          },
          {
            "name": "end",
            "type": "—",
            "description": "Trailing value, icon, or metadata."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ListItemSize",
            "fields": [
              {
                "name": "H0ListItemSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported minimum row-height presets."
              }
            ]
          },
          {
            "name": "H0ListItemBorderRadius",
            "fields": [
              {
                "name": "H0ListItemBorderRadius",
                "type": "number | string",
                "description": "CSS radius value; numbers become pixels."
              }
            ]
          },
          {
            "name": "H0ListItemElement",
            "fields": [
              {
                "name": "H0ListItemElement",
                "type": "string | Component",
                "description": "Native element tag or Vue component used as the root."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A collection row needs interaction or structured content.",
        "A polymorphic button, link, or static row needs shared visuals."
      ],
      "avoidWhen": [
        "A standalone button is sufficient.",
        "Definition metadata belongs in a semantic definition list."
      ],
      "accessibility": [
        "Interactive defaults to a native button.",
        "Use anchor with href or router-link with to for navigation.",
        "Set interactive=false and leave as unset for static rows.",
        "Active is visual only; provide aria-current, aria-selected, or aria-pressed as appropriate.",
        "Forward suitable accessible names and native attributes."
      ],
      "styling": [
        "Use size, active, disabled, and borderRadius.",
        "Treat list-item selectors as implementation details."
      ],
      "responsive": [
        "Keep end content compact.",
        "Use custom content when intentional wrapping is required."
      ],
      "performance": [
        "Avoid heavy slot trees in very large lists.",
        "Use stable keys from the parent render loop."
      ],
      "examples": [
        {
          "key": "components/list/StatesExample",
          "purpose": "Managed active state, disabled and static rows, and all sizes."
        },
        {
          "key": "components/list/RichRowExample",
          "purpose": "Static avatar row with custom main content and trailing metadata."
        },
        {
          "key": "components/list/NavigationExample",
          "purpose": "Native anchor and RouterLink polymorphic roots."
        }
      ],
      "relatedComponents": [
        "H0List",
        "H0Avatar",
        "H0Icon"
      ],
      "manifest": {
        "family": "List",
        "familyRole": "member",
        "category": "content",
        "docsPath": "/components/list",
        "docsAnchor": "h0listitem",
        "styleEntry": "components/List/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Message",
      "status": "migrated",
      "summary": "Compact supporting or status text with an optional tone-specific decorative icon.",
      "imports": {
        "components": [
          "H0Message"
        ],
        "types": [
          "H0MessageProps",
          "H0MessageTone"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0MessageTone",
            "default": "'default'",
            "description": "Selects presentation and the mapped info, error, success, or warning icon."
          },
          {
            "name": "text",
            "type": "string | number",
            "default": "''",
            "description": "String or numeric fallback used when the default slot is absent."
          },
          {
            "name": "icon",
            "type": "boolean",
            "default": "true",
            "description": "Shows or hides the mapped decorative icon; custom definitions are not accepted."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Message content that takes precedence over text."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0MessageTone",
            "fields": [
              {
                "name": "H0MessageTone",
                "type": "'default' | 'error' | 'success' | 'warning'",
                "description": "Supported message tones and icon mappings."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Compact status or informational copy benefits from an icon."
      ],
      "avoidWhen": [
        "A field validation error needs the dedicated H0ErrorMessage preset.",
        "A full alert surface is required."
      ],
      "accessibility": [
        "Visible text carries meaning; the icon is decorative.",
        "Persistent messages need no live-region role.",
        "Use role=status for non-urgent dynamic feedback and role=alert only for urgent errors.",
        "Avoid recreating alerts on every input change.",
        "Do not rely on tone alone."
      ],
      "styling": [
        "Use tone and icon.",
        "Use H0Typography for broader control."
      ],
      "responsive": [
        "Allow message text to wrap."
      ],
      "performance": [
        "Keep repeated status text concise."
      ],
      "examples": [
        {
          "key": "components/message/TonesExample",
          "purpose": "All tone and icon states with slot and text content."
        },
        {
          "key": "components/message/AnnouncementsExample",
          "purpose": "Dynamic non-urgent status and urgent alert semantics."
        }
      ],
      "relatedComponents": [
        "H0Alert",
        "H0Description",
        "H0ErrorMessage",
        "H0Icon",
        "H0Typography"
      ],
      "manifest": {
        "family": "Typography",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/message",
        "styleEntry": "components/Typography/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Modal",
      "status": "migrated",
      "summary": "Blocking dialog surface for a self-contained task or workflow.",
      "imports": {
        "components": [
          "H0Modal"
        ],
        "types": [
          "H0ModalBackdrop",
          "H0ModalEmits",
          "H0ModalProps",
          "H0ModalSide"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state used by v-model."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled open state."
          },
          {
            "name": "side",
            "type": "H0ModalSide",
            "default": "'center'",
            "description": "Panel placement: 'center', 'top', 'right', 'bottom', or 'left'."
          },
          {
            "name": "backdrop",
            "type": "H0ModalBackdrop",
            "default": "'opaque'",
            "description": "Backdrop appearance: 'opaque', 'blur', or 'transparent'."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Visible header title and preferred accessible name."
          },
          {
            "name": "subtitle",
            "type": "string",
            "default": "''",
            "description": "Supporting text displayed above the standard header title."
          },
          {
            "name": "closeOnBackdrop",
            "type": "boolean",
            "default": "true",
            "description": "Allows backdrop dismissal."
          },
          {
            "name": "closeOnEsc",
            "type": "boolean",
            "default": "true",
            "description": "Allows Escape dismissal."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name when title is empty before locale fallback."
          },
          {
            "name": "closeAriaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label for the header close button."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Teleport destination."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the overlay in place."
          },
          {
            "name": "initialFocus",
            "type": "string | HTMLElement",
            "default": "undefined",
            "description": "Selector or element focused after opening."
          },
          {
            "name": "returnFocus",
            "type": "boolean | HTMLElement",
            "default": "true",
            "description": "Controls focus restoration."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while open."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests controlled state changes."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports committed state changes."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports any close path."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Scrollable modal content."
          },
          {
            "name": "header",
            "type": "—",
            "description": "Replaces the built-in title and subtitle content; the close button remains available."
          },
          {
            "name": "footer",
            "type": "{ close: () => void }",
            "description": "Footer actions with a close callback."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ModalSide",
            "fields": [
              {
                "name": "H0ModalSide",
                "type": "'center' | 'top' | 'right' | 'bottom' | 'left'",
                "description": "Centered or viewport-edge panel placement."
              }
            ]
          },
          {
            "name": "H0ModalBackdrop",
            "fields": [
              {
                "name": "H0ModalBackdrop",
                "type": "'opaque' | 'blur' | 'transparent'",
                "description": "Available backdrop appearances."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A focused task must temporarily block the underlying page.",
        "A form needs a dedicated dialog surface."
      ],
      "avoidWhen": [
        "Only a short confirmation is needed.",
        "Content should remain non-modal and anchored to a trigger."
      ],
      "accessibility": [
        "Provide a visible title or ariaLabel.",
        "Keep a clear dismissal action.",
        "Use initialFocus only when the default panel focus is unsuitable."
      ],
      "styling": [
        "Use public surface and overlay tokens.",
        "Do not target internal modal selectors."
      ],
      "responsive": [
        "Keep centered content fluid and allow the content region to scroll."
      ],
      "performance": [
        "Content mounts only while open; keep background work scoped to that lifecycle."
      ],
      "examples": [
        {
          "key": "components/modal/BasicExample",
          "purpose": "Controlled task modal with footer actions."
        },
        {
          "key": "components/modal/FormExample",
          "purpose": "Form workflow composed from H0N controls with explicit dismissal and initial focus."
        },
        {
          "key": "components/modal/SidesExample",
          "purpose": "Modal aligned to each of the four viewport edges."
        },
        {
          "key": "components/modal/BackdropsExample",
          "purpose": "Opaque, blurred, and transparent backdrop treatments."
        }
      ],
      "relatedComponents": [
        "H0AlertDialog",
        "H0Drawer",
        "H0Sheet"
      ],
      "manifest": {
        "family": "Modal",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/modal",
        "styleEntry": "components/Modal/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0NumberInput",
      "status": "migrated",
      "summary": "Localized numeric input with parsing, formatting, precision, bounds, step controls, and controlled null state.",
      "imports": {
        "components": [
          "H0NumberInput"
        ],
        "types": [
          "H0InputVariant",
          "H0NumberFormatOptions",
          "H0NumberFormatter",
          "H0NumberInputEmits",
          "H0NumberInputProps",
          "H0NumberParser"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "number | null",
            "default": "undefined",
            "description": "Controlled number."
          },
          {
            "name": "defaultValue",
            "type": "number | null",
            "default": "null",
            "description": "Initial number."
          },
          {
            "name": "min",
            "type": "number",
            "default": "undefined",
            "description": "Minimum value."
          },
          {
            "name": "max",
            "type": "number",
            "default": "undefined",
            "description": "Maximum value."
          },
          {
            "name": "step",
            "type": "number",
            "default": "1",
            "description": "Increment size."
          },
          {
            "name": "precision",
            "type": "number",
            "default": "undefined",
            "description": "Decimal precision."
          },
          {
            "name": "locale",
            "type": "string",
            "default": "''",
            "description": "Intl locale override."
          },
          {
            "name": "formatOptions",
            "type": "Intl.NumberFormatOptions",
            "default": "{}",
            "description": "Intl formatting options."
          },
          {
            "name": "parse",
            "type": "H0NumberInputParser",
            "default": "undefined",
            "description": "Custom text parser."
          },
          {
            "name": "format",
            "type": "H0NumberInputFormatter",
            "default": "undefined",
            "description": "Custom display formatter."
          },
          {
            "name": "clampOnBlur",
            "type": "boolean",
            "default": "true",
            "description": "Clamps to bounds after editing."
          },
          {
            "name": "wheel",
            "type": "boolean",
            "default": "false",
            "description": "Enables wheel stepping."
          },
          {
            "name": "showSteps",
            "type": "boolean",
            "default": "true",
            "description": "Shows increment and decrement actions."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Uses the shared H0Input control size."
          },
          {
            "name": "variant",
            "type": "'surface' | 'secondary'",
            "default": "'surface'",
            "description": "Uses the shared H0Input background treatment."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name override."
          },
          {
            "name": "autocomplete",
            "type": "string",
            "default": "''",
            "description": "Native autocomplete hint."
          },
          {
            "name": "readonly",
            "type": "boolean",
            "default": "false",
            "description": "Prevents editing."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "''",
            "description": "Empty control copy."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "number | null",
            "description": "Requests value update."
          },
          {
            "name": "change",
            "type": "number | null",
            "description": "Reports a committed number."
          },
          {
            "name": "invalid",
            "type": "string",
            "description": "Reports unparseable text."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0NumberParser",
            "fields": [
              {
                "name": "H0NumberParser",
                "type": "(value: string, locale?: string) => number | null | undefined",
                "description": "Converts editable text into a number or empty value."
              }
            ]
          },
          {
            "name": "H0NumberFormatter",
            "fields": [
              {
                "name": "H0NumberFormatter",
                "type": "(value: number, locale?: string) => string",
                "description": "Converts a committed number into display text."
              }
            ]
          },
          {
            "name": "H0NumberFormatOptions",
            "fields": [
              {
                "name": "H0NumberFormatOptions",
                "type": "Intl.NumberFormatOptions",
                "description": "Native Intl formatting options."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A numeric value needs bounds, stepping, or localized formatting."
      ],
      "avoidWhen": [
        "The interface requires choosing two endpoints from one numeric domain."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/number-input/BasicExample",
          "purpose": "Bounded quantity control."
        },
        {
          "key": "components/number-input/VariantsExample",
          "purpose": "Shared surface and secondary variants."
        },
        {
          "key": "components/number-input/SizesExample",
          "purpose": "Small, medium, and large numeric fields."
        },
        {
          "key": "components/number-input/FormattingExample",
          "purpose": "Intl and custom number formatting."
        },
        {
          "key": "components/number-input/StatesExample",
          "purpose": "Stepper, read-only, invalid, and disabled states."
        }
      ],
      "relatedComponents": [
        "H0Input",
        "H0Form"
      ],
      "manifest": {
        "family": "NumberInput",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/numberinput",
        "styleEntry": "components/NumberInput/style.css",
        "localeSection": "numberInput"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Pagination",
      "status": "migrated",
      "summary": "Numbered page navigation with derived totals, boundary and sibling items, ellipses, sizes, and optional result summary.",
      "imports": {
        "components": [
          "H0Pagination"
        ],
        "types": [
          "H0PaginationEmits",
          "H0PaginationProps",
          "H0PaginationSize"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "page",
            "type": "number",
            "default": "1",
            "description": "Controlled one-based current page."
          },
          {
            "name": "totalItems",
            "type": "number",
            "default": "0",
            "description": "Total result count used to derive pages and summary."
          },
          {
            "name": "pageSize",
            "type": "number",
            "default": "10",
            "description": "Results per derived page."
          },
          {
            "name": "totalPages",
            "type": "number",
            "default": "undefined",
            "description": "Explicit page count that takes precedence over derivation."
          },
          {
            "name": "siblingCount",
            "type": "number",
            "default": "1",
            "description": "Numbered pages shown beside the current page."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Control size."
          },
          {
            "name": "showSummary",
            "type": "boolean",
            "default": "false",
            "description": "Shows the localized visible result range."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables every page control."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible navigation name, falling back to localized copy."
          }
        ],
        "events": [
          {
            "name": "update:page",
            "type": "number",
            "description": "Requests controlled page update."
          },
          {
            "name": "change",
            "type": "number",
            "description": "Reports a different selected page."
          }
        ],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0PaginationSize",
            "fields": [
              {
                "name": "H0PaginationSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported pagination control sizes."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Users navigate a known finite number of result pages."
      ],
      "avoidWhen": [
        "The API exposes only opaque cursors.",
        "Content should append continuously; use H0InfiniteScroll."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Rendered controls remain bounded by boundary and sibling counts.",
        "Fetch data on change rather than recomputing expensive results during render."
      ],
      "examples": [
        {
          "key": "components/pagination/BasicExample",
          "purpose": "Standard controlled navigation across a known page count."
        },
        {
          "key": "components/pagination/SizesExample",
          "purpose": "Small, medium, and large pagination controls compared together."
        },
        {
          "key": "components/pagination/SummaryExample",
          "purpose": "Controlled page navigation with a derived result summary."
        },
        {
          "key": "components/pagination/WindowExample",
          "purpose": "Large page window, sibling count, and disabled state."
        }
      ],
      "relatedComponents": [
        "H0InfiniteScroll",
        "H0DataTable"
      ],
      "manifest": {
        "family": "Pagination",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/pagination",
        "styleEntry": "components/Pagination/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0PasswordInput",
      "status": "migrated",
      "summary": "Password field with controlled visibility, optional strength feedback, autocomplete guidance, and H0N validation messaging.",
      "imports": {
        "components": [
          "H0PasswordInput"
        ],
        "types": [
          "H0InputVariant",
          "H0PasswordInputEmits",
          "H0PasswordInputProps",
          "H0PasswordStrength"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled password."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "''",
            "description": "Initial password."
          },
          {
            "name": "visible",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled reveal state."
          },
          {
            "name": "defaultVisible",
            "type": "boolean",
            "default": "false",
            "description": "Initial reveal state."
          },
          {
            "name": "strength",
            "type": "H0PasswordStrength",
            "default": "undefined",
            "description": "Strength indicator from zero to four."
          },
          {
            "name": "strengthLabels",
            "type": "readonly string[]",
            "default": "Localized",
            "description": "Five strength labels from zero to four."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Uses the shared H0Input control size."
          },
          {
            "name": "variant",
            "type": "'surface' | 'secondary'",
            "default": "'surface'",
            "description": "Uses the shared H0Input background treatment."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name override."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "''",
            "description": "Empty control copy."
          },
          {
            "name": "autocomplete",
            "type": "string",
            "default": "'current-password'",
            "description": "Password manager hint."
          },
          {
            "name": "readonly",
            "type": "boolean",
            "default": "false",
            "description": "Prevents editing."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests password update."
          },
          {
            "name": "change",
            "type": "string",
            "description": "Reports a committed password."
          },
          {
            "name": "update:visible",
            "type": "boolean",
            "description": "Requests reveal-state update."
          },
          {
            "name": "visibility-change",
            "type": "boolean",
            "description": "Reports reveal-state change."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0PasswordStrength",
            "fields": [
              {
                "name": "value",
                "type": "0 | 1 | 2 | 3 | 4",
                "description": "Application-supplied strength level."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A form requests a password and should offer a reveal action or strength feedback."
      ],
      "avoidWhen": [
        "A one-time verification code is requested; use H0InputOTP."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/password-input/BasicExample",
          "purpose": "Password visibility and computed strength."
        },
        {
          "key": "components/password-input/VariantsExample",
          "purpose": "Shared surface and secondary variants."
        },
        {
          "key": "components/password-input/SizesExample",
          "purpose": "Small, medium, and large password fields."
        },
        {
          "key": "components/password-input/VisibilityExample",
          "purpose": "Controlled reveal state."
        },
        {
          "key": "components/password-input/StatesExample",
          "purpose": "Strength labels, validation, and disabled state."
        }
      ],
      "relatedComponents": [
        "H0Input",
        "H0InputOTP",
        "H0Form"
      ],
      "manifest": {
        "family": "PasswordInput",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/passwordinput",
        "styleEntry": "components/PasswordInput/style.css",
        "localeSection": "passwordInput"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Radio",
      "status": "migrated",
      "summary": "Standalone native radio control with surface variants, label, description, validation, and programmatic focus.",
      "imports": {
        "components": [
          "H0Radio"
        ],
        "types": [
          "H0RadioEmits",
          "H0RadioProps",
          "H0RadioValidator",
          "H0RadioValue",
          "H0RadioVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "H0RadioValue",
            "default": "undefined",
            "description": "Controlled selected value."
          },
          {
            "name": "defaultValue",
            "type": "H0RadioValue",
            "default": "undefined",
            "description": "Initial selected value."
          },
          {
            "name": "value",
            "type": "H0RadioValue",
            "description": "Value represented by this radio."
          },
          {
            "name": "variant",
            "type": "H0RadioVariant",
            "default": "'surface'",
            "description": "Unchecked indicator surface treatment."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible label."
          },
          {
            "name": "description",
            "type": "string",
            "default": "''",
            "description": "Supporting copy."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables selection."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks selection as required."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Validation error."
          },
          {
            "name": "validator",
            "type": "H0RadioValidator",
            "default": "undefined",
            "description": "Custom value validator."
          },
          {
            "name": "invalidText",
            "type": "string",
            "default": "Localized",
            "description": "Fallback validation copy."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label when visible copy is absent."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Control id."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native group name."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "H0RadioValue",
            "description": "Requests selected value update."
          },
          {
            "name": "change",
            "type": "[H0RadioValue, Event]",
            "description": "Reports native selection."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Custom label."
          },
          {
            "name": "description",
            "type": "—",
            "description": "Custom description."
          }
        ],
        "exposed": [
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the radio."
          },
          {
            "name": "validate",
            "type": "() => boolean",
            "description": "Runs validation."
          }
        ],
        "types": [
          {
            "name": "H0RadioValue",
            "fields": [
              {
                "name": "H0RadioValue",
                "type": "string | number",
                "description": "Supported option and model value."
              }
            ]
          },
          {
            "name": "H0RadioVariant",
            "fields": [
              {
                "name": "H0RadioVariant",
                "type": "'surface' | 'secondary'",
                "description": "Unchecked indicator surface treatment."
              }
            ]
          },
          {
            "name": "H0RadioValidator",
            "fields": [
              {
                "name": "H0RadioValidator",
                "type": "(value: H0RadioValue | null | undefined) => boolean | string",
                "description": "Returns true for valid selection, false for fallback feedback, or a custom message."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A radio participates in a custom composition not driven by an options array."
      ],
      "avoidWhen": [
        "Several choices form one field; prefer H0RadioGroup."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/radio/BasicExample",
          "purpose": "Standalone and card choices."
        },
        {
          "key": "components/radio/VariantsExample",
          "purpose": "Surface and secondary standalone radios."
        },
        {
          "key": "components/radio/GroupExample",
          "purpose": "Horizontal list group."
        },
        {
          "key": "components/radio/ValidationExample",
          "purpose": "Required card group and exposed validation."
        }
      ],
      "relatedComponents": [
        "H0RadioGroup",
        "H0Form"
      ],
      "manifest": {
        "family": "Radio",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/radio",
        "styleEntry": "components/Radio/style.css",
        "localeSection": "radio"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0RadioGroup",
      "status": "migrated",
      "summary": "Single-choice fieldset generated from options with responsive layout, validation, and custom option rendering.",
      "imports": {
        "components": [
          "H0RadioGroup"
        ],
        "types": [
          "H0RadioGroupEmits",
          "H0RadioGroupProps",
          "H0RadioGroupVariant",
          "H0RadioOption",
          "H0RadioOrientation",
          "H0RadioValue"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "H0RadioValue",
            "default": "undefined",
            "description": "Controlled selected value."
          },
          {
            "name": "defaultValue",
            "type": "H0RadioValue",
            "default": "undefined",
            "description": "Initial selected value."
          },
          {
            "name": "options",
            "type": "H0RadioOption[]",
            "default": "[]",
            "description": "Available choices."
          },
          {
            "name": "orientation",
            "type": "'horizontal' | 'vertical'",
            "default": "'vertical'",
            "description": "Choice flow."
          },
          {
            "name": "variant",
            "type": "'list' | 'cards'",
            "default": "'list'",
            "description": "Choice presentation."
          },
          {
            "name": "columns",
            "type": "number",
            "default": "undefined",
            "description": "Card-grid column count."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Fieldset legend."
          },
          {
            "name": "description",
            "type": "string",
            "default": "''",
            "description": "Supporting copy."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables all choices."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Requires one choice."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Validation error."
          },
          {
            "name": "validator",
            "type": "H0RadioValidator",
            "default": "undefined",
            "description": "Custom validator."
          },
          {
            "name": "invalidText",
            "type": "string",
            "default": "Localized",
            "description": "Fallback validation copy."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Fieldset id base."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native radio name."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "H0RadioValue | null",
            "description": "Requests selected value update."
          },
          {
            "name": "change",
            "type": "H0RadioValue",
            "description": "Reports selection."
          },
          {
            "name": "invalid",
            "type": "[H0RadioValue | null, string]",
            "description": "Reports the value and validation message."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom legend."
          },
          {
            "name": "description",
            "type": "—",
            "description": "Custom description."
          },
          {
            "name": "option",
            "type": "{ option, selected }",
            "description": "Custom option content."
          }
        ],
        "exposed": [
          {
            "name": "validate",
            "type": "() => boolean",
            "description": "Runs group validation."
          }
        ],
        "types": [
          {
            "name": "H0RadioOrientation",
            "fields": [
              {
                "name": "H0RadioOrientation",
                "type": "'vertical' | 'horizontal'",
                "description": "Supported option flow directions."
              }
            ]
          },
          {
            "name": "H0RadioGroupVariant",
            "fields": [
              {
                "name": "H0RadioGroupVariant",
                "type": "'list' | 'cards'",
                "description": "Supported option presentations."
              }
            ]
          },
          {
            "name": "H0RadioOption",
            "fields": [
              {
                "name": "title",
                "type": "string",
                "description": "Visible option title."
              },
              {
                "name": "value",
                "type": "H0RadioValue",
                "description": "Submitted value."
              },
              {
                "name": "description",
                "type": "string | undefined",
                "description": "Supporting copy."
              },
              {
                "name": "price",
                "type": "string | number | undefined",
                "description": "Optional price metadata."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Disables this option."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A field offers one choice from a known option list."
      ],
      "avoidWhen": [
        "A single boolean setting should use H0Switch or H0Checkbox."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/radio/BasicExample",
          "purpose": "Card choices with metadata."
        },
        {
          "key": "components/radio/GroupExample",
          "purpose": "Horizontal list group."
        },
        {
          "key": "components/radio/ValidationExample",
          "purpose": "Required group and exposed validation."
        }
      ],
      "relatedComponents": [
        "H0Radio",
        "H0CheckboxGroup",
        "H0Form"
      ],
      "manifest": {
        "family": "Radio",
        "familyRole": "member",
        "category": "forms",
        "docsPath": "/components/radio",
        "docsAnchor": "h0radiogroup",
        "styleEntry": "components/Radio/style.css",
        "localeSection": "radio"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Ripple",
      "status": "migrated",
      "summary": "Low-level pointer-origin animation for custom positioned interactive surfaces.",
      "imports": {
        "components": [
          "H0Ripple"
        ],
        "types": [
          "H0RippleProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents creation of new ripples."
          },
          {
            "name": "duration",
            "type": "number",
            "default": "620",
            "description": "Animation and cleanup duration in milliseconds."
          },
          {
            "name": "opacity",
            "type": "number",
            "default": "0.24",
            "description": "Peak ripple opacity."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [
          {
            "name": "create",
            "type": "(event: PointerEvent) => void",
            "description": "Creates a ripple from a host pointer event when high animation is enabled."
          }
        ],
        "types": []
      },
      "useWhen": [
        "A custom interactive surface needs optional pointer-origin feedback."
      ],
      "avoidWhen": [
        "A library control already provides its own feedback.",
        "The effect would be the only activation or focus signal."
      ],
      "accessibility": [
        "The host owns semantics, focus, keyboard support, and non-motion feedback.",
        "Ripple requires app-scoped high animation and remains disabled for the system reduced-motion preference.",
        "Keep the ripple itself inert and unlabeled."
      ],
      "styling": [
        "Set positioning, clipping, radius, and currentColor on the host."
      ],
      "responsive": [
        "Ripple measures and covers the current host bounds."
      ],
      "performance": [
        "Create ripples only on deliberate pointer activation.",
        "Temporary nodes and timers are cleaned up automatically."
      ],
      "examples": [
        {
          "key": "components/ripple/BasicExample",
          "purpose": "Required template-ref and pointerdown integration for a custom host."
        },
        {
          "key": "components/ripple/BuiltInExample",
          "purpose": "Button, Card, and ListItem integrations that already include ripple behavior."
        },
        {
          "key": "components/ripple/ConfigurationExample",
          "purpose": "Duration, opacity, and disabled behavior."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0Card",
        "H0ListItem"
      ],
      "manifest": {
        "family": "Ripple",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/ripple",
        "styleEntry": "components/Ripple/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ScrollArea",
      "status": "migrated",
      "summary": "Focusable native scroll region with shared scrollbar styling, bounded axes, stable gutter, edge fades, and boundary events.",
      "imports": {
        "components": [
          "H0ScrollArea"
        ],
        "types": [
          "H0CssSize",
          "H0Orientation",
          "H0ScrollAreaProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "orientation",
            "type": "'horizontal' | 'vertical' | 'both'",
            "default": "'vertical'",
            "description": "Enabled scroll axes."
          },
          {
            "name": "maxHeight",
            "type": "H0CssSize",
            "default": "undefined",
            "description": "Viewport maximum block size; numbers become pixels."
          },
          {
            "name": "maxWidth",
            "type": "H0CssSize",
            "default": "undefined",
            "description": "Viewport maximum inline size; numbers become pixels."
          },
          {
            "name": "stableGutter",
            "type": "boolean",
            "default": "true",
            "description": "Reserves scrollbar gutter space."
          },
          {
            "name": "fadeEdges",
            "type": "boolean",
            "default": "false",
            "description": "Shows visual overflow fades away from boundaries."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible region name, falling back to localized copy."
          }
        ],
        "events": [
          {
            "name": "scroll",
            "type": "Event",
            "description": "Reports native viewport scrolling."
          },
          {
            "name": "reach-start",
            "type": "—",
            "description": "Reports entering the start boundary."
          },
          {
            "name": "reach-end",
            "type": "—",
            "description": "Reports entering the end boundary."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Scrollable content."
          }
        ],
        "exposed": [
          {
            "name": "scrollTo",
            "type": "(options: ScrollToOptions) => void",
            "description": "Scrolls the viewport to an absolute position."
          },
          {
            "name": "scrollBy",
            "type": "(options: ScrollToOptions) => void",
            "description": "Scrolls relative to the current position."
          },
          {
            "name": "viewport",
            "type": "HTMLElement | null",
            "description": "Viewport template ref."
          }
        ],
        "types": [
          {
            "name": "H0Orientation",
            "fields": [
              {
                "name": "H0Orientation",
                "type": "'horizontal' | 'vertical'",
                "description": "Shared single-axis orientation type."
              }
            ]
          },
          {
            "name": "H0CssSize",
            "fields": [
              {
                "name": "H0CssSize",
                "type": "number | string",
                "description": "CSS size where numeric values are converted to pixels."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Content needs a bounded, explicitly labeled scroll region.",
        "Code needs boundary events or imperative native scrolling."
      ],
      "avoidWhen": [
        "The document itself can scroll naturally.",
        "A large collection needs virtualization rather than only overflow."
      ],
      "accessibility": [
        "Provide a specific ariaLabel.",
        "The viewport remains keyboard focusable.",
        "Avoid nested scroll regions unless each has a distinct purpose."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/scroll-area/BasicExample",
          "purpose": "Bounded vertical activity feed with edge fades."
        },
        {
          "key": "components/scroll-area/HorizontalExample",
          "purpose": "Keyboard-focusable horizontal card strip."
        },
        {
          "key": "components/scroll-area/ApiExample",
          "purpose": "Imperative scrolling and boundary events."
        }
      ],
      "relatedComponents": [
        "H0Stack",
        "H0InfiniteScroll"
      ],
      "manifest": {
        "family": "ScrollArea",
        "familyRole": "root",
        "category": "layout",
        "docsPath": "/components/scrollarea",
        "styleEntry": "components/ScrollArea/style.css",
        "localeSection": "scrollArea"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0SearchField",
      "status": "migrated",
      "summary": "Compact native search control with clear action, controlled value, icon customization, and imperative focus helpers.",
      "imports": {
        "components": [
          "H0SearchField"
        ],
        "types": [
          "H0SearchFieldEmits",
          "H0SearchFieldProps",
          "H0SearchFieldVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled query."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "''",
            "description": "Initial query."
          },
          {
            "name": "variant",
            "type": "'secondary' | 'surface'",
            "default": "'surface'",
            "description": "Shared H0Input background treatment."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'sm'",
            "description": "Shared H0Input control size."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "'Search...'",
            "description": "Empty control copy."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables the field."
          },
          {
            "name": "readonly",
            "type": "boolean",
            "default": "false",
            "description": "Prevents editing."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "clearable",
            "type": "boolean",
            "default": "true",
            "description": "Shows a clear action."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Control id."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Form field name."
          },
          {
            "name": "autocomplete",
            "type": "string",
            "default": "'off'",
            "description": "Native autocomplete hint."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name override."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests query update."
          },
          {
            "name": "input",
            "type": "[string, Event]",
            "description": "Reports native input."
          },
          {
            "name": "clear",
            "type": "—",
            "description": "Reports clearing."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports blur."
          }
        ],
        "slots": [
          {
            "name": "icon",
            "type": "—",
            "description": "Custom search icon."
          }
        ],
        "exposed": [
          {
            "name": "clear",
            "type": "() => void",
            "description": "Clears the query."
          },
          {
            "name": "focus",
            "type": "() => void",
            "description": "Focuses the input."
          },
          {
            "name": "setValue",
            "type": "(value: string) => void",
            "description": "Sets the query."
          }
        ],
        "types": [
          {
            "name": "H0SearchFieldVariant",
            "fields": [
              {
                "name": "H0SearchFieldVariant",
                "type": "'secondary' | 'surface'",
                "description": "Supported search-field surface treatments."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Users filter or search content with a compact query field."
      ],
      "avoidWhen": [
        "A fixed option selection is required; use H0Select."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/search-field/BasicExample",
          "purpose": "Clearable controlled search."
        },
        {
          "key": "components/search-field/VariantsExample",
          "purpose": "Surface variants."
        },
        {
          "key": "components/search-field/SizesExample",
          "purpose": "Small, medium, and large search fields."
        },
        {
          "key": "components/search-field/StatesExample",
          "purpose": "Read-only, disabled, and invalid states."
        },
        {
          "key": "components/search-field/ApiExample",
          "purpose": "Input events and imperative helpers."
        }
      ],
      "relatedComponents": [
        "H0Select",
        "H0Input"
      ],
      "manifest": {
        "family": "SearchField",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/searchfield",
        "styleEntry": "components/SearchField/style.css",
        "localeSection": "search"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Segment",
      "status": "migrated",
      "summary": "Controlled or uncontrolled radiogroup for a compact set of mutually exclusive modes with an animated indicator.",
      "imports": {
        "components": [
          "H0Segment"
        ],
        "types": [
          "H0IconSource",
          "H0SegmentEmits",
          "H0SegmentItem",
          "H0SegmentProps",
          "H0SegmentSize",
          "H0SegmentValue",
          "H0SegmentVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "H0SegmentValue",
            "default": "undefined",
            "description": "Controlled selected value."
          },
          {
            "name": "defaultValue",
            "type": "H0SegmentValue",
            "default": "''",
            "description": "Initial uncontrolled value."
          },
          {
            "name": "items",
            "type": "H0SegmentItem[]",
            "description": "Available mutually exclusive choices."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables every choice."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Control size."
          },
          {
            "name": "variant",
            "type": "'default' | 'secondary' | 'outline' | 'ghost'",
            "default": "'default'",
            "description": "Surface and indicator treatment."
          },
          {
            "name": "iconExpand",
            "type": "boolean",
            "default": "false",
            "description": "Collapses labels for inactive icon items and expands the selected item."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "'Segmented control'",
            "description": "Accessible radiogroup name."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "H0SegmentValue",
            "description": "Requests selection update."
          },
          {
            "name": "change",
            "type": "H0SegmentValue",
            "description": "Reports a different enabled selection."
          }
        ],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0SegmentValue",
            "fields": [
              {
                "name": "H0SegmentValue",
                "type": "string",
                "description": "Stable selection value type."
              }
            ]
          },
          {
            "name": "H0SegmentSize",
            "fields": [
              {
                "name": "H0SegmentSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported control sizes."
              }
            ]
          },
          {
            "name": "H0SegmentVariant",
            "fields": [
              {
                "name": "H0SegmentVariant",
                "type": "'default' | 'secondary' | 'outline' | 'ghost'",
                "description": "Supported surface and indicator treatments."
              }
            ]
          },
          {
            "name": "H0SegmentItem",
            "fields": [
              {
                "name": "label",
                "type": "string",
                "description": "Visible and accessible choice label."
              },
              {
                "name": "value",
                "type": "H0SegmentValue",
                "description": "Stable selection value."
              },
              {
                "name": "icon",
                "type": "H0IconSource | undefined",
                "description": "Optional leading legacy node or @h0nio/icons body definition."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Disables this choice."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A small set of peer views or modes needs compact immediate selection."
      ],
      "avoidWhen": [
        "Each choice controls a semantic tabpanel; use H0Tabs.",
        "The choices are form data better represented by H0RadioGroup."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep the item list short and stable.",
        "Indicator measurements update on selection, size, items, and observed layout changes."
      ],
      "examples": [
        {
          "key": "components/segment/BasicExample",
          "purpose": "Controlled reporting-period selection."
        },
        {
          "key": "components/segment/AppearanceExample",
          "purpose": "Default, secondary, outline, and ghost variants."
        },
        {
          "key": "components/segment/SizesExample",
          "purpose": "Small, medium, and large controls."
        },
        {
          "key": "components/segment/IconsExample",
          "purpose": "Icon expansion and disabled item."
        }
      ],
      "relatedComponents": [
        "H0Tabs",
        "H0RadioGroup",
        "H0ButtonGroup"
      ],
      "manifest": {
        "family": "Segment",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/segment",
        "styleEntry": "components/Segment/style.css"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Select",
      "status": "migrated",
      "summary": "Accessible single or multiple option picker with custom rendering, virtualization, loading state, and teleported listbox.",
      "imports": {
        "components": [
          "H0Select"
        ],
        "types": [
          "H0IconSource",
          "H0SelectEmits",
          "H0SelectOption",
          "H0SelectProps",
          "H0SelectSize",
          "H0SelectValue",
          "H0SelectVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "H0SelectValue | H0SelectValue[] | null",
            "default": "undefined",
            "description": "Controlled selection."
          },
          {
            "name": "defaultValue",
            "type": "H0SelectValue | H0SelectValue[] | null",
            "default": "null",
            "description": "Initial selection."
          },
          {
            "name": "options",
            "type": "H0SelectOption[]",
            "default": "[]",
            "description": "Available options."
          },
          {
            "name": "multiple",
            "type": "boolean",
            "default": "false",
            "description": "Allows several values."
          },
          {
            "name": "maxSelected",
            "type": "number",
            "default": "undefined",
            "description": "Maximum selected values."
          },
          {
            "name": "size",
            "type": "H0SelectSize",
            "default": "'md'",
            "description": "Control size."
          },
          {
            "name": "variant",
            "type": "H0SelectVariant",
            "default": "'surface'",
            "description": "Trigger background treatment."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible label."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "Localized",
            "description": "Empty selection copy."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables interaction."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Shows pending options."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Requires a selection."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting copy."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Control id."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Form field name."
          },
          {
            "name": "emptyText",
            "type": "string",
            "default": "Localized",
            "description": "Empty list copy."
          },
          {
            "name": "closeOnSelect",
            "type": "boolean",
            "default": "!multiple",
            "description": "Closes after choosing."
          },
          {
            "name": "listAriaLabel",
            "type": "string",
            "default": "Localized",
            "description": "Listbox accessible name."
          },
          {
            "name": "virtual",
            "type": "boolean",
            "default": "false",
            "description": "Virtualizes option rows."
          },
          {
            "name": "optionHeight",
            "type": "number",
            "default": "44",
            "description": "Finite positive virtual row height. Invalid values use ordinary rendering."
          },
          {
            "name": "overscan",
            "type": "number",
            "default": "5",
            "description": "Extra virtual rows, rounded down. Negative and non-finite values use zero."
          },
          {
            "name": "scrollHeight",
            "type": "number | string",
            "default": "320",
            "description": "Listbox maximum height in pixels or a CSS length, including relative units."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Popup teleport target."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Keeps popup local."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while the option overlay is open."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the root."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the trigger."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "H0SelectValue | H0SelectValue[] | null",
            "description": "Requests selection update."
          },
          {
            "name": "change",
            "type": "H0SelectValue | H0SelectValue[] | null",
            "description": "Reports committed selection."
          },
          {
            "name": "open",
            "type": "—",
            "description": "Reports opening."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports closing."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom label."
          },
          {
            "name": "value",
            "type": "{ selectedOptions, value }",
            "description": "Custom selected-value display."
          },
          {
            "name": "option-start",
            "type": "{ option, selected, index, visibleIndex }",
            "description": "Leading option content."
          },
          {
            "name": "option",
            "type": "{ option, selected, index, visibleIndex }",
            "description": "Custom option content."
          },
          {
            "name": "empty",
            "type": "—",
            "description": "Custom empty state."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0SelectValue",
            "fields": [
              {
                "name": "H0SelectValue",
                "type": "string | number",
                "description": "Supported option and model value."
              }
            ]
          },
          {
            "name": "H0SelectSize",
            "fields": [
              {
                "name": "H0SelectSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported trigger sizes."
              }
            ]
          },
          {
            "name": "H0SelectVariant",
            "fields": [
              {
                "name": "H0SelectVariant",
                "type": "'secondary' | 'surface'",
                "description": "Supported trigger surface treatments."
              }
            ]
          },
          {
            "name": "H0SelectOption",
            "fields": [
              {
                "name": "label",
                "type": "string",
                "description": "Visible option label."
              },
              {
                "name": "value",
                "type": "Value",
                "description": "Option value preserving the generic Value type."
              },
              {
                "name": "description",
                "type": "string | undefined",
                "description": "Supporting copy."
              },
              {
                "name": "icon",
                "type": "H0IconSource | undefined",
                "description": "Optional legacy node or @h0nio/icons body definition."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Disables selection."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Users choose from a known option list without free-text creation."
      ],
      "avoidWhen": [
        "Free-text creation or remote filtering is central."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/select/BasicExample",
          "purpose": "Single controlled option selection."
        },
        {
          "key": "components/select/MultipleExample",
          "purpose": "Multiple selection with a maximum."
        },
        {
          "key": "components/select/VariantsExample",
          "purpose": "Surface and secondary trigger treatments."
        },
        {
          "key": "components/select/SizesExample",
          "purpose": "Small, medium, and large trigger sizes."
        },
        {
          "key": "components/select/StatesExample",
          "purpose": "Loading, disabled, invalid, and empty states."
        },
        {
          "key": "components/select/VirtualExample",
          "purpose": "Virtualized fixed-height option list."
        }
      ],
      "relatedComponents": [
        "H0RadioGroup",
        "H0Form"
      ],
      "manifest": {
        "family": "Select",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/select",
        "styleEntry": "components/Select/style.css",
        "localeSection": "select"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Sheet",
      "status": "migrated",
      "summary": "Compact inset modal surface positioned near a viewport edge.",
      "imports": {
        "components": [
          "H0Sheet"
        ],
        "types": [
          "H0SheetBackdrop",
          "H0SheetEmits",
          "H0SheetProps",
          "H0SheetSide"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state used by v-model."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled open state."
          },
          {
            "name": "side",
            "type": "H0SheetSide",
            "default": "'bottom'",
            "description": "Inset viewport edge: 'top', 'right', 'bottom', or 'left'."
          },
          {
            "name": "backdrop",
            "type": "H0SheetBackdrop",
            "default": "'opaque'",
            "description": "Backdrop appearance: 'opaque', 'blur', or 'transparent'."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Visible header title and preferred accessible name."
          },
          {
            "name": "subtitle",
            "type": "string",
            "default": "''",
            "description": "Supporting text displayed above the standard header title."
          },
          {
            "name": "closeOnBackdrop",
            "type": "boolean",
            "default": "true",
            "description": "Allows backdrop dismissal."
          },
          {
            "name": "closeOnEsc",
            "type": "boolean",
            "default": "true",
            "description": "Allows Escape dismissal."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible name used when title is empty before locale fallback."
          },
          {
            "name": "closeAriaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible label for the standard header close button."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Teleport destination."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the overlay in place."
          },
          {
            "name": "initialFocus",
            "type": "string | HTMLElement",
            "default": "undefined",
            "description": "Selector or element focused after opening."
          },
          {
            "name": "returnFocus",
            "type": "boolean | HTMLElement",
            "default": "true",
            "description": "Controls focus restoration."
          },
          {
            "name": "lockScroll",
            "type": "boolean",
            "default": "true",
            "description": "Locks document scrolling while open."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests controlled state changes."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports committed state changes."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports any close path."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Scrollable sheet content between the optional standard header and footer."
          },
          {
            "name": "header",
            "type": "—",
            "description": "Replaces the built-in title and subtitle content; the close button remains available."
          },
          {
            "name": "footer",
            "type": "{ close: () => void }",
            "description": "Footer actions with a close callback."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0SheetSide",
            "fields": [
              {
                "name": "H0SheetSide",
                "type": "'top' | 'right' | 'bottom' | 'left'",
                "description": "Inset viewport edge used to position the sheet."
              }
            ]
          },
          {
            "name": "H0SheetBackdrop",
            "fields": [
              {
                "name": "H0SheetBackdrop",
                "type": "'opaque' | 'blur' | 'transparent'",
                "description": "Available backdrop appearances."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A short modal workflow should float near a viewport edge.",
        "Mobile-first quick actions need a bottom surface."
      ],
      "avoidWhen": [
        "A full-height navigation surface needs H0Drawer.",
        "A centered form needs H0Modal."
      ],
      "accessibility": [
        "Provide a visible title or meaningful ariaLabel.",
        "Keep a visible completion or close action.",
        "Do not imply that the decorative handle is draggable."
      ],
      "styling": [
        "Style slot content with public tokens.",
        "Treat handle and panel selectors as implementation details."
      ],
      "responsive": [
        "The sheet preserves a viewport inset and scrolls overflowing content."
      ],
      "performance": [
        "Keep sheet workflows compact; content mounts only while open."
      ],
      "examples": [
        {
          "key": "components/sheet/BasicExample",
          "purpose": "Controlled bottom sheet with a clear completion action."
        },
        {
          "key": "components/sheet/PreferencesExample",
          "purpose": "Compact preferences workflow composed from H0N switches."
        },
        {
          "key": "components/sheet/SidesExample",
          "purpose": "Inset sheet positioned at each viewport edge."
        },
        {
          "key": "components/sheet/BackdropsExample",
          "purpose": "Opaque, blurred, and transparent backdrop treatments."
        }
      ],
      "relatedComponents": [
        "H0Drawer",
        "H0Modal"
      ],
      "manifest": {
        "family": "Sheet",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/sheet",
        "styleEntry": "components/Sheet/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0SideNav",
      "status": "migrated",
      "summary": "Grouped sidebar navigation surface with configurable group spacing and animated item indicators.",
      "imports": {
        "components": [
          "H0SideNav"
        ],
        "types": [
          "H0SideNavGap",
          "H0SideNavProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "gap",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Space between navigation groups."
          },
          {
            "name": "animatedIndicator",
            "type": "boolean",
            "default": "true",
            "description": "Animates item indicators on active, focus, and hover states."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "H0SideNavGroup and H0SideNavItem content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0SideNavGap",
            "fields": [
              {
                "name": "H0SideNavGap",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported spacing between navigation groups."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A persistent sidebar contains related groups of page destinations."
      ],
      "avoidWhen": [
        "Destinations belong in the global top navigation or a compact tab set."
      ],
      "accessibility": [
        "Pass a native aria-label to the root nav.",
        "Use group labels that explain each destination set.",
        "Ensure exactly one current destination when the navigation represents pages."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/side-nav/BasicExample",
          "purpose": "Grouped destinations with controlled active state."
        },
        {
          "key": "components/side-nav/StatesExample",
          "purpose": "Icons, custom trailing content, disabled and active items."
        },
        {
          "key": "components/side-nav/GapExample",
          "purpose": "Small, medium, and large group spacing."
        }
      ],
      "relatedComponents": [
        "H0SideNavGroup",
        "H0SideNavItem",
        "H0List"
      ],
      "manifest": {
        "family": "SideNav",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/sidenav",
        "styleEntry": "components/SideNav/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0SideNavGroup",
      "status": "migrated",
      "summary": "Labeled list grouping for related destinations inside H0SideNav.",
      "imports": {
        "components": [
          "H0SideNavGroup"
        ],
        "types": [
          "H0SideNavGroupProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Accessible and visible group label."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom group label."
          },
          {
            "name": "default",
            "type": "—",
            "description": "H0SideNavItem destinations."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Sidebar destinations form a meaningful labeled subset."
      ],
      "avoidWhen": [
        "A wrapper would not communicate a real grouping."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/side-nav/BasicExample",
          "purpose": "Labeled sidebar groups."
        },
        {
          "key": "components/side-nav/StatesExample",
          "purpose": "Custom group label."
        },
        {
          "key": "components/side-nav/GapExample",
          "purpose": "Group-spacing comparison."
        }
      ],
      "relatedComponents": [
        "H0SideNav",
        "H0SideNavItem",
        "H0List"
      ],
      "manifest": {
        "family": "SideNav",
        "familyRole": "member",
        "category": "navigation",
        "docsPath": "/components/sidenav",
        "docsAnchor": "h0sidenavgroup",
        "styleEntry": "components/SideNav/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0SideNavItem",
      "status": "migrated",
      "summary": "Polymorphic sidebar destination with explicit or router-derived active state and optional trailing indicator.",
      "imports": {
        "components": [
          "H0SideNavItem"
        ],
        "types": [
          "H0SideNavItemElement",
          "H0SideNavItemProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Fallback destination label."
          },
          {
            "name": "active",
            "type": "boolean",
            "default": "false",
            "description": "Marks the destination current and adds aria-current."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables destination interaction."
          },
          {
            "name": "as",
            "type": "string | Component",
            "default": "'a'",
            "description": "Native anchor or router-compatible component."
          },
          {
            "name": "indicator",
            "type": "boolean",
            "default": "true",
            "description": "Shows the default trailing arrow when no end slot is supplied."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "start",
            "type": "—",
            "description": "Leading icon or visual."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Custom destination title."
          },
          {
            "name": "end",
            "type": "—",
            "description": "Custom trailing status or indicator."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0SideNavItemElement",
            "fields": [
              {
                "name": "H0SideNavItemElement",
                "type": "string | Component",
                "description": "Native tag name or compatible Vue component."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A destination belongs inside H0SideNav and may use native or router navigation."
      ],
      "avoidWhen": [
        "The row performs a non-navigation action."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/side-nav/BasicExample",
          "purpose": "Controlled active destinations."
        },
        {
          "key": "components/side-nav/StatesExample",
          "purpose": "Start and end slots, active and disabled states."
        }
      ],
      "relatedComponents": [
        "H0SideNav",
        "H0SideNavGroup",
        "H0ListItem",
        "H0Link"
      ],
      "manifest": {
        "family": "SideNav",
        "familyRole": "member",
        "category": "navigation",
        "docsPath": "/components/sidenav",
        "docsAnchor": "h0sidenavitem",
        "styleEntry": "components/SideNav/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Skeleton",
      "status": "migrated",
      "summary": "Decorative loading placeholder with block, text, and circular geometry and reduced-motion shimmer handling.",
      "imports": {
        "components": [
          "H0Skeleton"
        ],
        "types": [
          "H0SkeletonProps",
          "H0SkeletonVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "circle",
            "type": "boolean",
            "default": "false",
            "description": "Forces fully circular radius."
          },
          {
            "name": "height",
            "type": "string",
            "default": "'1rem'",
            "description": "CSS placeholder height."
          },
          {
            "name": "radius",
            "type": "string",
            "default": "'var(--h0n-ui-radius-xl)'",
            "description": "CSS corner radius."
          },
          {
            "name": "variant",
            "type": "H0SkeletonVariant",
            "default": "'block'",
            "description": "Block, circle, or text geometry."
          },
          {
            "name": "width",
            "type": "string",
            "default": "'100%'",
            "description": "CSS placeholder width."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0SkeletonVariant",
            "fields": [
              {
                "name": "H0SkeletonVariant",
                "type": "'block' | 'circle' | 'text'",
                "description": "Placeholder geometry."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "The shape of loading content is known and layout should remain stable."
      ],
      "avoidWhen": [
        "The content shape is unknown and one concise H0Spinner is enough."
      ],
      "accessibility": [
        "Skeletons are aria-hidden; label the containing loading region once.",
        "Mark the replaced region busy when useful.",
        "Shimmer runs only in high animation mode and stops for the system reduced-motion preference."
      ],
      "styling": [
        "Use dimensions, radius, variant, and public tokens.",
        "Treat shimmer internals as implementation details."
      ],
      "responsive": [
        "Use percentages for fluid text and blocks.",
        "Match fixed circles to final avatar or icon size."
      ],
      "performance": [
        "Approximate structure with a small number of nodes.",
        "Remove the entire group when content resolves."
      ],
      "examples": [
        {
          "key": "components/skeleton/VariantsExample",
          "purpose": "Block, text, and circular geometry."
        },
        {
          "key": "components/skeleton/ProfileExample",
          "purpose": "Accessible profile-shaped loading group."
        },
        {
          "key": "components/skeleton/CardExample",
          "purpose": "Responsive card placeholder geometry."
        },
        {
          "key": "components/skeleton/LoadingStateExample",
          "purpose": "Parent-owned transition from placeholders to a real H0Card."
        }
      ],
      "relatedComponents": [
        "H0Spinner",
        "H0Card",
        "H0Typography"
      ],
      "manifest": {
        "family": "Skeleton",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/skeleton",
        "styleEntry": "components/Skeleton/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Spacer",
      "status": "migrated",
      "summary": "Non-semantic horizontal or vertical token-sized space with responsive sizing.",
      "imports": {
        "components": [
          "H0Spacer"
        ],
        "types": [
          "H0Orientation",
          "H0ResponsiveValue",
          "H0Space",
          "H0SpacerProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "axis",
            "type": "'horizontal' | 'vertical'",
            "default": "'vertical'",
            "description": "Dimension occupied by the spacer."
          },
          {
            "name": "size",
            "type": "H0ResponsiveValue<H0Space>",
            "default": "'md'",
            "description": "Responsive token size."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "An intentional empty gap cannot be expressed by a parent gap or wrapper padding."
      ],
      "avoidWhen": [
        "Stack, Inline, or Grid gap can own the relationship."
      ],
      "accessibility": [
        "The spacer is always aria-hidden.",
        "Do not use empty space as the only indication of a content relationship."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/layout/SpacerExample",
          "purpose": "Highlighted responsive vertical and fixed horizontal empty space."
        }
      ],
      "relatedComponents": [
        "H0Stack",
        "H0Inline"
      ],
      "manifest": {
        "family": "Layout",
        "familyRole": "member",
        "category": "layout",
        "docsPath": "/components/layout",
        "docsAnchor": "h0spacer",
        "styleEntry": "components/Layout/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Spinner",
      "status": "migrated",
      "summary": "Compact indeterminate status indicator with CSS sizing, current-color styling, and accessible label.",
      "imports": {
        "components": [
          "H0Spinner"
        ],
        "types": [
          "H0SpinnerProps",
          "H0SpinnerSize"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "size",
            "type": "H0SpinnerSize",
            "default": "'18px'",
            "description": "Equal CSS width and height."
          },
          {
            "name": "label",
            "type": "string",
            "default": "'Loading'",
            "description": "Accessible status label."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0SpinnerSize",
            "fields": [
              {
                "name": "H0SpinnerSize",
                "type": "H0CssSize",
                "description": "Public CSS size value."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A short operation has no measurable completion value.",
        "A compact control needs an inline loading indicator."
      ],
      "avoidWhen": [
        "Content geometry should remain stable; use H0Skeleton.",
        "Completion can be measured; use determinate progress."
      ],
      "accessibility": [
        "Use a task-specific label.",
        "Avoid several independently announced spinners for one loading region.",
        "Prevent duplicate actions while work is active.",
        "Rotation runs in effective Medium or High; Off, Low, and the system reduced-motion preference retain a static status."
      ],
      "styling": [
        "Spinner inherits currentColor.",
        "Treat border, rotation selectors, and internal CSS variables as implementation details."
      ],
      "responsive": [
        "Spinner keeps equal fixed dimensions selected through size."
      ],
      "performance": [
        "Use one spinner per loading context.",
        "Remove it when work completes or fails."
      ],
      "examples": [
        {
          "key": "components/spinner/SizesExample",
          "purpose": "Common spinner dimensions and labels."
        },
        {
          "key": "components/spinner/ContextExample",
          "purpose": "Spinner with visible task context."
        },
        {
          "key": "components/spinner/ButtonExample",
          "purpose": "Preferred H0Button loading integration."
        },
        {
          "key": "components/spinner/AsyncExample",
          "purpose": "Parent-owned asynchronous loading state."
        }
      ],
      "relatedComponents": [
        "H0Skeleton",
        "H0Button"
      ],
      "manifest": {
        "family": "Spinner",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/spinner",
        "styleEntry": "components/Spinner/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Stack",
      "status": "migrated",
      "summary": "Polymorphic vertical flex layout with responsive gap, cross-axis alignment, distribution, and wrapping.",
      "imports": {
        "components": [
          "H0Stack"
        ],
        "types": [
          "H0LayoutAlign",
          "H0LayoutJustify",
          "H0ResponsiveValue",
          "H0Space",
          "H0StackProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "string | Component",
            "default": "'div'",
            "description": "Semantic root element or Vue component."
          },
          {
            "name": "gap",
            "type": "H0ResponsiveValue<H0Space>",
            "default": "'md'",
            "description": "Responsive space between children."
          },
          {
            "name": "align",
            "type": "H0ResponsiveValue<H0LayoutAlign>",
            "default": "'stretch'",
            "description": "Responsive cross-axis alignment."
          },
          {
            "name": "justify",
            "type": "H0ResponsiveValue<H0LayoutJustify>",
            "default": "'start'",
            "description": "Responsive main-axis distribution."
          },
          {
            "name": "wrap",
            "type": "H0ResponsiveValue<boolean>",
            "default": "false",
            "description": "Responsive flex wrapping."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Content rendered inside the selected semantic root."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Sibling elements form a vertical sequence with consistent spacing."
      ],
      "avoidWhen": [
        "Children should flow horizontally; use H0Inline."
      ],
      "accessibility": [
        "Choose semantic roots that match the document structure.",
        "Keep visual and DOM order aligned.",
        "Do not use spacing alone to communicate relationships."
      ],
      "styling": [
        "Use component props for structure and public H0N tokens for product-specific surfaces.",
        "Treat generated CSS variables and internal classes as implementation details."
      ],
      "responsive": [
        "Start with a useful base value and add only necessary breakpoint overrides.",
        "Test narrow containers as well as viewport breakpoints."
      ],
      "performance": [
        "Responsive behavior is CSS-driven and installs no resize listeners.",
        "Avoid unnecessary wrapper depth when one primitive expresses the relationship."
      ],
      "examples": [
        {
          "key": "components/layout/BasicExample",
          "purpose": "Nested page-section composition."
        },
        {
          "key": "components/layout/StackExample",
          "purpose": "Responsive vertical rhythm between repeated sections."
        }
      ],
      "relatedComponents": [
        "H0Inline",
        "H0Grid"
      ],
      "manifest": {
        "family": "Layout",
        "familyRole": "member",
        "category": "layout",
        "docsPath": "/components/layout",
        "docsAnchor": "h0stack",
        "styleEntry": "components/Layout/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Stepper",
      "status": "migrated",
      "summary": "Non-interactive progress indicator for a fixed sequence with completed, active, and pending states.",
      "imports": {
        "components": [
          "H0Stepper"
        ],
        "types": [
          "H0IconSource",
          "H0StepperColor",
          "H0StepperItem",
          "H0StepperOrientation",
          "H0StepperProps",
          "H0StepperSize"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "items",
            "type": "H0StepperItem[]",
            "description": "Ordered progress steps."
          },
          {
            "name": "step",
            "type": "number",
            "default": "1",
            "description": "One-based current step, clamped to the item count."
          },
          {
            "name": "orientation",
            "type": "'horizontal' | 'vertical'",
            "default": "'horizontal'",
            "description": "Progress layout direction."
          },
          {
            "name": "size",
            "type": "'sm' | 'md' | 'lg'",
            "default": "'md'",
            "description": "Marker and typography size."
          },
          {
            "name": "color",
            "type": "'accent' | 'success' | 'danger' | 'warning' | 'inverted'",
            "default": "'accent'",
            "description": "Completed and active semantic treatment."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "'Progress'",
            "description": "Accessible navigation name."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": [
          {
            "name": "H0StepperOrientation",
            "fields": [
              {
                "name": "H0StepperOrientation",
                "type": "'horizontal' | 'vertical'",
                "description": "Supported progress directions."
              }
            ]
          },
          {
            "name": "H0StepperSize",
            "fields": [
              {
                "name": "H0StepperSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported marker and typography sizes."
              }
            ]
          },
          {
            "name": "H0StepperColor",
            "fields": [
              {
                "name": "H0StepperColor",
                "type": "'accent' | 'success' | 'danger' | 'warning' | 'inverted'",
                "description": "Supported progress treatments."
              }
            ]
          },
          {
            "name": "H0StepperItem",
            "fields": [
              {
                "name": "label",
                "type": "string | undefined",
                "description": "Step label."
              },
              {
                "name": "description",
                "type": "string | undefined",
                "description": "Supporting status or instruction."
              },
              {
                "name": "icon",
                "type": "H0IconSource | undefined",
                "description": "Legacy node or @h0nio/icons body definition used before completion."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A workflow has a known ordered sequence and users need progress context."
      ],
      "avoidWhen": [
        "The control itself must navigate between panels; use H0Tabs or application buttons."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Horizontal steppers scroll when their readable minimum exceeds the container.",
        "Use vertical orientation for long labels or narrow persistent layouts."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/stepper/BasicExample",
          "purpose": "Four-step workspace setup progress."
        },
        {
          "key": "components/stepper/ColorsExample",
          "purpose": "All semantic progress treatments at full width."
        },
        {
          "key": "components/stepper/SizesExample",
          "purpose": "Small, medium, and large marker and typography scales."
        },
        {
          "key": "components/stepper/VerticalExample",
          "purpose": "Vertical layout with descriptions and icons."
        }
      ],
      "relatedComponents": [
        "H0Tabs"
      ],
      "manifest": {
        "family": "Stepper",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/stepper",
        "styleEntry": "components/Stepper/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Switch",
      "status": "migrated",
      "summary": "Immediate boolean setting control with native checkbox semantics, switch role, label, hint, and validation state.",
      "imports": {
        "components": [
          "H0Switch"
        ],
        "types": [
          "H0SwitchEmits",
          "H0SwitchProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled checked state."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial state."
          },
          {
            "name": "value",
            "type": "string",
            "default": "'on'",
            "description": "Native submitted value."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests state update."
          },
          {
            "name": "change",
            "type": "boolean",
            "description": "Reports state change."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Custom visible label."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "A boolean setting takes effect immediately."
      ],
      "avoidWhen": [
        "Users select items for later submission; use H0Checkbox."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/switch/BasicExample",
          "purpose": "Controlled boolean preference."
        },
        {
          "key": "components/switch/StatesExample",
          "purpose": "Checked, disabled, invalid, and custom-label states."
        },
        {
          "key": "components/switch/FormExample",
          "purpose": "Named switch collected by H0Form."
        }
      ],
      "relatedComponents": [
        "H0Checkbox",
        "H0Form"
      ],
      "manifest": {
        "family": "Switch",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/switch",
        "styleEntry": "components/Switch/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Tab",
      "status": "migrated",
      "summary": "Compound tab control linked to one H0TabPanel through the shared H0Tabs value and generated IDs.",
      "imports": {
        "components": [
          "H0Tab"
        ],
        "types": [
          "H0TabValue"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "value",
            "type": "H0TabValue",
            "description": "Identity shared with the associated panel."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables focus and activation."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible tab label."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Compound H0Tabs needs explicitly authored tab content."
      ],
      "avoidWhen": [
        "Items mode can generate uniform tabs."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/tabs/BasicExample",
          "purpose": "Compound tab controls."
        },
        {
          "key": "components/tabs/ModesExample",
          "purpose": "Manual activation and vertical orientation."
        },
        {
          "key": "components/tabs/MountExample",
          "purpose": "Tabs controlling lazy panels."
        }
      ],
      "relatedComponents": [
        "H0Tabs",
        "H0TabList",
        "H0TabPanel"
      ],
      "manifest": {
        "family": "Tabs",
        "familyRole": "member",
        "category": "navigation",
        "docsPath": "/components/tabs",
        "docsAnchor": "h0tab",
        "styleEntry": "components/Tabs/style.css",
        "localeSection": "tabs"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Table",
      "status": "migrated",
      "summary": "Semantic presentational table with typed columns, custom cells, density variants, and managed scroll geometry.",
      "imports": {
        "components": [
          "H0Table"
        ],
        "types": [
          "H0TableAriaSort",
          "H0TableColumn",
          "H0TableColumnAlign",
          "H0TableColumnSizing",
          "H0TableDensity",
          "H0TableEmits",
          "H0TableGetRowKey",
          "H0TableProps",
          "H0TableRow",
          "H0TableRowKey"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "columns",
            "type": "H0TableColumn<Row>[]",
            "description": "Column definitions in visible order."
          },
          {
            "name": "rows",
            "type": "Row[]",
            "default": "[]",
            "description": "Rows rendered in the table body."
          },
          {
            "name": "getRowKey",
            "type": "H0TableGetRowKey<Row>",
            "default": "row index",
            "description": "Returns stable identity for each row."
          },
          {
            "name": "columnSizing",
            "type": "H0TableColumnSizing",
            "default": "'auto'",
            "description": "Uses intrinsic sizing or fixed layout with equal unconstrained columns."
          },
          {
            "name": "density",
            "type": "H0TableDensity",
            "default": "'default'",
            "description": "Controls cell padding."
          },
          {
            "name": "striped",
            "type": "boolean",
            "default": "false",
            "description": "Alternates row surfaces."
          },
          {
            "name": "hoverable",
            "type": "boolean",
            "default": "false",
            "description": "Adds pointer-hover row highlighting without changing interaction."
          },
          {
            "name": "bordered",
            "type": "boolean",
            "default": "false",
            "description": "Adds an inset outer border."
          },
          {
            "name": "stickyHeader",
            "type": "boolean",
            "default": "true",
            "description": "Keeps column headers visible while the viewport scrolls."
          },
          {
            "name": "scrollHeight",
            "type": "string | number",
            "default": "undefined",
            "description": "Maximum internal viewport height; numbers become pixels."
          },
          {
            "name": "minWidth",
            "type": "string | number",
            "default": "undefined",
            "description": "Minimum table width before horizontal scrolling; numbers become pixels."
          },
          {
            "name": "loading",
            "type": "boolean",
            "default": "false",
            "description": "Shows the loading state only when no rows exist."
          },
          {
            "name": "emptyText",
            "type": "string",
            "default": "Localized empty text",
            "description": "A non-empty value overrides localized empty-state copy."
          },
          {
            "name": "loadingText",
            "type": "string",
            "default": "Localized loading text",
            "description": "A non-empty value overrides localized loading copy and label."
          },
          {
            "name": "caption",
            "type": "string",
            "default": "''",
            "description": "Visible native table caption."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "Localized table label",
            "description": "Accessible table name and basis for the scroll-area name."
          }
        ],
        "events": [
          {
            "name": "row-click",
            "type": "[row: Row, index: number, event: MouseEvent]",
            "description": "Reports a clicked data row; descendant clicks bubble unless stopped."
          },
          {
            "name": "viewport-scroll",
            "type": "Event",
            "description": "Reports the native internal viewport scroll event."
          }
        ],
        "slots": [
          {
            "name": "caption",
            "type": "—",
            "description": "Custom native table caption."
          },
          {
            "name": "header-[key]",
            "type": "{ column: H0TableColumn<Row> }",
            "description": "Custom header content for a column key."
          },
          {
            "name": "cell-[key]",
            "type": "{ row: Row; column: H0TableColumn<Row>; value: unknown; rowIndex: number }",
            "description": "Custom body cell content for a column key."
          },
          {
            "name": "before-rows",
            "type": "{ columnCount: number }",
            "description": "Valid table rows inserted inside tbody before data rows."
          },
          {
            "name": "after-rows",
            "type": "{ columnCount: number }",
            "description": "Valid table rows inserted inside tbody after data rows."
          },
          {
            "name": "loading",
            "type": "—",
            "description": "Replacement content inside the component-owned loading cell."
          },
          {
            "name": "empty",
            "type": "—",
            "description": "Replacement content inside the component-owned empty cell."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0TableColumn",
            "description": "Generic column definition for Row.",
            "fields": [
              {
                "name": "key",
                "type": "string",
                "description": "Row property and dynamic slot identifier."
              },
              {
                "name": "label",
                "type": "string",
                "description": "Visible fallback header label."
              },
              {
                "name": "width",
                "type": "string | number",
                "description": "Preferred CSS width; numbers become pixels."
              },
              {
                "name": "minWidth",
                "type": "string | number",
                "description": "Minimum CSS width; numbers become pixels."
              },
              {
                "name": "maxWidth",
                "type": "string | number",
                "description": "Maximum CSS width; numbers become pixels."
              },
              {
                "name": "align",
                "type": "H0TableColumnAlign",
                "description": "Body-cell alignment."
              },
              {
                "name": "headerAlign",
                "type": "H0TableColumnAlign",
                "description": "Header alignment falling back to align."
              },
              {
                "name": "ariaSort",
                "type": "H0TableAriaSort",
                "description": "Externally managed accessible sort state."
              },
              {
                "name": "value",
                "type": "(row: Row) => unknown",
                "description": "Derived value rendered by default and passed to the cell slot."
              }
            ]
          },
          {
            "name": "H0TableColumnAlign",
            "fields": [
              {
                "name": "H0TableColumnAlign",
                "type": "'left' | 'center' | 'right'",
                "description": "Supported header and body-cell alignments."
              }
            ]
          },
          {
            "name": "H0TableColumnSizing",
            "fields": [
              {
                "name": "H0TableColumnSizing",
                "type": "'auto' | 'equal'",
                "description": "Intrinsic or fixed equal-column table layout."
              }
            ]
          },
          {
            "name": "H0TableDensity",
            "fields": [
              {
                "name": "H0TableDensity",
                "type": "'compact' | 'default' | 'comfortable'",
                "description": "Supported cell spacing densities; aliases H0Density."
              }
            ]
          },
          {
            "name": "H0TableAriaSort",
            "fields": [
              {
                "name": "H0TableAriaSort",
                "type": "'ascending' | 'descending' | 'none'",
                "description": "Native aria-sort values supported by a column."
              }
            ]
          },
          {
            "name": "H0TableRow",
            "fields": [
              {
                "name": "H0TableRow",
                "type": "Record<string, unknown>",
                "description": "Base constraint for generic row objects."
              }
            ]
          },
          {
            "name": "H0TableRowKey",
            "fields": [
              {
                "name": "H0TableRowKey",
                "type": "string | number",
                "description": "Supported stable row identity."
              }
            ]
          },
          {
            "name": "H0TableGetRowKey",
            "fields": [
              {
                "name": "H0TableGetRowKey<Row>",
                "type": "(row: Row, index: number) => H0TableRowKey",
                "description": "Generic stable-key resolver."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Semantic tabular markup is required.",
        "Sorting, filtering, and paging are handled by application logic."
      ],
      "avoidWhen": [
        "Built-in data manipulation or selection is required; use H0DataTable.",
        "The content is better understood as cards or a key-value list on every viewport."
      ],
      "accessibility": [
        "Provide a specific ariaLabel and optional visible caption.",
        "Use stable row keys and meaningful headers.",
        "Set ariaSort from external state only for the active sorting column.",
        "Do not treat row-click as a keyboard-accessible primary action; use interactive controls inside cells."
      ],
      "styling": [
        "Use density, striped, hoverable, and bordered before local overrides.",
        "Customize values through cell slots and public tokens.",
        "Treat internal table selectors as implementation details."
      ],
      "responsive": [
        "Use column minimum widths and minWidth to enable readable horizontal scrolling.",
        "Avoid compressing dense columns beyond readability."
      ],
      "performance": [
        "Keep columns, row arrays, and getRowKey stable.",
        "Use H0DataTable virtualization for large fixed-height datasets."
      ],
      "examples": [
        {
          "key": "components/table/BasicExample",
          "purpose": "Typed semantic table with a stable row key and custom status cell."
        },
        {
          "key": "components/table/LayoutExample",
          "purpose": "Compact equal columns with horizontal and vertical scrolling plus a sticky header."
        },
        {
          "key": "components/table/StatesExample",
          "purpose": "Localized and customized empty and loading states."
        },
        {
          "key": "components/table/CustomContentExample",
          "purpose": "Derived values, dynamic header and cell slots, summary rows, and separated row and cell actions."
        }
      ],
      "relatedComponents": [
        "H0DataTable",
        "H0Badge",
        "H0Button",
        "H0Link"
      ],
      "manifest": {
        "family": "Table",
        "familyRole": "root",
        "category": "data",
        "docsPath": "/components/table",
        "styleEntry": "components/Table/style.css",
        "localeSection": "table"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0TabList",
      "status": "migrated",
      "summary": "Compound tablist that applies orientation-aware arrow, Home, End, loop, and RTL keyboard navigation.",
      "imports": {
        "components": [
          "H0TabList"
        ],
        "types": [],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "Localized tabs label",
            "description": "Accessible tab-list name."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "H0Tab children in keyboard and visual order."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Compound H0Tabs needs an explicitly authored tab list."
      ],
      "avoidWhen": [
        "H0Tabs items mode generates the tab list automatically."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/tabs/BasicExample",
          "purpose": "Horizontal compound tab list."
        },
        {
          "key": "components/tabs/ModesExample",
          "purpose": "Vertical manual-activation tab list."
        },
        {
          "key": "components/tabs/MountExample",
          "purpose": "Tab list controlling lazy panels."
        }
      ],
      "relatedComponents": [
        "H0Tabs",
        "H0Tab",
        "H0TabPanel"
      ],
      "manifest": {
        "family": "Tabs",
        "familyRole": "member",
        "category": "navigation",
        "docsPath": "/components/tabs",
        "docsAnchor": "h0tablist",
        "styleEntry": "components/Tabs/style.css",
        "localeSection": "tabs"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0TabPanel",
      "status": "migrated",
      "summary": "Focusable compound tabpanel whose visibility and mount lifecycle follow H0Tabs state.",
      "imports": {
        "components": [
          "H0TabPanel"
        ],
        "types": [
          "H0TabValue"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "value",
            "type": "H0TabValue",
            "description": "Identity shared with the associated tab."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Panel content."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "Compound H0Tabs needs explicitly authored panel content or component state."
      ],
      "avoidWhen": [
        "Items mode with one panel slot is sufficient."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Keep item arrays and values stable when their content does not change.",
        "Avoid expensive application work on focus-only navigation."
      ],
      "examples": [
        {
          "key": "components/tabs/BasicExample",
          "purpose": "Compound panel content."
        },
        {
          "key": "components/tabs/ModesExample",
          "purpose": "Panels in vertical tabs."
        },
        {
          "key": "components/tabs/MountExample",
          "purpose": "Lazy mounting with retained input state."
        }
      ],
      "relatedComponents": [
        "H0Tabs",
        "H0TabList",
        "H0Tab"
      ],
      "manifest": {
        "family": "Tabs",
        "familyRole": "member",
        "category": "navigation",
        "docsPath": "/components/tabs",
        "docsAnchor": "h0tabpanel",
        "styleEntry": "components/Tabs/style.css",
        "localeSection": "tabs"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Tabs",
      "status": "migrated",
      "summary": "Controlled or uncontrolled tabs coordinator with data-driven and compound composition, keyboard modes, and panel mount strategies.",
      "imports": {
        "components": [
          "H0Tabs"
        ],
        "types": [
          "H0TabItem",
          "H0TabsActivation",
          "H0TabsMountMode",
          "H0TabsProps",
          "H0TabValue"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "Value",
            "default": "undefined",
            "description": "Controlled active tab value."
          },
          {
            "name": "defaultValue",
            "type": "Value",
            "default": "first enabled item",
            "description": "Initial uncontrolled tab value."
          },
          {
            "name": "items",
            "type": "H0TabItem<Value>[]",
            "default": "[]",
            "description": "Data-driven tabs. Do not combine with compound children."
          },
          {
            "name": "orientation",
            "type": "'horizontal' | 'vertical'",
            "default": "'horizontal'",
            "description": "Tab-list direction and arrow keys."
          },
          {
            "name": "activationMode",
            "type": "'automatic' | 'manual'",
            "default": "'automatic'",
            "description": "Whether focus immediately activates a tab."
          },
          {
            "name": "mountMode",
            "type": "'all' | 'lazy' | 'active'",
            "default": "'all'",
            "description": "Inactive panel mounting policy."
          },
          {
            "name": "loop",
            "type": "boolean",
            "default": "true",
            "description": "Wraps arrow-key focus at list boundaries."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Data-driven tab-list accessible name."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Stable base for tab and panel IDs."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "Value",
            "description": "Requests active-tab update."
          },
          {
            "name": "change",
            "type": "Value",
            "description": "Reports user-initiated activation."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Compound H0TabList, H0Tab, and H0TabPanel children."
          },
          {
            "name": "tab",
            "type": "{ item: H0TabItem<Value>; index: number }",
            "description": "Custom data-driven tab content."
          },
          {
            "name": "panel",
            "type": "{ item: H0TabItem<Value>; index: number }",
            "description": "Data-driven panel content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0TabValue",
            "fields": [
              {
                "name": "H0TabValue",
                "type": "string | number",
                "description": "Supported tab and panel identity."
              }
            ]
          },
          {
            "name": "H0TabsActivation",
            "fields": [
              {
                "name": "H0TabsActivation",
                "type": "'automatic' | 'manual'",
                "description": "Whether focus activates a tab immediately."
              }
            ]
          },
          {
            "name": "H0TabsMountMode",
            "fields": [
              {
                "name": "H0TabsMountMode",
                "type": "'all' | 'lazy' | 'active'",
                "description": "Inactive panel mounting policy."
              }
            ]
          },
          {
            "name": "H0TabItem",
            "fields": [
              {
                "name": "value",
                "type": "Value",
                "description": "Unique tab and panel identity preserving the generic value."
              },
              {
                "name": "label",
                "type": "string",
                "description": "Visible fallback tab label."
              },
              {
                "name": "disabled",
                "type": "boolean | undefined",
                "description": "Disables the tab."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Several peer content panels share one region and only one is active."
      ],
      "avoidWhen": [
        "Choices change a compact mode without semantic panels; use H0Segment.",
        "Destinations navigate to separate pages; use links."
      ],
      "accessibility": [
        "Provide a specific accessible name for navigation landmarks or grouped controls.",
        "Keep visual, DOM, focus, and reading order aligned.",
        "Do not communicate the active destination through color alone."
      ],
      "styling": [
        "Use public variants, sizes, states, slots, and H0N design tokens.",
        "Treat internal active indicators and structural selectors as implementation details."
      ],
      "responsive": [
        "Keep labels concise and test keyboard access in narrow containers.",
        "Prefer overflow or an alternate orientation to unreadable wrapping."
      ],
      "performance": [
        "Use active mounting when inactive panels may reset safely.",
        "Use lazy mounting to retain expensive panels after their first visit.",
        "Do not combine items with compound children."
      ],
      "examples": [
        {
          "key": "components/tabs/BasicExample",
          "purpose": "Compound tabs with controlled active value."
        },
        {
          "key": "components/tabs/DataExample",
          "purpose": "Generic data-driven numeric tabs."
        },
        {
          "key": "components/tabs/ModesExample",
          "purpose": "Vertical manual activation without looping."
        },
        {
          "key": "components/tabs/MountExample",
          "purpose": "Lazy panel mounting with retained state."
        }
      ],
      "relatedComponents": [
        "H0TabList",
        "H0Tab",
        "H0TabPanel",
        "H0Segment"
      ],
      "manifest": {
        "family": "Tabs",
        "familyRole": "root",
        "category": "navigation",
        "docsPath": "/components/tabs",
        "styleEntry": "components/Tabs/style.css",
        "localeSection": "tabs"
      }
    },
    {
      "surface": {
        "prop": "variant",
        "default": "surface",
        "backgrounds": {
          "surface": "--h0n-ui-color-surface",
          "secondary": "--h0n-ui-color-secondary"
        }
      },
      "schemaVersion": 1,
      "component": "H0Textarea",
      "status": "migrated",
      "summary": "Multiline text control with automatic height, optional manual resizing, character count, and shared H0N form feedback.",
      "imports": {
        "components": [
          "H0Textarea"
        ],
        "types": [
          "H0TextareaEmits",
          "H0TextareaInputMode",
          "H0TextareaProps",
          "H0TextareaSize",
          "H0TextareaVariant"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "string",
            "default": "undefined",
            "description": "Controlled text."
          },
          {
            "name": "defaultValue",
            "type": "string",
            "default": "''",
            "description": "Initial uncontrolled text."
          },
          {
            "name": "size",
            "type": "H0TextareaSize",
            "default": "'md'",
            "description": "Control size."
          },
          {
            "name": "variant",
            "type": "H0TextareaVariant",
            "default": "'surface'",
            "description": "Control background treatment."
          },
          {
            "name": "placeholder",
            "type": "string",
            "default": "''",
            "description": "Empty control copy."
          },
          {
            "name": "readonly",
            "type": "boolean",
            "default": "false",
            "description": "Prevents editing while preserving focus."
          },
          {
            "name": "autocomplete",
            "type": "string",
            "default": "''",
            "description": "Native autocomplete hint."
          },
          {
            "name": "inputmode",
            "type": "H0TextareaInputMode",
            "default": "undefined",
            "description": "Virtual keyboard hint."
          },
          {
            "name": "maxlength",
            "type": "number",
            "default": "undefined",
            "description": "Native character limit and counter source."
          },
          {
            "name": "minRows",
            "type": "number",
            "default": "2",
            "description": "Minimum visible rows."
          },
          {
            "name": "maxHeight",
            "type": "number | string",
            "default": "220",
            "description": "Automatic resize ceiling."
          },
          {
            "name": "resize",
            "type": "boolean",
            "default": "false",
            "description": "Allows manual vertical resizing."
          },
          {
            "name": "autoResize",
            "type": "boolean",
            "default": "true",
            "description": "Fits height to content."
          },
          {
            "name": "spellcheck",
            "type": "boolean",
            "default": "true",
            "description": "Enables browser spellcheck."
          },
          {
            "name": "id",
            "type": "string",
            "default": "''",
            "description": "Explicit control identifier."
          },
          {
            "name": "name",
            "type": "string",
            "default": "''",
            "description": "Native form field name."
          },
          {
            "name": "label",
            "type": "string",
            "default": "''",
            "description": "Visible field label."
          },
          {
            "name": "required",
            "type": "boolean",
            "default": "false",
            "description": "Marks the field as required."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables field interaction."
          },
          {
            "name": "error",
            "type": "string",
            "default": "''",
            "description": "Visible validation error."
          },
          {
            "name": "hint",
            "type": "string",
            "default": "''",
            "description": "Supporting field description."
          },
          {
            "name": "rootAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Attributes for the component root; explicit values override ordinary fallthrough attributes."
          },
          {
            "name": "controlAttrs",
            "type": "Record<string, unknown>",
            "default": "undefined",
            "description": "Additional native and ARIA attributes for the actual form control."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "string",
            "description": "Requests text update."
          },
          {
            "name": "input",
            "type": "Event",
            "description": "Reports native input."
          },
          {
            "name": "change",
            "type": "string",
            "description": "Reports every text update."
          },
          {
            "name": "focus",
            "type": "FocusEvent",
            "description": "Reports control focus."
          },
          {
            "name": "blur",
            "type": "FocusEvent",
            "description": "Reports control blur."
          }
        ],
        "slots": [
          {
            "name": "label",
            "type": "—",
            "description": "Custom label."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0TextareaInputMode",
            "fields": [
              {
                "name": "H0TextareaInputMode",
                "type": "'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'",
                "description": "Supported native virtual-keyboard hints."
              }
            ]
          },
          {
            "name": "H0TextareaSize",
            "fields": [
              {
                "name": "H0TextareaSize",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported control sizes."
              }
            ]
          },
          {
            "name": "H0TextareaVariant",
            "fields": [
              {
                "name": "H0TextareaVariant",
                "type": "'secondary' | 'surface'",
                "description": "Supported control surface treatments."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A form accepts free-form multiline text."
      ],
      "avoidWhen": [
        "A single short value fits H0Input."
      ],
      "accessibility": [
        "Provide a visible label and actionable error text.",
        "Preserve native keyboard and focus behavior.",
        "Do not communicate validation through color alone."
      ],
      "styling": [
        "Use public state props and H0N tokens.",
        "Treat native control and internal layout selectors as implementation details."
      ],
      "responsive": [
        "Let the control fill a fluid container and allow labels and messages to wrap."
      ],
      "performance": [
        "Keep option arrays and callback props stable when their values do not change."
      ],
      "examples": [
        {
          "key": "components/textarea/BasicExample",
          "purpose": "Auto-resizing message with character count."
        },
        {
          "key": "components/textarea/VariantsExample",
          "purpose": "Surface and secondary control treatments."
        },
        {
          "key": "components/textarea/SizesExample",
          "purpose": "Small, medium, and large controls."
        },
        {
          "key": "components/textarea/ResizeExample",
          "purpose": "Automatic and manual resizing."
        },
        {
          "key": "components/textarea/StatesExample",
          "purpose": "Read-only, disabled, invalid, and spellcheck states."
        }
      ],
      "relatedComponents": [
        "H0Input",
        "H0Form"
      ],
      "manifest": {
        "family": "Textarea",
        "familyRole": "root",
        "category": "forms",
        "docsPath": "/components/textarea",
        "styleEntry": "components/Textarea/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0TextShimmer",
      "status": "migrated",
      "summary": "Readable status text with a subtle moving highlight in the High animation profile.",
      "imports": {
        "components": [
          "H0TextShimmer"
        ],
        "types": [
          "H0TextShimmerProps",
          "H0TextShimmerElement"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "as",
            "type": "H0TextShimmerElement",
            "default": "'span'",
            "description": "Root text element: span, p, or div."
          },
          {
            "name": "active",
            "type": "boolean",
            "default": "true",
            "description": "Allows shimmer when the library animation policy permits it. False renders static text."
          },
          {
            "name": "duration",
            "type": "number",
            "default": "2000",
            "description": "Sweep duration in milliseconds. Non-positive or non-finite values fall back to 2000."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Text content, optionally with simple inline markup inheriting the text color. Do not place controls or independently colored elements inside."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0TextShimmerElement",
            "fields": [
              {
                "name": "H0TextShimmerElement",
                "type": "'span' | 'p' | 'div'",
                "description": "Supported root elements."
              }
            ]
          },
          {
            "name": "H0TextShimmerProps",
            "fields": [
              {
                "name": "as",
                "type": "H0TextShimmerElement",
                "description": "Root element."
              },
              {
                "name": "active",
                "type": "boolean",
                "description": "Effect activation."
              },
              {
                "name": "duration",
                "type": "number",
                "description": "Positive sweep duration in milliseconds."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A short label describes ongoing loading, thinking, processing, or streaming.",
        "Text should remain readable when motion is disabled."
      ],
      "avoidWhen": [
        "Progress needs a numerical value or completion estimate.",
        "Content contains interactive controls.",
        "Essential information would be communicated by animation alone."
      ],
      "accessibility": [
        "Real slot text remains present once in the accessibility tree.",
        "No live region is created automatically. Add role status or aria-live when actual text updates need announcements.",
        "Reduced motion, forced colors, and unsupported text clipping retain readable static text."
      ],
      "styling": [
        "Typography inherits from the surrounding context; native attributes/classes/styles reach the root.",
        "Existing secondary/text tokens define the base and moving highlight. Private effect selectors and variables are not public API."
      ],
      "responsive": [
        "Text wraps within the available width; shimmer does not change its dimensions.",
        "Direction is inherited; use dir rtl for RTL text."
      ],
      "performance": [
        "CSS-only animation; no JavaScript timers, observers or duplicate text.",
        "Decorative shimmer runs only in effective High, like Skeleton shimmer. Off, Low and Medium are static."
      ],
      "examples": [
        {
          "key": "components/text-shimmer/BasicExample",
          "purpose": "Status labels with live animation-profile controls."
        },
        {
          "key": "components/text-shimmer/CustomExample",
          "purpose": "Duration, active state, inherited typography and multiline RTL text."
        }
      ],
      "relatedComponents": [
        "H0Spinner",
        "H0Skeleton",
        "H0Typography"
      ],
      "manifest": {
        "family": "TextShimmer",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/textshimmer",
        "styleEntry": "components/TextShimmer/style.css"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Toast",
      "status": "migrated",
      "summary": "Visual transient notification with semantic tone, icon, content slots, localized close control, and polite status announcement.",
      "imports": {
        "components": [
          "H0Toast",
          "H0Toasts",
          "createH0ToastService",
          "provideH0Toast",
          "useH0Toast"
        ],
        "types": [
          "H0IconSource",
          "H0ToastCloseMode",
          "H0ToastConfig",
          "H0ToastEmits",
          "H0ToastId",
          "H0ToastInput",
          "H0ToastItem",
          "H0ToastPlacement",
          "H0ToastProps",
          "H0ToastService",
          "H0ToastState",
          "H0ToastTone"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "tone",
            "type": "H0ToastTone",
            "default": "'default'",
            "description": "Semantic intent and default icon."
          },
          {
            "name": "title",
            "type": "string",
            "default": "''",
            "description": "Primary notification text."
          },
          {
            "name": "description",
            "type": "string",
            "default": "''",
            "description": "Preferred secondary text."
          },
          {
            "name": "text",
            "type": "string",
            "default": "''",
            "description": "Compatibility alias used when description is absent."
          },
          {
            "name": "icon",
            "type": "H0IconSource",
            "default": "undefined",
            "description": "Legacy node or @h0nio/icons body definition overriding the tone icon."
          },
          {
            "name": "closable",
            "type": "boolean",
            "default": "true",
            "description": "Shows the localized close button."
          }
        ],
        "events": [
          {
            "name": "close",
            "type": "—",
            "description": "Requests dismissal of the visual toast."
          }
        ],
        "slots": [
          {
            "name": "title",
            "type": "—",
            "description": "Custom primary content."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Custom description content."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ToastTone",
            "fields": [
              {
                "name": "H0ToastTone",
                "type": "'default' | 'info' | 'success' | 'warning' | 'danger'",
                "description": "Supported semantic notification tones."
              }
            ]
          },
          {
            "name": "H0ToastInput",
            "fields": [
              {
                "name": "title",
                "type": "string",
                "default": "undefined",
                "description": "Optional primary text."
              },
              {
                "name": "description",
                "type": "string",
                "default": "undefined",
                "description": "Optional secondary text."
              },
              {
                "name": "icon",
                "type": "H0IconSource",
                "default": "undefined",
                "description": "Optional legacy node or @h0nio/icons body definition."
              },
              {
                "name": "duration",
                "type": "number",
                "default": "Required",
                "description": "Lifetime in milliseconds; zero is persistent."
              },
              {
                "name": "tone",
                "type": "H0ToastTone",
                "default": "'default'",
                "description": "Semantic intent."
              },
              {
                "name": "placement",
                "type": "H0ToastPlacement",
                "default": "Current service placement",
                "description": "Optional stack placement update."
              },
              {
                "name": "closeMode",
                "type": "H0ToastCloseMode",
                "default": "'button'",
                "description": "Button or surface dismissal behavior."
              }
            ]
          },
          {
            "name": "H0ToastPlacement",
            "fields": [
              {
                "name": "H0ToastPlacement",
                "type": "'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end'",
                "description": "Supported logical stack placements."
              }
            ]
          },
          {
            "name": "H0ToastCloseMode",
            "fields": [
              {
                "name": "button",
                "type": "'button'",
                "description": "Shows the close button; the toast surface itself does not dismiss."
              },
              {
                "name": "toast",
                "type": "'toast'",
                "description": "Shows the close button and also dismisses from a surface click."
              },
              {
                "name": "container",
                "type": "'container'",
                "description": "Hides the close button and dismisses from a surface click."
              }
            ]
          },
          {
            "name": "H0ToastConfig",
            "fields": [
              {
                "name": "placement",
                "type": "H0ToastPlacement",
                "default": "'bottom-end'",
                "description": "Initial or configured stack placement."
              }
            ]
          },
          {
            "name": "H0ToastId",
            "fields": [
              {
                "name": "H0ToastId",
                "type": "string",
                "description": "Opaque identifier returned by show and tone helpers."
              }
            ]
          },
          {
            "name": "H0ToastItem",
            "description": "Normalized service-owned toast entry.",
            "fields": [
              {
                "name": "id",
                "type": "H0ToastId",
                "description": "Generated stable identifier."
              },
              {
                "name": "createdAt",
                "type": "number",
                "description": "Creation timestamp in milliseconds."
              },
              {
                "name": "duration",
                "type": "number",
                "description": "Configured lifetime in milliseconds."
              },
              {
                "name": "tone",
                "type": "H0ToastTone",
                "description": "Resolved semantic tone."
              },
              {
                "name": "closeMode",
                "type": "H0ToastCloseMode",
                "description": "Resolved dismissal behavior."
              },
              {
                "name": "title / description / icon / placement",
                "type": "H0ToastInput fields",
                "description": "Optional input values retained by the service."
              }
            ]
          },
          {
            "name": "H0ToastState",
            "fields": [
              {
                "name": "toasts",
                "type": "H0ToastItem[]",
                "description": "Reactive service-owned notification list."
              },
              {
                "name": "placement",
                "type": "H0ToastPlacement",
                "description": "Current stack placement."
              }
            ]
          },
          {
            "name": "H0ToastService",
            "fields": [
              {
                "name": "show",
                "type": "(input: H0ToastInput) => H0ToastId",
                "description": "Creates a toast."
              },
              {
                "name": "default / info / success / warning / danger",
                "type": "(input: Omit<H0ToastInput, 'tone'>) => H0ToastId",
                "description": "Creates a toast with a predefined tone."
              },
              {
                "name": "update",
                "type": "(id, input: Partial<H0ToastInput>) => void",
                "description": "Updates content, behavior, placement, or duration."
              },
              {
                "name": "configure",
                "type": "(config: H0ToastConfig) => void",
                "description": "Changes service placement."
              },
              {
                "name": "dismiss",
                "type": "(id: H0ToastId) => void",
                "description": "Dismisses one toast."
              },
              {
                "name": "dismissAll",
                "type": "() => void",
                "description": "Dismisses every toast."
              },
              {
                "name": "dispose",
                "type": "() => void",
                "description": "Clears timers and toasts."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Transient global feedback should not interrupt the task.",
        "An operation changes state and needs brief confirmation."
      ],
      "avoidWhen": [
        "Feedback must remain next to its source; use H0Alert.",
        "A user decision is required; use a dialog.",
        "Critical failure details must remain available."
      ],
      "accessibility": [
        "Keep messages concise.",
        "Use persistent duration cautiously and preserve dismissal.",
        "Pair tone and icon with explicit text.",
        "Update an existing toast instead of rapidly announcing progress as separate items."
      ],
      "styling": [
        "Use tone and public tokens.",
        "Treat toast layout selectors as implementation details."
      ],
      "responsive": [
        "Toast width remains within the viewport and content wraps."
      ],
      "performance": [
        "Use one H0Toasts per service.",
        "Dismiss obsolete notifications and dispose manual services."
      ],
      "examples": [
        {
          "key": "components/toast/StaticExample",
          "purpose": "All standalone visual tones."
        },
        {
          "key": "components/toast/ContentExample",
          "purpose": "Custom icon, title slot, default slot, and closable state."
        },
        {
          "key": "components/toast/ServiceExample",
          "purpose": "Manual service, update flow, and teleported stack."
        },
        {
          "key": "components/toast/CloseModesExample",
          "purpose": "Button, toast, and container dismissal modes."
        },
        {
          "key": "components/toast/PlacementExample",
          "purpose": "All service-level stack placements."
        }
      ],
      "relatedComponents": [
        "H0Toasts",
        "H0Alert",
        "H0Button"
      ],
      "manifest": {
        "family": "Toast",
        "familyRole": "root",
        "category": "feedback",
        "docsPath": "/components/toast",
        "styleEntry": "components/Toast/style.css",
        "localeSection": "toast"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Toasts",
      "status": "migrated",
      "summary": "Teleported toast stack that renders recent service items with placement, stacking, transitions, and dismissal delegation.",
      "imports": {
        "components": [
          "H0Toasts"
        ],
        "types": [
          "H0ToastService",
          "H0ToastsProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "maxVisible",
            "type": "number",
            "default": "4",
            "description": "Maximum recent service items rendered in the stack. Finite values are floored and clamped to zero; non-finite values use 4. Zero hides the stack without dismissing service items."
          },
          {
            "name": "service",
            "type": "H0ToastService",
            "default": "Injected H0N toast service",
            "description": "Explicit service override for isolated stacks or tests."
          }
        ],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "A toast service needs one application-level visual stack.",
        "An isolated subtree supplies an explicit toast service."
      ],
      "avoidWhen": [
        "Rendering an individual application-owned preview; use H0Toast.",
        "Several stacks would consume the same service."
      ],
      "accessibility": [
        "Render one polite live region per service.",
        "Keep maxVisible bounded.",
        "Ensure persistent items remain dismissible."
      ],
      "styling": [
        "Configure placement through the service.",
        "Treat stack transforms and transition classes as implementation details."
      ],
      "responsive": [
        "Centered placements expand between viewport edges on small screens.",
        "The stack reserves 16px mobile edge spacing."
      ],
      "performance": [
        "Render one stack per service.",
        "Keep maxVisible bounded and dispose manual services."
      ],
      "examples": [
        {
          "key": "components/toast/ServiceExample",
          "purpose": "Explicit service passed to a teleported stack."
        },
        {
          "key": "components/toast/CloseModesExample",
          "purpose": "Stack dismissal delegation for each close mode."
        }
      ],
      "relatedComponents": [
        "H0Toast"
      ],
      "manifest": {
        "family": "Toast",
        "familyRole": "member",
        "category": "feedback",
        "docsPath": "/components/toast",
        "docsAnchor": "h0toasts",
        "styleEntry": "components/Toast/style.css",
        "localeSection": "toast"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Toolbar",
      "status": "migrated",
      "summary": "Keyboard-navigable command surface for a compact set of related actions.",
      "imports": {
        "components": [
          "H0Toolbar"
        ],
        "types": [
          "H0Size",
          "H0ToolbarEmits",
          "H0ToolbarItemDefinition",
          "H0ToolbarOrientation",
          "H0ToolbarProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "items",
            "type": "readonly H0ToolbarItemDefinition[]",
            "default": "[]",
            "description": "Provides data-driven toolbar buttons. Do not combine with compound children."
          },
          {
            "name": "orientation",
            "type": "H0ToolbarOrientation",
            "default": "'horizontal'",
            "description": "Controls layout, aria-orientation, and the arrow keys used for navigation."
          },
          {
            "name": "size",
            "type": "H0Size",
            "default": "'md'",
            "description": "Controls command height, padding, and typography and is inherited by compound items."
          },
          {
            "name": "loop",
            "type": "boolean",
            "default": "true",
            "description": "Wraps arrow-key focus from the last enabled item to the first and back."
          },
          {
            "name": "fullWidth",
            "type": "boolean",
            "default": "false",
            "description": "Fills the available width and distributes data items or compound children."
          },
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Accessible toolbar name. Falls back to the localized toolbar label."
          }
        ],
        "events": [
          {
            "name": "select",
            "type": "H0ToolbarItemDefinition",
            "description": "Emitted with the original item after a data-driven button is activated."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Compound H0ToolbarGroup, H0ToolbarItem, and H0ToolbarSeparator children. Rendered only when items is empty."
          },
          {
            "name": "item",
            "type": "{ item: H0ToolbarItemDefinition, index: number }",
            "description": "Custom content for every data-driven toolbar button."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0ToolbarItemDefinition",
            "description": "Configuration for one data-driven toolbar action.",
            "fields": [
              {
                "name": "value",
                "type": "string | number",
                "default": "Required",
                "description": "Stable, unique item identity, Vue key, and application value."
              },
              {
                "name": "label",
                "type": "string",
                "default": "Required",
                "description": "Visible fallback content for the item button."
              },
              {
                "name": "disabled",
                "type": "boolean",
                "default": "false",
                "description": "Disables activation and removes the item from roving focus."
              },
              {
                "name": "pressed",
                "type": "boolean",
                "default": "undefined",
                "description": "Adds aria-pressed for an independent toggle action."
              }
            ]
          },
          {
            "name": "H0ToolbarOrientation",
            "description": "Supported toolbar layout and keyboard-navigation axes.",
            "fields": [
              {
                "name": "H0ToolbarOrientation",
                "type": "'horizontal' | 'vertical'",
                "description": "Horizontal uses Left and Right Arrow; vertical uses Up and Down Arrow."
              }
            ]
          },
          {
            "name": "H0Size",
            "description": "Shared H0N component size scale.",
            "fields": [
              {
                "name": "H0Size",
                "type": "'sm' | 'md' | 'lg'",
                "description": "Supported compact, default, and large control sizes."
              }
            ]
          },
          {
            "name": "H0ToolbarEmits",
            "description": "Named events emitted in data-driven mode.",
            "fields": [
              {
                "name": "select",
                "type": "[item: H0ToolbarItemDefinition]",
                "description": "Payload emitted when an enabled data-driven item is activated."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A compact set of commands belongs to one task or editor surface.",
        "Users should enter the command set with one Tab stop and move within it using arrow keys.",
        "Actions need data-driven or explicitly grouped compound composition."
      ],
      "avoidWhen": [
        "Actions are unrelated or distributed across a layout.",
        "The interface represents one selected value; use H0Segment or radio controls.",
        "A single action can use H0Button.",
        "Commands need menu-style disclosure rather than remaining directly available."
      ],
      "accessibility": [
        "Provide a specific ariaLabel for the command set.",
        "Use pressed only for independent toggle actions.",
        "Preserve DOM order because it defines visual and keyboard order.",
        "Horizontal toolbars use Left and Right Arrow; vertical toolbars use Up and Down Arrow; both support Home and End."
      ],
      "styling": [
        "Prefer public H0N tokens and surrounding layout styles.",
        "Treat toolbar classes and data-h-toolbar-item as implementation details."
      ],
      "responsive": [
        "Toolbars intentionally do not wrap commands.",
        "Use shorter labels, vertical orientation, or an explicit scroll container on narrow screens.",
        "H0ToolbarSeparator automatically renders a perpendicular boundary for the current toolbar orientation."
      ],
      "performance": [
        "Keep item arrays and item objects stable when values do not change.",
        "Keyboard queries are scoped to enabled toolbar items inside the root."
      ],
      "examples": [
        {
          "key": "components/toolbar/BasicExample",
          "purpose": "Data-driven toggle commands and select handling."
        },
        {
          "key": "components/toolbar/StatesExample",
          "purpose": "Disabled commands and roving-focus behavior."
        },
        {
          "key": "components/toolbar/ItemSlotExample",
          "purpose": "Custom data-driven command content and shortcut hints."
        },
        {
          "key": "components/toolbar/OrientationExample",
          "purpose": "Horizontal looping and vertical non-looping keyboard navigation."
        },
        {
          "key": "components/toolbar/SizesExample",
          "purpose": "Small, medium, and large toolbar sizing."
        },
        {
          "key": "components/toolbar/FullWidthExample",
          "purpose": "Equal-width data items and compound command groups in fluid toolbars."
        },
        {
          "key": "components/toolbar/CompoundExample",
          "purpose": "Explicit groups, items, separators, and compound item events."
        }
      ],
      "relatedComponents": [
        "H0Button",
        "H0ButtonGroup",
        "H0Segment"
      ],
      "manifest": {
        "family": "Toolbar",
        "familyRole": "root",
        "category": "actions",
        "docsPath": "/components/toolbar",
        "styleEntry": "components/Toolbar/style.css",
        "localeSection": "toolbar"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ToolbarGroup",
      "status": "migrated",
      "summary": "Accessible subgroup for related compound toolbar commands.",
      "imports": {
        "components": [
          "H0ToolbarGroup"
        ],
        "types": [
          "H0ToolbarGroupProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "ariaLabel",
            "type": "string",
            "default": "''",
            "description": "Optional accessible name for this related subset of toolbar commands."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "H0ToolbarItem controls belonging to the subgroup."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "A compound toolbar contains distinct subsets of related commands.",
        "A subset benefits from its own accessible name."
      ],
      "avoidWhen": [
        "The toolbar has one undivided set of actions.",
        "The group would be rendered outside H0Toolbar."
      ],
      "accessibility": [
        "Provide ariaLabel when the subgroup relationship is not obvious from surrounding context.",
        "Keep grouped commands adjacent in DOM and visual order."
      ],
      "styling": [
        "Use H0ToolbarSeparator between major groups when a visual boundary is needed.",
        "Treat .h-toolbar-group as an implementation detail."
      ],
      "responsive": [
        "Groups inherit orientation and full-width behavior from H0Toolbar.",
        "Keep groups compact and preserve their command order on narrow screens."
      ],
      "performance": [
        "Avoid unnecessary wrapper groups that do not convey a meaningful relationship."
      ],
      "examples": [
        {
          "key": "components/toolbar/CompoundExample",
          "purpose": "Named history and clipboard command groups inside one toolbar."
        }
      ],
      "relatedComponents": [
        "H0Toolbar",
        "H0ToolbarItem",
        "H0ToolbarSeparator"
      ],
      "manifest": {
        "family": "Toolbar",
        "familyRole": "member",
        "category": "actions",
        "docsPath": "/components/toolbar",
        "docsAnchor": "h0toolbargroup",
        "styleEntry": "components/Toolbar/style.css",
        "localeSection": "toolbar"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ToolbarItem",
      "status": "migrated",
      "summary": "Compound toolbar command participating in the parent toolbar roving-focus sequence.",
      "imports": {
        "components": [
          "H0ToolbarItem"
        ],
        "types": [
          "H0ToolbarItemProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Disables activation and removes the command from roving focus."
          },
          {
            "name": "pressed",
            "type": "boolean",
            "default": "undefined",
            "description": "Adds aria-pressed for an independent toggle command."
          },
          {
            "name": "value",
            "type": "string | number",
            "default": "''",
            "description": "Value emitted when the item is activated."
          }
        ],
        "events": [
          {
            "name": "select",
            "type": "string | number",
            "description": "Emitted with value when the compound command is activated."
          }
        ],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Visible command label or custom content."
          }
        ],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "A compound toolbar command needs its own markup, state, or event handler.",
        "Commands are organized with H0ToolbarGroup or H0ToolbarSeparator."
      ],
      "avoidWhen": [
        "Uniform commands can be expressed more simply with the H0Toolbar items prop.",
        "The control is rendered outside H0Toolbar.",
        "The interaction represents one selected value rather than a command."
      ],
      "accessibility": [
        "Keep visible content concise and understandable.",
        "Use pressed only for toggle commands.",
        "Let the parent toolbar manage tabindex and arrow-key focus."
      ],
      "styling": [
        "Use the parent toolbar appearance and public tokens.",
        "Treat data-h-toolbar-item as an implementation detail."
      ],
      "responsive": [
        "Items inherit size, orientation, and full-width behavior from H0Toolbar.",
        "Keep labels short enough for the available toolbar width."
      ],
      "performance": [
        "Use stable values and avoid recreating complex slot content unnecessarily."
      ],
      "examples": [
        {
          "key": "components/toolbar/CompoundExample",
          "purpose": "Compound commands with local select handlers."
        }
      ],
      "relatedComponents": [
        "H0Toolbar",
        "H0ToolbarGroup",
        "H0ToolbarSeparator"
      ],
      "manifest": {
        "family": "Toolbar",
        "familyRole": "member",
        "category": "actions",
        "docsPath": "/components/toolbar",
        "docsAnchor": "h0toolbaritem",
        "styleEntry": "components/Toolbar/style.css",
        "localeSection": "toolbar"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0ToolbarSeparator",
      "status": "migrated",
      "summary": "Orientation-aware visual and semantic separator between compound toolbar command groups.",
      "imports": {
        "components": [
          "H0ToolbarSeparator"
        ],
        "types": [],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [],
        "events": [],
        "slots": [],
        "exposed": [],
        "types": []
      },
      "useWhen": [
        "A compound toolbar needs a boundary between meaningful command groups."
      ],
      "avoidWhen": [
        "Commands already form one coherent group.",
        "Spacing alone provides sufficient grouping."
      ],
      "accessibility": [
        "The component exposes role=\"separator\" and derives aria-orientation from the parent toolbar.",
        "Use it only where the boundary communicates a real grouping change."
      ],
      "styling": [
        "Use the provided separator rather than recreating its internal border selector."
      ],
      "responsive": [
        "The separator switches between vertical and horizontal boundaries with the parent toolbar orientation."
      ],
      "performance": [
        "Separators are static; include only those required by the command structure."
      ],
      "examples": [
        {
          "key": "components/toolbar/CompoundExample",
          "purpose": "Semantic boundary between history and clipboard groups."
        }
      ],
      "relatedComponents": [
        "H0Toolbar",
        "H0ToolbarGroup",
        "H0ToolbarItem"
      ],
      "manifest": {
        "family": "Toolbar",
        "familyRole": "member",
        "category": "actions",
        "docsPath": "/components/toolbar",
        "docsAnchor": "h0toolbarseparator",
        "styleEntry": "components/Toolbar/style.css",
        "localeSection": "toolbar"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Tooltip",
      "status": "migrated",
      "summary": "Concise non-interactive description shown on hover or keyboard focus.",
      "imports": {
        "components": [
          "H0Tooltip"
        ],
        "types": [
          "H0FloatingPlacement",
          "H0TooltipProps"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "modelValue",
            "type": "boolean",
            "default": "undefined",
            "description": "Controlled open state."
          },
          {
            "name": "defaultValue",
            "type": "boolean",
            "default": "false",
            "description": "Initial uncontrolled open state."
          },
          {
            "name": "content",
            "type": "string",
            "default": "''",
            "description": "Plain tooltip text before locale fallback."
          },
          {
            "name": "placement",
            "type": "H0FloatingPlacement",
            "default": "'top'",
            "description": "Preferred position relative to the trigger."
          },
          {
            "name": "openDelay",
            "type": "number",
            "default": "500",
            "description": "Delay before opening in milliseconds."
          },
          {
            "name": "closeDelay",
            "type": "number",
            "default": "100",
            "description": "Delay before closing in milliseconds."
          },
          {
            "name": "disabled",
            "type": "boolean",
            "default": "false",
            "description": "Prevents the tooltip from opening."
          },
          {
            "name": "teleportTo",
            "type": "string | HTMLElement",
            "default": "'body'",
            "description": "Teleport destination."
          },
          {
            "name": "teleportDisabled",
            "type": "boolean",
            "default": "false",
            "description": "Renders the tooltip in place."
          },
          {
            "name": "id",
            "type": "string",
            "default": "Generated with useId()",
            "description": "Stable tooltip ID used by aria-describedby."
          }
        ],
        "events": [
          {
            "name": "update:modelValue",
            "type": "boolean",
            "description": "Requests controlled state changes."
          },
          {
            "name": "open",
            "type": "—",
            "description": "Reports transition to open after the delay."
          },
          {
            "name": "close",
            "type": "—",
            "description": "Reports transition to closed after the delay."
          }
        ],
        "slots": [
          {
            "name": "trigger",
            "type": "{ triggerAttrs: Record<string, unknown>; open: boolean }",
            "description": "Preferred trigger slot with accessibility and interaction attributes."
          },
          {
            "name": "default",
            "type": "—",
            "description": "Fallback trigger content when the named trigger slot is absent."
          },
          {
            "name": "content",
            "type": "—",
            "description": "Tooltip content replacing the content prop."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0FloatingPlacement",
            "fields": [
              {
                "name": "H0FloatingPlacement",
                "type": "'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'",
                "description": "Preferred side and alignment for floating content."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "A control benefits from a short supplementary description.",
        "An icon needs concise hover and focus help in addition to its accessible name."
      ],
      "avoidWhen": [
        "Information is essential and should remain visible.",
        "Content contains interactive controls.",
        "A control lacks an accessible name."
      ],
      "accessibility": [
        "Bind triggerAttrs to the focusable trigger.",
        "Keep content non-interactive.",
        "Do not use tooltip text as the only visible label."
      ],
      "styling": [
        "Use public text, surface, radius, and typography tokens.",
        "Treat tooltip selectors as implementation details."
      ],
      "responsive": [
        "Keep essential guidance visible on touch-only interfaces."
      ],
      "performance": [
        "Timers are cleared on unmount and content mounts only while open."
      ],
      "examples": [
        {
          "key": "components/tooltip/BasicExample",
          "purpose": "Hover and focus tooltip with required trigger attributes."
        },
        {
          "key": "components/tooltip/PlacementsExample",
          "purpose": "Preferred tooltip placement on every side of the trigger."
        },
        {
          "key": "components/tooltip/StatesExample",
          "purpose": "Custom content, open-state feedback, keyboard dismissal, and disabled state."
        }
      ],
      "relatedComponents": [
        "H0Button"
      ],
      "manifest": {
        "family": "Tooltip",
        "familyRole": "root",
        "category": "overlays",
        "docsPath": "/components/tooltip",
        "styleEntry": "components/Tooltip/style.css",
        "localeSection": "tooltip"
      }
    },
    {
      "schemaVersion": 1,
      "component": "H0Typography",
      "status": "migrated",
      "summary": "Semantic text primitive with H0N type variants, alignment, color, weight, line-height, letter-spacing, text-transform overrides, and truncation.",
      "imports": {
        "components": [
          "H0Typography"
        ],
        "types": [
          "H0TypographyAlign",
          "H0TypographyColor",
          "H0TypographyElement",
          "H0TypographyLetterSpacing",
          "H0TypographyLineHeight",
          "H0TypographyProps",
          "H0TypographyTextTransform",
          "H0TypographyVariant",
          "H0TypographyWeight"
        ],
        "styles": [
          "@h0nio/ui/style.css"
        ]
      },
      "api": {
        "props": [
          {
            "name": "variant",
            "type": "H0TypographyVariant",
            "default": "'body'",
            "description": "Visual type scale and default semantic element."
          },
          {
            "name": "as",
            "type": "H0TypographyElement",
            "default": "Element derived from variant",
            "description": "Overrides rendered HTML without changing appearance."
          },
          {
            "name": "align",
            "type": "H0TypographyAlign",
            "default": "'left'",
            "description": "Text alignment."
          },
          {
            "name": "color",
            "type": "H0TypographyColor",
            "default": "'default'",
            "description": "Semantic text color."
          },
          {
            "name": "truncate",
            "type": "boolean",
            "default": "false",
            "description": "Applies single-line ellipsis truncation."
          },
          {
            "name": "text",
            "type": "string | number",
            "default": "undefined",
            "description": "Replaces the default slot whenever it is defined, including as an empty string or zero."
          },
          {
            "name": "weight",
            "type": "H0TypographyWeight",
            "default": "Variant weight",
            "description": "Overrides the visual font weight."
          },
          {
            "name": "lineHeight",
            "type": "H0TypographyLineHeight",
            "default": "Variant line height",
            "description": "Overrides line height with a unitless number or CSS string."
          },
          {
            "name": "letterSpacing",
            "type": "H0TypographyLetterSpacing",
            "default": "Variant letter spacing",
            "description": "Overrides letter spacing; numbers are measured in pixels and strings accept CSS values."
          },
          {
            "name": "textTransform",
            "type": "H0TypographyTextTransform",
            "default": "Inherited",
            "description": "Controls capitalization without changing the source text."
          }
        ],
        "events": [],
        "slots": [
          {
            "name": "default",
            "type": "—",
            "description": "Text or inline content used when text is undefined."
          }
        ],
        "exposed": [],
        "types": [
          {
            "name": "H0TypographyVariant",
            "fields": [
              {
                "name": "H0TypographyVariant",
                "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body' | 'body-sm' | 'body-xs' | 'code'",
                "description": "Supported visual variants."
              }
            ]
          },
          {
            "name": "H0TypographyElement",
            "fields": [
              {
                "name": "H0TypographyElement",
                "type": "'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'label' | 'small' | 'strong' | 'em' | 'code'",
                "description": "Supported semantic elements."
              }
            ]
          },
          {
            "name": "H0TypographyWeight",
            "fields": [
              {
                "name": "H0TypographyWeight",
                "type": "400 | 500 | 600 | 700",
                "description": "Supported numeric font weights."
              }
            ]
          },
          {
            "name": "H0TypographyLineHeight",
            "fields": [
              {
                "name": "H0TypographyLineHeight",
                "type": "number | string",
                "description": "Unitless numeric or explicit CSS line-height value."
              }
            ]
          },
          {
            "name": "H0TypographyLetterSpacing",
            "fields": [
              {
                "name": "H0TypographyLetterSpacing",
                "type": "number | string",
                "description": "Pixel-based numeric or explicit CSS letter-spacing value."
              }
            ]
          },
          {
            "name": "H0TypographyTextTransform",
            "fields": [
              {
                "name": "H0TypographyTextTransform",
                "type": "'none' | 'capitalize' | 'uppercase' | 'lowercase'",
                "description": "Supported text transformations."
              }
            ]
          },
          {
            "name": "H0TypographyAlign",
            "fields": [
              {
                "name": "H0TypographyAlign",
                "type": "'left' | 'center' | 'right'",
                "description": "Supported text alignments."
              }
            ]
          },
          {
            "name": "H0TypographyColor",
            "fields": [
              {
                "name": "H0TypographyColor",
                "type": "'default' | 'muted' | 'secondary' | 'primary' | 'inherit'",
                "description": "Supported semantic text colors; inherit uses the parent color."
              }
            ]
          }
        ]
      },
      "useWhen": [
        "Text needs the H0N scale with explicit semantics.",
        "Visual type style differs from required HTML hierarchy."
      ],
      "avoidWhen": [
        "A constrained Description, Label, ErrorMessage, or Message preset is more specific."
      ],
      "accessibility": [
        "Choose semantic elements before visual variants.",
        "Preserve heading hierarchy.",
        "Use strong and em only when their semantics are intended.",
        "Associate a rendered label with its control by passing for.",
        "Do not rely on color or weight alone."
      ],
      "styling": [
        "Use variants and global typography configuration.",
        "Treat typography classes as implementation details."
      ],
      "responsive": [
        "Allow body text to wrap.",
        "Use truncate only inside constrained layouts.",
        "Inline elements may need an appropriate layout or inline-block sizing before truncation can apply."
      ],
      "performance": [
        "Prefer text prop or simple slot content for large repeated collections."
      ],
      "examples": [
        {
          "key": "components/typography/SpecimensExample",
          "purpose": "Complete public type scale."
        },
        {
          "key": "components/typography/ElementMappingExample",
          "purpose": "Default semantic element selected by every visual variant."
        },
        {
          "key": "components/typography/SemanticsExample",
          "purpose": "Element override, alignment, inherited and semantic color, weight, and truncation."
        },
        {
          "key": "components/typography/LineHeightExample",
          "purpose": "Unitless and explicit CSS line-height overrides."
        },
        {
          "key": "components/typography/FormattingExample",
          "purpose": "Letter-spacing and text-transform overrides."
        }
      ],
      "relatedComponents": [
        "H0Description",
        "H0ErrorMessage",
        "H0Label",
        "H0Message"
      ],
      "manifest": {
        "family": "Typography",
        "familyRole": "root",
        "category": "content",
        "docsPath": "/components/typography",
        "styleEntry": "components/Typography/style.css"
      }
    }
  ]
}