@mindfiredigital/ignix-lite-engine 1.1.0

package/dist/manifests/radio.json

@@ -0,0 +1,121 @@
+{
+  "component": "radio",
+  "version": "2.0",
+  "description": "Radio input for single selection. Must be wrapped inside a label element.",
+
+  "element": "input",
+
+  "emmet": "label[data-intent=? data-size=?]>(input[type=radio]+{Label})",
+
+  "props": {
+    "type": {
+      "type": "enum",
+      "values": ["radio"],
+      "default": "radio",
+      "native": true,
+      "agent_hint": "Always use type=radio"
+    },
+
+    "checked": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks radio as selected"
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Disables radio"
+    },
+
+    "required": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks radio as required"
+    },
+
+    "name": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Used for grouping radios"
+    },
+
+    "value": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Submitted value in forms"
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["success", "danger", "warning", "neutral"],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Controls radio color"
+    },
+
+    "data-size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "native": false,
+      "agent_hint": "Controls radio size"
+    }
+  },
+
+  "states": ["checked", "disabled"],
+
+  "required_props": ["type"],
+
+  "required_wrapper": "label",
+
+  "forbidden_props": ["class", "variant", "color", "style", "onclick"],
+
+  "do": [
+    "Wrap radio inside label",
+    "Use checked for default state",
+    "Use same name for grouping radios",
+    "Use data-intent for styling",
+    "Use data-size for scaling"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant or color props",
+    "Do not use inline JS handlers",
+    "Do not place radio outside label"
+  ],
+
+  "examples": [
+    {
+      "label": "Basic radio",
+      "emmet": "label>(input[type=radio]+{JavaScript})",
+      "html": "<label><input type=\"radio\" />JavaScript</label>"
+    },
+    {
+      "label": "Checked radio",
+      "emmet": "label>(input[type=radio checked]+{Selected})",
+      "html": "<label><input type=\"radio\" checked />Selected</label>"
+    },
+    {
+      "label": "Disabled radio",
+      "emmet": "label>(input[type=radio disabled]+{Disabled})",
+      "html": "<label><input type=\"radio\" disabled />Disabled</label>"
+    },
+    {
+      "label": "Intent variant",
+      "emmet": "label[data-intent=success]>(input[type=radio checked]+{Success})",
+      "html": "<label data-intent=\"success\"><input type=\"radio\" checked />Success</label>"
+    },
+    {
+      "label": "Size variant",
+      "emmet": "label[data-size=lg]>(input[type=radio]+{Large})",
+      "html": "<label data-size=\"lg\"><input type=\"radio\" />Large</label>"
+    },
+    {
+      "label": "Radio group",
+      "emmet": "label>(input[type=radio name=group value=js]+{JavaScript})",
+      "html": "<label><input type=\"radio\" name=\"group\" value=\"js\" />JavaScript</label>"
+    }
+  ]
+}

package/dist/manifests/select.json

@@ -0,0 +1,109 @@
+{
+  "component": "select",
+  "version": "2.0",
+  "description": "Provides accessible dropdown selection using the native HTML select element with semantic intent variants.",
+
+  "element": "select",
+
+  "emmet": "select[data-intent=primary]>option{Option}",
+
+  "props": {
+    "data-intent": {
+      "type": "enum",
+      "values": ["primary", "danger", "warning", "success", "neutral"],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Use danger for destructive selections, success for positive states, primary for main forms."
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Disable user interaction."
+    },
+
+    "required": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks field as required."
+    },
+
+    "aria-invalid": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Use for validation error state."
+    },
+
+    "multiple": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Enable multiple selection."
+    },
+
+    "name": {
+      "type": "string",
+      "native": true
+    }
+  },
+
+  "states": ["disabled", "invalid", "required", "multiple"],
+
+  "forbidden_props": [
+    "variant",
+    "color",
+    "appearance",
+    "colorScheme",
+    "size",
+    "isDisabled",
+    "class"
+  ],
+
+  "required_props": [],
+  "required_slots": [],
+
+  "do": [
+    "Use data-intent='primary' for default form flows",
+    "Use aria-invalid='true' for validation errors",
+    "Use disabled for unavailable selections",
+    "Use multiple for multi-select lists"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant props",
+    "Do not use color props",
+    "Do not use isDisabled"
+  ],
+
+  "examples": [
+    {
+      "label": "Default select",
+      "emmet": "select[data-intent=neutral]>option{India}",
+      "html": "<select data-intent=\"neutral\"><option>India</option></select>"
+    },
+
+    {
+      "label": "Primary select",
+      "emmet": "select[data-intent=primary]>option{India}",
+      "html": "<select data-intent=\"primary\"><option>India</option></select>"
+    },
+
+    {
+      "label": "Disabled select",
+      "emmet": "select[data-intent=neutral disabled]>option{Disabled}",
+      "html": "<select data-intent=\"neutral\" disabled><option>Disabled</option></select>"
+    },
+
+    {
+      "label": "Invalid select",
+      "emmet": "select[data-intent=neutral aria-invalid=true]>option{Error}",
+      "html": "<select data-intent=\"neutral\" aria-invalid=\"true\"><option>Error</option></select>"
+    },
+
+    {
+      "label": "Multiple select",
+      "emmet": "select[data-intent=neutral multiple]>option{India}+option{USA}",
+      "html": "<select data-intent=\"neutral\" multiple><option>India</option><option>USA</option></select>"
+    }
+  ]
+}

