@formdown/ui/dist/index.umd.js

Pure HTML renderer for Formdown syntax

(function(d,h){typeof exports=="object"&&typeof module<"u"?h(exports,require("lit"),require("@formdown/core")):typeof define=="function"&&define.amd?define(["exports","lit","@formdown/core"],h):(d=typeof globalThis<"u"?globalThis:d||self,h(d.FormdownUI={},d.Lit,d.FormdownCore))})(this,function(d,h,u){"use strict";/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const C=a=>(t,e)=>{e!==void 0?e.addInitializer(()=>{customElements.define(a,t)}):customElements.define(a,t)};/**
 * @license
 * Copyright 2019 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const y=globalThis,x=y.ShadowRoot&&(y.ShadyCSS===void 0||y.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,_=Symbol(),M=new WeakMap;let T=class{constructor(t,e,r){if(this._$cssResult$=!0,r!==_)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e}get styleSheet(){let t=this.o;const e=this.t;if(x&&t===void 0){const r=e!==void 0&&e.length===1;r&&(t=M.get(e)),t===void 0&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),r&&M.set(e,t))}return t}toString(){return this.cssText}};const I=a=>new T(typeof a=="string"?a:a+"",void 0,_),P=(a,t)=>{if(x)a.adoptedStyleSheets=t.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const e of t){const r=document.createElement("style"),o=y.litNonce;o!==void 0&&r.setAttribute("nonce",o),r.textContent=e.cssText,a.appendChild(r)}},U=x?a=>a:a=>a instanceof CSSStyleSheet?(t=>{let e="";for(const r of t.cssRules)e+=r.cssText;return I(e)})(a):a;/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const{is:z,defineProperty:A,getOwnPropertyDescriptor:O,getOwnPropertyNames:R,getOwnPropertySymbols:D,getPrototypeOf:L}=Object,c=globalThis,k=c.trustedTypes,H=k?k.emptyScript:"",E=c.reactiveElementPolyfillSupport,b=(a,t)=>a,v={toAttribute(a,t){switch(t){case Boolean:a=a?H:null;break;case Object:case Array:a=a==null?a:JSON.stringify(a)}return a},fromAttribute(a,t){let e=a;switch(t){case Boolean:e=a!==null;break;case Number:e=a===null?null:Number(a);break;case Object:case Array:try{e=JSON.parse(a)}catch{e=null}}return e}},S=(a,t)=>!z(a,t),$={attribute:!0,type:String,converter:v,reflect:!1,useDefault:!1,hasChanged:S};Symbol.metadata??(Symbol.metadata=Symbol("metadata")),c.litPropertyMetadata??(c.litPropertyMetadata=new WeakMap);class g extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??(this.l=[])).push(t)}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,e=$){if(e.state&&(e.attribute=!1),this._$Ei(),this.prototype.hasOwnProperty(t)&&((e=Object.create(e)).wrapped=!0),this.elementProperties.set(t,e),!e.noAccessor){const r=Symbol(),o=this.getPropertyDescriptor(t,r,e);o!==void 0&&A(this.prototype,t,o)}}static getPropertyDescriptor(t,e,r){const{get:o,set:n}=O(this.prototype,t)??{get(){return this[e]},set(i){this[e]=i}};return{get:o,set(i){const s=o==null?void 0:o.call(this);n==null||n.call(this,i),this.requestUpdate(t,s,r)},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??$}static _$Ei(){if(this.hasOwnProperty(b("elementProperties")))return;const t=L(this);t.finalize(),t.l!==void 0&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this._$Ei(),this.hasOwnProperty(b("properties"))){const e=this.properties,r=[...R(e),...D(e)];for(const o of r)this.createProperty(o,e[o])}const t=this[Symbol.metadata];if(t!==null){const e=litPropertyMetadata.get(t);if(e!==void 0)for(const[r,o]of e)this.elementProperties.set(r,o)}this._$Eh=new Map;for(const[e,r]of this.elementProperties){const o=this._$Eu(e,r);o!==void 0&&this._$Eh.set(o,e)}this.elementStyles=this.finalizeStyles(this.styles)}static finalizeStyles(t){const e=[];if(Array.isArray(t)){const r=new Set(t.flat(1/0).reverse());for(const o of r)e.unshift(U(o))}else t!==void 0&&e.push(U(t));return e}static _$Eu(t,e){const r=e.attribute;return r===!1?void 0:typeof r=="string"?r:typeof t=="string"?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this._$Em=null,this._$Ev()}_$Ev(){var t;this._$ES=new Promise(e=>this.enableUpdating=e),this._$AL=new Map,this._$E_(),this.requestUpdate(),(t=this.constructor.l)==null||t.forEach(e=>e(this))}addController(t){var e;(this._$EO??(this._$EO=new Set)).add(t),this.renderRoot!==void 0&&this.isConnected&&((e=t.hostConnected)==null||e.call(t))}removeController(t){var e;(e=this._$EO)==null||e.delete(t)}_$E_(){const t=new Map,e=this.constructor.elementProperties;for(const r of e.keys())this.hasOwnProperty(r)&&(t.set(r,this[r]),delete this[r]);t.size>0&&(this._$Ep=t)}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return P(t,this.constructor.elementStyles),t}connectedCallback(){var t;this.renderRoot??(this.renderRoot=this.createRenderRoot()),this.enableUpdating(!0),(t=this._$EO)==null||t.forEach(e=>{var r;return(r=e.hostConnected)==null?void 0:r.call(e)})}enableUpdating(t){}disconnectedCallback(){var t;(t=this._$EO)==null||t.forEach(e=>{var r;return(r=e.hostDisconnected)==null?void 0:r.call(e)})}attributeChangedCallback(t,e,r){this._$AK(t,r)}_$ET(t,e){var n;const r=this.constructor.elementProperties.get(t),o=this.constructor._$Eu(t,r);if(o!==void 0&&r.reflect===!0){const i=(((n=r.converter)==null?void 0:n.toAttribute)!==void 0?r.converter:v).toAttribute(e,r.type);this._$Em=t,i==null?this.removeAttribute(o):this.setAttribute(o,i),this._$Em=null}}_$AK(t,e){var n,i;const r=this.constructor,o=r._$Eh.get(t);if(o!==void 0&&this._$Em!==o){const s=r.getPropertyOptions(o),l=typeof s.converter=="function"?{fromAttribute:s.converter}:((n=s.converter)==null?void 0:n.fromAttribute)!==void 0?s.converter:v;this._$Em=o,this[o]=l.fromAttribute(e,s.type)??((i=this._$Ej)==null?void 0:i.get(o))??null,this._$Em=null}}requestUpdate(t,e,r){var o;if(t!==void 0){const n=this.constructor,i=this[t];if(r??(r=n.getPropertyOptions(t)),!((r.hasChanged??S)(i,e)||r.useDefault&&r.reflect&&i===((o=this._$Ej)==null?void 0:o.get(t))&&!this.hasAttribute(n._$Eu(t,r))))return;this.C(t,e,r)}this.isUpdatePending===!1&&(this._$ES=this._$EP())}C(t,e,{useDefault:r,reflect:o,wrapped:n},i){r&&!(this._$Ej??(this._$Ej=new Map)).has(t)&&(this._$Ej.set(t,i??e??this[t]),n!==!0||i!==void 0)||(this._$AL.has(t)||(this.hasUpdated||r||(e=void 0),this._$AL.set(t,e)),o===!0&&this._$Em!==t&&(this._$Eq??(this._$Eq=new Set)).add(t))}async _$EP(){this.isUpdatePending=!0;try{await this._$ES}catch(e){Promise.reject(e)}const t=this.scheduleUpdate();return t!=null&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){var r;if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??(this.renderRoot=this.createRenderRoot()),this._$Ep){for(const[n,i]of this._$Ep)this[n]=i;this._$Ep=void 0}const o=this.constructor.elementProperties;if(o.size>0)for(const[n,i]of o){const{wrapped:s}=i,l=this[n];s!==!0||this._$AL.has(n)||l===void 0||this.C(n,void 0,i,l)}}let t=!1;const e=this._$AL;try{t=this.shouldUpdate(e),t?(this.willUpdate(e),(r=this._$EO)==null||r.forEach(o=>{var n;return(n=o.hostUpdate)==null?void 0:n.call(o)}),this.update(e)):this._$EM()}catch(o){throw t=!1,this._$EM(),o}t&&this._$AE(e)}willUpdate(t){}_$AE(t){var e;(e=this._$EO)==null||e.forEach(r=>{var o;return(o=r.hostUpdated)==null?void 0:o.call(r)}),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t)}_$EM(){this._$AL=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return!0}update(t){this._$Eq&&(this._$Eq=this._$Eq.forEach(e=>this._$ET(e,this[e]))),this._$EM()}updated(t){}firstUpdated(t){}}g.elementStyles=[],g.shadowRootOptions={mode:"open"},g[b("elementProperties")]=new Map,g[b("finalized")]=new Map,E==null||E({ReactiveElement:g}),(c.reactiveElementVersions??(c.reactiveElementVersions=[])).push("2.1.0");/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */const j={attribute:!0,type:String,converter:v,reflect:!1,hasChanged:S},q=(a=j,t,e)=>{const{kind:r,metadata:o}=e;let n=globalThis.litPropertyMetadata.get(o);if(n===void 0&&globalThis.litPropertyMetadata.set(o,n=new Map),r==="setter"&&((a=Object.create(a)).wrapped=!0),n.set(e.name,a),r==="accessor"){const{name:i}=e;return{set(s){const l=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,l,a)},init(s){return s!==void 0&&this.C(i,void 0,a,s),s}}}if(r==="setter"){const{name:i}=e;return function(s){const l=this[i];t.call(this,s),this.requestUpdate(i,l,a)}}throw Error("Unsupported decorator location: "+r)};function f(a){return(t,e)=>typeof e=="object"?q(a,t,e):((r,o,n)=>{const i=o.hasOwnProperty(n);return o.constructor.createProperty(n,r),i?Object.getOwnPropertyDescriptor(o,n):void 0})(a,t,e)}const p=class p{constructor(){this.initialized=!1}static getInstance(){return p.instance||(p.instance=new p),p.instance}async initialize(){if(!this.initialized)try{await u.extensionManager.initialize(),this.setupUIHooks(),this.initialized=!0}catch{}}setupUIHooks(){u.registerHook({name:"field-render",priority:1,handler:this.handleFieldRender.bind(this)}),u.registerHook({name:"field-validate",priority:1,handler:this.handleFieldValidate.bind(this)})}handleFieldRender(t,e){return e}handleFieldValidate(t,e){return{valid:!0,message:""}}async registerUIPlugin(t){await u.registerPlugin(t)}getExtensionStats(){return u.extensionManager.getStats()}async executeUIHooks(t,e,...r){return u.extensionManager.executeHooks(t,e,...r)}};p.instance=null;let w=p;const F=w.getInstance(),B=h.css`
  :host {
    display: block;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.5;
    color: var(--theme-text-primary, #1f2937);
    background: var(--theme-bg-primary, #ffffff);
    max-width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
  }

  * {
    box-sizing: border-box;
  }

  .formdown-form {
    max-width: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    display: none; /* Hidden form for form attribute reference */
  }

  .formdown-field {
    margin-bottom: 1.5rem;
    max-width: 100%;
  }

  /* Add spacing between consecutive field containers */
  .formdown-field-container {
    margin-bottom: 0.75rem;
  }

  .formdown-field-container:last-child {
    margin-bottom: 0;
  }

  label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--theme-text-primary, #374151);
    font-size: 0.875rem;
    line-height: 1.25;
  }

  input, textarea, select {
    width: 100%;
    max-width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    transition: all 0.15s ease-in-out;
    background-color: var(--theme-bg-primary, #ffffff);
    color: var(--theme-text-primary, #1f2937);
  }

  /* Placeholder styling for all input types */
  input::placeholder, textarea::placeholder {
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
    opacity: 0.8;
  }

  input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background-color: var(--theme-bg-primary, #ffffff);
  }

  input:hover, textarea:hover, select:hover {
    border-color: var(--theme-text-secondary, #9ca3af);
  }

  input[type="radio"], input[type="checkbox"] {
    width: auto;
    max-width: none;
    margin-right: 0.5rem;
    margin-bottom: 0;
  }

  textarea {
    min-height: 6rem;
    resize: vertical;
  }

  select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
  }

  fieldset {
    border: 1px solid var(--theme-border, #d1d5db);
    border-radius: 0.5rem;
    padding: 1.25rem;
    margin: 0 0 1.5rem 0;
    max-width: 100%;
    background-color: var(--theme-bg-primary, #ffffff);
  }

  legend {
    font-weight: 600;
    color: var(--theme-text-primary, #374151);
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }

  fieldset label {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-weight: normal;
    font-size: 0.875rem;
  }

  /* Enhanced inline formdown-field elements with contentEditable */
  formdown-field,
  [contenteditable="true"]:not(textarea) {
    display: inline-block;
    min-width: 60px;
    max-width: 200px;
    font-style: normal;
    color: inherit;
    font-size: inherit;
    line-height: 1.5;
    font-family: inherit;
    font-weight: inherit;
    cursor: text;
    outline: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    box-decoration-break: clone;
  }

  /* Placeholder for inline contenteditable fields */
  [contenteditable="true"]:not(textarea):empty::before {
    content: attr(data-placeholder);
    color: var(--theme-text-secondary, #94a3b8);
    font-style: italic;
    font-weight: normal;
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
  }

  /* Enhanced visual styling for inline fields */
  [contenteditable="true"]:not(textarea) {
    border: 1px solid var(--theme-border, rgba(209, 213, 219, 0.6));
    background-color: var(--theme-bg-secondary, rgba(248, 250, 252, 0.8));
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
    min-height: 1.5em;
  }

  [contenteditable="true"]:not(textarea):hover {
    background-color: var(--theme-bg-secondary, rgba(241, 245, 249, 0.9));
    border-color: var(--theme-border, rgba(156, 163, 175, 0.8));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), inset 0 1px 2px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
  }

  [contenteditable="true"]:not(textarea):focus {
    background-color: var(--theme-bg-primary, #ffffff);
    border-color: var(--theme-accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 2px 8px rgba(0, 0, 0, 0.15);
    color: var(--theme-text-primary, #1f2937);
    transform: translateY(-1px);
  }

  /* Better visual distinction when field has content */
  [contenteditable="true"]:not(textarea):not(:empty) {
    background-color: var(--theme-bg-primary, #ffffff);
    border-color: var(--theme-border, rgba(156, 163, 175, 0.9));
    font-weight: normal;
  }

  /* Enhanced typography for markdown content */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--theme-text-primary, #1f2937);
    font-weight: 600;
    line-height: 1.25;
  }

  h1 {
    font-size: 2.25rem;
    font-weight: 700;
  }
  h2 {
    font-size: 1.875rem;
    font-weight: 600;
  }
  h3 {
    font-size: 1.5rem;
    font-weight: 600;
  }
  h4 {
    font-size: 1.25rem;
    font-weight: 600;
  }
  h5 {
    font-size: 1.125rem;
    font-weight: 600;
  }
  h6 {
    font-size: 1rem;
    font-weight: 600;
  }

  p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--theme-text-secondary, #4b5563);
  }

  /* Code blocks */
  pre {
    background-color: var(--theme-bg-secondary, #f6f8fa);
    border: 1px solid var(--theme-border, #d0d7de);
    border-radius: 0.375rem;
    padding: 1rem;
    margin: 1rem 0;
    overflow-x: auto;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
  }

  code {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875em;
    background-color: var(--theme-bg-secondary, rgba(175, 184, 193, 0.2));
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    color: var(--theme-text-primary, #1f2937);
  }

  pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: 0.875rem;
    color: var(--theme-text-primary, #24292f);
  }

  /* Syntax highlighting support (basic) */
  .language-javascript, .language-js,
  .language-typescript, .language-ts,
  .language-python, .language-py,
  .language-html, .language-css,
  .language-json, .language-bash {
    display: block;
  }

  /* Responsive design */
  @media (max-width: 768px) {
    :host {
      font-size: 0.875rem;
    }

    input, textarea, select {
      padding: 0.625rem;
      font-size: 0.875rem;
    }

    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
  }

  .error {
    color: var(--theme-error, #dc2626);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    display: block;
  }

  /* Field validation styles */
  .field-error {
    border-color: var(--theme-error, #dc2626) !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.1) !important;
  }

  .field-error:focus {
    border-color: var(--theme-error, #dc2626) !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
  }

  .validation-error-message {
    color: var(--theme-error, #dc2626);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    display: block;
    font-weight: 500;
  }

  /* Success state */
  .field-valid {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.1) !important;
  }

  /* Base button styles - all buttons */
  .submit-button,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    color: white;
    padding: 0.75rem 1.75rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    margin-top: 1.5rem;
    width: auto;
    max-width: 100%;
    letter-spacing: 0.025em;
    position: relative;
    overflow: hidden;
    font-family: inherit;
  }

  /* Shine effect for all buttons */
  .submit-button::before,
  button::before,
  input[type="submit"]::before,
  input[type="button"]::before,
  input[type="reset"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease-in-out;
  }

  /* Hover shine effect */
  .submit-button:hover::before,
  button:hover::before,
  input[type="submit"]:hover::before,
  input[type="button"]:hover::before,
  input[type="reset"]:hover::before {
    left: 100%;
  }

  /* Common hover state */
  .submit-button:hover,
  button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover,
  input[type="reset"]:hover {
    transform: translateY(-2px);
  }

  /* Common active state */
  .submit-button:active,
  button:active,
  input[type="submit"]:active,
  input[type="button"]:active,
  input[type="reset"]:active {
    transform: translateY(0);
  }

  /* Common disabled state */
  .submit-button:disabled,
  button:disabled,
  input[type="submit"]:disabled,
  input[type="button"]:disabled,
  input[type="reset"]:disabled {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    opacity: 0.6;
  }

  .submit-button:disabled::before,
  button:disabled::before,
  input[type="submit"]:disabled::before,
  input[type="button"]:disabled::before,
  input[type="reset"]:disabled::before {
    display: none;
  }

  /* Primary button (submit) - Blue */
  .submit-button,
  button[type="submit"],
  input[type="submit"],
  button:not([type]) {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .submit-button:hover,
  button[type="submit"]:hover,
  input[type="submit"]:hover,
  button:not([type]):hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .submit-button:active,
  button[type="submit"]:active,
  input[type="submit"]:active,
  button:not([type]):active {
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Secondary button - Slate */
  button[type="button"],
  input[type="button"] {
    background: linear-gradient(135deg, #64748b 0%, #475569 100%);
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  button[type="button"]:hover,
  input[type="button"]:hover {
    background: linear-gradient(135deg, #475569 0%, #334155 100%);
    box-shadow: 0 6px 12px rgba(100, 116, 139, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  button[type="button"]:active,
  input[type="button"]:active {
    box-shadow: 0 2px 4px rgba(100, 116, 139, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Danger button (reset) - Red */
  button[type="reset"],
  input[type="reset"] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  button[type="reset"]:hover,
  input[type="reset"]:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 6px 12px rgba(239, 68, 68, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  button[type="reset"]:active,
  input[type="reset"]:active {
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* Ensure content doesn't overflow */
  #content-container {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Radio and checkbox groups */
  .radio-group, .checkbox-group {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  /* Inline layout (default) */
  .radio-group.inline, .checkbox-group.inline {
    flex-direction: row;
    align-items: center;
  }

  /* Vertical layout */
  .radio-group.vertical, .checkbox-group.vertical {
    flex-direction: column;
    align-items: flex-start;
  }

  .formdown-option-label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .formdown-option-label input {
    margin-right: 0.5rem;
    margin-bottom: 0;
  }

  .formdown-option-label span {
    user-select: none;
  }

  /* Legacy support for old structure */
  .radio-group label, .checkbox-group label {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    font-weight: normal;
    cursor: pointer;
  }

  /* Better spacing for form elements */
  .formdown-form > * + * {
    margin-top: 1rem;
  }

  /* Table styles - GitHub Flavored Markdown standard */
  .formdown-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--formdown-table-margin, 1rem 0);
    background-color: var(--formdown-table-bg, var(--theme-bg-primary, #ffffff));
    border: var(--formdown-table-border-width, 1px) solid var(--formdown-table-border-color, var(--theme-border, #d0d7de));
    border-radius: var(--formdown-table-border-radius, 6px);
    overflow: hidden;
    font-size: var(--formdown-table-font-size, 0.875rem);
  }

  .formdown-table thead {
    background-color: var(--formdown-table-header-bg, var(--theme-bg-secondary, #f6f8fa));
    border-bottom: var(--formdown-table-header-border-width, 1px) solid var(--formdown-table-border-color, var(--theme-border, #d0d7de));
  }

  .formdown-table th {
    padding: var(--formdown-table-cell-padding, 0.5rem 1rem);
    text-align: var(--formdown-table-header-align, left);
    font-weight: var(--formdown-table-header-weight, 600);
    font-size: var(--formdown-table-header-font-size, inherit);
    color: var(--formdown-table-header-color, var(--theme-text-primary, #1f2328));
    border-right: var(--formdown-table-cell-border-width, 1px) solid var(--formdown-table-border-color, var(--theme-border, #d0d7de));
  }

  .formdown-table th:last-child {
    border-right: none;
  }

  .formdown-table td {
    padding: var(--formdown-table-cell-padding, 0.5rem 1rem);
    border-top: var(--formdown-table-cell-border-width, 1px) solid var(--formdown-table-border-color, var(--theme-border, #d0d7de));
    border-right: var(--formdown-table-cell-border-width, 1px) solid var(--formdown-table-border-color, var(--theme-border, #d0d7de));
    color: var(--formdown-table-cell-color, var(--theme-text-secondary, #656d76));
    line-height: 1.5;
  }

  .formdown-table td:last-child {
    border-right: none;
  }

  .formdown-table tbody tr {
    transition: background-color var(--formdown-table-transition, 0.1s ease);
  }

  .formdown-table tbody tr:hover {
    background-color: var(--formdown-table-row-hover-bg, var(--theme-bg-secondary, #f6f8fa));
  }

  .formdown-table tbody tr:last-child td {
    border-bottom: none;
  }

  /* Inline fields within table cells */
  .formdown-table td [contenteditable="true"] {
    min-width: var(--formdown-table-inline-field-min-width, 80px);
    max-width: 100%;
    display: inline-block;
  }

  /* Responsive table on mobile */
  @media (max-width: 768px) {
    .formdown-table {
      font-size: var(--formdown-table-font-size-mobile, 0.8125rem);
      border-radius: var(--formdown-table-border-radius-mobile, 4px);
    }

    .formdown-table th,
    .formdown-table td {
      padding: var(--formdown-table-cell-padding-mobile, 0.375rem 0.75rem);
    }
  }
`;var V=Object.defineProperty,N=Object.getOwnPropertyDescriptor,m=(a,t,e,r)=>{for(var o=r>1?void 0:r?N(t,e):t,n=a.length-1,i;n>=0;n--)(i=a[n])&&(o=(r?i(t,e,o):i(o))||o);return r&&o&&V(t,e,o),o};d.FormdownUI=class extends h.LitElement{constructor(){super(),this.content="",this.selectOnFocus=!0,this.formId="",this.showSubmitButton=!0,this.submitText="Submit",this._data={},this.fieldRegistry=new Map,this._isUpdatingUI=!1,this._schema=null,this.formManager=new u.FormManager,this.domBinder=this.formManager.createDOMBinder(),this.setupCoreUIBridge(),this.setupFormManagerEvents()}get data(){return this._data}set data(t){if(this._isUpdatingUI)return;const e=this._data;this._data=t!=null&&typeof t=="object"?{...t}:{},this.requestUpdate("data",e),this.formManager&&this._schema&&!this._isUpdatingUI&&this.formManager.updateData(this._data)}updateData(t){this.data=t,this.formManager&&this._schema&&this.formManager.updateData(t)}updateField(t,e){this.data={...this.data,[t]:e},this.formManager&&this._schema&&this.formManager.setFieldValue(t,e)}setupCoreUIBridge(){this.formManager.setupComponentBridge({id:"formdown-ui",type:"ui",emit:(t,e)=>this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0})),on:(t,e)=>()=>{}})}setupFormManagerEvents(){this.formManager.on("data-change",({formData:t})=>{this._isUpdatingUI||(this._isUpdatingUI=!0,this.data=t,this._isUpdatingUI=!1)}),this.formManager.on("validation-error",({field:t,errors:e})=>{this.dispatchEvent(new CustomEvent("validation-error",{detail:{field:t,errors:e},bubbles:!0}))}),this.formManager.on("form-submit",({formData:t})=>{this.dispatchEvent(new CustomEvent("form-submit",{detail:{formData:t},bubbles:!0}))})}validate(){return!this.formManager||!this._schema?{isValid:!0,errors:[]}:this.formManager.validate()}getSchema(){return this._schema}reset(){this.formManager&&this._schema&&(this.formManager.reset(),this.data=this.formManager.getData())}isDirty(){return!this.formManager||!this._schema?!1:this.formManager.isDirty()}async connectedCallback(){var t;super.connectedCallback();try{await F.initialize()}catch{}!this.content&&((t=this.textContent)!=null&&t.trim())&&(this.content=this.textContent.trim(),this.textContent="")}render(){if(!this.content||!this.content.trim())return h.html`<div class="error">No Formdown content provided</div>`;try{this.formManager.parse(this.content),this._schema=this.formManager.getSchema(),this.data&&Object.keys(this.data).length>0&&this.formManager.updateData(this.data);const t=this.formManager.renderToTemplate({container:this});return!t.html||!t.html.trim()?h.html`<div class="error">Generated HTML is empty</div>`:h.html`<div id="content-container"></div>`}catch(t){const e=t instanceof Error?t.message:String(t);return h.html`<div class="error">Error rendering content: ${e}</div>`}}firstUpdated(){this.updateContent(),setTimeout(()=>{this.syncUIFromData()},0)}updated(t){super.updated(t),t.has("content")&&(this.updateContent(),setTimeout(()=>{this.syncUIFromData()},0)),t.has("data")&&this.syncUIFromData()}updateContent(){var t,e;if(!(!this.content||!this.content.trim()))try{const r=(t=this.shadowRoot)==null?void 0:t.querySelector("#content-container");if(!r)return;this.formManager.parse(this.content),this._schema=this.formManager.getSchema(),this.data&&Object.keys(this.data).length>0&&this.formManager.updateData(this.data);const o=this.formManager.renderToTemplate({container:this});if(!o.html||o.html.trim()===""){r.innerHTML='<div class="error">FormManager returned empty HTML</div>';return}r.innerHTML=o.html,this.injectExtensionAssets(r),this.setupFieldHandlers(r)}catch(r){const o=(e=this.shadowRoot)==null?void 0:e.querySelector("#content-container");if(o){const n=r instanceof Error?r.message:String(r);o.innerHTML=`<div class="error">Error: ${n}</div>`}}}injectExtensionAssets(t){try{const e=new Set;t.querySelectorAll("[data-field-type]").forEach(o=>{const n=o.getAttribute("data-field-type");n&&e.add(n)})}catch{}}setupFieldHandlers(t){this.fieldRegistry.clear(),t.querySelectorAll('input, textarea, select, [contenteditable="true"]').forEach(o=>{const n=o,i=this.getFieldName(n);i&&(this.registerField(i,n),this.setupFieldEventHandlers(n,i))});const r=t.querySelectorAll('input:not([type="radio"]):not([type="checkbox"]), [contenteditable="true"]');this.setupBasicKeyboardNavigation(r)}setupBasicKeyboardNavigation(t){t.forEach((e,r)=>{e.addEventListener("keydown",o=>{const n=o;if(n.key==="Enter"&&e.tagName.toLowerCase()!=="textarea"){n.preventDefault();const i=r+1;i<t.length&&t[i].focus()}})})}setupFieldEventHandlers(t,e){this.domBinder.bindFieldToElement(e,t);const r=n=>{this.formManager.handleUIEvent(n,this.domBinder);const i=this.getFieldValueFromElement(t);this.updateDataReactively(e,i)},o=n=>{const i=n.target;i.hasAttribute("contenteditable")&&setTimeout(()=>{const s=document.createRange(),l=window.getSelection();l&&i.textContent&&(s.selectNodeContents(i),l.removeAllRanges(),l.addRange(s))},0),i instanceof HTMLInputElement&&i.type!=="file"&&i.type!=="checkbox"&&i.type!=="radio"&&setTimeout(()=>{i.select()},0)};t.addEventListener("input",r),t.addEventListener("change",r),t.addEventListener("focus",o),t.hasAttribute("contenteditable")&&t.addEventListener("blur",r)}updateDataReactively(t,e,r){this._isUpdatingUI||(this.formManager.setFieldValue(t,e),this.data={...this.data,[t]:e},this.emitFieldEvents(t,e))}syncUIFromData(){var t;if(!this._isUpdatingUI){this._isUpdatingUI=!0;try{const e=(t=this.shadowRoot)==null?void 0:t.activeElement;this.domBinder.getValueAssignments(this.data).forEach(({element:o,value:n,fieldType:i})=>{const s=o;s!==e&&this.applyValueToElement(s,n,i)})}finally{this._isUpdatingUI=!1,this.domBinder.releaseSyncLock()}}}applyValueToElement(t,e,r){t instanceof HTMLInputElement?r==="checkbox"?typeof e=="boolean"?t.checked=e:Array.isArray(e)&&(t.checked=e.includes(t.value)):r==="radio"?t.checked=t.value===String(e):t.value=String(e??""):t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement?t.value=String(e??""):t.hasAttribute("contenteditable")&&(t.textContent=String(e??""))}getFieldName(t){return t instanceof HTMLInputElement||t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement?t.name||t.id||null:t.dataset.fieldName||t.id||null}getFieldValueFromElement(t){var e;if(t instanceof HTMLInputElement){if(t.type==="checkbox"){const r=t.name,o={querySelector:s=>{var l;return(l=this.shadowRoot)==null?void 0:l.querySelector(s)},querySelectorAll:s=>{var l;return Array.from(((l=this.shadowRoot)==null?void 0:l.querySelectorAll(s))||[])}},i=this.formManager.createFieldProcessor().processCheckboxGroup(r,o);return i.success?i.value:t.checked}else if(t.type==="radio")return t.value;return t.value}else{if(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)return t.value;if(t.hasAttribute("contenteditable"))return((e=t.textContent)==null?void 0:e.trim())||""}return""}registerField(t,e){this.fieldRegistry.has(t)||this.fieldRegistry.set(t,new Set),this.fieldRegistry.get(t).add(e)}emitFieldEvents(t,e){const r=this.getFormData();this.dispatchEvent(new CustomEvent("formdown-change",{detail:{fieldName:t,value:e,formData:r},bubbles:!0})),this.dispatchEvent(new CustomEvent("formdown-data-update",{detail:{formData:r},bubbles:!0}))}syncFieldValue(t,e){this.formManager.setFieldValue(t,e),this.data=this.formManager.getData(),this.emitFieldEvents(t,e)}updateFormData(t,e){this.formManager.setFieldValue(t,e),this.data=this.formManager.getData(),this.emitFieldEvents(t,e)}getFormData(){return this.formManager.getData()}getDefaultValues(){return this.formManager.getDefaultValues()}clearValidationStates(){var e;const t=(e=this.shadowRoot)==null?void 0:e.querySelector("#content-container");t&&(t.querySelectorAll(".field-error, .field-valid").forEach(r=>{r.classList.remove("field-error","field-valid")}),t.querySelectorAll(".validation-error-message").forEach(r=>r.remove()))}resetForm(){this.formManager.reset(),this.data=this.formManager.getData(),this.clearValidationStates()}setFormData(t){var r;if(!this.formManager)return;const e=(r=this.shadowRoot)==null?void 0:r.querySelector("#content-container");e&&(Object.entries(t).forEach(([o,n])=>{let i=e.querySelector(`[name="${o}"]`);i||(i=e.querySelector(`[data-field-name="${o}"]`)),i||(i=e.querySelector(`#${o}`)),i&&(i.hasAttribute("contenteditable")?i.textContent=String(n||""):i instanceof HTMLInputElement?i.type==="checkbox"||i.type==="radio"?i.checked=!!n:i.value=String(n||""):(i instanceof HTMLTextAreaElement||i instanceof HTMLSelectElement)&&(i.value=String(n||"")),i.dispatchEvent(new Event("input",{bubbles:!0})))}),this.data={...t})}},d.FormdownUI.styles=B,m([f()],d.FormdownUI.prototype,"content",2),m([f({type:Boolean,attribute:"select-on-focus"})],d.FormdownUI.prototype,"selectOnFocus",2),m([f({attribute:"form-id"})],d.FormdownUI.prototype,"formId",2),m([f({type:Boolean,attribute:"show-submit-button"})],d.FormdownUI.prototype,"showSubmitButton",2),m([f({attribute:"submit-text"})],d.FormdownUI.prototype,"submitText",2),m([f({type:Object})],d.FormdownUI.prototype,"data",1),d.FormdownUI=m([C("formdown-ui")],d.FormdownUI);const K=(a,t={})=>{const e=document.createElement("formdown-ui");return t.content&&(e.content=t.content),t.formId&&(e.formId=t.formId),t.showSubmitButton!==void 0&&(e.showSubmitButton=t.showSubmitButton),t.submitText&&(e.submitText=t.submitText),a.appendChild(e),e},W=()=>{};d.UIExtensionSupport=w,d.createFormdownUI=K,d.registerFormdownUI=W,d.uiExtensionSupport=F,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})});