@ktjs/mui 0.18.8 → 0.19.0

package/dist/index.d.ts

@@ -1,5 +1,1269 @@
-import { KTHTMLElement, KTRef as KTRef$1, KTAttribute } from 'kt.js';
-import { KTHTMLElement as KTHTMLElement$1, KTRef } from '@ktjs/core';
+type otherstring = string & {};
+
+type RefChangeHandler<T> = (newValue: T, oldValue: T) => void;
+declare class KTRef<T> {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT: boolean;
+    private _value;
+    private _onChanges;
+    constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
+    /**
+     * If new value and old value are both nodes, the old one will be replaced in the DOM
+     */
+    get value(): T;
+    set value(newValue: T);
+    addOnChange(callback: RefChangeHandler<T>): void;
+    removeOnChange(callback: RefChangeHandler<T>): boolean;
+}
+
+// Base events available to all HTML elements
+interface BaseAttr {
+  [k: string]: any;
+
+  // # base attributes
+  class?: string;
+  className?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  // # Events
+  // Mouse events
+  'on:click'?: (ev: PointerEvent) => void;
+  'on:dblclick'?: (ev: PointerEvent) => void;
+  'on:mousedown'?: (ev: PointerEvent) => void;
+  'on:mouseup'?: (ev: MouseEvent) => void;
+  'on:mousemove'?: (ev: MouseEvent) => void;
+  'on:mouseenter'?: (ev: MouseEvent) => void;
+  'on:mouseleave'?: (ev: MouseEvent) => void;
+  'on:mouseover'?: (ev: MouseEvent) => void;
+  'on:mouseout'?: (ev: MouseEvent) => void;
+  'on:contextmenu'?: (ev: PointerEvent) => void;
+
+  // Keyboard events
+  'on:keydown'?: (ev: KeyboardEvent) => void;
+  'on:keyup'?: (ev: KeyboardEvent) => void;
+  'on:keypress'?: (ev: KeyboardEvent) => void;
+
+  // Focus events
+  'on:focus'?: (ev: FocusEvent) => void;
+  'on:blur'?: (ev: FocusEvent) => void;
+  'on:focusin'?: (ev: FocusEvent) => void;
+  'on:focusout'?: (ev: FocusEvent) => void;
+
+  // Input events
+  'on:input'?: (ev: Event) => void;
+  'on:change'?: (ev: Event) => void;
+  'on:beforeinput'?: (ev: InputEvent) => void;
+
+  // Drag events
+  'on:drag'?: (ev: DragEvent) => void;
+  'on:dragstart'?: (ev: DragEvent) => void;
+  'on:dragend'?: (ev: DragEvent) => void;
+  'on:dragenter'?: (ev: DragEvent) => void;
+  'on:dragleave'?: (ev: DragEvent) => void;
+  'on:dragover'?: (ev: DragEvent) => void;
+  'on:drop'?: (ev: DragEvent) => void;
+
+  // Clipboard events
+  'on:copy'?: (ev: ClipboardEvent) => void;
+  'on:cut'?: (ev: ClipboardEvent) => void;
+  'on:paste'?: (ev: ClipboardEvent) => void;
+
+  // Touch events
+  'on:touchstart'?: (ev: TouchEvent) => void;
+  'on:touchmove'?: (ev: TouchEvent) => void;
+  'on:touchend'?: (ev: TouchEvent) => void;
+  'on:touchcancel'?: (ev: TouchEvent) => void;
+
+  // Wheel event
+  'on:wheel'?: (ev: WheelEvent) => void;
+
+  // Animation events
+  'on:animationstart'?: (ev: AnimationEvent) => void;
+  'on:animationend'?: (ev: AnimationEvent) => void;
+  'on:animationiteration'?: (ev: AnimationEvent) => void;
+
+  // Transition events
+  'on:transitionstart'?: (ev: TransitionEvent) => void;
+  'on:transitionend'?: (ev: TransitionEvent) => void;
+  'on:transitionrun'?: (ev: TransitionEvent) => void;
+  'on:transitioncancel'?: (ev: TransitionEvent) => void;
+
+  // Pointer events
+  'on:pointerdown'?: (ev: PointerEvent) => void;
+  'on:pointerup'?: (ev: PointerEvent) => void;
+  'on:pointermove'?: (ev: PointerEvent) => void;
+  'on:pointerenter'?: (ev: PointerEvent) => void;
+  'on:pointerleave'?: (ev: PointerEvent) => void;
+  'on:pointerover'?: (ev: PointerEvent) => void;
+  'on:pointerout'?: (ev: PointerEvent) => void;
+  'on:pointercancel'?: (ev: PointerEvent) => void;
+  'on:gotpointercapture'?: (ev: PointerEvent) => void;
+  'on:lostpointercapture'?: (ev: PointerEvent) => void;
+
+  // Selection events
+  'on:select'?: (ev: Event) => void;
+  'on:selectstart'?: (ev: Event) => void;
+
+  // Scroll event
+  'on:scroll'?: (ev: Event) => void;
+
+  // Resize event
+  'on:resize'?: (ev: UIEvent) => void;
+}
+
+// Form-specific events
+interface FormElementEvents {
+  'on:submit'?: (ev: SubmitEvent) => void;
+  'on:reset'?: (ev: Event) => void;
+  'on:invalid'?: (ev: Event) => void;
+}
+
+// Media-specific events
+interface MediaElementEvents {
+  'on:play'?: (ev: Event) => void;
+  'on:pause'?: (ev: Event) => void;
+  'on:playing'?: (ev: Event) => void;
+  'on:ended'?: (ev: Event) => void;
+  'on:canplay'?: (ev: Event) => void;
+  'on:canplaythrough'?: (ev: Event) => void;
+  'on:durationchange'?: (ev: Event) => void;
+  'on:emptied'?: (ev: Event) => void;
+  'on:loadeddata'?: (ev: Event) => void;
+  'on:loadedmetadata'?: (ev: Event) => void;
+  'on:loadstart'?: (ev: Event) => void;
+  'on:progress'?: (ev: ProgressEvent) => void;
+  'on:ratechange'?: (ev: Event) => void;
+  'on:seeked'?: (ev: Event) => void;
+  'on:seeking'?: (ev: Event) => void;
+  'on:stalled'?: (ev: Event) => void;
+  'on:suspend'?: (ev: Event) => void;
+  'on:timeupdate'?: (ev: Event) => void;
+  'on:volumechange'?: (ev: Event) => void;
+  'on:waiting'?: (ev: Event) => void;
+  'on:abort'?: (ev: UIEvent) => void;
+  'on:error'?: (ev: ErrorEvent) => void;
+}
+
+// Details-specific events
+interface DetailsElementEvents {
+  'on:toggle'?: (ev: Event) => void;
+}
+
+// Dialog-specific events
+interface DialogElementEvents {
+  'on:cancel'?: (ev: Event) => void;
+  'on:close'?: (ev: Event) => void;
+}
+
+// Image-specific events
+interface ImageElementEvents {
+  'on:load'?: (ev: Event) => void;
+  'on:error'?: (ev: ErrorEvent) => void;
+}
+
+interface AttributesMap {
+  // Anchor element
+  a: BaseAttr & {
+    download?: string;
+    href?: string;
+    hreflang?: string;
+    ping?: string;
+    referrerpolicy?:
+      | 'no-referrer'
+      | 'no-referrer-when-downgrade'
+      | 'origin'
+      | 'origin-when-cross-origin'
+      | 'same-origin'
+      | 'strict-origin'
+      | 'strict-origin-when-cross-origin'
+      | 'unsafe-url';
+    rel?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    type?: string;
+  };
+
+  // Area element
+  area: BaseAttr & {
+    alt?: string;
+    coords?: string;
+    download?: string;
+    href?: string;
+    ping?: string;
+    referrerpolicy?:
+      | 'no-referrer'
+      | 'no-referrer-when-downgrade'
+      | 'origin'
+      | 'origin-when-cross-origin'
+      | 'same-origin'
+      | 'strict-origin'
+      | 'strict-origin-when-cross-origin'
+      | 'unsafe-url';
+    rel?: string;
+    shape?: 'rect' | 'circle' | 'poly' | 'default';
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+  };
+
+  // Audio element
+  audio: BaseAttr &
+    MediaElementEvents & {
+      autoplay?: boolean;
+      controls?: boolean;
+      crossorigin?: 'anonymous' | 'use-credentials' | '';
+      loop?: boolean;
+      muted?: boolean;
+      preload?: 'none' | 'metadata' | 'auto' | '';
+      src?: string;
+    };
+
+  // Base element
+  base: BaseAttr & {
+    href?: string;
+    target?: '_self' | '_blank' | '_parent' | '_top' | string;
+  };
+
+  // Body element
+  body: BaseAttr & {};
+
+  // BR element
+  br: BaseAttr & {};
+
+  // Button element
+  button: BaseAttr & {
+    disabled?: boolean;
+    form?: string;
+    formaction?: string;
+    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    formmethod?: 'get' | 'post' | 'dialog';
+    formnovalidate?: boolean;
+    formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
+    name?: string;
+    type?: 'submit' | 'reset' | 'button';
+    value?: string;
+  };
+
+  // Canvas element
+  canvas: BaseAttr & {
+    height?: number | string;
+    width?: number | string;
+  };
+
+  // Table caption element
+  caption: BaseAttr & {};
+
+  // Col element
+  col: BaseAttr & {
+    span?: number | string;
+  };
+
+  // Colgroup element
+  colgroup: BaseAttr & {
+    span?: number | string;
+  };
+
+  // Data element
+  data: BaseAttr & {
+    value?: string;
+  };
+
+  // Datalist element
+  datalist: BaseAttr & {};
+
+  // Del element
+  del: BaseAttr & {
+    cite?: string;
+    datetime?: string;
+  };
+
+  // Details element
+  details: BaseAttr &
+    DetailsElementEvents & {
+      open?: boolean;
+    };
+
+  // Dialog element
+  dialog: BaseAttr &
+    DialogElementEvents & {
+      open?: boolean;
+    };
+
+  // Embed element
+  embed: BaseAttr & {
+    height?: number | string;
+    src?: string;
+    type?: string;
+    width?: number | string;
+  };
+
+  // Fieldset element
+  fieldset: BaseAttr & {
+    disabled?: boolean;
+    form?: string;
+    name?: string;
+  };
+
+  // Form element
+  form: BaseAttr &
+    FormElementEvents & {
+      'accept-charset'?: string;
+      action?: string;
+      autocomplete?: 'on' | 'off';
+      enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+      method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+
+      name?: string;
+      novalidate?: boolean;
+      target?: '_self' | '_blank' | '_parent' | '_top' | string;
+    };
+
+  // Head element
+  head: BaseAttr & {};
+
+  // HR element
+  hr: BaseAttr & {};
+
+  // HTML element
+  html: BaseAttr & {};
+
+  // IFrame element
+  iframe: BaseAttr &
+    ImageElementEvents & {
+      allow?: string;
+      allowfullscreen?: boolean;
+      allowpaymentrequest?: boolean;
+      height?: number | string;
+      loading?: 'eager' | 'lazy';
+      name?: string;
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      sandbox?: string;
+      src?: string;
+      srcdoc?: string;
+      width?: number | string;
+    };
+
+  // Image element
+  img: BaseAttr &
+    ImageElementEvents & {
+      alt?: string;
+      crossorigin?: 'anonymous' | 'use-credentials' | '';
+      decoding?: 'sync' | 'async' | 'auto';
+      height?: number | string;
+      ismap?: boolean;
+      loading?: 'eager' | 'lazy';
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      sizes?: string;
+      src?: string;
+      srcset?: string;
+      usemap?: string;
+      width?: number | string;
+    };
+
+  // Input element
+  input: BaseAttr & {
+    accept?: string;
+    alt?: string;
+    autocomplete?: string;
+    checked?: boolean;
+    dirname?: string;
+    disabled?: boolean;
+    form?: string;
+    formaction?: string;
+    formenctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    formmethod?: 'get' | 'post';
+    formnovalidate?: boolean;
+    formtarget?: '_self' | '_blank' | '_parent' | '_top' | string;
+    height?: number | string;
+    list?: string;
+    max?: number | string;
+    maxlength?: number | string;
+    min?: number | string;
+    minlength?: number | string;
+    multiple?: boolean;
+    name?: string;
+    pattern?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    size?: number | string;
+    src?: string;
+    step?: number | string;
+    type?:
+      | 'button'
+      | 'checkbox'
+      | 'color'
+      | 'date'
+      | 'datetime-local'
+      | 'email'
+      | 'file'
+      | 'hidden'
+      | 'image'
+      | 'month'
+      | 'number'
+      | 'password'
+      | 'radio'
+      | 'range'
+      | 'reset'
+      | 'search'
+      | 'submit'
+      | 'tel'
+      | 'text'
+      | 'time'
+      | 'url'
+      | 'week';
+    value?: string;
+    width?: number | string;
+  };
+
+  // Ins element
+  ins: BaseAttr & {
+    cite?: string;
+    datetime?: string;
+  };
+
+  // Label element
+  label: BaseAttr & {
+    for?: string;
+  };
+
+  // Legend element
+  legend: BaseAttr & {};
+
+  // LI element
+  li: BaseAttr & {
+    value?: number | string;
+  };
+
+  // Link element
+  link: BaseAttr &
+    ImageElementEvents & {
+      as?: string;
+      crossorigin?: 'anonymous' | 'use-credentials' | '';
+      disabled?: boolean;
+      href?: string;
+      hreflang?: string;
+      imagesizes?: string;
+      imagesrcset?: string;
+      integrity?: string;
+      media?: string;
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      rel?: string;
+      sizes?: string;
+      type?: string;
+    };
+
+  // Map element
+  map: BaseAttr & {
+    name?: string;
+  };
+
+  // Menu element
+  menu: BaseAttr & {};
+
+  // Meta element
+  meta: BaseAttr & {
+    charset?: string;
+    content?: string;
+    'http-equiv'?: 'content-security-policy' | 'content-type' | 'default-style' | 'refresh' | string;
+    name?: string;
+  };
+
+  // Meter element
+  meter: BaseAttr & {
+    form?: string;
+    high?: number | string;
+    low?: number | string;
+    max?: number | string;
+    min?: number | string;
+    optimum?: number | string;
+    value?: number | string;
+  };
+
+  // Object element
+  object: BaseAttr &
+    ImageElementEvents & {
+      data?: string;
+      form?: string;
+      height?: number | string;
+      name?: string;
+      type?: string;
+      usemap?: string;
+      width?: number | string;
+    };
+
+  // OL element
+  ol: BaseAttr & {
+    reversed?: boolean;
+    start?: number | string;
+    type?: '1' | 'a' | 'A' | 'i' | 'I';
+  };
+
+  // Optgroup element
+  optgroup: BaseAttr & {
+    disabled?: boolean;
+    label?: string;
+  };
+
+  // Option element
+  option: BaseAttr & {
+    disabled?: boolean;
+    label?: string;
+    selected?: boolean;
+    value?: string;
+  };
+
+  // Output element
+  output: BaseAttr & {
+    for?: string;
+    form?: string;
+    name?: string;
+  };
+
+  // Picture element
+  picture: BaseAttr & {};
+
+  // Pre element
+  pre: BaseAttr & {};
+
+  // Progress element
+  progress: BaseAttr & {
+    max?: number | string;
+    value?: number | string;
+  };
+
+  // Quote element (q and blockquote)
+  q: BaseAttr & {
+    cite?: string;
+  };
+
+  blockquote: BaseAttr & {
+    cite?: string;
+  };
+
+  // Script element
+  script: BaseAttr &
+    ImageElementEvents & {
+      async?: boolean;
+      crossorigin?: 'anonymous' | 'use-credentials' | '';
+      defer?: boolean;
+      integrity?: string;
+      nomodule?: boolean;
+      referrerpolicy?:
+        | 'no-referrer'
+        | 'no-referrer-when-downgrade'
+        | 'origin'
+        | 'origin-when-cross-origin'
+        | 'same-origin'
+        | 'strict-origin'
+        | 'strict-origin-when-cross-origin'
+        | 'unsafe-url';
+      src?: string;
+      type?: string;
+    };
+
+  // Select element
+  select: BaseAttr & {
+    autocomplete?: string;
+    disabled?: boolean;
+    form?: string;
+    multiple?: boolean;
+    name?: string;
+    required?: boolean;
+    size?: number | string;
+  };
+
+  // Slot element
+  slot: BaseAttr & {
+    name?: string;
+  };
+
+  // Source element
+  source: BaseAttr & {
+    height?: number | string;
+    media?: string;
+    sizes?: string;
+    src?: string;
+    srcset?: string;
+    type?: string;
+    width?: number | string;
+  };
+
+  // Style element
+  style: BaseAttr &
+    ImageElementEvents & {
+      media?: string;
+    };
+
+  // Table element
+  table: BaseAttr & {};
+
+  // Table body/footer/header elements
+  tbody: BaseAttr & {};
+
+  tfoot: BaseAttr & {};
+
+  thead: BaseAttr & {};
+
+  // Table cell elements
+  td: BaseAttr & {
+    colspan?: number | string;
+    headers?: string;
+    rowspan?: number | string;
+  };
+
+  th: BaseAttr & {
+    abbr?: string;
+    colspan?: number | string;
+    headers?: string;
+    rowspan?: number | string;
+    scope?: 'row' | 'col' | 'rowgroup' | 'colgroup';
+  };
+
+  // Template element
+  template: BaseAttr & {};
+
+  // Textarea element
+  textarea: BaseAttr & {
+    autocomplete?: string;
+    cols?: number | string;
+    dirname?: string;
+    disabled?: boolean;
+    form?: string;
+    maxlength?: number | string;
+    minlength?: number | string;
+    name?: string;
+    placeholder?: string;
+    readonly?: boolean;
+    required?: boolean;
+    rows?: number | string;
+    wrap?: 'hard' | 'soft' | 'off';
+  };
+
+  // Time element
+  time: BaseAttr & {
+    datetime?: string;
+  };
+
+  // Title element
+  title: BaseAttr & {};
+
+  // TR element
+  tr: BaseAttr & {};
+
+  // Track element
+  track: BaseAttr & {
+    default?: boolean;
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    label?: string;
+    src?: string;
+    srclang?: string;
+  };
+
+  // UL element
+  ul: BaseAttr & {};
+
+  // Video element
+  video: BaseAttr &
+    MediaElementEvents & {
+      autoplay?: boolean;
+      controls?: boolean;
+      crossorigin?: 'anonymous' | 'use-credentials' | '';
+      height?: number | string;
+      loop?: boolean;
+      muted?: boolean;
+      playsinline?: boolean;
+      poster?: string;
+      preload?: 'none' | 'metadata' | 'auto' | '';
+      src?: string;
+      width?: number | string;
+    };
+
+  // Generic HTMLElement (no specific attributes beyond BaseEvent)
+  abbr: BaseAttr & {};
+  address: BaseAttr & {};
+  article: BaseAttr & {};
+  aside: BaseAttr & {};
+  b: BaseAttr & {};
+  bdi: BaseAttr & {};
+  bdo: BaseAttr & {};
+  cite: BaseAttr & {};
+  code: BaseAttr & {};
+  dd: BaseAttr & {};
+  dfn: BaseAttr & {};
+  div: BaseAttr & {};
+  dl: BaseAttr & {};
+  dt: BaseAttr & {};
+  em: BaseAttr & {};
+  figcaption: BaseAttr & {};
+  figure: BaseAttr & {};
+  footer: BaseAttr & {};
+  h1: BaseAttr & {};
+  h2: BaseAttr & {};
+  h3: BaseAttr & {};
+  h4: BaseAttr & {};
+  h5: BaseAttr & {};
+  h6: BaseAttr & {};
+  header: BaseAttr & {};
+  hgroup: BaseAttr & {};
+  i: BaseAttr & {};
+  kbd: BaseAttr & {};
+  main: BaseAttr & {};
+  mark: BaseAttr & {};
+  nav: BaseAttr & {};
+  noscript: BaseAttr & {};
+  p: BaseAttr & {};
+  rp: BaseAttr & {};
+  rt: BaseAttr & {};
+  ruby: BaseAttr & {};
+  s: BaseAttr & {};
+  samp: BaseAttr & {};
+  search: BaseAttr & {};
+  section: BaseAttr & {};
+  small: BaseAttr & {};
+  span: BaseAttr & {};
+  strong: BaseAttr & {};
+  sub: BaseAttr & {};
+  summary: BaseAttr & {};
+  sup: BaseAttr & {};
+  u: BaseAttr & {};
+  var: BaseAttr & {};
+  wbr: BaseAttr & {};
+
+  svg: BaseAttr & {
+    class?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
+    width?: number | string;
+    height?: number | string;
+    viewBox?: string;
+    xmlns?: string;
+    fill?: string;
+    stroke?: string;
+    strokeWidth?: number | string;
+    strokeLinecap?: 'butt' | 'round' | 'square' | 'inherit';
+    strokeLinejoin?: 'miter' | 'round' | 'bevel' | 'inherit';
+    strokeDasharray?: string;
+    strokeDashoffset?: number | string;
+    opacity?: number | string;
+    preserveAspectRatio?: string;
+    transform?: string;
+    x?: number | string;
+    y?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+    r?: number | string;
+    cx?: number | string;
+    cy?: number | string;
+    d?: string;
+    points?: string;
+    pathLength?: number | string;
+    viewbox?: string;
+    role?: string;
+    focusable?: boolean | 'true' | 'false';
+    xlinkHref?: string; // legacy xlink:href
+  };
+}
+
+interface SVGAttributesMap {
+  a: AttributesMap['svg'] & { href?: string; x?: number | string; y?: number | string };
+  animate: AttributesMap['svg'] & {
+    attributeName?: string;
+    from?: string | number;
+    to?: string | number;
+    dur?: string;
+    repeatCount?: string | number;
+  };
+  animateMotion: AttributesMap['svg'] & { path?: string; dur?: string; rotate?: string };
+  animateTransform: AttributesMap['svg'] & { type?: string; from?: string; to?: string; dur?: string };
+  circle: AttributesMap['svg'] & { cx?: number | string; cy?: number | string; r?: number | string };
+  clipPath: AttributesMap['svg'] & { clipPathUnits?: 'userSpaceOnUse' | 'objectBoundingBox' };
+  defs: AttributesMap['svg'];
+  desc: AttributesMap['svg'];
+  ellipse: AttributesMap['svg'] & {
+    cx?: number | string;
+    cy?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+  };
+
+  // Filter primitives (provide common props)
+  feBlend: AttributesMap['svg'] & { in?: string; in2?: string; mode?: string };
+  feColorMatrix: AttributesMap['svg'] & {
+    type?: 'matrix' | 'saturate' | 'hueRotate' | 'luminanceToAlpha';
+    values?: string;
+  };
+  feComponentTransfer: AttributesMap['svg'] & {};
+  feComposite: AttributesMap['svg'] & {
+    in?: string;
+    in2?: string;
+    operator?: string;
+    k1?: number | string;
+    k2?: number | string;
+    k3?: number | string;
+    k4?: number | string;
+  };
+  feConvolveMatrix: AttributesMap['svg'] & {
+    order?: string | number;
+    kernelMatrix?: string;
+    divisor?: string | number;
+    bias?: string | number;
+  };
+  feDiffuseLighting: AttributesMap['svg'] & {};
+  feDisplacementMap: AttributesMap['svg'] & {
+    in?: string;
+    in2?: string;
+    scale?: number | string;
+    xChannelSelector?: string;
+    yChannelSelector?: string;
+  };
+  feDistantLight: AttributesMap['svg'] & { azimuth?: number | string; elevation?: number | string };
+  feDropShadow: AttributesMap['svg'] & {
+    dx?: number | string;
+    dy?: number | string;
+    stdDeviation?: number | string;
+    floodColor?: string;
+    floodOpacity?: number | string;
+  };
+  feFlood: AttributesMap['svg'] & { floodColor?: string; floodOpacity?: number | string };
+  feFuncA: AttributesMap['svg'] & {};
+  feFuncB: AttributesMap['svg'] & {};
+  feFuncG: AttributesMap['svg'] & {};
+  feFuncR: AttributesMap['svg'] & {};
+  feGaussianBlur: AttributesMap['svg'] & { stdDeviation?: number | string; edgeMode?: string };
+  feImage: AttributesMap['svg'] & { href?: string };
+  feMerge: AttributesMap['svg'] & {};
+  feMergeNode: AttributesMap['svg'] & { in?: string };
+  feMorphology: AttributesMap['svg'] & { operator?: 'erode' | 'dilate'; radius?: number | string };
+  feOffset: AttributesMap['svg'] & { dx?: number | string; dy?: number | string };
+  fePointLight: AttributesMap['svg'] & { x?: number | string; y?: number | string; z?: number | string };
+  feSpecularLighting: AttributesMap['svg'] & {
+    specularConstant?: number | string;
+    specularExponent?: number | string;
+    surfaceScale?: number | string;
+  };
+  feSpotLight: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    z?: number | string;
+    pointsAtX?: number | string;
+    pointsAtY?: number | string;
+    pointsAtZ?: number | string;
+    specularExponent?: number | string;
+    limitingConeAngle?: number | string;
+  };
+  feTile: AttributesMap['svg'] & {};
+  feTurbulence: AttributesMap['svg'] & {
+    baseFrequency?: number | string;
+    numOctaves?: number | string;
+    seed?: number | string;
+    stitchTiles?: string;
+    type?: 'fractalNoise' | 'turbulence';
+  };
+
+  filter: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    filterUnits?: string;
+    primitiveUnits?: string;
+  };
+  foreignObject: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+  };
+  g: AttributesMap['svg'];
+  image: AttributesMap['svg'] & {
+    href?: string;
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+  };
+  line: AttributesMap['svg'] & {
+    x1?: number | string;
+    y1?: number | string;
+    x2?: number | string;
+    y2?: number | string;
+  };
+  linearGradient: AttributesMap['svg'] & {
+    x1?: number | string;
+    y1?: number | string;
+    x2?: number | string;
+    y2?: number | string;
+    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    gradientTransform?: string;
+  };
+  marker: AttributesMap['svg'] & {
+    markerUnits?: string;
+    markerWidth?: number | string;
+    markerHeight?: number | string;
+    refX?: number | string;
+    refY?: number | string;
+    orient?: string;
+  };
+  mask: AttributesMap['svg'] & {
+    maskUnits?: string;
+    maskContentUnits?: string;
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+  };
+  metadata: AttributesMap['svg'];
+  mpath: AttributesMap['svg'] & { href?: string };
+  path: AttributesMap['svg'] & { d?: string; pathLength?: number | string };
+  pattern: AttributesMap['svg'] & {
+    patternUnits?: string;
+    patternContentUnits?: string;
+    width?: number | string;
+    height?: number | string;
+    x?: number | string;
+    y?: number | string;
+  };
+  polygon: AttributesMap['svg'] & { points?: string };
+  polyline: AttributesMap['svg'] & { points?: string };
+  radialGradient: AttributesMap['svg'] & {
+    cx?: number | string;
+    cy?: number | string;
+    r?: number | string;
+    fx?: number | string;
+    fy?: number | string;
+    gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox';
+    gradientTransform?: string;
+  };
+  rect: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+    rx?: number | string;
+    ry?: number | string;
+  };
+  script: AttributesMap['svg'] & { href?: string; type?: string };
+  set: AttributesMap['svg'] & { attributeName?: string; to?: string | number; begin?: string; dur?: string };
+  stop: AttributesMap['svg'] & { offset?: number | string; stopColor?: string; stopOpacity?: number | string };
+  style: AttributesMap['svg'] & { media?: string };
+  svg: AttributesMap['svg'];
+  switch: AttributesMap['svg'];
+  symbol: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
+  text: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    dx?: number | string;
+    dy?: number | string;
+    textLength?: number | string;
+  };
+  textPath: AttributesMap['svg'] & { href?: string; startOffset?: number | string };
+  title: AttributesMap['svg'];
+  tspan: AttributesMap['svg'] & {
+    x?: number | string;
+    y?: number | string;
+    dx?: number | string;
+    dy?: number | string;
+  };
+  use: AttributesMap['svg'] & {
+    href?: string;
+    x?: number | string;
+    y?: number | string;
+    width?: number | string;
+    height?: number | string;
+  };
+  view: AttributesMap['svg'] & { viewBox?: string; preserveAspectRatio?: string };
+}
+
+type KTHTMLElement<El extends HTMLElement = HTMLElement> = El & {
+  /**
+   * Automically generate a redraw function if it is not provided
+   * @param props
+   */
+  redraw: (props?: KTAttribute, ...args: any[]) => KTHTMLElement;
+};
+
+declare global {
+  namespace JSX {
+    type Element = KTHTMLElement;
+
+    interface IntrinsicElements {
+      // Document-level & metadata
+      html: AttributesMap['html'];
+      head: AttributesMap['head'];
+      title: AttributesMap['title'];
+      base: AttributesMap['base'];
+      link: AttributesMap['link'];
+      meta: AttributesMap['meta'];
+
+      // Sectioning
+      body: AttributesMap['body'];
+      header: AttributesMap['header'];
+      footer: AttributesMap['footer'];
+      nav: AttributesMap['nav'];
+      main: AttributesMap['main'];
+      section: AttributesMap['section'];
+      article: AttributesMap['article'];
+      aside: AttributesMap['aside'];
+
+      // Headings
+      h1: AttributesMap['h1'];
+      h2: AttributesMap['h2'];
+      h3: AttributesMap['h3'];
+      h4: AttributesMap['h4'];
+      h5: AttributesMap['h5'];
+      h6: AttributesMap['h6'];
+
+      // Text content
+      p: AttributesMap['p'];
+      pre: AttributesMap['pre'];
+      code: AttributesMap['code'];
+      strong: AttributesMap['strong'];
+      small: AttributesMap['small'];
+      em: AttributesMap['em'];
+      br: AttributesMap['br'];
+      i: AttributesMap['i'];
+
+      // Lists
+      ul: AttributesMap['ul'];
+      ol: AttributesMap['ol'];
+      li: AttributesMap['li'];
+
+      // Tables
+      table: AttributesMap['table'];
+      thead: AttributesMap['thead'];
+      tbody: AttributesMap['tbody'];
+      tfoot: AttributesMap['tfoot'];
+      tr: AttributesMap['tr'];
+      th: AttributesMap['th'];
+      td: AttributesMap['td'];
+
+      // Forms
+      form: AttributesMap['form'];
+      label: AttributesMap['label'];
+      input: AttributesMap['input'];
+      textarea: AttributesMap['textarea'];
+      select: AttributesMap['select'];
+      option: AttributesMap['option'];
+      optgroup: AttributesMap['optgroup'];
+      button: AttributesMap['button'];
+      fieldset: AttributesMap['fieldset'];
+      legend: AttributesMap['legend'];
+      datalist: AttributesMap['datalist'];
+      output: AttributesMap['output'];
+
+      // Media & embedded
+      img: AttributesMap['img'];
+      picture: AttributesMap['picture'];
+      source: AttributesMap['source'];
+      audio: AttributesMap['audio'];
+      video: AttributesMap['video'];
+      track: AttributesMap['track'];
+      iframe: AttributesMap['iframe'];
+      embed: AttributesMap['embed'];
+      object: AttributesMap['object'];
+      canvas: AttributesMap['canvas'];
+
+      // Interactive & misc
+      a: AttributesMap['a'] & SVGAttributesMap['a'];
+      area: AttributesMap['area'];
+      map: AttributesMap['map'];
+      details: AttributesMap['details'];
+      dialog: AttributesMap['dialog'];
+      summary: AttributesMap['summary'];
+      slot: AttributesMap['slot'];
+
+      // Scripting & styles
+      script: AttributesMap['script'];
+      style: AttributesMap['style'];
+
+      // Semantic & phrasing
+      figure: AttributesMap['figure'];
+      figcaption: AttributesMap['figcaption'];
+      blockquote: AttributesMap['blockquote'];
+      q: AttributesMap['q'];
+
+      // Generic elements
+      div: AttributesMap['div'];
+      span: AttributesMap['span'];
+      address: AttributesMap['address'];
+      abbr: AttributesMap['abbr'];
+      b: AttributesMap['b'];
+      cite: AttributesMap['cite'];
+      dl: AttributesMap['dl'];
+      dt: AttributesMap['dt'];
+      dd: AttributesMap['dd'];
+      hr: AttributesMap['hr'];
+
+      // SVG
+      svg: AttributesMap['svg'];
+      // a: SVGAttributesMap['a'];
+      animate: SVGAttributesMap['animate'];
+      animateMotion: SVGAttributesMap['animateMotion'];
+      animateTransform: SVGAttributesMap['animateTransform'];
+      circle: SVGAttributesMap['circle'];
+      clipPath: SVGAttributesMap['clipPath'];
+      defs: SVGAttributesMap['defs'];
+      desc: SVGAttributesMap['desc'];
+      ellipse: SVGAttributesMap['ellipse'];
+      feBlend: SVGAttributesMap['feBlend'];
+      feColorMatrix: SVGAttributesMap['feColorMatrix'];
+      feComponentTransfer: SVGAttributesMap['feComponentTransfer'];
+      feComposite: SVGAttributesMap['feComposite'];
+      feConvolveMatrix: SVGAttributesMap['feConvolveMatrix'];
+      feDiffuseLighting: SVGAttributesMap['feDiffuseLighting'];
+      feDisplacementMap: SVGAttributesMap['feDisplacementMap'];
+      feDistantLight: SVGAttributesMap['feDistantLight'];
+      feDropShadow: SVGAttributesMap['feDropShadow'];
+      feFlood: SVGAttributesMap['feFlood'];
+      feFuncA: SVGAttributesMap['feFuncA'];
+      feFuncB: SVGAttributesMap['feFuncB'];
+      feFuncG: SVGAttributesMap['feFuncG'];
+      feFuncR: SVGAttributesMap['feFuncR'];
+      feGaussianBlur: SVGAttributesMap['feGaussianBlur'];
+      feImage: SVGAttributesMap['feImage'];
+      feMerge: SVGAttributesMap['feMerge'];
+      feMergeNode: SVGAttributesMap['feMergeNode'];
+      feMorphology: SVGAttributesMap['feMorphology'];
+      feOffset: SVGAttributesMap['feOffset'];
+      fePointLight: SVGAttributesMap['fePointLight'];
+      feSpecularLighting: SVGAttributesMap['feSpecularLighting'];
+      feSpotLight: SVGAttributesMap['feSpotLight'];
+      feTile: SVGAttributesMap['feTile'];
+      feTurbulence: SVGAttributesMap['feTurbulence'];
+      filter: SVGAttributesMap['filter'];
+      foreignObject: SVGAttributesMap['foreignObject'];
+      g: SVGAttributesMap['g'];
+      image: SVGAttributesMap['image'];
+      line: SVGAttributesMap['line'];
+      linearGradient: SVGAttributesMap['linearGradient'];
+      marker: SVGAttributesMap['marker'];
+      mask: SVGAttributesMap['mask'];
+      metadata: SVGAttributesMap['metadata'];
+      mpath: SVGAttributesMap['mpath'];
+      path: SVGAttributesMap['path'];
+      pattern: SVGAttributesMap['pattern'];
+      polygon: SVGAttributesMap['polygon'];
+      polyline: SVGAttributesMap['polyline'];
+      radialGradient: SVGAttributesMap['radialGradient'];
+      rect: SVGAttributesMap['rect'];
+      set: SVGAttributesMap['set'];
+      stop: SVGAttributesMap['stop'];
+      switch: SVGAttributesMap['switch'];
+      symbol: SVGAttributesMap['symbol'];
+      text: SVGAttributesMap['text'];
+      textPath: SVGAttributesMap['textPath'];
+      tspan: SVGAttributesMap['tspan'];
+      use: SVGAttributesMap['use'];
+      view: SVGAttributesMap['view'];
+    }
+
+    interface IntrinsicAttributes {
+      ref?: KTRef<HTMLElement>;
+      'k-if'?: any;
+      children?: KTRawContent;
+    }
+
+    interface ElementChildrenAttribute {
+      children: {};
+    }
+  }
+}
+
+type SingleContent = KTRef<any> | HTMLElement | Element | Node | string | number | boolean | null | undefined;
+type KTAvailableContent = SingleContent | KTAvailableContent[];
+type KTRawContent = KTAvailableContent | Promise<KTAvailableContent>;
+
+/**
+ * Used to create enhanced HTML elements
+ */
+interface KTBaseAttribute {
+  [k: string]: any;
+
+  // # kt-specific attributes
+  ref?: KTRef<KTHTMLElement>;
+  'k-if'?: any;
+
+  // # normal HTML attributes
+  id?: string;
+  class?: string;
+  className?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+
+  type?:
+    | 'text'
+    | 'password'
+    | 'email'
+    | 'number'
+    | 'tel'
+    | 'url'
+    | 'search'
+    | 'date'
+    | 'datetime-local'
+    | 'time'
+    | 'month'
+    | 'week'
+    | 'color'
+    | 'range'
+    | 'file'
+    | 'checkbox'
+    | 'radio'
+    | 'hidden'
+    | 'submit'
+    | 'reset'
+    | 'button'
+    | 'image'
+    | otherstring;
+  for?: string;
+
+  name?: string;
+  title?: string;
+  placeholder?: string;
+  contenteditable?: boolean;
+  value?: any;
+  valueAsDate?: Date;
+  valueAsNumber?: number;
+  label?: string;
+  disabled?: boolean;
+
+  min?: string | number;
+  max?: string | number;
+  step?: string | number;
+
+  selected?: boolean;
+  checked?: boolean;
+
+  action?: string;
+  method?: 'POST' | 'GET' | 'PUT' | 'DELETE' | 'PATCH' | 'HEAD' | 'OPTIONS' | 'CONNECT' | 'TRACE' | otherstring;
+}
+
+type KTPrefixedEventHandlers = {
+  [EventName in keyof HTMLElementEventMap as `on:${EventName}`]?: (ev: HTMLElementEventMap[EventName]) => void;
+};
+
+type KTAttribute = KTBaseAttribute & KTPrefixedEventHandlers;
 
 interface AlertProps {
     class?: string;
@@ -37,7 +1301,7 @@ declare function Button(props: ButtonProps): KTHTMLElement;
 
 interface KTMuiCheckboxProps {
   value: string;
-  label?: string | KTHTMLElement$1 | HTMLElement;
+  label?: string | KTHTMLElement | HTMLElement;
   checked?: boolean;
   size?: 'small' | 'medium';
   'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
@@ -56,13 +1320,13 @@ interface KTMuiCheckboxGroupProps {
   row?: boolean;
 }
 
-type KTMuiCheckbox = KTHTMLElement$1 & {
+type KTMuiCheckbox = KTHTMLElement & {
   checked: boolean;
   value: string;
   disabled: boolean;
 };
 
-type KTMuiCheckboxGroup = KTHTMLElement$1 & {
+type KTMuiCheckboxGroup = KTHTMLElement & {
   value: string[];
   disabled: boolean[];
   disableAll: () => void;
@@ -87,7 +1351,7 @@ interface KTMuiDialogProps {
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
     fullWidth?: boolean;
 }
-type KTMuiDialog = KTHTMLElement$1 & {
+type KTMuiDialog = KTHTMLElement & {
     /**
      * Controls whether the dialog is open or closed
      */
@@ -121,7 +1385,7 @@ interface LinearProgressProps {
     progress?: number;
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
 }
-type KTMuiLinearProgress = KTHTMLElement$1 & {
+type KTMuiLinearProgress = KTHTMLElement & {
     /**
      * Reactive property to get or set the current progress value (0-100)
      */
@@ -152,10 +1416,10 @@ interface KTMuiTextFieldProps<T extends InputTypes> {
   multiline?: boolean;
   rows?: number;
   size?: 'small' | 'medium';
-  'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
-  'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
-  'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
-  'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
+  'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+  'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+  'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+  'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
   'kt:blur'?: () => void;
   'kt:focus'?: () => void;
 }
@@ -217,7 +1481,7 @@ interface KTMuiRadioProps {
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   value: string;
-  label: string | KTHTMLElement$1 | HTMLElement;
+  label: string | KTHTMLElement | HTMLElement;
   checked?: boolean;
   size?: 'small' | 'medium';
   'kt:change'?: (checked: boolean, value: string) => void;
@@ -237,7 +1501,7 @@ interface KTMuiRadioGroupProps {
   row?: boolean;
 }
 
-type KTMuiRadio = KTHTMLElement$1 & {
+type KTMuiRadio = KTHTMLElement & {
   /**
    * The value of the radio button
    * @readonly
@@ -249,7 +1513,7 @@ type KTMuiRadio = KTHTMLElement$1 & {
    */
   checked: boolean;
 };
-type KTMuiRadioGroup = KTHTMLElement$1 & {
+type KTMuiRadioGroup = KTHTMLElement & {
   /**
    * Reactive checked state of the radio button
    */