{
  "schemaVersion": 1,
  "version": "0.3.3",
  "framework": "Vue 3.5+",
  "package": "@chrisdalbano/forza-ui",
  "themeClass": "fz-theme",
  "stylesheet": "@chrisdalbano/forza-ui/style.css",
  "components": [
    {
      "name": "FzButton",
      "props": [
        {
          "name": "variant",
          "type": "\"primary\" | \"secondary\" | \"ghost\" | undefined",
          "required": false,
          "default": "\"primary\""
        },
        {
          "name": "size",
          "type": "\"md\" | \"sm\" | undefined",
          "required": false,
          "default": "\"md\""
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "loading",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "type",
          "type": "\"button\" | \"submit\" | \"reset\" | undefined",
          "required": false,
          "default": "\"button\""
        }
      ],
      "state": "native click",
      "slots": [
        {
          "name": "default",
          "type": "{}"
        },
        {
          "name": "trailing",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzButton } from '@chrisdalbano/forza-ui'\nfunction saveBuild(): void {\n  /* your application action */\n}\n</script>\n\n<template>\n  <FzButton @click=\"saveBuild\">Save build</FzButton>\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "button",
      "events": [],
      "source": "packages/vue/src/components/FzButton.vue"
    },
    {
      "name": "FzField",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "hint",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "error",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "type",
          "type": "\"text\" | \"search\" | \"email\" | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "string",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: string",
      "slots": [
        {
          "name": "leading",
          "type": "{}"
        },
        {
          "name": "trailing",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzField } from '@chrisdalbano/forza-ui'\nconst name = ref<string>('')\n</script>\n\n<template>\n  <FzField v-model=\"name\" label=\"Build name\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "field",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzField.vue"
    },
    {
      "name": "FzSelect",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "options",
          "type": "readonly ForzaOption[]",
          "required": true,
          "default": null
        },
        {
          "name": "placeholder",
          "type": "string | undefined",
          "required": false,
          "default": "\"Choose an option\""
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "name",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "string",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: string",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzSelect } from '@chrisdalbano/forza-ui'\nimport type { ForzaOption } from '@chrisdalbano/forza-ui'\nconst role = ref<string>('guardian')\nconst roles: ForzaOption[] = [{ value: 'guardian', label: 'Guardian' }]\n</script>\n\n<template>\n  <FzSelect v-model=\"role\" label=\"Role\" :options=\"roles\" />\n</template>",
      "notes": "Single string selection. Supply a visible label. Disabled options are unavailable to keyboard and pointer input.",
      "slug": "select",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzSelect.vue"
    },
    {
      "name": "FzCheckbox",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "description",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "name",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "boolean | \"indeterminate\"",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: boolean or indeterminate",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzCheckbox } from '@chrisdalbano/forza-ui'\nconst shared = ref<boolean>(false)\n</script>\n\n<template>\n  <FzCheckbox v-model=\"shared\" label=\"Share with the team\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "checkbox",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: boolean | \"indeterminate\"]"
        }
      ],
      "source": "packages/vue/src/components/FzCheckbox.vue"
    },
    {
      "name": "FzSlider",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "min",
          "type": "number | undefined",
          "required": false,
          "default": "0"
        },
        {
          "name": "max",
          "type": "number | undefined",
          "required": false,
          "default": "100"
        },
        {
          "name": "step",
          "type": "number | undefined",
          "required": false,
          "default": "1"
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "unit",
          "type": "string | undefined",
          "required": false,
          "default": "\"\""
        },
        {
          "name": "name",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "number",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: number; commit(value)",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzSlider } from '@chrisdalbano/forza-ui'\nconst budget = ref<number>(3200)\n</script>\n\n<template>\n  <FzSlider\n    v-model=\"budget\"\n    label=\"Gold\"\n    :min=\"1000\"\n    :max=\"6000\"\n    :step=\"100\"\n  />\n</template>",
      "notes": "One numeric thumb. Arrow keys change by step; Home and End reach the bounds. The commit event marks completion.",
      "slug": "slider",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: number]"
        },
        {
          "name": "commit",
          "type": "[value: number]"
        }
      ],
      "source": "packages/vue/src/components/FzSlider.vue"
    },
    {
      "name": "FzSwitch",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "boolean",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: boolean",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzSwitch } from '@chrisdalbano/forza-ui'\nconst enabled = ref<boolean>(true)\n</script>\n\n<template>\n  <FzSwitch v-model=\"enabled\" label=\"Precise values\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "switch",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: boolean]"
        }
      ],
      "source": "packages/vue/src/components/FzSwitch.vue"
    },
    {
      "name": "FzSegmented",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "options",
          "type": "readonly { value: string; label: string; }[]",
          "required": true,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "string",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: string",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzSegmented } from '@chrisdalbano/forza-ui'\nimport type { ForzaOption } from '@chrisdalbano/forza-ui'\nconst view = ref<string>('grid')\nconst options: ForzaOption[] = [\n  { value: 'grid', label: 'Grid' },\n  { value: 'list', label: 'List' },\n]\n</script>\n\n<template>\n  <FzSegmented v-model=\"view\" label=\"Layout\" :options=\"options\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "segmented",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzSegmented.vue"
    },
    {
      "name": "FzTabs",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "options",
          "type": "readonly { value: string; label: string; }[]",
          "required": true,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "string",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: string",
      "slots": [
        {
          "name": "default",
          "type": "{ value: string; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzTabs } from '@chrisdalbano/forza-ui'\nimport type { ForzaOption } from '@chrisdalbano/forza-ui'\nconst tab = ref<string>('overview')\nconst tabs: ForzaOption[] = [\n  { value: 'overview', label: 'Overview' },\n  { value: 'history', label: 'History' },\n]\n</script>\n\n<template>\n  <FzTabs v-model=\"tab\" label=\"Details\" :options=\"tabs\"\n    ><p>{{ tab }}</p></FzTabs\n  >\n</template>",
      "notes": "The default slot renders the active panel. The parent owns its content. Arrow keys, Home, and End move selection.",
      "slug": "tabs",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzTabs.vue"
    },
    {
      "name": "FzStepper",
      "props": [
        {
          "name": "steps",
          "type": "readonly ForzaStep[]",
          "required": true,
          "default": null
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "linear",
          "type": "boolean | undefined",
          "required": false,
          "default": "true"
        },
        {
          "name": "modelValue",
          "type": "number",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: number (1-based)",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzStepper } from '@chrisdalbano/forza-ui'\nimport type { ForzaStep } from '@chrisdalbano/forza-ui'\nconst step = ref<number>(1)\nconst steps: ForzaStep[] = [\n  { title: 'Choose' },\n  { title: 'Configure' },\n  { title: 'Review' },\n]\n</script>\n\n<template>\n  <FzStepper v-model=\"step\" label=\"Setup\" :steps=\"steps\" />\n</template>",
      "notes": "Steps begin at 1. The parent owns validation and content panels. Disable steps until prerequisites are satisfied. Linear mode prevents jumping ahead of the next step.",
      "slug": "stepper",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: number]"
        }
      ],
      "source": "packages/vue/src/components/FzStepper.vue"
    },
    {
      "name": "FzPagination",
      "props": [
        {
          "name": "total",
          "type": "number",
          "required": true,
          "default": null
        },
        {
          "name": "pageSize",
          "type": "number | undefined",
          "required": false,
          "default": "5"
        },
        {
          "name": "label",
          "type": "string | undefined",
          "required": false,
          "default": "\"Pagination\""
        },
        {
          "name": "modelValue",
          "type": "number",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: number (1-based)",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzPagination } from '@chrisdalbano/forza-ui'\nconst page = ref<number>(1)\n</script>\n\n<template>\n  <FzPagination v-model=\"page\" :total=\"100\" :page-size=\"10\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "pagination",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: number]"
        }
      ],
      "source": "packages/vue/src/components/FzPagination.vue"
    },
    {
      "name": "FzAccordion",
      "props": [
        {
          "name": "items",
          "type": "readonly ForzaAccordionItem[]",
          "required": true,
          "default": null
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "string | undefined",
          "required": false,
          "default": "\"\""
        }
      ],
      "state": "v-model: string (single, collapsible)",
      "slots": [
        {
          "name": "title",
          "type": "{ item: ForzaAccordionItem; }"
        },
        {
          "name": "default",
          "type": "{ item: ForzaAccordionItem; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzAccordion } from '@chrisdalbano/forza-ui'\nimport type { ForzaAccordionItem } from '@chrisdalbano/forza-ui'\nconst expanded = ref<string>('')\nconst guide: ForzaAccordionItem[] = [\n  {\n    value: 'start',\n    title: 'Where do I start?',\n    content: 'Choose a role and set a budget.',\n  },\n]\n</script>\n\n<template>\n  <FzAccordion v-model=\"expanded\" label=\"Guide\" :items=\"guide\" />\n</template>",
      "notes": "Single, collapsible expansion. An empty model closes every item. Custom content belongs in the default scoped slot.",
      "slug": "accordion",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzAccordion.vue"
    },
    {
      "name": "FzCarousel",
      "props": [
        {
          "name": "items",
          "type": "readonly T[]",
          "required": true,
          "default": null
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "modelValue",
          "type": "number | undefined",
          "required": false,
          "default": "0"
        }
      ],
      "state": "v-model: number (0-based)",
      "slots": [
        {
          "name": "default",
          "type": "{ item: T; index: number; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzCarousel } from '@chrisdalbano/forza-ui'\nconst slide = ref<number>(0)\nconst builds = [\n  { id: 1, name: 'Guardian' },\n  { id: 2, name: 'Duelist' },\n]\n</script>\n\n<template>\n  <FzCarousel v-model=\"slide\" :items=\"builds\" label=\"Builds\">\n    <template #default=\"{ item }\">{{ item.name }}</template>\n  </FzCarousel>\n</template>",
      "notes": "Slide indices begin at 0. Embla handles pointer and touch dragging. Inactive slides are inert. No autoplay. Items require stable IDs.",
      "slug": "carousel",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: number]"
        }
      ],
      "source": "packages/vue/src/components/FzCarousel.vue"
    },
    {
      "name": "FzDropdown",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "items",
          "type": "readonly ForzaMenuItem[]",
          "required": true,
          "default": null
        },
        {
          "name": "heading",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "disabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "open",
          "type": "boolean | undefined",
          "required": false,
          "default": "false"
        }
      ],
      "state": "v-model:open; select(value)",
      "slots": [
        {
          "name": "trigger",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzDropdown } from '@chrisdalbano/forza-ui'\nimport type { ForzaMenuItem } from '@chrisdalbano/forza-ui'\nconst action = ref<string>('')\nconst actions: ForzaMenuItem[] = [\n  { value: 'duplicate', label: 'Duplicate' },\n]\n</script>\n\n<template>\n  <FzDropdown\n    label=\"Actions\"\n    :items=\"actions\"\n    @select=\"action = $event\"\n  />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "dropdown",
      "events": [
        {
          "name": "update:open",
          "type": "[value: boolean]"
        },
        {
          "name": "select",
          "type": "[value: string]"
        }
      ],
      "source": "packages/vue/src/components/FzDropdown.vue"
    },
    {
      "name": "FzDialog",
      "props": [
        {
          "name": "title",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "description",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "closeOnOutside",
          "type": "boolean | undefined",
          "required": false,
          "default": "true"
        },
        {
          "name": "placement",
          "type": "\"center\" | \"right\" | \"bottom\" | undefined",
          "required": false,
          "default": "\"center\""
        },
        {
          "name": "modelValue",
          "type": "boolean",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: boolean",
      "slots": [
        {
          "name": "default",
          "type": "{ close: () => boolean; }"
        },
        {
          "name": "footer",
          "type": "{ close: () => boolean; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzDialog } from '@chrisdalbano/forza-ui'\nconst open = ref<boolean>(false)\n</script>\n\n<template>\n  <button @click=\"open = true\">Open</button>\n  <FzDialog v-model=\"open\" title=\"Build details\"\n    ><p>Your build is ready.</p></FzDialog\n  >\n</template>",
      "notes": "Escape closes the dialog. Focus is trapped while open and returned to the opener. Exit motion completes before unmount. Supply an informative title.",
      "slug": "dialog",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: boolean]"
        }
      ],
      "source": "packages/vue/src/components/FzDialog.vue"
    },
    {
      "name": "FzDrawer",
      "props": [
        {
          "name": "title",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "description",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "side",
          "type": "\"right\" | \"bottom\" | undefined",
          "required": false,
          "default": "\"right\""
        },
        {
          "name": "closeOnOutside",
          "type": "boolean | undefined",
          "required": false,
          "default": "true"
        },
        {
          "name": "modelValue",
          "type": "boolean",
          "required": true,
          "default": null
        }
      ],
      "state": "v-model: boolean",
      "slots": [
        {
          "name": "default",
          "type": "{ close: () => boolean; }"
        },
        {
          "name": "footer",
          "type": "{ close: () => boolean; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzDrawer } from '@chrisdalbano/forza-ui'\nconst open = ref<boolean>(false)\n</script>\n\n<template>\n  <button @click=\"open = true\">Open filters</button>\n  <FzDrawer v-model=\"open\" title=\"Filters\" side=\"right\"\n    ><p>Your filters.</p></FzDrawer\n  >\n</template>",
      "notes": "Shares the dialog focus contract. Right and bottom placement are supported. No drag dismissal in this release.",
      "slug": "drawer",
      "events": [
        {
          "name": "update:modelValue",
          "type": "[value: boolean]"
        }
      ],
      "source": "packages/vue/src/components/FzDrawer.vue"
    },
    {
      "name": "FzPopover",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "open",
          "type": "boolean | undefined",
          "required": false,
          "default": "false"
        }
      ],
      "state": "v-model:open",
      "slots": [
        {
          "name": "trigger",
          "type": "{}"
        },
        {
          "name": "default",
          "type": "{ close: () => boolean; }"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzPopover } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzPopover label=\"Build details\">Three items selected.</FzPopover>\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "popover",
      "events": [
        {
          "name": "update:open",
          "type": "[value: boolean]"
        }
      ],
      "source": "packages/vue/src/components/FzPopover.vue"
    },
    {
      "name": "FzTooltip",
      "props": [
        {
          "name": "text",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "delay",
          "type": "number | undefined",
          "required": false,
          "default": "250"
        }
      ],
      "state": "hover/focus managed by primitive",
      "slots": [
        {
          "name": "default",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzTooltip } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzTooltip text=\"Tune your build\"\n    ><button type=\"button\">Settings</button></FzTooltip\n  >\n</template>",
      "notes": "Use one focusable trigger. Essential instructions should remain visible elsewhere.",
      "slug": "tooltip",
      "events": [],
      "source": "packages/vue/src/components/FzTooltip.vue"
    },
    {
      "name": "FzTable",
      "props": [
        {
          "name": "rows",
          "type": "readonly T[]",
          "required": true,
          "default": null
        },
        {
          "name": "columns",
          "type": "readonly ForzaColumn[]",
          "required": true,
          "default": null
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "sort",
          "type": "ForzaSort | undefined",
          "required": false,
          "default": null
        }
      ],
      "state": "v-model:sort; parent sorts rows",
      "slots": [
        {
          "name": "cell",
          "type": "{ row: T; column: ForzaColumn; value: unknown; }"
        },
        {
          "name": "empty",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzTable } from '@chrisdalbano/forza-ui'\nconst sort = ref({ key: 'gold', direction: 'asc' as 'asc' | 'desc' })\nconst rows = [{ id: 1, name: 'Sunbreaker', gold: 3200 }]\nconst columns = [\n  { key: 'name', label: 'Item' },\n  { key: 'gold', label: 'Gold', sortable: true },\n]\n</script>\n\n<template>\n  <FzTable\n    v-model:sort=\"sort\"\n    :rows=\"rows\"\n    :columns=\"columns\"\n    label=\"Items\"\n  />\n</template>",
      "notes": "Sorting is controlled: use the emitted sort value to sort or request rows in the parent. Pagination is separate. Supply unique row IDs. No virtualization in this release.",
      "slug": "table",
      "events": [
        {
          "name": "update:sort",
          "type": "[value: ForzaSort | undefined]"
        }
      ],
      "source": "packages/vue/src/components/FzTable.vue"
    },
    {
      "name": "FzList",
      "props": [
        {
          "name": "items",
          "type": "readonly T[]",
          "required": true,
          "default": null
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "motionDisabled",
          "type": "boolean | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "duration",
          "type": "number | undefined",
          "required": false,
          "default": null
        }
      ],
      "state": "parent owns mutations",
      "slots": [
        {
          "name": "default",
          "type": "{ item: T; index: number; }"
        },
        {
          "name": "empty",
          "type": "any"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { FzList } from '@chrisdalbano/forza-ui'\nconst builds = ref([{ id: 1, name: 'Guardian' }])\n</script>\n\n<template>\n  <FzList :items=\"builds\" label=\"Builds\">\n    <template #default=\"{ item }\">{{ item.name }}</template>\n    <template #empty>No builds yet.</template>\n  </FzList>\n</template>",
      "notes": "Use stable, unique item IDs. Mutate the parent array to add, remove, or reorder. Leaving rows become inert immediately.",
      "slug": "list",
      "events": [],
      "source": "packages/vue/src/components/FzList.vue"
    },
    {
      "name": "FzAlert",
      "props": [
        {
          "name": "title",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "tone",
          "type": "\"info\" | \"success\" | \"warning\" | \"danger\" | undefined",
          "required": false,
          "default": "\"info\""
        }
      ],
      "state": "status; danger uses alert",
      "slots": [
        {
          "name": "default",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzAlert } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzAlert title=\"Build saved\" tone=\"success\"\n    >Your changes are ready.</FzAlert\n  >\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "alert",
      "events": [],
      "source": "packages/vue/src/components/FzAlert.vue"
    },
    {
      "name": "FzBadge",
      "props": [
        {
          "name": "tone",
          "type": "\"warning\" | \"neutral\" | \"positive\" | \"accent\" | undefined",
          "required": false,
          "default": "\"neutral\""
        }
      ],
      "state": "presentational",
      "slots": [
        {
          "name": "default",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzBadge } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzBadge tone=\"positive\">Ready</FzBadge>\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "badge",
      "events": [],
      "source": "packages/vue/src/components/FzBadge.vue"
    },
    {
      "name": "FzMeter",
      "props": [
        {
          "name": "value",
          "type": "number",
          "required": true,
          "default": null
        },
        {
          "name": "max",
          "type": "number | undefined",
          "required": false,
          "default": "100"
        },
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "tone",
          "type": "\"warning\" | \"positive\" | \"accent\" | undefined",
          "required": false,
          "default": "\"positive\""
        }
      ],
      "state": "presentational",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { FzMeter } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzMeter :value=\"72\" :max=\"100\" label=\"Budget used\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "meter",
      "events": [],
      "source": "packages/vue/src/components/FzMeter.vue"
    },
    {
      "name": "FzStat",
      "props": [
        {
          "name": "label",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "value",
          "type": "string",
          "required": true,
          "default": null
        },
        {
          "name": "detail",
          "type": "string | undefined",
          "required": false,
          "default": null
        }
      ],
      "state": "presentational",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { FzStat } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzStat value=\"3,200\" label=\"Gold budget\" />\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "stat",
      "events": [],
      "source": "packages/vue/src/components/FzStat.vue"
    },
    {
      "name": "FzPanel",
      "props": [
        {
          "name": "title",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "eyebrow",
          "type": "string | undefined",
          "required": false,
          "default": null
        }
      ],
      "state": "presentational",
      "slots": [
        {
          "name": "action",
          "type": "{}"
        },
        {
          "name": "default",
          "type": "{}"
        },
        {
          "name": "footer",
          "type": "{}"
        }
      ],
      "example": "<script setup lang=\"ts\">\nimport { FzPanel } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzPanel title=\"Workspace\"\n    ><p>Compose your interface here.</p></FzPanel\n  >\n</template>",
      "notes": "State belongs to the parent. Compose this component with the props and slots below.",
      "slug": "panel",
      "events": [],
      "source": "packages/vue/src/components/FzPanel.vue"
    },
    {
      "name": "FzIcon",
      "props": [
        {
          "name": "name",
          "type": "\"sort\" | \"search\" | \"info\" | \"arrowLeft\" | \"minus\" | \"settings\" | \"more\" | \"arrowUpRight\" | \"arrowRight\" | \"plus\" | \"close\" | \"check\" | \"shield\" | \"swords\" | \"zap\" | \"flame\" | \"sun\" | \"moon\" | \"loader\" | \"trash\" | \"undo\" | \"chevronDown\" | \"grip\"",
          "required": true,
          "default": null
        },
        {
          "name": "size",
          "type": "number | undefined",
          "required": false,
          "default": "18"
        },
        {
          "name": "label",
          "type": "string | undefined",
          "required": false,
          "default": null
        },
        {
          "name": "strokeWidth",
          "type": "number | undefined",
          "required": false,
          "default": "1.75"
        }
      ],
      "state": "decorative unless labeled",
      "slots": [],
      "example": "<script setup lang=\"ts\">\nimport { FzIcon } from '@chrisdalbano/forza-ui'\n</script>\n\n<template>\n  <FzIcon name=\"shield\" :size=\"24\" label=\"Guardian role\" />\n</template>",
      "notes": "Uses Lucide. Omit label for decorative icons; supply label when the icon conveys meaning on its own.",
      "slug": "icon",
      "events": [],
      "source": "packages/vue/src/components/FzIcon.vue"
    }
  ]
}