@kodaris/krubble-components 1.0.0

package/custom-elements.json

@@ -0,0 +1,2156 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "dist/alert.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRAlert",
+          "default": "class KRAlert extends LitElement { constructor() { super(...arguments); /** * The alert type/severity */ this.type = 'info'; /** * Whether the alert can be dismissed */ this.dismissible = false; /** * Whether the alert is visible */ this.visible = true; } /** Handles dismiss button click */ _handleDismiss() { this.visible = false; this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true })); } render() { const icons = { info: html `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>`, success: html `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>`, warning: html `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>`, error: html `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>`, }; return html ` <div class=${classMap({ 'alert': true, ['alert--' + this.type]: true, 'alert--hidden': !this.visible })} role=\"alert\" > ${icons[this.type]} <div class=\"content\"> ${this.header ? html `<h4 class=\"header\">${this.header}</h4>` : nothing} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible ? html ` <button class=\"dismiss\" type=\"button\" aria-label=\"Dismiss alert\" @click=${this._handleDismiss} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"> <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/> </svg> </button> ` : nothing} </div> `; } }",
+          "description": "A customizable alert component for displaying important information to users."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "dist/alert.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "./accordion/accordion.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "./alert.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "KRButton",
+            "module": "./button/button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "./code-demo/code-demo.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "./context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "./dialog/dialog.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "DialogRef",
+            "module": "./dialog/dialog.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "./form/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/krubble.bundled.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t"
+        },
+        {
+          "kind": "variable",
+          "name": "e"
+        },
+        {
+          "kind": "variable",
+          "name": "KRAccordion",
+          "default": "class KRAccordion extends i$1 { constructor() { super(...arguments); /** * Section header text */ this.header = ''; /** * Whether the accordion is expanded */ this.expanded = false; } toggle() { this.expanded = !this.expanded; } render() { return x ` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `; } }",
+          "description": "Accordion component for collapsible content sections.\n\n## Usage\n```html\n<kr-accordion header=\"Basic Information\" expanded>\n  <div>Content here</div>\n</kr-accordion>\n```"
+        },
+        {
+          "kind": "variable",
+          "name": "KRAlert",
+          "default": "class KRAlert extends i$1 { constructor() { super(...arguments); /** * The alert type/severity */ this.type = 'info'; /** * Whether the alert can be dismissed */ this.dismissible = false; /** * Whether the alert is visible */ this.visible = true; } /** Handles dismiss button click */ _handleDismiss() { this.visible = false; this.dispatchEvent(new CustomEvent('dismiss', { bubbles: true, composed: true })); } render() { const icons = { info: x `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>`, success: x `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>`, warning: x `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>`, error: x `<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>`, }; return x ` <div class=${e$1({ 'alert': true, ['alert--' + this.type]: true, 'alert--hidden': !this.visible })} role=\"alert\" > ${icons[this.type]} <div class=\"content\"> ${this.header ? x `<h4 class=\"header\">${this.header}</h4>` : E} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible ? x ` <button class=\"dismiss\" type=\"button\" aria-label=\"Dismiss alert\" @click=${this._handleDismiss} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"> <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/> </svg> </button> ` : E} </div> `; } }",
+          "description": "A customizable alert component for displaying important information to users."
+        },
+        {
+          "kind": "variable",
+          "name": "KRButton",
+          "default": "class KRButton extends i$1 { constructor() { super(...arguments); /** * The button variant style */ this.variant = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; } render() { const sizeClass = this.size !== 'medium' ? this.size : ''; return x ` <button part=\"button\" class=\"${this.variant} ${sizeClass}\" ?disabled=${this.disabled} > <slot></slot> </button> `; } }",
+          "description": "A customizable button component."
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "e",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_$AU",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_$AT",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "i"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_$AS",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "e"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "i",
+            "module": "dist/krubble.bundled.js"
+          },
+          "tagName": "t",
+          "customElement": true
+        },
+        {
+          "kind": "variable",
+          "name": "KRCodeDemo",
+          "default": "class KRCodeDemo extends i$1 { constructor() { super(...arguments); this.language = 'html'; this.code = ''; this.activeTab = 'preview'; this.copied = false; } setTab(tab) { this.activeTab = tab; } getHighlightedCode() { if (!this.code) return ''; if (window.Prism && window.Prism.languages[this.language]) { return window.Prism.highlight(this.code, window.Prism.languages[this.language], this.language); } // Fallback: escape HTML and return plain text return this.escapeHtml(this.code); } escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } async copyCode() { if (!this.code) return; try { await navigator.clipboard.writeText(this.code); this.copied = true; setTimeout(() => { this.copied = false; }, 2000); } catch (err) { console.error('Failed to copy code:', err); } } render() { return x ` <div class=\"tabs\"> <button class=${e$1({ tab: true, 'tab--active': this.activeTab === 'preview' })} @click=${() => this.setTab('preview')} > Preview </button> <button class=${e$1({ tab: true, 'tab--active': this.activeTab === 'code' })} @click=${() => this.setTab('code')} > Code </button> </div> <div class=${e$1({ panel: true, 'panel--active': this.activeTab === 'preview', preview: true })}> <slot name=\"preview\"></slot> </div> <div class=${e$1({ panel: true, 'panel--active': this.activeTab === 'code', 'code-container': true })}> <button class=${e$1({ 'copy-btn': true, 'copy-btn--copied': this.copied })} @click=${this.copyCode} > ${this.copied ? 'Copied!' : 'Copy'} </button> <pre class=\"code\"><code>${o(this.getHighlightedCode())}</code></pre> </div> `; } }",
+          "description": "Code demo component with Preview/Code tabs and syntax highlighting.\n\nUsage:\n```html\n<kr-code-demo language=\"html\">\n  <div slot=\"preview\">\n    <kr-button>Click me</kr-button>\n  </div>\n  <script slot=\"code\" type=\"text/plain\">\n    <kr-button>Click me</kr-button>\n  </script>\n</kr-code-demo>\n```\n\nRequires Prism.js to be loaded globally for syntax highlighting."
+        },
+        {
+          "kind": "variable",
+          "name": "KRContextMenu",
+          "default": "class KRContextMenu extends i$1 { constructor() { super(...arguments); this.items = []; this.resolvePromise = null; this.boundHandleOutsideClick = this.handleOutsideClick.bind(this); this.boundHandleKeyDown = this.handleKeyDown.bind(this); } static async open(options) { // Remove any existing context menu const existing = document.querySelector('kr-context-menu'); if (existing) { existing.remove(); } // Create and position the menu const menu = document.createElement('kr-context-menu'); document.body.appendChild(menu); return menu.show(options); } async show(options) { this.items = options.items; this.style.left = `${options.x}px`; this.style.top = `${options.y}px`; // Adjust position if menu would go off screen await this.updateComplete; const rect = this.getBoundingClientRect(); if (rect.right > window.innerWidth) { this.style.left = `${options.x - rect.width}px`; } if (rect.bottom > window.innerHeight) { this.style.top = `${options.y - rect.height}px`; } // Add event listeners after a microtask to avoid the current event triggering close requestAnimationFrame(() => { document.addEventListener('click', this.boundHandleOutsideClick); document.addEventListener('contextmenu', this.boundHandleOutsideClick); document.addEventListener('keydown', this.boundHandleKeyDown); }); return new Promise((resolve) => { this.resolvePromise = resolve; }); } handleOutsideClick(e) { if (!this.contains(e.target)) { this.close(null); } } handleKeyDown(e) { if (e.key === 'Escape') { this.close(null); } } handleItemClick(item) { if (!item.disabled && !item.divider) { this.close(item); } } close(result) { document.removeEventListener('click', this.boundHandleOutsideClick); document.removeEventListener('contextmenu', this.boundHandleOutsideClick); document.removeEventListener('keydown', this.boundHandleKeyDown); if (this.resolvePromise) { this.resolvePromise(result); this.resolvePromise = null; } this.remove(); } render() { return x ` <div class=\"menu\"> ${this.items.map(item => item.divider ? x `<div class=\"menu__divider\"></div>` : x ` <button class=\"menu__item\" ?disabled=${item.disabled} @click=${() => this.handleItemClick(item)} > ${item.icon ? x `<span class=\"menu__item-icon\">${item.icon}</span>` : null} ${item.label} </button> `)} </div> `; } }",
+          "description": "Context menu component that can be opened programmatically.\n\nUsage:\n```ts\nconst result = await ContextMenu.open({\n  x: event.clientX,\n  y: event.clientY,\n  items: [\n    { id: 'edit', label: 'Edit Item' },\n    { id: 'divider', label: '', divider: true },\n    { id: 'add-above', label: 'Add Item Above' },\n    { id: 'add-below', label: 'Add Item Below' },\n  ]\n});\n\nif (result) {\n  console.log('Selected:', result.id);\n}\n```"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DialogRef",
+          "members": [
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "result"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterClosed"
+            },
+            {
+              "kind": "field",
+              "name": "resolvePromise",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "promise",
+              "default": "new Promise((resolve) => { this.resolvePromise = resolve; })"
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "KRDialog",
+          "default": "class KRDialog extends i$1 { constructor() { super(...arguments); this.contentElement = null; this.dialogRef = null; this.boundHandleKeyDown = this.handleKeyDown.bind(this); } static open(component, config) { const existing = document.querySelector('kr-dialog'); if (existing) { existing.remove(); } const dialogRef = new DialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog.dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } dialog.contentElement = content; document.body.appendChild(dialog); document.addEventListener('keydown', dialog.boundHandleKeyDown); return dialogRef; } handleKeyDown(e) { if (e.key === 'Escape') { this.dialogRef?.close(undefined); } } handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.dialogRef?.close(undefined); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this.boundHandleKeyDown); } render() { return x ` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `; } }",
+          "description": "Generic dialog component that renders a Lit component inside a dialog shell.\n\nUsage:\n```ts\n// Define your dialog content component\nclass EditItemDialog extends LitElement {\n  // Injected by KRDialog\n  dialogRef: DialogRef<{ label: string }>;\n  data: { label: string };\n\n  save() {\n    this.dialogRef.close({ label: this.label });\n  }\n}\n\n// Open the dialog\nconst dialogRef = KRDialog.open(EditItemDialog, {\n  data: { label: 'Dashboard' }\n});\n\nconst result = await dialogRef.afterClosed();\nif (result) {\n  console.log('Saved:', result.label);\n}\n```"
+        },
+        {
+          "kind": "variable",
+          "name": "KRTextField",
+          "default": "class KRTextField extends i$1 { constructor() { super(); /** * The input label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The current value */ this.value = ''; /** * Placeholder text */ this.placeholder = ''; /** * Input type (text, email, password, tel, url, search) */ this.type = 'text'; /** * Whether the field is required */ this.required = false; /** * Whether the field is disabled */ this.disabled = false; /** * Whether the field is readonly */ this.readonly = false; /** * Autocomplete attribute value */ this.autocomplete = ''; /** * Helper text shown below the input */ this.hint = ''; this._touched = false; this._dirty = false; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._dirty = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } _handleInput(e) { this.value = e.target.value; this._dirty = true; this._internals.setFormValue(this.value); this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input); } _handleChange(e) { this.value = e.target.value; this._internals.setFormValue(this.value); } _handleBlur() { this._touched = true; this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input); } render() { let validationMessage = ''; if (this._touched && this._input && !this._input.validity.valid) { validationMessage = this._input.validationMessage; } return x ` <div class=\"wrapper\"> ${this.label ? x ` <label for=\"input\"> ${this.label} ${this.required ? x `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : ''} <input id=\"input\" type=${this.type} name=${this.name} .value=${l(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} minlength=${this.minlength ?? ''} maxlength=${this.maxlength ?? ''} pattern=${this.pattern ?? ''} autocomplete=${this.autocomplete} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} /> ${validationMessage ? x `<div class=\"validation-message\">${validationMessage}</div>` : this.hint ? x `<div class=\"hint\">${this.hint}</div>` : ''} </div> `; } // Public methods for programmatic control focus() { this._input?.focus(); } blur() { this._input?.blur(); } select() { this._input?.select(); } }",
+          "description": "A text field component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset.\n\nNative input and change events bubble up from the inner input element."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "DialogRef",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "KRButton",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "dist/krubble.bundled.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "dist/krubble.bundled.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/krubble.bundled.min.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t",
+          "default": "globalThis"
+        },
+        {
+          "kind": "variable",
+          "name": "e"
+        },
+        {
+          "kind": "variable",
+          "name": "ut",
+          "default": "class extends rt{constructor(){super(...arguments),this.header=\"\",this.expanded=!1}toggle(){this.expanded=!this.expanded}render(){return B` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `}}"
+        },
+        {
+          "kind": "variable",
+          "name": "xt",
+          "default": "class extends rt{constructor(){super(...arguments),this.type=\"info\",this.dismissible=!1,this.visible=!0}_handleDismiss(){this.visible=!1,this.dispatchEvent(new CustomEvent(\"dismiss\",{bubbles:!0,composed:!0}))}render(){const t={info:B`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>`,success:B`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>`,warning:B`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>`,error:B`<svg class=\"icon\" viewBox=\"0 0 20 20\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>`};return B` <div class=${_t({alert:!0,[\"alert--\"+this.type]:!0,\"alert--hidden\":!this.visible})} role=\"alert\" > ${t[this.type]} <div class=\"content\"> ${this.header?B`<h4 class=\"header\">${this.header}</h4>`:q} <div class=\"message\"> <slot></slot> </div> </div> ${this.dismissible?B` <button class=\"dismiss\" type=\"button\" aria-label=\"Dismiss alert\" @click=${this._handleDismiss} > <svg viewBox=\"0 0 20 20\" fill=\"currentColor\" width=\"16\" height=\"16\"> <path fill-rule=\"evenodd\" d=\"M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z\" clip-rule=\"evenodd\"/> </svg> </button> `:q} </div> `}}"
+        },
+        {
+          "kind": "variable",
+          "name": "kt",
+          "default": "class extends rt{constructor(){super(...arguments),this.variant=\"primary\",this.size=\"medium\",this.disabled=!1}render(){const t=\"medium\"!==this.size?this.size:\"\";return B` <button part=\"button\" class=\"${this.variant} ${t}\" ?disabled=${this.disabled} > <slot></slot> </button> `}}"
+        },
+        {
+          "kind": "variable",
+          "name": "Ct",
+          "default": "class extends rt{constructor(){super(...arguments),this.language=\"html\",this.code=\"\",this.activeTab=\"preview\",this.copied=!1}setTab(t){this.activeTab=t}getHighlightedCode(){return this.code?window.Prism&&window.Prism.languages[this.language]?window.Prism.highlight(this.code,window.Prism.languages[this.language],this.language):this.escapeHtml(this.code):\"\"}escapeHtml(t){const e=document.createElement(\"div\");return e.textContent=t,e.innerHTML}async copyCode(){if(this.code)try{await navigator.clipboard.writeText(this.code),this.copied=!0,setTimeout((()=>{this.copied=!1}),2e3)}catch(t){console.error(\"Failed to copy code:\",t)}}render(){return B` <div class=\"tabs\"> <button class=${_t({tab:!0,\"tab--active\":\"preview\"===this.activeTab})} @click=${()=>this.setTab(\"preview\")} > Preview </button> <button class=${_t({tab:!0,\"tab--active\":\"code\"===this.activeTab})} @click=${()=>this.setTab(\"code\")} > Code </button> </div> <div class=${_t({panel:!0,\"panel--active\":\"preview\"===this.activeTab,preview:!0})}> <slot name=\"preview\"></slot> </div> <div class=${_t({panel:!0,\"panel--active\":\"code\"===this.activeTab,\"code-container\":!0})}> <button class=${_t({\"copy-btn\":!0,\"copy-btn--copied\":this.copied})} @click=${this.copyCode} > ${this.copied?\"Copied!\":\"Copy\"} </button> <pre class=\"code\"><code>${Et(this.getHighlightedCode())}</code></pre> </div> `}}"
+        },
+        {
+          "kind": "variable",
+          "name": "Ot",
+          "default": "class extends rt{constructor(){super(...arguments),this.items=[],this.resolvePromise=null,this.boundHandleOutsideClick=this.handleOutsideClick.bind(this),this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static async open(t){const e=document.querySelector(\"kr-context-menu\");e&&e.remove();const i=document.createElement(\"kr-context-menu\");return document.body.appendChild(i),i.show(t)}async show(t){this.items=t.items,this.style.left=`${t.x}px`,this.style.top=`${t.y}px`,await this.updateComplete;const e=this.getBoundingClientRect();return e.right>window.innerWidth&&(this.style.left=t.x-e.width+\"px\"),e.bottom>window.innerHeight&&(this.style.top=t.y-e.height+\"px\"),requestAnimationFrame((()=>{document.addEventListener(\"click\",this.boundHandleOutsideClick),document.addEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.addEventListener(\"keydown\",this.boundHandleKeyDown)})),new Promise((t=>{this.resolvePromise=t}))}handleOutsideClick(t){this.contains(t.target)||this.close(null)}handleKeyDown(t){\"Escape\"===t.key&&this.close(null)}handleItemClick(t){t.disabled||t.divider||this.close(t)}close(t){document.removeEventListener(\"click\",this.boundHandleOutsideClick),document.removeEventListener(\"contextmenu\",this.boundHandleOutsideClick),document.removeEventListener(\"keydown\",this.boundHandleKeyDown),this.resolvePromise&&(this.resolvePromise(t),this.resolvePromise=null),this.remove()}render(){return B` <div class=\"menu\"> ${this.items.map((t=>t.divider?B`<div class=\"menu__divider\"></div>`:B` <button class=\"menu__item\" ?disabled=${t.disabled} @click=${()=>this.handleItemClick(t)} > ${t.icon?B`<span class=\"menu__item-icon\">${t.icon}</span>`:null} ${t.label} </button> `))} </div> `}}"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "Mt",
+          "members": [
+            {
+              "kind": "method",
+              "name": "setDialogElement",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "t"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterClosed"
+            },
+            {
+              "kind": "field",
+              "name": "resolvePromise",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "promise",
+              "default": "new Promise((t=>{this.resolvePromise=t}))"
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "Ht",
+          "default": "class extends rt{constructor(){super(...arguments),this.contentElement=null,this.dialogRef=null,this.boundHandleKeyDown=this.handleKeyDown.bind(this)}static open(t,e){const i=document.querySelector(\"kr-dialog\");i&&i.remove();const o=new Mt,s=document.createElement(\"kr-dialog\");o.setDialogElement(s),s.dialogRef=o;const r=new t;return r.dialogRef=o,e?.data&&(r.data=e.data),s.contentElement=r,document.body.appendChild(s),document.addEventListener(\"keydown\",s.boundHandleKeyDown),o}handleKeyDown(t){\"Escape\"===t.key&&this.dialogRef?.close(void 0)}handleBackdropClick(t){t.target.classList.contains(\"backdrop\")&&this.dialogRef?.close(void 0)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener(\"keydown\",this.boundHandleKeyDown)}render(){return B` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `}}"
+        },
+        {
+          "kind": "variable",
+          "name": "zt",
+          "default": "class extends rt{constructor(){super(),this.label=\"\",this.name=\"\",this.value=\"\",this.placeholder=\"\",this.type=\"text\",this.required=!1,this.disabled=!1,this.readonly=!1,this.autocomplete=\"\",this.hint=\"\",this._touched=!1,this._dirty=!1,this._internals=this.attachInternals()}get form(){return this._internals.form}get validity(){return this._internals.validity}get validationMessage(){return this._internals.validationMessage}get willValidate(){return this._internals.willValidate}checkValidity(){return this._internals.checkValidity()}reportValidity(){return this._internals.reportValidity()}formResetCallback(){this.value=\"\",this._touched=!1,this._dirty=!1,this._internals.setFormValue(\"\"),this._internals.setValidity({})}formStateRestoreCallback(t){this.value=t}_handleInput(t){this.value=t.target.value,this._dirty=!0,this._internals.setFormValue(this.value),this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}_handleChange(t){this.value=t.target.value,this._internals.setFormValue(this.value)}_handleBlur(){this._touched=!0,this._internals.setValidity(this._input.validity,this._input.validationMessage,this._input)}render(){let t=\"\";return this._touched&&this._input&&!this._input.validity.valid&&(t=this._input.validationMessage),B` <div class=\"wrapper\"> ${this.label?B` <label for=\"input\"> ${this.label} ${this.required?B`<span class=\"required\" aria-hidden=\"true\">*</span>`:\"\"} </label> `:\"\"} <input id=\"input\" type=${this.type} name=${this.name} .value=${jt(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} minlength=${this.minlength??\"\"} maxlength=${this.maxlength??\"\"} pattern=${this.pattern??\"\"} autocomplete=${this.autocomplete} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} /> ${t?B`<div class=\"validation-message\">${t}</div>`:this.hint?B`<div class=\"hint\">${this.hint}</div>`:\"\"} </div> `}focus(){this._input?.focus()}blur(){this._input?.blur()}select(){this._input?.select()}}"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "Mt",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "ut",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "xt",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "kt",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "Ct",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "Ot",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "Ht",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "zt",
+            "module": "dist/krubble.bundled.min.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/krubble.umd.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t"
+        },
+        {
+          "kind": "variable",
+          "name": "e"
+        },
+        {
+          "kind": "class",
+          "description": "",
+          "name": "e",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_$AU",
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_$AT",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "e"
+                },
+                {
+                  "name": "i"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_$AS",
+              "parameters": [
+                {
+                  "name": "t"
+                },
+                {
+                  "name": "e"
+                }
+              ],
+              "inheritedFrom": {
+                "name": "i",
+                "module": "dist/krubble.umd.js"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "i",
+            "module": "dist/krubble.umd.js"
+          },
+          "tagName": "t",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.umd.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "t",
+          "declaration": {
+            "name": "e",
+            "module": "dist/krubble.umd.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/krubble.umd.min.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "t",
+          "default": "globalThis"
+        },
+        {
+          "kind": "variable",
+          "name": "e"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "e",
+          "declaration": {
+            "name": "t",
+            "module": "dist/krubble.umd.min.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "e",
+          "declaration": {
+            "name": "t",
+            "module": "dist/krubble.umd.min.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/alert.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A customizable alert component for displaying important information to users.",
+          "name": "KRAlert",
+          "slots": [
+            {
+              "description": "The alert message content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "The alert type/severity",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional header text",
+              "attribute": "header"
+            },
+            {
+              "kind": "field",
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert can be dismissed",
+              "attribute": "dismissible"
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the alert is visible",
+              "attribute": "visible"
+            },
+            {
+              "kind": "method",
+              "name": "_handleDismiss",
+              "privacy": "private",
+              "description": "Handles dismiss button click"
+            }
+          ],
+          "events": [
+            {
+              "name": "dismiss",
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired when the dismiss button is clicked"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "'info' | 'success' | 'warning' | 'error'"
+              },
+              "default": "'info'",
+              "description": "The alert type/severity",
+              "fieldName": "type"
+            },
+            {
+              "name": "header",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Optional header text",
+              "fieldName": "header"
+            },
+            {
+              "name": "dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the alert can be dismissed",
+              "fieldName": "dismissible"
+            },
+            {
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "description": "Whether the alert is visible",
+              "fieldName": "visible"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-alert",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "src/alert.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-alert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "src/alert.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "./accordion/accordion.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRAlert",
+          "declaration": {
+            "name": "KRAlert",
+            "module": "./alert.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "KRButton",
+            "module": "./button/button.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "./code-demo/code-demo.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "./context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "./dialog/dialog.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "DialogRef",
+            "module": "./dialog/dialog.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "./form/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ContextMenuItem",
+          "declaration": {
+            "name": "ContextMenuItem",
+            "module": "./context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ContextMenuOptions",
+          "declaration": {
+            "name": "ContextMenuOptions",
+            "module": "./context-menu/context-menu.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "DialogConfig",
+          "declaration": {
+            "name": "DialogConfig",
+            "module": "./dialog/dialog.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/accordion/accordion.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRAccordion",
+          "default": "class KRAccordion extends LitElement { constructor() { super(...arguments); /** * Section header text */ this.header = ''; /** * Whether the accordion is expanded */ this.expanded = false; } toggle() { this.expanded = !this.expanded; } render() { return html ` <div class=\"header\" @click=${this.toggle}> <span class=\"header__title\">${this.header}</span> <svg class=\"header__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"> <path d=\"M6 9l6 6 6-6\"/> </svg> </div> <div class=\"content\"> <div class=\"content__inner\"> <div class=\"content__body\"> <slot></slot> </div> </div> </div> `; } }",
+          "description": "Accordion component for collapsible content sections.\n\n## Usage\n```html\n<kr-accordion header=\"Basic Information\" expanded>\n  <div>Content here</div>\n</kr-accordion>\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "dist/accordion/accordion.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/button/button.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRButton",
+          "default": "class KRButton extends LitElement { constructor() { super(...arguments); /** * The button variant style */ this.variant = 'primary'; /** * The button size */ this.size = 'medium'; /** * Whether the button is disabled */ this.disabled = false; } render() { const sizeClass = this.size !== 'medium' ? this.size : ''; return html ` <button part=\"button\" class=\"${this.variant} ${sizeClass}\" ?disabled=${this.disabled} > <slot></slot> </button> `; } }",
+          "description": "A customizable button component."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "KRButton",
+            "module": "dist/button/button.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/code-demo/code-demo.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRCodeDemo",
+          "default": "class KRCodeDemo extends LitElement { constructor() { super(...arguments); this.language = 'html'; this.code = ''; this.activeTab = 'preview'; this.copied = false; } setTab(tab) { this.activeTab = tab; } getHighlightedCode() { if (!this.code) return ''; if (window.Prism && window.Prism.languages[this.language]) { return window.Prism.highlight(this.code, window.Prism.languages[this.language], this.language); } // Fallback: escape HTML and return plain text return this.escapeHtml(this.code); } escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } async copyCode() { if (!this.code) return; try { await navigator.clipboard.writeText(this.code); this.copied = true; setTimeout(() => { this.copied = false; }, 2000); } catch (err) { console.error('Failed to copy code:', err); } } render() { return html ` <div class=\"tabs\"> <button class=${classMap({ tab: true, 'tab--active': this.activeTab === 'preview' })} @click=${() => this.setTab('preview')} > Preview </button> <button class=${classMap({ tab: true, 'tab--active': this.activeTab === 'code' })} @click=${() => this.setTab('code')} > Code </button> </div> <div class=${classMap({ panel: true, 'panel--active': this.activeTab === 'preview', preview: true })}> <slot name=\"preview\"></slot> </div> <div class=${classMap({ panel: true, 'panel--active': this.activeTab === 'code', 'code-container': true })}> <button class=${classMap({ 'copy-btn': true, 'copy-btn--copied': this.copied })} @click=${this.copyCode} > ${this.copied ? 'Copied!' : 'Copy'} </button> <pre class=\"code\"><code>${unsafeHTML(this.getHighlightedCode())}</code></pre> </div> `; } }",
+          "description": "Code demo component with Preview/Code tabs and syntax highlighting.\n\nUsage:\n```html\n<kr-code-demo language=\"html\">\n  <div slot=\"preview\">\n    <kr-button>Click me</kr-button>\n  </div>\n  <script slot=\"code\" type=\"text/plain\">\n    <kr-button>Click me</kr-button>\n  </script>\n</kr-code-demo>\n```\n\nRequires Prism.js to be loaded globally for syntax highlighting."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "dist/code-demo/code-demo.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/context-menu/context-menu.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRContextMenu",
+          "default": "class KRContextMenu extends LitElement { constructor() { super(...arguments); this.items = []; this.resolvePromise = null; this.boundHandleOutsideClick = this.handleOutsideClick.bind(this); this.boundHandleKeyDown = this.handleKeyDown.bind(this); } static async open(options) { // Remove any existing context menu const existing = document.querySelector('kr-context-menu'); if (existing) { existing.remove(); } // Create and position the menu const menu = document.createElement('kr-context-menu'); document.body.appendChild(menu); return menu.show(options); } async show(options) { this.items = options.items; this.style.left = `${options.x}px`; this.style.top = `${options.y}px`; // Adjust position if menu would go off screen await this.updateComplete; const rect = this.getBoundingClientRect(); if (rect.right > window.innerWidth) { this.style.left = `${options.x - rect.width}px`; } if (rect.bottom > window.innerHeight) { this.style.top = `${options.y - rect.height}px`; } // Add event listeners after a microtask to avoid the current event triggering close requestAnimationFrame(() => { document.addEventListener('click', this.boundHandleOutsideClick); document.addEventListener('contextmenu', this.boundHandleOutsideClick); document.addEventListener('keydown', this.boundHandleKeyDown); }); return new Promise((resolve) => { this.resolvePromise = resolve; }); } handleOutsideClick(e) { if (!this.contains(e.target)) { this.close(null); } } handleKeyDown(e) { if (e.key === 'Escape') { this.close(null); } } handleItemClick(item) { if (!item.disabled && !item.divider) { this.close(item); } } close(result) { document.removeEventListener('click', this.boundHandleOutsideClick); document.removeEventListener('contextmenu', this.boundHandleOutsideClick); document.removeEventListener('keydown', this.boundHandleKeyDown); if (this.resolvePromise) { this.resolvePromise(result); this.resolvePromise = null; } this.remove(); } render() { return html ` <div class=\"menu\"> ${this.items.map(item => item.divider ? html `<div class=\"menu__divider\"></div>` : html ` <button class=\"menu__item\" ?disabled=${item.disabled} @click=${() => this.handleItemClick(item)} > ${item.icon ? html `<span class=\"menu__item-icon\">${item.icon}</span>` : null} ${item.label} </button> `)} </div> `; } }",
+          "description": "Context menu component that can be opened programmatically.\n\nUsage:\n```ts\nconst result = await ContextMenu.open({\n  x: event.clientX,\n  y: event.clientY,\n  items: [\n    { id: 'edit', label: 'Edit Item' },\n    { id: 'divider', label: '', divider: true },\n    { id: 'add-above', label: 'Add Item Above' },\n    { id: 'add-below', label: 'Add Item Below' },\n  ]\n});\n\nif (result) {\n  console.log('Selected:', result.id);\n}\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "dist/context-menu/context-menu.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/dialog/dialog.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DialogRef",
+          "members": [
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "result"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterClosed"
+            },
+            {
+              "kind": "field",
+              "name": "resolvePromise",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "promise",
+              "default": "new Promise((resolve) => { this.resolvePromise = resolve; })"
+            }
+          ]
+        },
+        {
+          "kind": "variable",
+          "name": "KRDialog",
+          "default": "class KRDialog extends LitElement { constructor() { super(...arguments); this.contentElement = null; this.dialogRef = null; this.boundHandleKeyDown = this.handleKeyDown.bind(this); } static open(component, config) { const existing = document.querySelector('kr-dialog'); if (existing) { existing.remove(); } const dialogRef = new DialogRef(); const dialog = document.createElement('kr-dialog'); dialogRef.setDialogElement(dialog); dialog.dialogRef = dialogRef; // Create the content component const content = new component(); content.dialogRef = dialogRef; if (config?.data) { content.data = config.data; } dialog.contentElement = content; document.body.appendChild(dialog); document.addEventListener('keydown', dialog.boundHandleKeyDown); return dialogRef; } handleKeyDown(e) { if (e.key === 'Escape') { this.dialogRef?.close(undefined); } } handleBackdropClick(e) { if (e.target.classList.contains('backdrop')) { this.dialogRef?.close(undefined); } } disconnectedCallback() { super.disconnectedCallback(); document.removeEventListener('keydown', this.boundHandleKeyDown); } render() { return html ` <div class=\"backdrop\" @click=${this.handleBackdropClick}></div> <div class=\"dialog\"> ${this.contentElement} </div> `; } }",
+          "description": "Generic dialog component that renders a Lit component inside a dialog shell.\n\nUsage:\n```ts\n// Define your dialog content component\nclass EditItemDialog extends LitElement {\n  // Injected by KRDialog\n  dialogRef: DialogRef<{ label: string }>;\n  data: { label: string };\n\n  save() {\n    this.dialogRef.close({ label: this.label });\n  }\n}\n\n// Open the dialog\nconst dialogRef = KRDialog.open(EditItemDialog, {\n  data: { label: 'Dashboard' }\n});\n\nconst result = await dialogRef.afterClosed();\nif (result) {\n  console.log('Saved:', result.label);\n}\n```"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "DialogRef",
+            "module": "dist/dialog/dialog.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "dist/dialog/dialog.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/form/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "./text-field/text-field.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/accordion/accordion.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Accordion component for collapsible content sections.\n\n## Usage\n```html\n<kr-accordion header=\"Basic Information\" expanded>\n  <div>Content here</div>\n</kr-accordion>\n```",
+          "name": "KRAccordion",
+          "slots": [
+            {
+              "description": "The collapsible content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Section header text",
+              "attribute": "header"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the accordion is expanded",
+              "attribute": "expanded",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "toggle",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Section header text",
+              "fieldName": "header"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the accordion is expanded",
+              "fieldName": "expanded"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-accordion",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRAccordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-accordion",
+          "declaration": {
+            "name": "KRAccordion",
+            "module": "src/accordion/accordion.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/button/button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A customizable button component.",
+          "name": "KRButton",
+          "cssParts": [
+            {
+              "description": "The button element",
+              "name": "button"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The button content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'secondary' | 'outline'"
+              },
+              "default": "'primary'",
+              "description": "The button variant style",
+              "attribute": "variant"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The button size",
+              "attribute": "size"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled",
+              "attribute": "disabled"
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired when the button is clicked",
+              "name": "click"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "'primary' | 'secondary' | 'outline'"
+              },
+              "default": "'primary'",
+              "description": "The button variant style",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'small' | 'medium' | 'large'"
+              },
+              "default": "'medium'",
+              "description": "The button size",
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the button is disabled",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-button",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRButton",
+          "declaration": {
+            "name": "KRButton",
+            "module": "src/button/button.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-button",
+          "declaration": {
+            "name": "KRButton",
+            "module": "src/button/button.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/code-demo/code-demo.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Code demo component with Preview/Code tabs and syntax highlighting.\n\nUsage:\n```html\n<kr-code-demo language=\"html\">\n  <div slot=\"preview\">\n    <kr-button>Click me</kr-button>\n  </div>\n  <script slot=\"code\" type=\"text/plain\">\n    <kr-button>Click me</kr-button>\n  </script>\n</kr-code-demo>\n```\n\nRequires Prism.js to be loaded globally for syntax highlighting.",
+          "name": "KRCodeDemo",
+          "members": [
+            {
+              "kind": "field",
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'html'",
+              "attribute": "language"
+            },
+            {
+              "kind": "field",
+              "name": "code",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "code"
+            },
+            {
+              "kind": "field",
+              "name": "activeTab",
+              "type": {
+                "text": "'preview' | 'code'"
+              },
+              "privacy": "private",
+              "default": "'preview'"
+            },
+            {
+              "kind": "field",
+              "name": "copied",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "method",
+              "name": "setTab",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "tab",
+                  "type": {
+                    "text": "'preview' | 'code'"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getHighlightedCode",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "escapeHtml",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "string"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "text",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "copyCode",
+              "privacy": "private"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "language",
+              "type": {
+                "text": "string"
+              },
+              "default": "'html'",
+              "fieldName": "language"
+            },
+            {
+              "name": "code",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "code"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-code-demo",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRCodeDemo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "src/code-demo/code-demo.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-code-demo",
+          "declaration": {
+            "name": "KRCodeDemo",
+            "module": "src/code-demo/code-demo.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/context-menu/context-menu.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Context menu component that can be opened programmatically.\n\nUsage:\n```ts\nconst result = await ContextMenu.open({\n  x: event.clientX,\n  y: event.clientY,\n  items: [\n    { id: 'edit', label: 'Edit Item' },\n    { id: 'divider', label: '', divider: true },\n    { id: 'add-above', label: 'Add Item Above' },\n    { id: 'add-below', label: 'Add Item Below' },\n  ]\n});\n\nif (result) {\n  console.log('Selected:', result.id);\n}\n```",
+          "name": "KRContextMenu",
+          "members": [
+            {
+              "kind": "field",
+              "name": "items",
+              "type": {
+                "text": "ContextMenuItem[]"
+              },
+              "privacy": "private",
+              "default": "[]"
+            },
+            {
+              "kind": "field",
+              "name": "resolvePromise",
+              "type": {
+                "text": "((value: ContextMenuItem | null) => void) | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "boundHandleOutsideClick",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "boundHandleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<ContextMenuItem | null>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "ContextMenuOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "show",
+              "return": {
+                "type": {
+                  "text": "Promise<ContextMenuItem | null>"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "type": {
+                    "text": "ContextMenuOptions"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleOutsideClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleItemClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "ContextMenuItem"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "result",
+                  "type": {
+                    "text": "ContextMenuItem | null"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-context-menu",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRContextMenu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "src/context-menu/context-menu.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-context-menu",
+          "declaration": {
+            "name": "KRContextMenu",
+            "module": "src/context-menu/context-menu.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/dialog/dialog.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DialogRef",
+          "members": [
+            {
+              "kind": "field",
+              "name": "resolvePromise",
+              "type": {
+                "text": "((value: R | undefined) => void) | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "promise",
+              "type": {
+                "text": "Promise<R | undefined>"
+              },
+              "privacy": "private",
+              "default": "new Promise((resolve) => { this.resolvePromise = resolve; })"
+            },
+            {
+              "kind": "field",
+              "name": "dialogElement",
+              "type": {
+                "text": "KRDialog | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "close",
+              "parameters": [
+                {
+                  "name": "result",
+                  "optional": true,
+                  "type": {
+                    "text": "R"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "afterClosed",
+              "return": {
+                "type": {
+                  "text": "Promise<R | undefined>"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "kind": "class",
+          "description": "Generic dialog component that renders a Lit component inside a dialog shell.\n\nUsage:\n```ts\n// Define your dialog content component\nclass EditItemDialog extends LitElement {\n  // Injected by KRDialog\n  dialogRef: DialogRef<{ label: string }>;\n  data: { label: string };\n\n  save() {\n    this.dialogRef.close({ label: this.label });\n  }\n}\n\n// Open the dialog\nconst dialogRef = KRDialog.open(EditItemDialog, {\n  data: { label: 'Dashboard' }\n});\n\nconst result = await dialogRef.afterClosed();\nif (result) {\n  console.log('Saved:', result.label);\n}\n```",
+          "name": "KRDialog",
+          "members": [
+            {
+              "kind": "field",
+              "name": "contentElement",
+              "type": {
+                "text": "LitElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "dialogRef",
+              "type": {
+                "text": "DialogRef | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "boundHandleKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "open",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "DialogRef"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "component",
+                  "type": {
+                    "text": "new () => LitElement"
+                  }
+                },
+                {
+                  "name": "config",
+                  "optional": true,
+                  "type": {
+                    "text": "DialogConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyDown",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropClick",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-dialog",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DialogRef",
+          "declaration": {
+            "name": "DialogRef",
+            "module": "src/dialog/dialog.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "KRDialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "src/dialog/dialog.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-dialog",
+          "declaration": {
+            "name": "KRDialog",
+            "module": "src/dialog/dialog.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "./text-field/text-field.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "dist/form/text-field/text-field.js",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "KRTextField",
+          "default": "class KRTextField extends LitElement { constructor() { super(); /** * The input label text */ this.label = ''; /** * The input name for form submission */ this.name = ''; /** * The current value */ this.value = ''; /** * Placeholder text */ this.placeholder = ''; /** * Input type (text, email, password, tel, url, search) */ this.type = 'text'; /** * Whether the field is required */ this.required = false; /** * Whether the field is disabled */ this.disabled = false; /** * Whether the field is readonly */ this.readonly = false; /** * Autocomplete attribute value */ this.autocomplete = ''; /** * Helper text shown below the input */ this.hint = ''; this._touched = false; this._dirty = false; this._internals = this.attachInternals(); } // Form-associated custom element callbacks get form() { return this._internals.form; } get validity() { return this._internals.validity; } get validationMessage() { return this._internals.validationMessage; } get willValidate() { return this._internals.willValidate; } checkValidity() { return this._internals.checkValidity(); } reportValidity() { return this._internals.reportValidity(); } formResetCallback() { this.value = ''; this._touched = false; this._dirty = false; this._internals.setFormValue(''); this._internals.setValidity({}); } formStateRestoreCallback(state) { this.value = state; } _handleInput(e) { this.value = e.target.value; this._dirty = true; this._internals.setFormValue(this.value); this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input); } _handleChange(e) { this.value = e.target.value; this._internals.setFormValue(this.value); } _handleBlur() { this._touched = true; this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input); } render() { let validationMessage = ''; if (this._touched && this._input && !this._input.validity.valid) { validationMessage = this._input.validationMessage; } return html ` <div class=\"wrapper\"> ${this.label ? html ` <label for=\"input\"> ${this.label} ${this.required ? html `<span class=\"required\" aria-hidden=\"true\">*</span>` : ''} </label> ` : ''} <input id=\"input\" type=${this.type} name=${this.name} .value=${live(this.value)} placeholder=${this.placeholder} ?required=${this.required} ?disabled=${this.disabled} ?readonly=${this.readonly} minlength=${this.minlength ?? ''} maxlength=${this.maxlength ?? ''} pattern=${this.pattern ?? ''} autocomplete=${this.autocomplete} @input=${this._handleInput} @change=${this._handleChange} @blur=${this._handleBlur} /> ${validationMessage ? html `<div class=\"validation-message\">${validationMessage}</div>` : this.hint ? html `<div class=\"hint\">${this.hint}</div>` : ''} </div> `; } // Public methods for programmatic control focus() { this._input?.focus(); } blur() { this._input?.blur(); } select() { this._input?.select(); } }",
+          "description": "A text field component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset.\n\nNative input and change events bubble up from the inner input element."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "dist/form/text-field/text-field.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/form/text-field/text-field.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A text field component that works with native browser forms.\n\nUses ElementInternals for form association, allowing the component\nto participate in form submission, validation, and reset.\n\nNative input and change events bubble up from the inner input element.",
+          "name": "KRTextField",
+          "members": [
+            {
+              "kind": "field",
+              "name": "formAssociated",
+              "type": {
+                "text": "boolean"
+              },
+              "static": true,
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "_internals",
+              "type": {
+                "text": "ElementInternals"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input label text",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input name for form submission",
+              "attribute": "name"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text",
+              "attribute": "placeholder"
+            },
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url' | 'search'"
+              },
+              "default": "'text'",
+              "description": "Input type (text, email, password, tel, url, search)",
+              "attribute": "type"
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is required",
+              "attribute": "required"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is disabled",
+              "attribute": "disabled"
+            },
+            {
+              "kind": "field",
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly",
+              "attribute": "readonly"
+            },
+            {
+              "kind": "field",
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Minimum length for the value",
+              "attribute": "minlength"
+            },
+            {
+              "kind": "field",
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum length for the value",
+              "attribute": "maxlength"
+            },
+            {
+              "kind": "field",
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Pattern for validation (regex)",
+              "attribute": "pattern"
+            },
+            {
+              "kind": "field",
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Autocomplete attribute value",
+              "attribute": "autocomplete"
+            },
+            {
+              "kind": "field",
+              "name": "hint",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Helper text shown below the input",
+              "attribute": "hint"
+            },
+            {
+              "kind": "field",
+              "name": "_input",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_touched",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_dirty",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "form",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validity",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "validationMessage",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "willValidate",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "checkValidity"
+            },
+            {
+              "kind": "method",
+              "name": "reportValidity"
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
+            },
+            {
+              "kind": "method",
+              "name": "formStateRestoreCallback",
+              "parameters": [
+                {
+                  "name": "state",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleInput",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleChange",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_handleBlur",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
+            {
+              "kind": "method",
+              "name": "blur"
+            },
+            {
+              "kind": "method",
+              "name": "select"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input label text",
+              "fieldName": "label"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The input name for form submission",
+              "fieldName": "name"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "The current value",
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Placeholder text",
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "type",
+              "type": {
+                "text": "'text' | 'email' | 'password' | 'tel' | 'url' | 'search'"
+              },
+              "default": "'text'",
+              "description": "Input type (text, email, password, tel, url, search)",
+              "fieldName": "type"
+            },
+            {
+              "name": "required",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is required",
+              "fieldName": "required"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is disabled",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "readonly",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether the field is readonly",
+              "fieldName": "readonly"
+            },
+            {
+              "name": "minlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Minimum length for the value",
+              "fieldName": "minlength"
+            },
+            {
+              "name": "maxlength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "description": "Maximum length for the value",
+              "fieldName": "maxlength"
+            },
+            {
+              "name": "pattern",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Pattern for validation (regex)",
+              "fieldName": "pattern"
+            },
+            {
+              "name": "autocomplete",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Autocomplete attribute value",
+              "fieldName": "autocomplete"
+            },
+            {
+              "name": "hint",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Helper text shown below the input",
+              "fieldName": "hint"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "kr-text-field",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "KRTextField",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "src/form/text-field/text-field.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "kr-text-field",
+          "declaration": {
+            "name": "KRTextField",
+            "module": "src/form/text-field/text-field.ts"
+          }
+        }
+      ]
+    }
+  ]
+}