[
  {
    "id": "accordion",
    "name": "accordion",
    "subpath": "@42/core/accordion",
    "category": "disclosure",
    "summary": "Collapsible panels, one or multiple open at a time",
    "presentational": false,
    "options": [
      {
        "name": "multiple",
        "type": "boolean",
        "default": "",
        "description": "Allow more than one panel open at the same time."
      },
      {
        "name": "collapsible",
        "type": "boolean",
        "default": "true",
        "description": "Allow closing the last open panel (single mode). Defaults to true."
      },
      {
        "name": "defaultValue",
        "type": "string | string[] | null",
        "default": "",
        "description": "Value(s) open on initialization."
      }
    ],
    "events": [
      {
        "name": "accordion:change",
        "detail": "{ value: string[] }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-accordion>\n  <div data-c42-accordion-item data-value=\"a\">\n    <button data-c42-accordion-trigger>Title</button>\n    <div data-c42-accordion-panel>Content</div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "alert",
    "name": "alert",
    "subpath": "@42/core/alert",
    "category": "feedback",
    "summary": "Inline callout with variants and optional dismiss",
    "presentational": false,
    "options": [
      {
        "name": "variant",
        "type": "AlertVariant",
        "default": "",
        "description": "Visual/semantic variant. When omitted the controller reads the existing `data-variant` attribute, falling back to `'info'`."
      },
      {
        "name": "role",
        "type": "'alert' | 'status'",
        "default": "",
        "description": "Force the ARIA live semantics. By default `error`/`warning` use `role=\"alert\"` (assertive) and `info`/`success` use `role=\"status\"` (polite)."
      }
    ],
    "events": [
      {
        "name": "alert:dismiss",
        "detail": "{ variant }",
        "description": ""
      }
    ],
    "methods": [
      "setVariant(v)",
      "dismiss()",
      "show()"
    ],
    "markup": "<div data-c42-alert data-variant=\"warning\">\n  <span data-c42-alert-icon aria-hidden=\"true\">⚠</span>\n  <div data-c42-alert-content>\n    <strong data-c42-alert-title>Heads up</strong>\n    <p data-c42-alert-description>Your trial ends soon.</p>\n  </div>\n  <button data-c42-alert-dismiss aria-label=\"Dismiss\">×</button>\n</div>",
    "dataState": []
  },
  {
    "id": "avatar",
    "name": "avatar",
    "subpath": "@42/core/avatar",
    "category": "media",
    "summary": "Image with initials fallback and optional status dot",
    "presentational": false,
    "options": [
      {
        "name": "name",
        "type": "string",
        "default": "",
        "description": "Display name used to derive initials when the fallback element is empty and to label the avatar for assistive technology. Falls back to the image `alt` attribute when omitted."
      },
      {
        "name": "status",
        "type": "AvatarStatus | null",
        "default": "none",
        "description": "Presence status reflected on the status dot. Defaults to none."
      }
    ],
    "events": [
      {
        "name": "avatar:load",
        "detail": "",
        "description": ""
      },
      {
        "name": "avatar:error",
        "detail": "",
        "description": ""
      },
      {
        "name": "avatar:statuschange",
        "detail": "{ status }",
        "description": ""
      }
    ],
    "methods": [
      "setStatus(s)",
      "setSrc(url)"
    ],
    "markup": "<div data-c42-avatar>\n  <img data-c42-avatar-image src=\"…\" alt=\"Jane Doe\" />\n  <span data-c42-avatar-fallback></span>\n  <span data-c42-avatar-status></span>\n</div>",
    "dataState": []
  },
  {
    "id": "avatar-group",
    "name": "avatar-group",
    "subpath": "@42/core/avatar-group",
    "category": "media",
    "summary": "Overlapping avatar stack with +N overflow",
    "presentational": false,
    "options": [
      {
        "name": "stacked",
        "type": "boolean",
        "default": "true",
        "description": "Overlap the avatars into a stack. Reflected on `data-stacked` for CSS to react. Defaults to `true`."
      },
      {
        "name": "spacing",
        "type": "AvatarGroupSpacing",
        "default": "md",
        "description": "Overlap distance preset reflected on `data-spacing`. The theme maps it to `--c42-avatar-overlap`. Defaults to `'md'`."
      },
      {
        "name": "max",
        "type": "number",
        "default": "0",
        "description": "Maximum number of avatars to show; the remainder collapse into the `[data-c42-avatar-overflow]` chip as `+N`. `0` means no limit. Defaults to `0`."
      },
      {
        "name": "label",
        "type": "string",
        "default": "",
        "description": "Accessible label for the group (sets `aria-label` on the root)."
      }
    ],
    "events": [
      {
        "name": "avatar-group:change",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [
      "setStacked(boolean)",
      "setSpacing('sm'|'md'|'lg')",
      "setMax(number)",
      "refresh()"
    ],
    "markup": "<div data-c42-avatar-group>\n  <div data-c42-avatar>…</div>\n  <div data-c42-avatar>…</div>\n  <div data-c42-avatar>…</div>\n  <span data-c42-avatar-overflow></span>\n</div>",
    "dataState": []
  },
  {
    "id": "badge",
    "name": "badge",
    "subpath": "",
    "category": "presentational",
    "summary": "Small status/label badge with variants",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "breadcrumb",
    "name": "breadcrumb",
    "subpath": "",
    "category": "presentational",
    "summary": "Breadcrumb navigation trail (conceptually Navigation)",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "button",
    "name": "button",
    "subpath": "",
    "category": "presentational",
    "summary": "Button styles with variants and sizes",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "calendar",
    "name": "calendar",
    "subpath": "@42/core/calendar",
    "category": "data",
    "summary": "Month/week/day calendar with events and drag-to-move",
    "presentational": false,
    "options": [
      {
        "name": "defaultDate",
        "type": "Date | string",
        "default": "today",
        "description": "Initial anchor date. Defaults to today."
      },
      {
        "name": "view",
        "type": "CalendarView",
        "default": "month",
        "description": "Initial view. Defaults to `month`."
      },
      {
        "name": "weekStartsOn",
        "type": "WeekDay",
        "default": "0",
        "description": "First day of the week. Defaults to 0 (Sunday)."
      },
      {
        "name": "events",
        "type": "CalendarEventInput[]",
        "default": "",
        "description": "Initial events."
      },
      {
        "name": "locale",
        "type": "string",
        "default": "the runtime locale",
        "description": "BCP-47 locale for the header title and weekday names. Defaults to the runtime locale."
      }
    ],
    "events": [
      {
        "name": "calendar:select",
        "detail": "{ date, dateKey }",
        "description": ""
      },
      {
        "name": "calendar:viewchange",
        "detail": "{ view }",
        "description": ""
      },
      {
        "name": "calendar:navigate",
        "detail": "{ date, view }",
        "description": ""
      },
      {
        "name": "calendar:eventclick",
        "detail": "{ id, event }",
        "description": ""
      },
      {
        "name": "calendar:eventmove",
        "detail": "{ id, event, start, end }",
        "description": ""
      }
    ],
    "methods": [
      "setView(v)",
      "navigate(dir)",
      "goToToday()",
      "goToDate(d)",
      "selectDate(d)",
      "addEvent(e)",
      "removeEvent(id)",
      "moveEvent(id, day)",
      "getEvents()",
      "currentView",
      "currentDate",
      "selectedDate"
    ],
    "markup": "<div data-c42-calendar>\n  <div data-c42-calendar-header>\n    <button data-c42-calendar-prev aria-label=\"Previous\">‹</button>\n    <button data-c42-calendar-today>Today</button>\n    <button data-c42-calendar-next aria-label=\"Next\">›</button>\n    <span data-c42-calendar-title></span>\n    <button data-c42-calendar-view=\"month\">Month</button>\n    <button data-c42-calendar-view=\"week\">Week</button>\n    <button data-c42-calendar-view=\"day\">Day</button>\n  </div>\n  <div data-c42-calendar-grid></div>\n</div>",
    "dataState": []
  },
  {
    "id": "card",
    "name": "card",
    "subpath": "",
    "category": "presentational",
    "summary": "Container with header, body and footer slots",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "carousel",
    "name": "carousel",
    "subpath": "@42/core/carousel",
    "category": "disclosure",
    "summary": "Content slider with dots, autoplay, loop and drag (Embla engine)",
    "presentational": false,
    "options": [
      {
        "name": "defaultIndex",
        "type": "number",
        "default": "0",
        "description": "Slide shown on initialization (clamped). Defaults to 0."
      },
      {
        "name": "loop",
        "type": "boolean",
        "default": "false",
        "description": "Wrap around at the ends. Defaults to false."
      },
      {
        "name": "axis",
        "type": "'x' | 'y'",
        "default": "x",
        "description": "Scroll axis. Defaults to 'x'."
      },
      {
        "name": "align",
        "type": "'start' | 'center' | 'end'",
        "default": "center",
        "description": "Snap alignment of slides within the viewport. Defaults to 'center'."
      },
      {
        "name": "slidesToScroll",
        "type": "number",
        "default": "1",
        "description": "Number of slides to advance per navigation. Defaults to 1."
      },
      {
        "name": "dragFree",
        "type": "boolean",
        "default": "false",
        "description": "Allow free-scrolling without snapping to slides. Defaults to false."
      },
      {
        "name": "swipe",
        "type": "boolean",
        "default": "true",
        "description": "Enable pointer/touch drag navigation. Defaults to true."
      },
      {
        "name": "autoplay",
        "type": "boolean",
        "default": "false",
        "description": "Auto-advance slides. Defaults to false."
      },
      {
        "name": "autoplayInterval",
        "type": "number",
        "default": "4000",
        "description": "Delay between auto-advances in ms. Defaults to 4000."
      },
      {
        "name": "pauseOnHover",
        "type": "boolean",
        "default": "true",
        "description": "Pause autoplay while the pointer is over (or focus is within) the root. Defaults to true."
      }
    ],
    "events": [
      {
        "name": "carousel:change",
        "detail": "{ index, previousIndex }",
        "description": ""
      }
    ],
    "methods": [
      "next()",
      "prev()",
      "goTo(i)",
      "play()",
      "pause()",
      "index",
      "length"
    ],
    "markup": "<div data-c42-carousel>\n  <div data-c42-carousel-viewport>\n    <div data-c42-carousel-track>\n      <div data-c42-carousel-slide>One</div>\n      <div data-c42-carousel-slide>Two</div>\n      <div data-c42-carousel-slide>Three</div>\n    </div>\n  </div>\n  <button data-c42-carousel-prev aria-label=\"Previous slide\">‹</button>\n  <button data-c42-carousel-next aria-label=\"Next slide\">›</button>\n  <div data-c42-carousel-dots></div>\n</div>",
    "dataState": []
  },
  {
    "id": "choice",
    "name": "choice",
    "subpath": "@42/core/choice",
    "category": "inputs",
    "summary": "Checkbox, switch and radio-group form toggles",
    "presentational": false,
    "options": [
      {
        "name": "checked",
        "type": "boolean",
        "default": "false",
        "description": "Initial checked state. Defaults to false."
      },
      {
        "name": "indeterminate",
        "type": "boolean",
        "default": "",
        "description": "Initial indeterminate (\"mixed\") state. Takes precedence over `checked`."
      },
      {
        "name": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "When true the control is non-interactive. Defaults to false."
      }
    ],
    "events": [
      {
        "name": "checkbox:change",
        "detail": "{ checked, indeterminate }",
        "description": ""
      },
      {
        "name": "switch:change",
        "detail": "{ checked }",
        "description": ""
      },
      {
        "name": "radio:change",
        "detail": "{ value: string | null }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<button data-c42-checkbox>Accept</button>\n<button data-c42-switch>Notifications</button>\n<div data-c42-radio-group>\n  <div data-c42-radio data-value=\"a\">A</div>\n  <div data-c42-radio data-value=\"b\">B</div>\n</div>",
    "dataState": []
  },
  {
    "id": "clipboard",
    "name": "clipboard",
    "subpath": "@42/core/clipboard",
    "category": "feedback",
    "summary": "Copy-to-clipboard button with copied feedback",
    "presentational": false,
    "options": [
      {
        "name": "text",
        "type": "string",
        "default": "",
        "description": "Explicit text to copy. When provided it takes precedence over the `[data-c42-clipboard-source]` element. Useful for controlled usage."
      },
      {
        "name": "timeout",
        "type": "number",
        "default": "2000",
        "description": "How long (ms) the `data-state=\"copied\"` feedback stays before reverting to `idle`. Defaults to 2000."
      }
    ],
    "events": [
      {
        "name": "clipboard:copy",
        "detail": "{ text }",
        "description": ""
      },
      {
        "name": "clipboard:error",
        "detail": "{ error }",
        "description": ""
      }
    ],
    "methods": [
      "setText(string | null)",
      "copy(): Promise<boolean>"
    ],
    "markup": "<div data-c42-clipboard>\n  <input data-c42-clipboard-source value=\"npm i @42/core\" readonly />\n  <button data-c42-clipboard-trigger>\n    <span data-c42-clipboard-copy>Copy</span>\n    <span data-c42-clipboard-copied hidden>Copied!</span>\n  </button>\n</div>",
    "dataState": []
  },
  {
    "id": "color-picker",
    "name": "color-picker",
    "subpath": "@42/core/color-picker",
    "category": "inputs",
    "summary": "Color selection with hex input and native panel",
    "presentational": false,
    "options": [
      {
        "name": "defaultValue",
        "type": "string",
        "default": "#000000",
        "description": "Initial color as a hex string (`#RGB` or `#RRGGBB`). Defaults to `#000000`."
      },
      {
        "name": "placement",
        "type": "Placement",
        "default": "bottom-start",
        "description": "floating-ui placement for the panel. Defaults to `bottom-start`."
      },
      {
        "name": "offset",
        "type": "number",
        "default": "4",
        "description": "Offset in px between trigger and panel. Defaults to 4."
      }
    ],
    "events": [
      {
        "name": "colorpicker:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "colorpicker:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "colorpicker:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "combobox",
    "name": "combobox",
    "subpath": "@42/core/combobox",
    "category": "inputs",
    "summary": "Autocomplete/multiselect input with filtering",
    "presentational": false,
    "options": [
      {
        "name": "multiple",
        "type": "boolean",
        "default": "false",
        "description": "Allow selecting multiple options. Defaults to false."
      },
      {
        "name": "filter",
        "type": "boolean",
        "default": "true",
        "description": "Filter options as the user types. Defaults to true."
      },
      {
        "name": "defaultValue",
        "type": "string | string[] | null",
        "default": "",
        "description": "Values selected on initialization."
      }
    ],
    "events": [
      {
        "name": "combobox:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "combobox:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "combobox:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "command-palette",
    "name": "command-palette",
    "subpath": "@42/core/command-palette",
    "category": "overlays",
    "summary": "Cmd/Ctrl+K searchable, grouped command panel",
    "presentational": false,
    "options": [
      {
        "name": "defaultOpen",
        "type": "boolean",
        "default": "false",
        "description": "Open the palette on initialization. Defaults to false."
      },
      {
        "name": "hotkey",
        "type": "string | null",
        "default": "k",
        "description": "Global keyboard shortcut that toggles the palette. The letter is matched together with Cmd (macOS) or Ctrl (others). Pass `null` to disable the built-in hotkey and open programmatically. Defaults to `'k'`."
      },
      {
        "name": "closeOnOverlayClick",
        "type": "boolean",
        "default": "true",
        "description": "Close when clicking the overlay. Defaults to true."
      },
      {
        "name": "closeOnEscape",
        "type": "boolean",
        "default": "true",
        "description": "Close when pressing Escape. Defaults to true."
      },
      {
        "name": "clearOnClose",
        "type": "boolean",
        "default": "true",
        "description": "Clear the search input every time the palette closes. Defaults to true."
      },
      {
        "name": "filter",
        "type": "(query: string, text: string) => boolean",
        "default": "substring match",
        "description": "Custom filter predicate. Receives the lowercased query and the item's searchable text (label + `data-keywords`). Defaults to substring match."
      }
    ],
    "events": [
      {
        "name": "commandpalette:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "commandpalette:close",
        "detail": "",
        "description": ""
      },
      {
        "name": "commandpalette:select",
        "detail": "{ value, item }",
        "description": ""
      },
      {
        "name": "commandpalette:filter",
        "detail": "{ query, count }",
        "description": ""
      }
    ],
    "methods": [
      "openPalette()",
      "close()",
      "toggle()",
      "isOpen",
      "activeItem"
    ],
    "markup": "<div data-c42-command-palette>\n  <div data-c42-command-overlay></div>\n  <div data-c42-command-dialog>\n    <input data-c42-command-input placeholder=\"Type a command…\" />\n    <div data-c42-command-list>\n      <div data-c42-command-group data-label=\"Files\">\n        <button data-c42-command-item data-value=\"new\" data-keywords=\"create\">New File</button>\n        <button data-c42-command-item data-value=\"open\">Open File…</button>\n      </div>\n      <div data-c42-command-empty>No results</div>\n    </div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "data-view",
    "name": "data-view",
    "subpath": "@42/core/data-view",
    "category": "data",
    "summary": "Data table with search, sort, pagination and row actions",
    "presentational": false,
    "options": [
      {
        "name": "pageSize",
        "type": "number",
        "default": "10",
        "description": "Rows shown per page. Defaults to 10."
      },
      {
        "name": "defaultSort",
        "type": "string",
        "default": "",
        "description": "Initial sort as `field:order` (e.g. `\"name:asc\"`)."
      },
      {
        "name": "defaultQuery",
        "type": "string",
        "default": "",
        "description": "Initial search query."
      },
      {
        "name": "total",
        "type": "number",
        "default": "",
        "description": "Total item count for server-driven mode (no DOM rows). When rows are present in the markup, the total is derived from the filtered set instead."
      },
      {
        "name": "loading",
        "type": "boolean",
        "default": "false",
        "description": "Start in loading state. Defaults to false."
      },
      {
        "name": "visibleColumns",
        "type": "string[]",
        "default": "",
        "description": "List of column keys visible on init. If omitted, all columns are visible."
      }
    ],
    "events": [
      {
        "name": "dataview:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "dataview:row-action",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "date-picker",
    "name": "date-picker",
    "subpath": "@42/core/date-picker",
    "category": "inputs",
    "summary": "Calendar date selection with single/range modes",
    "presentational": false,
    "options": [
      {
        "name": "mode",
        "type": "'single' | 'range'",
        "default": "",
        "description": "Selection mode: 'single' (default) or 'range'."
      },
      {
        "name": "defaultValue",
        "type": "DateInput | null",
        "default": "",
        "description": "Date selected on initialization (ISO `YYYY-MM-DD` or `Date`)."
      },
      {
        "name": "defaultRange",
        "type": "{ start: DateInput",
        "default": "",
        "description": "Default range for mode='range'."
      },
      {
        "name": "end",
        "type": "DateInput } | null",
        "default": "",
        "description": ""
      },
      {
        "name": "min",
        "type": "DateInput",
        "default": "",
        "description": "Earliest selectable date (inclusive)."
      },
      {
        "name": "max",
        "type": "DateInput",
        "default": "",
        "description": "Latest selectable date (inclusive)."
      },
      {
        "name": "weekStartsOn",
        "type": "0 | 1 | 2 | 3 | 4 | 5 | 6",
        "default": "0",
        "description": "First day of the week: 0 = Sunday … 6 = Saturday. Defaults to 0."
      },
      {
        "name": "locale",
        "type": "string",
        "default": "",
        "description": "BCP-47 locale used for month/weekday names and the default label."
      },
      {
        "name": "formatLabel",
        "type": "(date: Date) => string",
        "default": "",
        "description": "Custom formatter for the trigger label. Overrides `locale` formatting."
      },
      {
        "name": "placeholder",
        "type": "string",
        "default": "",
        "description": "Placeholder shown in the trigger when no date is selected."
      },
      {
        "name": "closeOnSelect",
        "type": "boolean",
        "default": "true",
        "description": "Close the panel after a date is selected. Defaults to true."
      },
      {
        "name": "placement",
        "type": "Placement",
        "default": "bottom-start",
        "description": "floating-ui placement for the panel. Defaults to `bottom-start`."
      },
      {
        "name": "offset",
        "type": "number",
        "default": "4",
        "description": "Offset in px between trigger and panel. Defaults to 4."
      }
    ],
    "events": [
      {
        "name": "datepicker:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "datepicker:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "datepicker:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "divider",
    "name": "divider",
    "subpath": "",
    "category": "presentational",
    "summary": "Horizontal rule, optionally with a centered label",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "drawer",
    "name": "drawer",
    "subpath": "@42/core/drawer",
    "category": "overlays",
    "summary": "Edge-anchored slide-in panel with focus trap",
    "presentational": false,
    "options": [
      {
        "name": "side",
        "type": "DrawerSide",
        "default": "right",
        "description": "Edge the drawer slides in from. Defaults to 'right'."
      },
      {
        "name": "closeOnOverlayClick",
        "type": "boolean",
        "default": "true",
        "description": "Close when the overlay is clicked. Defaults to true."
      },
      {
        "name": "closeOnEscape",
        "type": "boolean",
        "default": "true",
        "description": "Close when Escape is pressed. Defaults to true."
      },
      {
        "name": "lockScroll",
        "type": "boolean",
        "default": "true",
        "description": "Lock body scroll while open. Defaults to true."
      },
      {
        "name": "defaultOpen",
        "type": "boolean",
        "default": "false",
        "description": "Open immediately on construction. Defaults to false."
      }
    ],
    "events": [
      {
        "name": "drawer:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "drawer:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-drawer>\n  <div data-c42-drawer-overlay></div>\n  <div data-c42-drawer-content>\n    <button data-c42-drawer-close>Close</button>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "dropdown",
    "name": "dropdown",
    "subpath": "@42/core/dropdown",
    "category": "overlays",
    "summary": "Button-triggered floating menu with keyboard navigation",
    "presentational": false,
    "options": [
      {
        "name": "placement",
        "type": "Placement",
        "default": "",
        "description": ""
      },
      {
        "name": "offset",
        "type": "number",
        "default": "",
        "description": ""
      },
      {
        "name": "closeOnSelect",
        "type": "boolean",
        "default": "true",
        "description": "Close the menu after an item is activated. Defaults to true."
      }
    ],
    "events": [
      {
        "name": "dropdown:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "dropdown:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-dropdown>\n  <button data-c42-dropdown-trigger>Menu</button>\n  <div data-c42-dropdown-menu>\n    <button data-c42-dropdown-item>Option 1</button>\n    <button data-c42-dropdown-item>Option 2</button>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "file-dropzone",
    "name": "file-dropzone",
    "subpath": "@42/core/file-dropzone",
    "category": "inputs",
    "summary": "File upload with drag & drop and type/size validation",
    "presentational": false,
    "options": [
      {
        "name": "accept",
        "type": "string",
        "default": "",
        "description": "Accepted types as a comma-separated list of extensions (`.csv`) and/or MIME patterns (`image/png`, `image/*`). Empty accepts any file."
      },
      {
        "name": "maxSize",
        "type": "number",
        "default": "",
        "description": "Maximum size per file in bytes."
      },
      {
        "name": "multiple",
        "type": "boolean",
        "default": "false",
        "description": "Allow selecting multiple files. Defaults to false."
      },
      {
        "name": "maxFiles",
        "type": "number",
        "default": "1",
        "description": "Maximum number of files retained. Defaults to 1 (single) or Infinity (multiple)."
      },
      {
        "name": "disabled",
        "type": "boolean",
        "default": "",
        "description": "Disable all interaction."
      },
      {
        "name": "validate",
        "type": "(file: File) => true | string",
        "default": "",
        "description": "Custom synchronous validation. Return true to accept or a string error."
      },
      {
        "name": "previews",
        "type": "boolean",
        "default": "",
        "description": "Render data-URL previews for image files into `[data-c42-dropzone-preview]`."
      }
    ],
    "events": [
      {
        "name": "dropzone:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "dropzone:reject",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "form",
    "name": "form",
    "subpath": "@42/core/form",
    "category": "inputs",
    "summary": "Form/field orchestrator with validation and ARIA wiring",
    "presentational": false,
    "options": [
      {
        "name": "mode",
        "type": "ValidationMode",
        "default": "submit",
        "description": "When to validate a field in addition to submit. Defaults to `submit`. After the first submit attempt, fields with errors re-validate on `input` regardless of this setting (to clear stale errors as the user types)."
      },
      {
        "name": "validators",
        "type": "Record<string, Validator | Validator[]>",
        "default": "",
        "description": "Custom validators per field name. Run after the built-in rules pass."
      },
      {
        "name": "messages",
        "type": "Partial<Record<BuiltInRule, string>>",
        "default": "",
        "description": "Override the default built-in error messages globally."
      }
    ],
    "events": [
      {
        "name": "form:submit",
        "detail": "{ values }",
        "description": ""
      },
      {
        "name": "form:invalid",
        "detail": "{ errors }",
        "description": ""
      },
      {
        "name": "form:change",
        "detail": "{ name, value, values }",
        "description": ""
      },
      {
        "name": "form:reset",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [
      "validate()",
      "validateField(name)",
      "submit()",
      "getValues()",
      "setValues(map)",
      "setError(name, msg)",
      "clearErrors()",
      "reset()",
      "getState()"
    ],
    "markup": "<form data-c42-form>\n  <div data-c42-field>\n    <label for=\"email\">Email</label>\n    <input id=\"email\" name=\"email\" type=\"email\" data-c42-validate=\"required email\" />\n    <span data-c42-field-error hidden></span>\n  </div>\n  <div data-c42-field>\n    <label for=\"pwd\">Password</label>\n    <input id=\"pwd\" name=\"pwd\" type=\"password\" data-c42-validate=\"required\" data-c42-minlength=\"8\" />\n    <span data-c42-field-error hidden></span>\n  </div>\n  <button type=\"submit\">Sign up</button>\n</form>",
    "dataState": []
  },
  {
    "id": "gallery",
    "name": "gallery",
    "subpath": "@42/core/gallery",
    "category": "media",
    "summary": "Image lightbox with navigation and keyboard control",
    "presentational": false,
    "options": [
      {
        "name": "loop",
        "type": "boolean",
        "default": "true",
        "description": "Wrap around when navigating past the first/last image. Defaults to true."
      },
      {
        "name": "closeOnEscape",
        "type": "boolean",
        "default": "true",
        "description": "Close when Escape is pressed. Defaults to true."
      },
      {
        "name": "lockScroll",
        "type": "boolean",
        "default": "true",
        "description": "Lock body scroll while the lightbox is open. Defaults to true."
      }
    ],
    "events": [
      {
        "name": "gallery:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "gallery:close",
        "detail": "",
        "description": ""
      },
      {
        "name": "gallery:change",
        "detail": "{ index, src }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-gallery>\n  <img data-c42-gallery-thumb src=\"thumb1.jpg\" data-full=\"full1.jpg\" />\n  <img data-c42-gallery-thumb src=\"thumb2.jpg\" data-full=\"full2.jpg\" />\n  <div data-c42-gallery-lightbox>\n    <img data-c42-gallery-image />\n    <button data-c42-gallery-prev>‹</button>\n    <button data-c42-gallery-next>›</button>\n    <button data-c42-gallery-close>×</button>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "image-viewer",
    "name": "image-viewer",
    "subpath": "@42/core/image-viewer",
    "category": "media",
    "summary": "Zoomable, pannable image with zoom controls",
    "presentational": false,
    "options": [
      {
        "name": "minZoom",
        "type": "number",
        "default": "0",
        "description": "Min zoom level (0 = fit). Defaults to 0."
      },
      {
        "name": "maxZoom",
        "type": "number",
        "default": "7",
        "description": "Max zoom level. Defaults to 7."
      },
      {
        "name": "expanded",
        "type": "boolean",
        "default": "false",
        "description": "Start in expanded/fullscreen mode. Defaults to false."
      }
    ],
    "events": [
      {
        "name": "image-viewer:zoom",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-image-viewer>\n  <img data-c42-viewer-image src=\"photo.jpg\" />\n  <button data-c42-viewer-zoom-in>+</button>\n  <button data-c42-viewer-zoom-out>−</button>\n  <button data-c42-viewer-expand>⛶</button>\n</div>",
    "dataState": []
  },
  {
    "id": "input-label",
    "name": "input-label",
    "subpath": "",
    "category": "presentational",
    "summary": "Styled form label and text input",
    "presentational": true,
    "options": [],
    "events": [],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "kanban",
    "name": "kanban",
    "subpath": "@42/core/kanban",
    "category": "data",
    "summary": "Drag & keyboard board moving cards across columns",
    "presentational": false,
    "options": [
      {
        "name": "drag",
        "type": "boolean",
        "default": "true",
        "description": "Enable pointer drag to move/reorder items. Defaults to true."
      },
      {
        "name": "keyboard",
        "type": "boolean",
        "default": "true",
        "description": "Enable keyboard reordering (arrows/Home/End on a focused item). Defaults to true."
      }
    ],
    "events": [
      {
        "name": "kanban:move",
        "detail": "{ item, from, to, fromIndex, toIndex, order }",
        "description": ""
      }
    ],
    "methods": [
      "getOrder()",
      "moveItem(item, toColumn, toIndex?)"
    ],
    "markup": "<div data-c42-kanban>\n  <div data-c42-kanban-column data-value=\"todo\" data-label=\"To do\">\n    <div data-c42-kanban-list>\n      <div data-c42-kanban-item data-value=\"t1\">First task</div>\n    </div>\n  </div>\n  <div data-c42-kanban-column data-value=\"doing\" data-label=\"In progress\">\n    <div data-c42-kanban-list></div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "mega-menu",
    "name": "mega-menu",
    "subpath": "@42/core/mega-menu",
    "category": "navigation",
    "summary": "Horizontal nav with large multi-column panels",
    "presentational": false,
    "options": [
      {
        "name": "openOnHover",
        "type": "boolean",
        "default": "true",
        "description": "Open panels on pointer hover (in addition to click/focus). Defaults to true."
      },
      {
        "name": "openDelay",
        "type": "number",
        "default": "0",
        "description": "Delay (ms) before a hovered panel opens. Defaults to 0."
      },
      {
        "name": "closeDelay",
        "type": "number",
        "default": "150",
        "description": "Delay (ms) before the panel closes after the pointer leaves. Defaults to 150."
      }
    ],
    "events": [
      {
        "name": "megamenu:open",
        "detail": "{ value }",
        "description": ""
      },
      {
        "name": "megamenu:close",
        "detail": "{ value }",
        "description": ""
      }
    ],
    "methods": [
      "open(v)",
      "toggle(v)",
      "closeAll()",
      "openValue"
    ],
    "markup": "<nav data-c42-mega-menu aria-label=\"Main\">\n  <ul>\n    <li data-c42-mega-menu-item>\n      <button data-c42-mega-menu-trigger data-value=\"products\">Products</button>\n      <div data-c42-mega-menu-panel>…multi-column content…</div>\n    </li>\n    <li data-c42-mega-menu-item>\n      <a data-c42-mega-menu-trigger href=\"/pricing\">Pricing</a>\n    </li>\n  </ul>\n</nav>",
    "dataState": []
  },
  {
    "id": "modal",
    "name": "modal",
    "subpath": "@42/core/modal",
    "category": "overlays",
    "summary": "Dialog with overlay, focus trap and scroll lock",
    "presentational": false,
    "options": [
      {
        "name": "closeOnOverlayClick",
        "type": "boolean",
        "default": "true",
        "description": "Close when the overlay is clicked. Defaults to true."
      },
      {
        "name": "closeOnEscape",
        "type": "boolean",
        "default": "true",
        "description": "Close when Escape is pressed. Defaults to true."
      },
      {
        "name": "lockScroll",
        "type": "boolean",
        "default": "true",
        "description": "Lock body scroll while open. Defaults to true."
      },
      {
        "name": "defaultOpen",
        "type": "boolean",
        "default": "false",
        "description": "Open immediately on construction. Defaults to false."
      }
    ],
    "events": [
      {
        "name": "modal:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "modal:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-modal>\n  <button data-c42-modal-trigger>Open</button>\n  <div data-c42-modal-overlay>\n    <div data-c42-modal-content>\n      <button data-c42-modal-close>×</button>\n      <p>Modal body</p>\n    </div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "nav",
    "name": "nav",
    "subpath": "@42/core/nav",
    "category": "navigation",
    "summary": "Collapsible sidebar navigation with submenus and mini mode",
    "presentational": false,
    "options": [
      {
        "name": "defaultActive",
        "type": "string",
        "default": "",
        "description": "Value of the item to mark active on init (`data-value`)."
      },
      {
        "name": "accordion",
        "type": "boolean",
        "default": "false",
        "description": "When true, opening a group closes the others (accordion behaviour). Defaults to false (multiple groups can be open)."
      },
      {
        "name": "collapsed",
        "type": "boolean",
        "default": "false",
        "description": "Start in the collapsed (mini) state. Defaults to false."
      }
    ],
    "events": [
      {
        "name": "nav:toggle",
        "detail": "{ value, open }",
        "description": ""
      },
      {
        "name": "nav:select",
        "detail": "{ value }",
        "description": ""
      },
      {
        "name": "nav:collapse",
        "detail": "{ collapsed }",
        "description": ""
      }
    ],
    "methods": [
      "toggleGroup(v)",
      "openGroup(v)",
      "closeGroup(v)",
      "setActive(v)",
      "toggleCollapsed()",
      "setCollapsed(bool)"
    ],
    "markup": "<nav data-c42-nav aria-label=\"Main\">\n  <button data-c42-nav-collapse aria-label=\"Collapse\"></button>\n  <ul>\n    <li><a data-c42-nav-item href=\"/\" data-value=\"home\">Home</a></li>\n    <li data-c42-nav-group>\n      <button data-c42-nav-trigger data-value=\"settings\">Settings</button>\n      <ul data-c42-nav-submenu>\n        <li><a data-c42-nav-item href=\"/p\" data-value=\"profile\">Profile</a></li>\n      </ul>\n    </li>\n  </ul>\n</nav>",
    "dataState": []
  },
  {
    "id": "nested-select",
    "name": "nested-select",
    "subpath": "@42/core/nested-select",
    "category": "inputs",
    "summary": "Hierarchical multi-select with tri-state checkboxes",
    "presentational": false,
    "options": [
      {
        "name": "defaultValue",
        "type": "string[]",
        "default": "",
        "description": "Values selected on initialization."
      },
      {
        "name": "filter",
        "type": "boolean",
        "default": "true",
        "description": "Filter options as the user types. Defaults to true."
      },
      {
        "name": "placeholder",
        "type": "string",
        "default": "",
        "description": "Placeholder shown in the value element when nothing is selected."
      },
      {
        "name": "placement",
        "type": "Placement",
        "default": "bottom-start",
        "description": "floating-ui placement for the panel. Defaults to `bottom-start`."
      },
      {
        "name": "offset",
        "type": "number",
        "default": "4",
        "description": "Offset in px between trigger and panel. Defaults to 4."
      }
    ],
    "events": [
      {
        "name": "nestedselect:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "nestedselect:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "nestedselect:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "pagination",
    "name": "pagination",
    "subpath": "@42/core/pagination",
    "category": "navigation",
    "summary": "Page navigation with ellipsis and prev/next",
    "presentational": false,
    "options": [
      {
        "name": "total",
        "type": "number",
        "default": "",
        "description": "Total number of pages. Required and must be `>= 1`."
      },
      {
        "name": "page",
        "type": "number",
        "default": "1",
        "description": "Current page on initialization (1-based). Defaults to `1`."
      },
      {
        "name": "siblingCount",
        "type": "number",
        "default": "1",
        "description": "How many pages to show on each side of the current page. Defaults to `1`."
      },
      {
        "name": "boundaryCount",
        "type": "number",
        "default": "1",
        "description": "How many pages to always show at the start and end. Defaults to `1`."
      }
    ],
    "events": [
      {
        "name": "pagination:change",
        "detail": "{ page: number }",
        "description": ""
      }
    ],
    "methods": [
      "setPage(n)",
      "next()",
      "prev()"
    ],
    "markup": "<nav data-c42-pagination>\n  <button data-c42-pagination-prev>Prev</button>\n  <div data-c42-pagination-list></div>\n  <button data-c42-pagination-next>Next</button>\n</nav>",
    "dataState": []
  },
  {
    "id": "popover",
    "name": "popover",
    "subpath": "@42/core/popover",
    "category": "overlays",
    "summary": "Interactive floating panel — like an interactive tooltip",
    "presentational": false,
    "options": [
      {
        "name": "placement",
        "type": "Placement",
        "default": "bottom",
        "description": "floating-ui placement. Defaults to `'bottom'`."
      },
      {
        "name": "offset",
        "type": "number",
        "default": "8",
        "description": "Distance in px between trigger and content. Defaults to 8."
      },
      {
        "name": "autoFocus",
        "type": "boolean",
        "default": "true",
        "description": "Move focus into the content when it opens (first focusable element, or the content itself). Defaults to true."
      },
      {
        "name": "trapFocus",
        "type": "boolean",
        "default": "false",
        "description": "Confine Tab/Shift+Tab within the content while open. Defaults to false."
      },
      {
        "name": "closeOnOutsideClick",
        "type": "boolean",
        "default": "true",
        "description": "Close when a pointerdown happens outside the popover. Defaults to true."
      }
    ],
    "events": [
      {
        "name": "popover:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "popover:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [
      "openPopover()",
      "close()",
      "toggle()",
      "isOpen"
    ],
    "markup": "<div data-c42-popover>\n  <button data-c42-popover-trigger>Open</button>\n  <div data-c42-popover-content>\n    <a href=\"#\">A link</a>\n    <button>An action</button>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "progress",
    "name": "progress",
    "subpath": "@42/core/progress",
    "category": "feedback",
    "summary": "Determinate / indeterminate progress bar",
    "presentational": false,
    "options": [
      {
        "name": "value",
        "type": "number",
        "default": "0",
        "description": "Current value. Defaults to 0. Ignored while indeterminate."
      },
      {
        "name": "min",
        "type": "number",
        "default": "0",
        "description": "Lower bound. Defaults to 0."
      },
      {
        "name": "max",
        "type": "number",
        "default": "100",
        "description": "Upper bound. Defaults to 100."
      },
      {
        "name": "indeterminate",
        "type": "boolean",
        "default": "false",
        "description": "When true the bar shows an indeterminate (loading) state: `aria-valuenow` is removed and `data-state=\"indeterminate\"`. Defaults to false."
      },
      {
        "name": "label",
        "type": "string",
        "default": "",
        "description": "Accessible label. Sets `aria-label` on the root when no `aria-labelledby` is already present."
      }
    ],
    "events": [
      {
        "name": "progress:change",
        "detail": "{ value, min, max, percent, indeterminate }",
        "description": ""
      }
    ],
    "methods": [
      "setValue(n)",
      "setMax(n)",
      "setIndeterminate(boolean)",
      "getValue()"
    ],
    "markup": "<div data-c42-progress>\n  <div data-c42-progress-track>\n    <div data-c42-progress-indicator></div>\n  </div>\n  <span data-c42-progress-label></span>\n</div>",
    "dataState": []
  },
  {
    "id": "rich-text-editor",
    "name": "rich-text-editor",
    "subpath": "@42/core/rich-text-editor",
    "category": "inputs",
    "summary": "Contenteditable region with a formatting toolbar",
    "presentational": false,
    "options": [
      {
        "name": "value",
        "type": "string",
        "default": "",
        "description": "Initial HTML content. Overrides any existing markup in the content area."
      },
      {
        "name": "getLinkUrl",
        "type": "() => string | null",
        "default": "window",
        "description": "Resolve the URL when a `createLink` command runs. Defaults to `window.prompt`. Return `null`/empty to cancel."
      }
    ],
    "events": [
      {
        "name": "richtexteditor:command",
        "detail": "{ command, value? }",
        "description": ""
      },
      {
        "name": "richtexteditor:change",
        "detail": "{ html }",
        "description": ""
      }
    ],
    "methods": [
      "format(command, value?)",
      "getHTML()",
      "setHTML(html)",
      "focus()"
    ],
    "markup": "<div data-c42-rich-text-editor>\n  <div data-c42-rte-toolbar>\n    <button data-c42-rte-command=\"bold\" aria-label=\"Bold\"><b>B</b></button>\n    <button data-c42-rte-command=\"italic\" aria-label=\"Italic\"><i>I</i></button>\n    <button data-c42-rte-command=\"insertUnorderedList\" aria-label=\"List\">• List</button>\n    <button data-c42-rte-command=\"createLink\" aria-label=\"Link\">Link</button>\n  </div>\n  <div data-c42-rte-content data-placeholder=\"Write something…\"></div>\n</div>",
    "dataState": []
  },
  {
    "id": "select",
    "name": "select",
    "subpath": "@42/core/select",
    "category": "inputs",
    "summary": "Single-select dropdown (no search) with listbox ARIA",
    "presentational": false,
    "options": [
      {
        "name": "defaultValue",
        "type": "string | null",
        "default": "null",
        "description": "Value selected on initialization. Defaults to `null` (nothing selected)."
      },
      {
        "name": "placeholder",
        "type": "string",
        "default": "",
        "description": "Text shown in the trigger when nothing is selected."
      }
    ],
    "events": [
      {
        "name": "select:change",
        "detail": "{ value: string, label: string }",
        "description": ""
      },
      {
        "name": "select:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "select:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-select>\n  <button data-c42-select-trigger><span data-c42-select-value>Choose…</span></button>\n  <div data-c42-select-listbox>\n    <div data-c42-select-option data-value=\"a\">Apple</div>\n    <div data-c42-select-option data-value=\"b\">Banana</div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "skeleton",
    "name": "skeleton",
    "subpath": "@42/core/skeleton",
    "category": "feedback",
    "summary": "Loading placeholder with loading→content swap",
    "presentational": false,
    "options": [
      {
        "name": "loading",
        "type": "boolean",
        "default": "true",
        "description": "Whether the region starts in the loading state. Defaults to `true`."
      }
    ],
    "events": [
      {
        "name": "skeleton:change",
        "detail": "{ loading: boolean }",
        "description": ""
      }
    ],
    "methods": [
      "setLoading(boolean)"
    ],
    "markup": "<div data-c42-skeleton-region>\n  <div data-c42-skeleton-placeholder>\n    <span data-c42-skeleton data-variant=\"text\"></span>\n    <span data-c42-skeleton data-variant=\"circle\"></span>\n  </div>\n  <div data-c42-skeleton-content hidden>real content</div>\n</div>",
    "dataState": []
  },
  {
    "id": "slider",
    "name": "slider",
    "subpath": "@42/core/slider",
    "category": "inputs",
    "summary": "Single or range slider with keyboard and pointer drag",
    "presentational": false,
    "options": [
      {
        "name": "min",
        "type": "number",
        "default": "0",
        "description": "Lower bound. Defaults to 0."
      },
      {
        "name": "max",
        "type": "number",
        "default": "100",
        "description": "Upper bound. Defaults to 100."
      },
      {
        "name": "step",
        "type": "number",
        "default": "1",
        "description": "Step increment. Defaults to 1."
      },
      {
        "name": "value",
        "type": "number | [number, number]",
        "default": "",
        "description": "Initial value. A single number for one thumb, or `[start, end]` for a range. When omitted, single sliders start at `min` and range sliders at `[min, max]`. Whether the slider is single or range is inferred from the number of `[data-c42-slider-thumb]` elements present."
      },
      {
        "name": "orientation",
        "type": "SliderOrientation",
        "default": "horizontal",
        "description": "Orientation. Defaults to `'horizontal'`."
      },
      {
        "name": "label",
        "type": "string | [string, string]",
        "default": "",
        "description": "Accessible label(s) applied to the thumb(s) via `aria-label`."
      }
    ],
    "events": [
      {
        "name": "slider:change",
        "detail": "{ value, values }",
        "description": ""
      }
    ],
    "methods": [
      "setValue(number | [start, end])",
      "getValue()"
    ],
    "markup": "<div data-c42-slider>\n  <div data-c42-slider-track>\n    <div data-c42-slider-range></div>\n    <div data-c42-slider-thumb aria-label=\"Value\"></div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "sms-editor",
    "name": "sms-editor",
    "subpath": "@42/core/sms-editor",
    "category": "inputs",
    "summary": "Textarea with live SMS encoding + segment counting",
    "presentational": false,
    "options": [
      {
        "name": "value",
        "type": "string",
        "default": "",
        "description": "Initial textarea value."
      },
      {
        "name": "maxLength",
        "type": "number",
        "default": "undefined",
        "description": "Hard character cap on the textarea. Defaults to `undefined` (no cap) so the user can write multi-segment messages — segmentation is reported, not blocked. Set a number to enforce a `maxlength`."
      },
      {
        "name": "maxSegments",
        "type": "number",
        "default": "undefined",
        "description": "Maximum number of segments to allow before flagging. Purely informational — surfaced on `data-over-limit` and in the change event. Defaults to `undefined` (no limit)."
      },
      {
        "name": "emojis",
        "type": "boolean",
        "default": "true",
        "description": "Show the emoji picker trigger. Defaults to true."
      },
      {
        "name": "renderPicker",
        "type": "(container: HTMLElement, insert: (emoji: string) => void) => void",
        "default": "",
        "description": "Plugin: render your emoji picker into the panel container. Same contract as `textarea-emoji`. Note: inserting an emoji forces UCS-2 encoding."
      }
    ],
    "events": [
      {
        "name": "smseditor:change",
        "detail": "{ text, encoding, length, segments, remaining, overLimit }",
        "description": ""
      }
    ],
    "methods": [
      "insertText(text)",
      "getText()",
      "getSegmentInfo()",
      "focus()",
      "value"
    ],
    "markup": "<div data-c42-sms-editor>\n  <textarea data-c42-sms-input placeholder=\"Write an SMS…\"></textarea>\n  <div class=\"c42-sms-editor-status\">\n    <span data-c42-sms-counter></span>\n    <span data-c42-sms-segments></span>\n    <span data-c42-sms-encoding></span>\n    <!-- emoji affordance bottom-right (picker drops below) -->\n    <span class=\"c42-sms-editor-emoji\">\n      <button data-c42-sms-trigger aria-label=\"Emoji\">🙂</button>\n      <div data-c42-sms-picker hidden></div>\n    </span>\n  </div>\n  <!-- optional live preview (filled with the escaped message text) -->\n  <div data-c42-sms-preview></div>\n</div>",
    "dataState": []
  },
  {
    "id": "sortable-table",
    "name": "sortable-table",
    "subpath": "@42/core/sortable-table",
    "category": "data",
    "summary": "Drag/keyboard row & column reordering plus resizing",
    "presentational": false,
    "options": [
      {
        "name": "reorderRows",
        "type": "boolean",
        "default": "true",
        "description": "Enable drag/keyboard reordering of rows (needs row handles). Defaults to true."
      },
      {
        "name": "reorderColumns",
        "type": "boolean",
        "default": "false",
        "description": "Enable drag/keyboard reordering of columns (needs column handles). Defaults to false."
      },
      {
        "name": "resizeColumns",
        "type": "boolean",
        "default": "false",
        "description": "Enable pointer/keyboard column resizing (needs resize handles). Defaults to false."
      },
      {
        "name": "resizeStep",
        "type": "number",
        "default": "16",
        "description": "Pixel increment for keyboard column resizing. Defaults to 16."
      },
      {
        "name": "minColumnWidth",
        "type": "number",
        "default": "48",
        "description": "Minimum column width in px. Defaults to 48."
      }
    ],
    "events": [
      {
        "name": "sortabletable:reorder",
        "detail": "{ axis, from, to, order }",
        "description": ""
      },
      {
        "name": "sortabletable:resize",
        "detail": "{ value, width }",
        "description": ""
      }
    ],
    "methods": [
      "getRowOrder()",
      "getColumnOrder()",
      "moveRow(a,b)",
      "moveColumn(a,b)",
      "setColumnWidth(value, px)"
    ],
    "markup": "<table data-c42-sortable-table>\n  <thead><tr>\n    <th data-c42-sortable-col data-value=\"name\">\n      Name<span data-c42-sortable-resize></span>\n    </th>\n  </tr></thead>\n  <tbody>\n    <tr data-c42-sortable-row data-value=\"r1\">\n      <td><button data-c42-sortable-row-handle></button>Ada</td>\n    </tr>\n  </tbody>\n</table>",
    "dataState": []
  },
  {
    "id": "stepper",
    "name": "stepper",
    "subpath": "@42/core/stepper",
    "category": "navigation",
    "summary": "Multi-step wizard with linear/non-linear navigation",
    "presentational": false,
    "options": [
      {
        "name": "linear",
        "type": "boolean",
        "default": "true",
        "description": "Only allow navigating to completed steps or the current one. Defaults to true."
      },
      {
        "name": "defaultValue",
        "type": "string | number | null",
        "default": "",
        "description": "Step value or index active on initialization."
      }
    ],
    "events": [
      {
        "name": "stepper:change",
        "detail": "{ value, index }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-stepper>\n  <div data-c42-stepper-step data-value=\"1\">\n    <span data-c42-stepper-indicator></span>\n    <button data-c42-stepper-trigger>Step 1</button>\n    <div data-c42-stepper-panel>Content for step 1</div>\n  </div>\n  <div data-c42-stepper-step data-value=\"2\">\n    <span data-c42-stepper-indicator></span>\n    <button data-c42-stepper-trigger>Step 2</button>\n    <div data-c42-stepper-panel>Content for step 2</div>\n  </div>\n</div>",
    "dataState": []
  },
  {
    "id": "tabs",
    "name": "tabs",
    "subpath": "@42/core/tabs",
    "category": "navigation",
    "summary": "Tabbed navigation with roving tabindex and arrow keys",
    "presentational": false,
    "options": [
      {
        "name": "defaultValue",
        "type": "string | null",
        "default": "the first tab",
        "description": "Value of the tab selected on initialization. Defaults to the first tab."
      },
      {
        "name": "orientation",
        "type": "TabsOrientation",
        "default": "horizontal",
        "description": "Arrow-key navigation axis and `aria-orientation`. Defaults to horizontal."
      },
      {
        "name": "activationMode",
        "type": "TabsActivationMode",
        "default": "automatic",
        "description": "`automatic` selects a tab as soon as it receives focus (arrow keys). `manual` only moves focus; selection happens on Enter/Space/click. Defaults to `automatic`."
      }
    ],
    "events": [
      {
        "name": "tabs:change",
        "detail": "{ value: string }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-tabs>\n  <div data-c42-tabs-list>\n    <button data-c42-tabs-trigger data-value=\"a\">A</button>\n    <button data-c42-tabs-trigger data-value=\"b\">B</button>\n  </div>\n  <div data-c42-tabs-panel data-value=\"a\">Panel A</div>\n  <div data-c42-tabs-panel data-value=\"b\">Panel B</div>\n</div>",
    "dataState": []
  },
  {
    "id": "tags-input",
    "name": "tags-input",
    "subpath": "@42/core/tags-input",
    "category": "inputs",
    "summary": "Token/tag entry with validation and dedupe",
    "presentational": false,
    "options": [
      {
        "name": "max",
        "type": "number",
        "default": "",
        "description": "Maximum number of tags."
      },
      {
        "name": "allowDuplicates",
        "type": "boolean",
        "default": "false",
        "description": "Allow duplicate tags. Defaults to false."
      },
      {
        "name": "delimiters",
        "type": "string[]",
        "default": "Enter and comma",
        "description": "Keys that commit the current input as a tag. Defaults to Enter and comma."
      },
      {
        "name": "defaultTags",
        "type": "string[]",
        "default": "",
        "description": "Tags present on initialization."
      },
      {
        "name": "validate",
        "type": "(tag: string) => true | string",
        "default": "",
        "description": "Validate a tag before adding. Return true to accept, or a string error."
      }
    ],
    "events": [
      {
        "name": "tags:change",
        "detail": "{ tags: string[] }",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-tags>\n  <div data-c42-tags-list></div>\n  <input data-c42-tags-input placeholder=\"Add tag...\" />\n</div>",
    "dataState": []
  },
  {
    "id": "textarea-emoji",
    "name": "textarea-emoji",
    "subpath": "@42/core/textarea-emoji",
    "category": "inputs",
    "summary": "Textarea with character counter and emoji picker",
    "presentational": false,
    "options": [
      {
        "name": "maxLength",
        "type": "number",
        "default": "200",
        "description": "Maximum character length. Defaults to 200."
      },
      {
        "name": "emojis",
        "type": "boolean",
        "default": "true",
        "description": "Show emoji picker trigger. Defaults to true."
      },
      {
        "name": "renderPicker",
        "type": "(container: HTMLElement, insert: (emoji: string) => void) => void",
        "default": "",
        "description": "Plugin: render your emoji picker into the panel container. Receives the container element and an `insert` callback. Called once on init — the controller handles show/hide."
      }
    ],
    "events": [
      {
        "name": "textarea-emoji:input",
        "detail": "",
        "description": ""
      },
      {
        "name": "textarea-emoji:emoji",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<div data-c42-textarea-emoji>\n  <textarea data-c42-textarea-emoji-input rows=\"3\" placeholder=\"Write...\"></textarea>\n  <div>\n    <button data-c42-textarea-emoji-trigger>😀</button>\n    <span data-c42-textarea-emoji-counter></span>\n  </div>\n  <div data-c42-textarea-emoji-picker></div>\n</div>",
    "dataState": []
  },
  {
    "id": "time-picker",
    "name": "time-picker",
    "subpath": "@42/core/time-picker",
    "category": "inputs",
    "summary": "Time selection with 12h/24h and minute stepping",
    "presentational": false,
    "options": [
      {
        "name": "defaultValue",
        "type": "string | null",
        "default": "",
        "description": "Time selected on initialization as 24h `HH:MM` (e.g. `\"14:30\"`)."
      },
      {
        "name": "format",
        "type": "TimeFormat",
        "default": "12h",
        "description": "Display format for the trigger and inputs. Defaults to `12h`."
      },
      {
        "name": "minuteStep",
        "type": "number",
        "default": "1",
        "description": "Minute granularity used when clamping. Defaults to 1."
      },
      {
        "name": "placeholder",
        "type": "string",
        "default": "",
        "description": "Placeholder shown in the trigger when no time is selected."
      },
      {
        "name": "closeOnConfirm",
        "type": "boolean",
        "default": "true",
        "description": "Close the panel after confirming. Defaults to true."
      },
      {
        "name": "placement",
        "type": "Placement",
        "default": "bottom-start",
        "description": "floating-ui placement for the panel. Defaults to `bottom-start`."
      },
      {
        "name": "offset",
        "type": "number",
        "default": "4",
        "description": "Offset in px between trigger and panel. Defaults to 4."
      }
    ],
    "events": [
      {
        "name": "timepicker:change",
        "detail": "",
        "description": ""
      },
      {
        "name": "timepicker:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "timepicker:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "",
    "dataState": []
  },
  {
    "id": "toast",
    "name": "toast",
    "subpath": "@42/core/toast",
    "category": "feedback",
    "summary": "Floating notification manager with auto-dismiss",
    "presentational": false,
    "options": [
      {
        "name": "position",
        "type": "ToastPosition",
        "default": "bottom-right",
        "description": "Anchor position of the region. Defaults to `bottom-right`."
      },
      {
        "name": "duration",
        "type": "number",
        "default": "5000",
        "description": "Auto-dismiss delay in milliseconds. Defaults to `5000`. Use `0` to disable auto-dismiss (toast persists until dismissed)."
      },
      {
        "name": "max",
        "type": "number",
        "default": "",
        "description": "Maximum number of visible toasts. The oldest is removed when exceeded."
      }
    ],
    "events": [
      {
        "name": "toast:show",
        "detail": "",
        "description": ""
      },
      {
        "name": "toast:dismiss",
        "detail": "{ id: string }",
        "description": ""
      }
    ],
    "methods": [
      "show(opts) → id",
      "dismiss(id)",
      "clear()"
    ],
    "markup": "<div data-c42-toast-region></div>",
    "dataState": []
  },
  {
    "id": "tooltip",
    "name": "tooltip",
    "subpath": "@42/core/tooltip",
    "category": "overlays",
    "summary": "Hover/focus floating label, auto-positioned",
    "presentational": false,
    "options": [
      {
        "name": "placement",
        "type": "Placement",
        "default": "",
        "description": ""
      },
      {
        "name": "offset",
        "type": "number",
        "default": "",
        "description": "Distance in px between trigger and content."
      },
      {
        "name": "openDelay",
        "type": "number",
        "default": "",
        "description": "Delay before showing, in ms."
      },
      {
        "name": "closeDelay",
        "type": "number",
        "default": "",
        "description": "Delay before hiding, in ms."
      }
    ],
    "events": [
      {
        "name": "tooltip:open",
        "detail": "",
        "description": ""
      },
      {
        "name": "tooltip:close",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<span data-c42-tooltip>\n  <button data-c42-tooltip-trigger>Hover me</button>\n  <div data-c42-tooltip-content>Tooltip text</div>\n</span>",
    "dataState": []
  },
  {
    "id": "tree",
    "name": "tree",
    "subpath": "@42/core/tree",
    "category": "data",
    "summary": "Nested list with expand/collapse and tri-state checkboxes",
    "presentational": false,
    "options": [
      {
        "name": "expandAll",
        "type": "boolean",
        "default": "false",
        "description": "Expand every node on initialization. Defaults to false."
      },
      {
        "name": "treeSelection",
        "type": "boolean",
        "default": "true",
        "description": "Propagate checkbox selection between parents and children (tri-state). Defaults to true. When false, each checkbox is independent."
      }
    ],
    "events": [
      {
        "name": "tree:change",
        "detail": "{ values: string[] }",
        "description": ""
      },
      {
        "name": "tree:toggle",
        "detail": "",
        "description": ""
      }
    ],
    "methods": [],
    "markup": "<ul data-c42-tree>\n  <li data-c42-tree-node data-value=\"root\">\n    <button data-c42-tree-toggle>▸</button>\n    <input data-c42-tree-checkbox type=\"checkbox\" /> Root\n    <ul data-c42-tree-children>\n      <li data-c42-tree-node data-value=\"child1\">\n        <input data-c42-tree-checkbox type=\"checkbox\" /> Child 1\n      </li>\n    </ul>\n  </li>\n</ul>",
    "dataState": []
  },
  {
    "id": "whatsapp-editor",
    "name": "whatsapp-editor",
    "subpath": "@42/core/whatsapp-editor",
    "category": "inputs",
    "summary": "Textarea + formatting toolbar + live preview for WhatsApp messages",
    "presentational": false,
    "options": [
      {
        "name": "value",
        "type": "string",
        "default": "",
        "description": "Initial textarea value (WhatsApp markup). Overrides existing markup."
      },
      {
        "name": "maxLength",
        "type": "number",
        "default": "4096",
        "description": "Maximum character length. Defaults to 4096 (WhatsApp's text limit)."
      },
      {
        "name": "emojis",
        "type": "boolean",
        "default": "true",
        "description": "Show the emoji picker trigger. Defaults to true."
      },
      {
        "name": "floating",
        "type": "boolean",
        "default": "false",
        "description": "Floating selection toolbar (bubble menu) shown above the current selection. - If the consumer already provides a `[data-c42-wa-floating]` element in the markup, it is always used (progressive enhancement) regardless of this flag. - Set `true` to have the controller inject a default, themed bubble menu (bold / italic / strikethrough / monospace) when no such element exists. Either way the controller owns the show/hide/position logic and event wiring — the flag only decides who supplies the UI. Defaults to `false`."
      },
      {
        "name": "renderPicker",
        "type": "(container: HTMLElement, insert: (emoji: string) => void) => void",
        "default": "",
        "description": "Plugin: render your emoji picker into the panel container. Receives the container element and an `insert` callback. Called once on init — the controller handles show/hide. Mirrors `textarea-emoji`."
      }
    ],
    "events": [
      {
        "name": "whatsappeditor:change",
        "detail": "{ text, html, length }",
        "description": ""
      },
      {
        "name": "whatsappeditor:format",
        "detail": "{ marker, text }",
        "description": ""
      }
    ],
    "methods": [
      "format(marker)",
      "applyBlock(kind)",
      "clearFormatting()",
      "insertText(text)",
      "getText()",
      "getHTML()",
      "focus()",
      "isFloatingOpen()",
      "value"
    ],
    "markup": "<div data-c42-whatsapp-editor>\n  <!-- the editor card: toolbar + input + footer (styled via .c42-whatsapp-editor-surface) -->\n  <div class=\"c42-whatsapp-editor-surface\">\n    <div data-c42-wa-toolbar>\n      <button data-c42-wa-command=\"bold\" aria-label=\"Bold\"><b>B</b></button>\n      <button data-c42-wa-command=\"italic\" aria-label=\"Italic\"><i>I</i></button>\n      <button data-c42-wa-command=\"strikethrough\" aria-label=\"Strikethrough\">S</button>\n      <button data-c42-wa-command=\"monospace\" aria-label=\"Monospace\">&lt;/&gt;</button>\n      <button data-c42-wa-command=\"blockquote\" aria-label=\"Quote\">&gt;</button>\n      <button data-c42-wa-command=\"bullet\" aria-label=\"Bulleted list\">•</button>\n      <button data-c42-wa-command=\"ordered\" aria-label=\"Numbered list\">1.</button>\n      <button data-c42-wa-command=\"clear\" aria-label=\"Clear formatting\">⌫</button>\n    </div>\n    <textarea data-c42-wa-input placeholder=\"Write a message…\"></textarea>\n    <!-- footer: counter left, emoji affordance bottom-right (picker drops below) -->\n    <div class=\"c42-whatsapp-editor-footer\">\n      <span data-c42-wa-counter></span>\n      <span class=\"c42-whatsapp-editor-emoji\">\n        <button data-c42-wa-trigger aria-label=\"Emoji\">🙂</button>\n        <div data-c42-wa-picker hidden></div>\n      </span>\n    </div>\n  </div>\n  <!-- optional bubble toolbar shown above the selection -->\n  <div data-c42-wa-floating class=\"c42-whatsapp-editor-floating\" hidden>\n    <button data-c42-wa-command=\"bold\" aria-label=\"Bold\"><b>B</b></button>\n    <button data-c42-wa-command=\"italic\" aria-label=\"Italic\"><i>I</i></button>\n    <button data-c42-wa-command=\"strikethrough\" aria-label=\"Strikethrough\">S</button>\n    <span class=\"c42-whatsapp-editor-separator\" aria-hidden=\"true\"></span>\n    <button data-c42-wa-command=\"monospace\" aria-label=\"Monospace\">&lt;/&gt;</button>\n  </div>\n  <!-- preview lives OUTSIDE the surface, as a separate block below the editor -->\n  <div data-c42-wa-preview aria-live=\"polite\"></div>\n</div>",
    "dataState": []
  }
]