package/dist/manifests/skeleton.json

@@ -0,0 +1,101 @@
+{
+  "component": "skeleton",
+  "version": "2.0",
+  "description": "Displays loading placeholders using native span elements with semantic loading states.",
+
+  "element": "span",
+
+  "emmet": "span[aria-busy=true data-shape=text]",
+
+  "props": {
+    "data-shape": {
+      "type": "enum",
+      "values": ["text", "rect", "circle"],
+      "default": "text",
+      "native": false,
+      "agent_hint": "Use text for content placeholders, rect for cards/banners, circle for avatars."
+    },
+
+    "aria-busy": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Required loading state indicator."
+    },
+
+    "role": {
+      "type": "string",
+      "default": "status",
+      "native": true,
+      "agent_hint": "Use status role for accessibility."
+    },
+
+    "aria-label": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Provide accessible loading description."
+    },
+
+    "data-lines": {
+      "type": "number",
+      "native": false,
+      "agent_hint": "Use for multiple text line placeholders."
+    }
+  },
+
+  "states": ["loading", "text", "rect", "circle", "multiple-lines"],
+
+  "forbidden_props": [
+    "variant",
+    "intent",
+    "color",
+    "appearance",
+    "size",
+    "isLoading",
+    "class"
+  ],
+
+  "required_props": ["aria-busy"],
+
+  "required_slots": [],
+
+  "do": [
+    "Use aria-busy='true' during loading",
+    "Use data-shape='text' for text placeholders",
+    "Use data-shape='rect' for cards and banners",
+    "Use data-shape='circle' for avatars",
+    "Provide aria-label for accessibility"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant props",
+    "Do not use color props",
+    "Do not use skeleton after content loads"
+  ],
+
+  "examples": [
+    {
+      "label": "Text skeleton",
+      "emmet": "span[role=status aria-busy=true aria-label='loading text' data-shape=text]",
+      "html": "<span role=\"status\" aria-busy=\"true\" aria-label=\"loading text\" data-shape=\"text\"></span>"
+    },
+
+    {
+      "label": "Rectangle skeleton",
+      "emmet": "span[role=status aria-busy=true aria-label='loading rectangle' data-shape=rect]",
+      "html": "<span role=\"status\" aria-busy=\"true\" aria-label=\"loading rectangle\" data-shape=\"rect\"></span>"
+    },
+
+    {
+      "label": "Circle skeleton",
+      "emmet": "span[role=status aria-busy=true aria-label='loading avatar' data-shape=circle]",
+      "html": "<span role=\"status\" aria-busy=\"true\" aria-label=\"loading avatar\" data-shape=\"circle\"></span>"
+    },
+
+    {
+      "label": "Multiple lines",
+      "emmet": "span[role=status aria-busy=true data-shape=text data-lines=3]",
+      "html": "<span role=\"status\" aria-busy=\"true\" data-shape=\"text\" data-lines=\"3\"></span>"
+    }
+  ]
+}

package/dist/manifests/tab.json

