@mindfiredigital/ignix-lite-engine 1.1.0

package/dist/manifests/badge.json

@@ -0,0 +1,74 @@
+{
+  "component": "badge",
+  "version": "2.0",
+  "description": "Status indicator using mark or span[role=status] with intent styling.",
+
+  "element": "badge",
+
+  "emmet": "mark[data-intent=?]{Label}",
+  "tokens": 3,
+
+  "props": {
+    "data-intent": {
+      "type": "enum",
+      "values": ["success", "danger", "warning", "neutral"],
+      "default": "neutral",
+      "native": false,
+      "agent_hint": "Controls badge color"
+    },
+
+    "role": {
+      "type": "enum",
+      "values": ["status"],
+      "native": true,
+      "agent_hint": "Required when using span"
+    }
+  },
+
+  "allowed_elements": ["mark", "span"],
+
+  "required_conditions": ["span must have role=status"],
+
+  "states": [],
+
+  "required_props": [],
+
+  "forbidden_props": ["class", "variant", "color", "style", "onclick"],
+
+  "do": [
+    "Use mark for standard badges",
+    "Use span with role=status for accessibility cases",
+    "Use data-intent to convey meaning",
+    "Keep text short"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant or color props",
+    "Do not attach JS handlers",
+    "Do not use span without role=status"
+  ],
+
+  "examples": [
+    {
+      "label": "Basic badge",
+      "emmet": "mark[data-intent=neutral]{Active}",
+      "html": "<mark data-intent=\"neutral\">Active</mark>"
+    },
+    {
+      "label": "Success badge",
+      "emmet": "mark[data-intent=success]{Active}",
+      "html": "<mark data-intent=\"success\">Active</mark>"
+    },
+    {
+      "label": "Danger badge",
+      "emmet": "mark[data-intent=danger]{Error}",
+      "html": "<mark data-intent=\"danger\">Error</mark>"
+    },
+    {
+      "label": "Status badge",
+      "emmet": "span[role=status data-intent=success]{Active}",
+      "html": "<span role=\"status\" data-intent=\"success\">Active</span>"
+    }
+  ]
+}

package/dist/manifests/breadcrumb.json

@@ -0,0 +1,87 @@
+{
+  "component": "breadcrumb",
+  "version": "2.0",
+  "description": "Displays hierarchical navigation path using native nav > ol > li > a structure.",
+
+  "element": "nav",
+
+  "emmet": "nav[aria-label=Breadcrumb]>ol>(li>a[href=?])*3",
+
+  "props": {
+    "data-style": {
+      "type": "enum",
+
+      "values": ["chevron", "slash", "guillemet", "arrow", "thread", "pipe"],
+
+      "default": "chevron",
+      "native": false,
+      "agent_hint": "Controls breadcrumb separator style."
+    },
+
+    "data-intent": {
+      "type": "enum",
+
+      "values": ["primary", "success", "warning", "danger", "gradient"],
+
+      "default": "primary",
+      "native": false,
+      "agent_hint": "Controls active breadcrumb color intent."
+    },
+
+    "aria-label": {
+      "type": "string",
+      "native": true,
+      "required": true,
+      "agent_hint": "Use aria-label='Breadcrumb' for accessibility."
+    }
+  },
+
+  "states": [],
+  "slots": {},
+
+  "forbidden_props": [
+    "variant",
+    "color",
+    "appearance",
+    "separator",
+    "items",
+    "activeItem",
+    "class"
+  ],
+
+  "required_props": ["aria-label"],
+
+  "required_slots": [],
+
+  "do": [
+    "Use nav as breadcrumb container",
+    "Use ordered list structure",
+    "Mark current page using aria-current='page'"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not replace nav with div",
+    "Do not pass breadcrumb items as props"
+  ],
+
+  "examples": [
+    {
+      "label": "Default breadcrumb",
+      "emmet": "nav[aria-label=Breadcrumb]>ol>(li>a[href=?])*3",
+      "html": "<nav aria-label=\"Breadcrumb\"><ol><li><a href=\"#\">Home</a></li><li><a href=\"#\">Docs</a></li><li><a aria-current=\"page\">Breadcrumb</a></li></ol></nav>"
+    },
+
+    {
+      "label": "Slash style",
+      "emmet": "nav[aria-label=Breadcrumb data-style=slash]>ol>(li>a[href=?])*3",
+      "html": "<nav aria-label=\"Breadcrumb\" data-style=\"slash\"></nav>"
+    },
+
+    {
+      "label": "Danger intent",
+      "emmet": "nav[aria-label=Breadcrumb data-intent=danger]>ol>(li>a[href=?])*3",
+      "html": "<nav aria-label=\"Breadcrumb\" data-intent=\"danger\"></nav>"
+    }
+  ]
+}

