juxscript 1.0.18 → 1.0.20

package/lib/components/docs-data.json

@@ -165,7 +165,7 @@
     {
       "name": "Chart",
       "category": "Data Components",
-      "description": "Chart component options",
+      "description": "Chart component using Chart.js library",
       "constructor": "jux.chart(id: string, options: ChartOptions = {})",
       "fluentMethods": [
         {
@@ -174,6 +174,12 @@
           "returns": "this",
           "description": "Set type"
         },
+        {
+          "name": "changeType",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set changeType"
+        },
         {
           "name": "data",
           "params": "(value)",
@@ -186,6 +192,144 @@
           "returns": "this",
           "description": "Set options"
         },
+        {
+          "name": "width",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set width"
+        },
+        {
+          "name": "height",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set height"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "title",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set title"
+        },
+        {
+          "name": "subtitle",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set subtitle"
+        },
+        {
+          "name": "xAxisLabel",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set xAxisLabel"
+        },
+        {
+          "name": "yAxisLabel",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set yAxisLabel"
+        },
+        {
+          "name": "theme",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set theme"
+        },
+        {
+          "name": "styleMode",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set styleMode"
+        },
+        {
+          "name": "borderRadius",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set borderRadius"
+        },
+        {
+          "name": "showTicksX",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showTicksX"
+        },
+        {
+          "name": "showTicksY",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showTicksY"
+        },
+        {
+          "name": "showDataLabels",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showDataLabels"
+        },
+        {
+          "name": "showLegend",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showLegend"
+        },
+        {
+          "name": "showDataTable",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set showDataTable"
+        },
+        {
+          "name": "legendOrientation",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set legendOrientation"
+        },
+        {
+          "name": "animate",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set animate"
+        },
+        {
+          "name": "animationDuration",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set animationDuration"
+        },
+        {
+          "name": "chartOrientation",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set chartOrientation"
+        },
+        {
+          "name": "chartDirection",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set chartDirection"
+        },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -199,7 +343,23 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const chart = jux.chart('myChart', {"
+      "example": "jux.chart('id').render()"
+    },
+    {
+      "name": "Chart-types",
+      "category": "Data Components",
+      "description": "Shared chart data point",
+      "constructor": "new Chart-types()",
+      "fluentMethods": [],
+      "example": "jux.chart-types('id').render()"
+    },
+    {
+      "name": "Chart-utils",
+      "category": "Data Components",
+      "description": "Lighten a hex color by a percentage",
+      "constructor": "jux.chart-utils(color: string, percent: number)",
+      "fluentMethods": [],
+      "example": "jux.chart-utils('id').render()"
     },
     {
       "name": "Data",
@@ -212,7 +372,7 @@
     {
       "name": "List",
       "category": "Data Components",
-      "description": "List item interface",
+      "description": "List component",
       "constructor": "jux.list(id: string, options: ListOptions = {})",
       "fluentMethods": [
         {
@@ -222,40 +382,40 @@
           "description": "Set items"
         },
         {
-          "name": "header",
+          "name": "addItem",
           "params": "(value)",
           "returns": "this",
-          "description": "Set header"
+          "description": "Set addItem"
         },
         {
-          "name": "gap",
+          "name": "ordered",
           "params": "(value)",
           "returns": "this",
-          "description": "Set gap"
+          "description": "Set ordered"
         },
         {
-          "name": "direction",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set direction"
+          "description": "Set style"
         },
         {
-          "name": "selectable",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set selectable"
+          "description": "Set class"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "bind",
+          "params": "(event, handler)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set bind"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set sync"
         },
         {
           "name": "add",
@@ -300,25 +460,25 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const myList = jux.list('myList', {"
+      "example": "jux.list('id').render()"
     },
     {
       "name": "Table",
       "category": "Data Components",
-      "description": "Table column configuration",
+      "description": "Column definition",
       "constructor": "jux.table(id: string, options: TableOptions = {})",
       "fluentMethods": [
         {
-          "name": "columns",
+          "name": "rows",
           "params": "(value)",
           "returns": "this",
-          "description": "Set columns"
+          "description": "Set rows"
         },
         {
-          "name": "data",
+          "name": "headers",
           "params": "(value)",
           "returns": "this",
-          "description": "Set data"
+          "description": "Set headers"
         },
         {
           "name": "striped",
@@ -339,10 +499,10 @@
           "description": "Set bordered"
         },
         {
-          "name": "allowHtml",
+          "name": "compact",
           "params": "(value)",
           "returns": "this",
-          "description": "Set allowHtml"
+          "description": "Set compact"
         },
         {
           "name": "style",
@@ -356,6 +516,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -369,12 +541,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "// Auto-generate columns from data"
+      "example": "jux.table('users', {"
     },
     {
       "name": "Alert",
       "category": "UI Components",
-      "description": "Alert component options",
+      "description": "Alert component",
       "constructor": "jux.alert(id: string, options: AlertOptions = {})",
       "fluentMethods": [
         {
@@ -384,16 +556,10 @@
           "description": "Set message"
         },
         {
-          "name": "variant",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set variant"
-        },
-        {
-          "name": "title",
+          "name": "type",
           "params": "(value)",
           "returns": "this",
-          "description": "Set title"
+          "description": "Set type"
         },
         {
           "name": "dismissible",
@@ -420,10 +586,28 @@
           "description": "Set class"
         },
         {
-          "name": "autoDismiss",
-          "params": "(delay)",
+          "name": "bind",
+          "params": "(event, handler)",
           "returns": "this",
-          "description": "Set autoDismiss"
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "show",
+          "params": "()",
+          "returns": "this",
+          "description": "Set show"
+        },
+        {
+          "name": "hide",
+          "params": "()",
+          "returns": "this",
+          "description": "Set hide"
         },
         {
           "name": "render",
@@ -438,32 +622,14 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.alert('my-alert', {"
+      "example": "jux.alert('id').render()"
     },
     {
       "name": "Areachart",
       "category": "UI Components",
-      "description": "Bar chart data point",
-      "constructor": "jux.areachart(id: string, options: AreaChartOptions = {})",
+      "description": "Area chart component - Simple SVG-based area chart",
+      "constructor": "jux.areachart(id: string, options: BarAreaChartOptions = {})",
       "fluentMethods": [
-        {
-          "name": "bindTheme",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindTheme"
-        },
-        {
-          "name": "bindStyleMode",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindStyleMode"
-        },
-        {
-          "name": "bindBorderRadius",
-          "params": "(stateObj)",
-          "returns": "this",
-          "description": "Set bindBorderRadius"
-        },
         {
           "name": "data",
           "params": "(value)",
@@ -506,30 +672,6 @@
           "returns": "this",
           "description": "Set showTicksY"
         },
-        {
-          "name": "showScaleX",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleX"
-        },
-        {
-          "name": "showScaleY",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set showScaleY"
-        },
-        {
-          "name": "scaleXUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleXUnit"
-        },
-        {
-          "name": "scaleYUnit",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set scaleYUnit"
-        },
         {
           "name": "showLegend",
           "params": "(value)",
@@ -590,24 +732,6 @@
           "returns": "this",
           "description": "Set height"
         },
-        {
-          "name": "colors",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set colors"
-        },
-        {
-          "name": "class",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set class"
-        },
-        {
-          "name": "style",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set style"
-        },
         {
           "name": "theme",
           "params": "(value)",
@@ -626,6 +750,18 @@
           "returns": "this",
           "description": "Set borderRadius"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "syncState",
+          "params": "(stateObject, mapping?)",
+          "returns": "this",
+          "description": "Set syncState"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -633,7 +769,7 @@
           "description": "Set render"
         }
       ],
-      "example": "jux.areachart('sales-chart')"
+      "example": "jux.areachart('id').render()"
     },
     {
       "name": "Areachartsmooth",
@@ -833,7 +969,7 @@
     {
       "name": "Badge",
       "category": "UI Components",
-      "description": "Badge component options",
+      "description": "Badge component",
       "constructor": "jux.badge(id: string, options: BadgeOptions = {})",
       "fluentMethods": [
         {
@@ -854,12 +990,6 @@
           "returns": "this",
           "description": "Set size"
         },
-        {
-          "name": "pill",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set pill"
-        },
         {
           "name": "style",
           "params": "(value)",
@@ -872,6 +1002,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -885,7 +1027,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.badge('status', {"
+      "example": "jux.badge('id').render()"
     },
     {
       "name": "Barchart",
@@ -1073,6 +1215,18 @@
           "returns": "this",
           "description": "Set borderRadius"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "syncState",
+          "params": "(stateObject, mapping?)",
+          "returns": "this",
+          "description": "Set syncState"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1154,6 +1308,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1167,12 +1333,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.button('myButton').label('Click Me').click(() => console.log('hi')).render();"
+      "example": "jux.button('id').render()"
     },
     {
       "name": "Card",
       "category": "UI Components",
-      "description": "Card component options",
+      "description": "Card component",
       "constructor": "jux.card(id: string, options: CardOptions = {})",
       "fluentMethods": [
         {
@@ -1181,12 +1347,6 @@
           "returns": "this",
           "description": "Set title"
         },
-        {
-          "name": "subtitle",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set subtitle"
-        },
         {
           "name": "content",
           "params": "(value)",
@@ -1194,16 +1354,10 @@
           "description": "Set content"
         },
         {
-          "name": "image",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set image"
-        },
-        {
-          "name": "variant",
+          "name": "footer",
           "params": "(value)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set footer"
         },
         {
           "name": "style",
@@ -1218,10 +1372,16 @@
           "description": "Set class"
         },
         {
-          "name": "withActions",
-          "params": "()",
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
           "returns": "this",
-          "description": "Set withActions"
+          "description": "Set sync"
         },
         {
           "name": "render",
@@ -1236,12 +1396,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const card = jux.card('myCard', {"
+      "example": "jux.card('id').render()"
     },
     {
       "name": "Checkbox",
       "category": "UI Components",
-      "description": "Two-way binding to state",
+      "description": "Checkbox component",
       "constructor": "jux.checkbox(id: string, options: CheckboxOptions = {})",
       "fluentMethods": [
         {
@@ -1288,10 +1448,22 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "toggle",
+          "params": "()",
+          "returns": "this",
+          "description": "Set toggle"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1305,13 +1477,13 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.checkbox('id').render()"
+      "example": "jux.checkbox('terms', {"
     },
     {
       "name": "Code",
       "category": "UI Components",
-      "description": "Code component options",
-      "constructor": "jux.code(id: string, content?: string, language?: string)",
+      "description": "Code component",
+      "constructor": "jux.code(id: string, options: CodeOptions = {})",
       "fluentMethods": [
         {
           "name": "code",
@@ -1326,28 +1498,28 @@
           "description": "Set language"
         },
         {
-          "name": "lineNumbers",
+          "name": "style",
           "params": "(value)",
           "returns": "this",
-          "description": "Set lineNumbers"
+          "description": "Set style"
         },
         {
-          "name": "highlight",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set highlight"
+          "description": "Set class"
         },
         {
-          "name": "style",
-          "params": "(value)",
+          "name": "bind",
+          "params": "(event, handler)",
           "returns": "this",
-          "description": "Set style"
+          "description": "Set bind"
         },
         {
-          "name": "class",
-          "params": "(value)",
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
           "returns": "this",
-          "description": "Set class"
+          "description": "Set sync"
         },
         {
           "name": "render",
@@ -1362,7 +1534,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const code = jux.code('myCode', 'console.log(\"hello\")', 'javascript');"
+      "example": "jux.code('id').render()"
     },
     {
       "name": "Container",
@@ -1418,7 +1590,7 @@
     {
       "name": "Datepicker",
       "category": "UI Components",
-      "description": "DatePicker component options",
+      "description": "Datepicker component",
       "constructor": "jux.datepicker(id: string, options: DatePickerOptions = {})",
       "fluentMethods": [
         {
@@ -1428,16 +1600,10 @@
           "description": "Set value"
         },
         {
-          "name": "min",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set min"
-        },
-        {
-          "name": "max",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set max"
+          "description": "Set label"
         },
         {
           "name": "placeholder",
@@ -1452,10 +1618,16 @@
           "description": "Set disabled"
         },
         {
-          "name": "name",
+          "name": "min",
           "params": "(value)",
           "returns": "this",
-          "description": "Set name"
+          "description": "Set min"
+        },
+        {
+          "name": "max",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set max"
         },
         {
           "name": "style",
@@ -1471,10 +1643,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1488,12 +1666,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.datepicker('start-date', {"
+      "example": "jux.datepicker('id').render()"
     },
     {
       "name": "Dialog",
       "category": "UI Components",
-      "description": "Dialog component options",
+      "description": "Dialog component",
       "constructor": "jux.dialog(id: string, options: DialogOptions = {})",
       "fluentMethods": [
         {
@@ -1503,28 +1681,28 @@
           "description": "Set title"
         },
         {
-          "name": "message",
+          "name": "content",
           "params": "(value)",
           "returns": "this",
-          "description": "Set message"
+          "description": "Set content"
         },
         {
-          "name": "confirmText",
+          "name": "showClose",
           "params": "(value)",
           "returns": "this",
-          "description": "Set confirmText"
+          "description": "Set showClose"
         },
         {
-          "name": "cancelText",
+          "name": "modal",
           "params": "(value)",
           "returns": "this",
-          "description": "Set cancelText"
+          "description": "Set modal"
         },
         {
-          "name": "variant",
+          "name": "width",
           "params": "(value)",
           "returns": "this",
-          "description": "Set variant"
+          "description": "Set width"
         },
         {
           "name": "style",
@@ -1538,6 +1716,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1551,37 +1741,25 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.dialog('confirm-delete', {"
+      "example": "jux.dialog('id').render()"
     },
     {
       "name": "Divider",
       "category": "UI Components",
-      "description": "Divider - Simple horizontal or vertical divider line",
-      "constructor": "jux.divider(options: DividerOptions = {})",
+      "description": "Divider component",
+      "constructor": "jux.divider(id: string, options: DividerOptions = {})",
       "fluentMethods": [
         {
-          "name": "orientation",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set orientation"
-        },
-        {
-          "name": "thickness",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set thickness"
-        },
-        {
-          "name": "color",
+          "name": "text",
           "params": "(value)",
           "returns": "this",
-          "description": "Set color"
+          "description": "Set text"
         },
         {
-          "name": "margin",
+          "name": "orientation",
           "params": "(value)",
           "returns": "this",
-          "description": "Set margin"
+          "description": "Set orientation"
         },
         {
           "name": "style",
@@ -1590,37 +1768,37 @@
           "description": "Set style"
         },
         {
-          "name": "className",
+          "name": "class",
           "params": "(value)",
           "returns": "this",
-          "description": "Set className"
+          "description": "Set class"
         },
         {
-          "name": "render",
-          "params": "(targetSelector)",
+          "name": "bind",
+          "params": "(event, handler)",
           "returns": "this",
-          "description": "Set render"
+          "description": "Set bind"
         },
         {
-          "name": "replace",
-          "params": "(targetSelector)",
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
           "returns": "this",
-          "description": "Set replace"
+          "description": "Set sync"
         },
         {
-          "name": "before",
-          "params": "(targetSelector)",
+          "name": "render",
+          "params": "(targetId?)",
           "returns": "this",
-          "description": "Set before"
+          "description": "Set render"
         },
         {
-          "name": "after",
-          "params": "(targetSelector)",
+          "name": "renderTo",
+          "params": "(juxComponent)",
           "returns": "this",
-          "description": "Set after"
+          "description": "Set renderTo"
         }
       ],
-      "example": "// Simple horizontal divider"
+      "example": "jux.divider('id').render()"
     },
     {
       "name": "Doughnutchart",
@@ -1808,6 +1986,18 @@
           "returns": "this",
           "description": "Set borderRadius"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "syncState",
+          "params": "(stateObject, mapping?)",
+          "returns": "this",
+          "description": "Set syncState"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1820,7 +2010,7 @@
     {
       "name": "Dropdown",
       "category": "UI Components",
-      "description": "Dropdown menu item",
+      "description": "Dropdown component",
       "constructor": "jux.dropdown(id: string, options: DropdownOptions = {})",
       "fluentMethods": [
         {
@@ -1859,6 +2049,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1872,12 +2074,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.dropdown('actions', {"
+      "example": "jux.dropdown('id').render()"
     },
     {
       "name": "Element",
       "category": "UI Components",
-      "description": "Element component options",
+      "description": "Set the HTML tag type",
       "constructor": "jux.element(id: string, options: ElementOptions = {})",
       "fluentMethods": [
         {
@@ -1887,31 +2089,31 @@
           "description": "Render component to DOM"
         }
       ],
-      "example": "const div = jux.element('myDiv', { tagType: 'div', className: 'container' });"
+      "example": "const container = jux.element('myContainer');"
     },
     {
       "name": "Fileupload",
       "category": "UI Components",
-      "description": "FileUpload component options",
+      "description": "Fileupload component",
       "constructor": "jux.fileupload(id: string, options: FileUploadOptions = {})",
       "fluentMethods": [
         {
-          "name": "accept",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set accept"
+          "description": "Set label"
         },
         {
-          "name": "multiple",
+          "name": "accept",
           "params": "(value)",
           "returns": "this",
-          "description": "Set multiple"
+          "description": "Set accept"
         },
         {
-          "name": "maxSize",
+          "name": "multiple",
           "params": "(value)",
           "returns": "this",
-          "description": "Set maxSize"
+          "description": "Set multiple"
         },
         {
           "name": "disabled",
@@ -1920,16 +2122,10 @@
           "description": "Set disabled"
         },
         {
-          "name": "text",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set text"
-        },
-        {
-          "name": "dragText",
+          "name": "name",
           "params": "(value)",
           "returns": "this",
-          "description": "Set dragText"
+          "description": "Set name"
         },
         {
           "name": "style",
@@ -1943,6 +2139,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -1956,7 +2164,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.fileupload('docs', {"
+      "example": "jux.fileupload('id').render()"
     },
     {
       "name": "Footer",
@@ -2096,11 +2304,29 @@
           "returns": "this",
           "description": "Set style"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
         }
       ],
       "example": "jux.heading('title', { level: 1, text: 'Welcome' }).render('#app');"
@@ -2167,6 +2393,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2182,6 +2420,83 @@
       ],
       "example": "const hero = jux.hero('myHero', {"
     },
+    {
+      "name": "Icon",
+      "category": "UI Components",
+      "description": "Icon component options",
+      "constructor": "jux.icon(id: string, options: IconOptions)",
+      "fluentMethods": [
+        {
+          "name": "value",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set value"
+        },
+        {
+          "name": "size",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set size"
+        },
+        {
+          "name": "color",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set color"
+        },
+        {
+          "name": "useEmoji",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set useEmoji"
+        },
+        {
+          "name": "style",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set style"
+        },
+        {
+          "name": "class",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set class"
+        },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
+        {
+          "name": "render",
+          "params": "(targetId?)",
+          "returns": "this",
+          "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
+        }
+      ],
+      "example": "// Render Lucide icon from emoji"
+    },
+    {
+      "name": "Icons",
+      "category": "UI Components",
+      "description": "Icon utilities for components",
+      "constructor": "jux.icons(value: string)",
+      "fluentMethods": [],
+      "example": "const icon = renderIcon('🚀');        // Lucide rocket icon"
+    },
     {
       "name": "Include",
       "category": "UI Components",
@@ -2230,6 +2545,12 @@
           "returns": "this",
           "description": "Set withPrefetch"
         },
+        {
+          "name": "withJson",
+          "params": "()",
+          "returns": "this",
+          "description": "Set withJson"
+        },
         {
           "name": "with",
           "params": "(options)",
@@ -2285,7 +2606,7 @@
           "description": "Set remove"
         }
       ],
-      "example": "jux.include('styles.css');"
+      "example": "const config = await jux.include('config.json').asJson();"
     },
     {
       "name": "Input",
@@ -2317,6 +2638,12 @@
           "returns": "this",
           "description": "Set label"
         },
+        {
+          "name": "icon",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set icon"
+        },
         {
           "name": "required",
           "params": "(value)",
@@ -2391,10 +2718,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2408,7 +2741,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.input('username')"
+      "example": "jux.input('id').render()"
     },
     {
       "name": "Kpicard",
@@ -2623,6 +2956,18 @@
       "description": "Menu item configuration",
       "constructor": "jux.menu(id: string, options: MenuOptions = {})",
       "fluentMethods": [
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "items",
           "params": "(value)",
@@ -2728,6 +3073,18 @@
           "returns": "this",
           "description": "Set close"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2746,7 +3103,7 @@
     {
       "name": "Nav",
       "category": "UI Components",
-      "description": "Nav item configuration",
+      "description": "Set active state on items based on current request path",
       "constructor": "jux.nav(id: string, options: NavOptions = {})",
       "fluentMethods": [
         {
@@ -2761,12 +3118,24 @@
           "returns": "this",
           "description": "Set addItem"
         },
+        {
+          "name": "brand",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set brand"
+        },
         {
           "name": "variant",
           "params": "(value)",
           "returns": "this",
           "description": "Set variant"
         },
+        {
+          "name": "sticky",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set sticky"
+        },
         {
           "name": "style",
           "params": "(value)",
@@ -2779,6 +3148,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2792,7 +3173,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const nav = jux.nav('myNav', {"
+      "example": "jux.nav('id').render()"
     },
     {
       "name": "Paragraph",
@@ -2818,19 +3199,37 @@
           "returns": "this",
           "description": "Set style"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
           "returns": "this",
           "description": "Set render"
+        },
+        {
+          "name": "renderTo",
+          "params": "(juxComponent)",
+          "returns": "this",
+          "description": "Set renderTo"
         }
       ],
-      "example": "jux.paragraph('intro', { text: 'Welcome to JUX' }).render('#app');"
+      "example": "jux.paragraph('id').render()"
     },
     {
       "name": "Progress",
       "category": "UI Components",
-      "description": "Progress component options",
+      "description": "Progress component",
       "constructor": "jux.progress(id: string, options: ProgressOptions = {})",
       "fluentMethods": [
         {
@@ -2895,10 +3294,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2912,7 +3317,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.progress('upload', {"
+      "example": "jux.progress('id').render()"
     },
     {
       "name": "Radio",
@@ -2964,10 +3369,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -2994,7 +3405,7 @@
     {
       "name": "Select",
       "category": "UI Components",
-      "description": "Two-way binding to state",
+      "description": "Bind event handler (stores for wiring in render)",
       "constructor": "jux.select(id: string, options: SelectOptions = {})",
       "fluentMethods": [
         {
@@ -3053,10 +3464,16 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -3075,15 +3492,9 @@
     {
       "name": "Sidebar",
       "category": "UI Components",
-      "description": "Sidebar component options",
+      "description": "Sidebar component",
       "constructor": "jux.sidebar(id: string, options: SidebarOptions = {})",
       "fluentMethods": [
-        {
-          "name": "title",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set title"
-        },
         {
           "name": "width",
           "params": "(value)",
@@ -3121,10 +3532,16 @@
           "description": "Set class"
         },
         {
-          "name": "toggle",
-          "params": "()",
+          "name": "bind",
+          "params": "(event, handler)",
           "returns": "this",
-          "description": "Set toggle"
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, transform?)",
+          "returns": "this",
+          "description": "Set sync"
         },
         {
           "name": "render",
@@ -3139,20 +3556,14 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const sidebar = jux.sidebar('mySidebar', {"
+      "example": "jux.sidebar('id').render()"
     },
     {
       "name": "Switch",
       "category": "UI Components",
-      "description": "Switch component options",
+      "description": "Bind event handler (stores for wiring in render)",
       "constructor": "jux.switch(id: string, options: SwitchOptions = {})",
       "fluentMethods": [
-        {
-          "name": "label",
-          "params": "(value)",
-          "returns": "this",
-          "description": "Set label"
-        },
         {
           "name": "checked",
           "params": "(value)",
@@ -3160,10 +3571,10 @@
           "description": "Set checked"
         },
         {
-          "name": "disabled",
+          "name": "label",
           "params": "(value)",
           "returns": "this",
-          "description": "Set disabled"
+          "description": "Set label"
         },
         {
           "name": "name",
@@ -3171,6 +3582,12 @@
           "returns": "this",
           "description": "Set name"
         },
+        {
+          "name": "disabled",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set disabled"
+        },
         {
           "name": "style",
           "params": "(value)",
@@ -3185,15 +3602,15 @@
         },
         {
           "name": "bind",
-          "params": "(stateObj)",
+          "params": "(event, handler)",
           "returns": "this",
           "description": "Set bind"
         },
         {
-          "name": "toggle",
-          "params": "()",
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
           "returns": "this",
-          "description": "Set toggle"
+          "description": "Set sync"
         },
         {
           "name": "render",
@@ -3208,12 +3625,12 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "jux.switch('notifications', {"
+      "example": "jux.switch('id').render()"
     },
     {
       "name": "Tabs",
       "category": "UI Components",
-      "description": "Tab configuration",
+      "description": "Tabs component",
       "constructor": "jux.tabs(id: string, options: TabsOptions = {})",
       "fluentMethods": [
         {
@@ -3234,6 +3651,12 @@
           "returns": "this",
           "description": "Set activeTab"
         },
+        {
+          "name": "variant",
+          "params": "(value)",
+          "returns": "this",
+          "description": "Set variant"
+        },
         {
           "name": "style",
           "params": "(value)",
@@ -3246,6 +3669,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "render",
           "params": "(targetId?)",
@@ -3259,7 +3694,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "const tabs = jux.tabs('myTabs', {"
+      "example": "jux.tabs('id').render()"
     },
     {
       "name": "Theme-toggle",
@@ -3384,7 +3819,7 @@
     {
       "name": "Tooltip",
       "category": "UI Components",
-      "description": "Tooltip component options",
+      "description": "Attach tooltip to an element",
       "constructor": "jux.tooltip(id: string, options: TooltipOptions = {})",
       "fluentMethods": [
         {
@@ -3417,6 +3852,18 @@
           "returns": "this",
           "description": "Set class"
         },
+        {
+          "name": "bind",
+          "params": "(event, handler)",
+          "returns": "this",
+          "description": "Set bind"
+        },
+        {
+          "name": "sync",
+          "params": "(property, stateObj, toState?, toComponent?)",
+          "returns": "this",
+          "description": "Set sync"
+        },
         {
           "name": "attachTo",
           "params": "(target)",
@@ -3436,7 +3883,7 @@
           "description": "Set renderTo"
         }
       ],
-      "example": "// Attach to existing element"
+      "example": "jux.tooltip('id').render()"
     },
     {
       "name": "View",
@@ -3518,5 +3965,5 @@
     }
   ],
   "version": "1.0.0",
-  "lastUpdated": "2026-01-22T14:21:19.068Z"
+  "lastUpdated": "2026-01-23T20:33:28.828Z"
 }