@@ -0,0 +1,88 @@
+{
+  "component": "tabs",
+  "version": "2.0",
+  "description": "Provides semantic tab navigation using the ix-tabs custom element with keyboard accessibility and visual variants.",
+  "element": "ix-tabs",
+  "emmet": "ix-tabs>button[slot=tab]*3",
+  "props": {
+    "data-variant": {
+      "type": "enum",
+      "values": ["default", "underline", "pill", "gradient"],
+      "default": "default",
+      "native": false,
+      "agent_hint": "Controls tab appearance."
+    },
+    "slot": {
+      "type": "enum",
+      "values": ["tab", "panel"],
+      "native": true,
+      "agent_hint": "tab defines trigger buttons, panel defines tab content."
+    },
+    "aria-selected": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks active tab."
+    },
+    "role": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Automatically applied for accessibility."
+    },
+    "hidden": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Used for inactive panels."
+    }
+  },
+  "states": ["selected", "focused", "keyboard-navigation"],
+  "forbidden_props": [
+    "variant",
+    "color",
+    "size",
+    "appearance",
+    "class",
+    "activeTab"
+  ],
+  "required_props": [],
+  "required_slots": ["tab"],
+  "do": [
+    "Use slot='tab' for tab triggers",
+    "Use slot='panel' for content sections",
+    "Use data-variant for visual styles",
+    "Use aria-selected for active state",
+    "Keep related panels inside ix-tabs"
+  ],
+  "dont": [
+    "Do not use class styling",
+    "Do not use variant prop",
+    "Do not use custom active props",
+    "Do not omit tab slot"
+  ],
+  "examples": [
+    {
+      "label": "Default tabs",
+      "emmet": "ix-tabs>button[slot=tab]*3",
+      "html": "<ix-tabs><button slot=\"tab\">Overview</button><button slot=\"tab\">Analytics</button><button slot=\"tab\">Settings</button></ix-tabs>"
+    },
+    {
+      "label": "Underline tabs",
+      "emmet": "ix-tabs[data-variant=underline]",
+      "html": "<ix-tabs data-variant=\"underline\"><button slot=\"tab\">Profile</button><button slot=\"tab\">Activity</button><button slot=\"tab\">Security</button></ix-tabs>"
+    },
+    {
+      "label": "Pill tabs",
+      "emmet": "ix-tabs[data-variant=pill]",
+      "html": "<ix-tabs data-variant=\"pill\"><button slot=\"tab\">Files</button><button slot=\"tab\">Shared</button><button slot=\"tab\">Starred</button></ix-tabs>"
+    },
+    {
+      "label": "Gradient tabs",
+      "emmet": "ix-tabs[data-variant=gradient]",
+      "html": "<ix-tabs data-variant=\"gradient\"><button slot=\"tab\">Home</button><button slot=\"tab\">Dashboard</button><button slot=\"tab\">Reports</button></ix-tabs>"
+    },
+    {
+      "label": "Tabs with panels",
+      "emmet": "ix-tabs>button[slot=tab]+section[slot=panel]",
+      "html": "<ix-tabs><button slot=\"tab\">Account</button><button slot=\"tab\">Billing</button><section slot=\"panel\">Account content</section><section slot=\"panel\">Billing content</section></ix-tabs>"
+    }
+  ]
+}

package/dist/manifests/table.json