package/dist/manifests/button.json

@@ -0,0 +1,85 @@
+{
+  "component": "button",
+  "version": "2.0",
+  "description": "Triggers an action. Renders as native <button>.",
+
+  "element": "button",
+
+  "emmet": "button[data-intent=?]{label}",
+  
+
+  "props": {
+    "data-intent": {
+      "type": "enum",
+      "values": ["primary", "danger", "warning", "success", "neutral", "ghost"],
+      "default": "primary",
+      "native": false,
+      "agent_hint": "Use danger for destructive actions. Use ghost for secondary actions."
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Use native disabled attribute"
+    },
+
+    "aria-busy": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Use for loading state"
+    },
+
+    "type": {
+      "type": "enum",
+      "values": ["button", "submit", "reset"],
+      "default": "button",
+      "native": true
+    }
+  },
+
+  "states": ["disabled", "aria-busy"],
+
+  "forbidden_props": [
+    "variant",
+    "color",
+    "appearance",
+    "colorScheme",
+    "isLoading",
+    "isDisabled",
+    "size",
+    "class"
+  ],
+
+  "required_props": [],
+  "required_slots": [],
+
+  "do": [
+    "Use data-intent='danger' for destructive actions",
+    "Use aria-busy='true' for loading state",
+    "Use type='submit' inside forms"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not use variant or color props",
+    "Do not use isLoading or isDisabled"
+  ],
+
+  "examples": [
+    {
+      "label": "Primary button",
+      "emmet": "button[data-intent=primary]{Save}",
+      "html": "<button data-intent=\"primary\">Save</button>"
+    },
+    {
+      "label": "Danger button",
+      "emmet": "button[data-intent=danger]{Delete}",
+      "html": "<button data-intent=\"danger\">Delete</button>"
+    },
+    {
+      "label": "Loading button",
+      "emmet": "button[aria-busy=true]{Saving...}",
+      "html": "<button aria-busy=\"true\">Saving...</button>"
+    }
+  ]
+}

package/dist/manifests/card.json

@@ -0,0 +1,91 @@
+{
+  "component": "card",
+  "version": "2.0",
+  "description": "Displays structured content using semantic slots for avatar, title, metadata, body, actions, and footer. Renders as native article element.",
+
+  "element": "article",
+
+  "emmet": "article>(img[slot=avatar])+(span[slot=title])+(p[slot=body])",
+  
+
+  "props": {},
+
+  "states": [],
+
+  "slots": {
+    "avatar": {
+      "required": false,
+
+      "element": ["img", "span"],
+
+      "agent_hint": "Avatar image or visual content."
+    },
+
+    "title": {
+      "required": true,
+
+      "element": ["span", "h1", "h2", "h3"],
+
+      "agent_hint": "Primary card heading."
+    },
+
+    "meta": {
+      "required": false,
+
+      "element": ["span", "small"],
+
+      "agent_hint": "Subtitle or metadata."
+    },
+
+    "body": {
+      "required": true,
+
+      "element": ["p"],
+
+      "agent_hint": "Main content area."
+    },
+
+    "action": {
+      "required": false,
+
+      "element": ["button", "a"],
+
+      "agent_hint": "Primary action area."
+    },
+
+    "footer": {
+      "required": false,
+
+      "element": ["span", "small"],
+
+      "agent_hint": "Footer metadata."
+    }
+  },
+
+  "forbidden_props": [
+    "title",
+    "subtitle",
+    "avatar",
+    "image",
+    "body",
+    "footer",
+    "actionLabel",
+    "class"
+  ],
+
+  "required_props": [],
+
+  "required_slots": ["title", "body"],
+
+  "do": [
+    "Use slot attributes for content placement",
+    "Use article as card container",
+    "Place actions inside slot='action'"
+  ],
+
+  "dont": [
+    "Do not pass title or body as props",
+    "Do not replace slots with attributes",
+    "Do not use class attribute"
+  ]
+}

package/dist/manifests/checkbox.json

@@ -0,0 +1,122 @@
+{
+  "component": "checkbox",
+  "version": "2.0",
+  "description": "Checkbox for boolean selection. Must be wrapped inside a label element.",
+
+  "element": "input",
+
+  "emmet": "label[data-intent=? data-size=?]>(input[type=checkbox]+{Label})",
+  
+
+  "props": {
+    "type": {
+      "type": "enum",
+      "values": ["checkbox"],
+      "default": "checkbox",
+      "native": true,
+      "agent_hint": "Always use type=checkbox"
+    },
+
+    "checked": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks checkbox as checked"
+    },
+
+    "disabled": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Disables checkbox"
+    },
+
+    "required": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Marks checkbox as required"
+    },
+
+    "name": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Used for grouping checkboxes"
+    },
+
+    "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 checkbox color (applied on label)"
+    },
+
+    "data-size": {
+      "type": "enum",
+      "values": ["sm", "md", "lg"],
+      "default": "md",
+      "native": false,
+      "agent_hint": "Controls checkbox size (applied on label)"
+    }
+  },
+
+  "states": ["checked", "disabled"],
+
+  "required_props": ["type"],
+
+  "required_wrapper": "label",
+
+  "forbidden_props": ["class", "variant", "color", "style", "onclick"],
+
+  "do": [
+    "Wrap checkbox inside label",
+    "Use checked for default state",
+    "Use name and value for grouping",
+    "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 checkbox outside label"
+  ],
+
+  "examples": [
+    {
+      "label": "Basic checkbox",
+      "emmet": "label>(input[type=checkbox]+{Accept terms})",
+      "html": "<label><input type=\"checkbox\" />Accept terms</label>"
+    },
+    {
+      "label": "Checked checkbox",
+      "emmet": "label>(input[type=checkbox checked]+{Checked})",
+      "html": "<label><input type=\"checkbox\" checked />Checked</label>"
+    },
+    {
+      "label": "Disabled checkbox",
+      "emmet": "label>(input[type=checkbox disabled]+{Disabled})",
+      "html": "<label><input type=\"checkbox\" disabled />Disabled</label>"
+    },
+    {
+      "label": "Intent variant",
+      "emmet": "label[data-intent=success]>(input[type=checkbox checked]+{Success})",
+      "html": "<label data-intent=\"success\"><input type=\"checkbox\" checked />Success</label>"
+    },
+    {
+      "label": "Size variant",
+      "emmet": "label[data-size=lg]>(input[type=checkbox]+{Large})",
+      "html": "<label data-size=\"lg\"><input type=\"checkbox\" />Large</label>"
+    },
+    {
+      "label": "Checkbox group",
+      "emmet": "label>(input[type=checkbox name=lang value=js]+{JavaScript})",
+      "html": "<label><input type=\"checkbox\" name=\"lang\" value=\"js\" />JavaScript</label>"
+    }
+  ]
+}

package/dist/manifests/codeblock.json