@@ -0,0 +1,92 @@
+{
+  "component": "table",
+  "version": "2.0",
+  "description": "Provides semantic tables with optional sortable columns using the ix-table custom element extension.",
+
+  "element": "table",
+
+  "extends": "ix-table",
+
+  "emmet": "table[is=ix-table]>thead>tr+tbody",
+
+  "props": {
+    "data-sortable": {
+      "type": "boolean",
+      "default": false,
+      "native": false,
+      "agent_hint": "Enables sorting on table header."
+    },
+
+    "aria-sort": {
+      "type": "enum",
+      "values": ["ascending", "descending", "none"],
+      "default": "none",
+      "native": true,
+      "agent_hint": "Current sort direction."
+    },
+
+    "is": {
+      "type": "string",
+      "values": ["ix-table"],
+      "default": "ix-table",
+      "native": true,
+      "agent_hint": "Activates sortable table behavior."
+    }
+  },
+
+  "states": ["default", "ascending", "descending", "sortable"],
+
+  "forbidden_props": ["sortable", "variant", "theme", "direction", "class"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "methods": ["sortColumn(header)"],
+
+  "do": [
+    "Use is=\"ix-table\" for sorting",
+    "Apply data-sortable on th only",
+    "Keep tbody present",
+    "Use aria-sort state"
+  ],
+
+  "dont": [
+    "Do not add data-sortable on td",
+    "Do not omit tbody",
+    "Do not use custom sort attributes",
+    "Do not use class based sorting"
+  ],
+
+  "examples": [
+    {
+      "label": "Default table",
+      "emmet": "table>thead>tr+tbody",
+      "html": "<table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>John</td><td>john@example.com</td></tr></tbody></table>"
+    },
+
+    {
+      "label": "Sortable table",
+      "emmet": "table[is=ix-table]",
+      "html": "<table is=\"ix-table\"><thead><tr><th data-sortable>Name</th><th data-sortable>Age</th></tr></thead><tbody><tr><td>John</td><td>28</td></tr><tr><td>Alex</td><td>21</td></tr></tbody></table>"
+    },
+
+    {
+      "label": "Ascending state",
+      "emmet": "th[data-sortable]",
+      "html": "<th data-sortable aria-sort=\"ascending\">Name</th>"
+    },
+
+    {
+      "label": "Descending state",
+      "emmet": "th[data-sortable]",
+      "html": "<th data-sortable aria-sort=\"descending\">Age</th>"
+    },
+
+    {
+      "label": "Status table",
+      "emmet": "table[is=ix-table]",
+      "html": "<table is=\"ix-table\"><thead><tr><th data-sortable>Name</th><th data-sortable>Status</th></tr></thead><tbody><tr><td>Riya</td><td><mark data-intent=\"success\">Active</mark></td></tr></tbody></table>"
+    }
+  ]
+}

package/dist/manifests/textarea.json

@@ -0,0 +1,117 @@
+{
+  "component": "textarea",
+  "version": "2.0",
+  "description": "Provides semantic multiline text input using the native HTML textarea element with validation states and intent variants.",
+
+  "element": "textarea",
+
+  "emmet": "textarea[rows=3 placeholder=?]",
+
+  "props": {
+    "rows": {
+      "type": "number",
+      "default": 3,
+      "native": true,
+      "agent_hint": "Controls textarea height."
+    },
+
+    "placeholder": {
+      "type": "string",
+      "native": true
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["primary", "danger", "warning", "success", "neutral"],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Use primary for standard forms, danger for destructive flows, success for positive actions."
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Disables interaction."
+    },
+
+    "required": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks field as mandatory."
+    },
+
+    "aria-invalid": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Use for validation errors."
+    }
+  },
+
+  "states": ["required", "disabled", "invalid"],
+
+  "forbidden_props": [
+    "variant",
+    "color",
+    "appearance",
+    "colorScheme",
+    "size",
+    "isDisabled",
+    "class"
+  ],
+
+  "required_props": [],
+  "required_slots": [],
+
+  "do": [
+    "Use rows to control height",
+    "Use aria-invalid='true' for validation errors",
+    "Use disabled for unavailable fields",
+    "Use data-intent for semantic styling",
+    "Use placeholder for guidance text"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant props",
+    "Do not use color props",
+    "Do not use isDisabled"
+  ],
+
+  "examples": [
+    {
+      "label": "Default textarea",
+      "emmet": "textarea[rows=3 placeholder='Enter message']",
+      "html": "<textarea rows=\"3\" placeholder=\"Enter message\"></textarea>"
+    },
+
+    {
+      "label": "Primary textarea",
+      "emmet": "textarea[data-intent=primary rows=3]",
+      "html": "<textarea rows=\"3\" data-intent=\"primary\"></textarea>"
+    },
+
+    {
+      "label": "Required textarea",
+      "emmet": "textarea[rows=3 required]",
+      "html": "<textarea rows=\"3\" required></textarea>"
+    },
+
+    {
+      "label": "Invalid textarea",
+      "emmet": "textarea[rows=3 aria-invalid=true]",
+      "html": "<textarea rows=\"3\" aria-invalid=\"true\"></textarea>"
+    },
+
+    {
+      "label": "Disabled textarea",
+      "emmet": "textarea[rows=3 disabled]",
+      "html": "<textarea rows=\"3\" disabled></textarea>"
+    },
+
+    {
+      "label": "Large textarea",
+      "emmet": "textarea[rows=6 placeholder='Write feedback']",
+      "html": "<textarea rows=\"6\" placeholder=\"Write feedback\"></textarea>"
+    }
+  ]
+}