@@ -0,0 +1,63 @@
+{
+  "component": "code",
+  "version": "2.0",
+
+  "description": "Displays formatted code snippets using native pre and code elements with language metadata support and horizontal scrolling.",
+
+  "element": "pre > code",
+
+  "emmet": "pre>code[data-lang=?]{content}",
+  
+
+  "props": {
+    "data-lang": {
+      "type": "string",
+      "values": ["js", "ts", "python", "bash", "html", "css", "json"],
+      "default": "text",
+      "native": false,
+      "agent_hint": "Specify language metadata for code examples."
+    }
+  },
+
+  "states": [],
+
+  "forbidden_props": ["language", "variant", "theme", "class"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "required_children": ["code"],
+
+  "do": [
+    "Wrap code inside pre element",
+    "Use data-lang to indicate language",
+    "Use code element for code content"
+  ],
+
+  "dont": [
+    "Do not use div instead of pre",
+    "Do not use language prop",
+    "Do not use class attribute"
+  ],
+
+  "examples": [
+    {
+      "label": "JavaScript code",
+      "emmet": "pre>code[data-lang=js]{function greet(){}}",
+      "html": "<pre><code data-lang=\"js\">function greet(){}</code></pre>"
+    },
+
+    {
+      "label": "Python code",
+      "emmet": "pre>code[data-lang=python]{print('Hello')}",
+      "html": "<pre><code data-lang=\"python\">print('Hello')</code></pre>"
+    },
+
+    {
+      "label": "Bash command",
+      "emmet": "pre>code[data-lang=bash]{npm install ignix-lite}",
+      "html": "<pre><code data-lang=\"bash\">npm install ignix-lite</code></pre>"
+    }
+  ]
+}

package/dist/manifests/combobox.json

@@ -0,0 +1,33 @@
+{
+  "component": "ix-combobox",
+  "element": "ix-combobox",
+
+  "emmet": "ix-combobox>(label>(span[data-chips])+input[placeholder=?]+button[data-clear]{Clear})+ul>(li{Option})*",
+
+  "required_children": ["label", "input", "ul", "li"],
+
+  "optional_children": ["[data-chips]", "button[data-clear]"],
+
+  "props": {
+    "multiple": {
+      "type": "boolean",
+      "native": true,
+      "agent_hint": "Enables chip rendering and multi-select mode."
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["primary", "success", "warning", "danger", "gradient"]
+    },
+
+    "data-clear": {
+      "type": "boolean",
+      "native": false
+    },
+
+    "data-chips": {
+      "type": "boolean",
+      "native": false
+    }
+  }
+}

package/dist/manifests/dialog.json

@@ -0,0 +1,64 @@
+{
+  "component": "dialog",
+  "version": "2.0",
+  "description": "Modal dialog used for confirmations, warnings, and information display.",
+
+  "element": "dialog",
+
+  "emmet": "dialog#id[data-intent=?]>(h2{Title}+p{Message}+button{Cancel}+button{Confirm})",
+
+  "props": {
+    "id": {
+      "type": "string",
+      "native": true,
+      "agent_hint": "Unique identifier used to control dialog"
+    },
+
+    "data-intent": {
+      "type": "enum",
+      "values": ["danger", "warning", "info"],
+      "default": "info",
+      "native": false,
+      "agent_hint": "Controls dialog style (danger for destructive, warning for caution)"
+    }
+  },
+
+  "states": [],
+
+  "required_props": ["id"],
+
+  "required_slots": [],
+
+  "forbidden_props": ["class", "variant", "color", "style"],
+
+  "do": [
+    "Always include a heading (h2)",
+    "Include descriptive text using p tags",
+    "Provide at least one action button",
+    "Use data-intent for styling"
+  ],
+
+  "dont": [
+    "Do not use class attribute",
+    "Do not attach JS handlers like onclick",
+    "Do not leave dialog empty"
+  ],
+
+  "examples": [
+    {
+      "label": "Confirm dialog",
+      "emmet": "dialog#confirm[data-intent=danger]>(h2{Confirm}+p{Are you sure?}+button{Cancel}+button{Delete})",
+      "html": "<dialog id=\"confirm\" data-intent=\"danger\"><h2>Confirm</h2><p>Are you sure?</p><button>Cancel</button><button>Delete</button></dialog>"
+    },
+    {
+      "label": "Warning dialog",
+      "emmet": "dialog#warn[data-intent=warning]>(h2{Warning}+p{Unsaved changes}+button{Close})",
+      "html": "<dialog id=\"warn\" data-intent=\"warning\"><h2>Warning</h2><p>Unsaved changes</p><button>Close</button></dialog>"
+    },
+    {
+      "label": "Info dialog",
+      "emmet": "dialog#info[data-intent=info]>(h2{Info}+p{Session expiring}+button{Close})",
+      "html": "<dialog id=\"info\" data-intent=\"info\"><h2>Info</h2><p>Session expiring</p><button>Close</button></dialog>"
+    }
+  ]
+}

package/dist/manifests/divider.json

@@ -0,0 +1,47 @@
+{
+  "component": "divider",
+  "version": "2.0",
+  "description": "Visual separator using semantic hr element with orientation support.",
+
+  "element": "hr",
+
+  "emmet": "hr",
+
+  "props": {
+    "data-orientation": {
+      "type": "string",
+
+      "values": ["horizontal", "vertical"],
+
+      "default": "horizontal",
+
+      "agent_hint": "Controls divider direction."
+    }
+  },
+
+  "states": [],
+
+  "forbidden_props": ["class"],
+
+  "required_props": [],
+
+  "required_slots": [],
+
+  "do": ["Use hr element", "Use data-orientation for vertical mode"],
+
+  "dont": ["Do not use div wrappers", "Do not use class attribute"],
+
+  "examples": [
+    {
+      "label": "Horizontal",
+      "emmet": "hr",
+      "html": "<hr>"
+    },
+
+    {
+      "label": "Vertical",
+      "emmet": "hr[data-orientation=vertical]",
+      "html": "<hr data-orientation=\"vertical\">"
+    }
+  ]
+}