From 8b9f3f7958262b9bfa10aee5fc4fc846682a60e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Krystian=20Droz=CC=87dz=CC=87yn=CC=81ski?=
 <krystian@drozdzynski.me>
Date: Sat, 1 Jun 2024 20:05:20 +0200
Subject: [PATCH] Fix elements attributes per type in Vue

---
 .changeset/stupid-clocks-provide.md | 5 +++++
 packages/vue/src/component.ts       | 7 ++++---
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/stupid-clocks-provide.md

diff --git a/.changeset/stupid-clocks-provide.md b/.changeset/stupid-clocks-provide.md
new file mode 100644
index 0000000..af41f84
--- /dev/null
+++ b/.changeset/stupid-clocks-provide.md
@@ -0,0 +1,5 @@
+---
+"@teiler/vue": patch
+---
+
+Fix elements attributes per type
diff --git a/packages/vue/src/component.ts b/packages/vue/src/component.ts
index f82fca1..57aa3d4 100644
--- a/packages/vue/src/component.ts
+++ b/packages/vue/src/component.ts
@@ -1,12 +1,13 @@
 import type { Compiler, DefaultTheme, HTMLElements, Properties, Sheet, StyleDefinition, TeilerComponent } from '@teiler/core'
-import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DefineComponent, IntrinsicElementAttributes } from 'vue'
 
 import Styled from './Styled'
 
 import { component, global, keyframes, styled, tags } from '@teiler/core'
 
+type Attributes<Target extends HTMLElements> = Pick<IntrinsicElementAttributes, Target>[Target]
 type VueRawBindings = { styleSheet: Sheet; theme: DefaultTheme }
-type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props & HTMLAttributes, VueRawBindings, {}, {}, {}>
+type VueTeilerComponent<Target extends HTMLElements, Props> = TeilerComponent<Target, Props> & DefineComponent<Props & Attributes<Target>, VueRawBindings, {}, {}, {}>
 
 const createComponent = <Target extends HTMLElements, Props>(styleDefinition: StyleDefinition<Target, Props>): VueTeilerComponent<Target, Props> => {
   const component = Styled(styleDefinition)
@@ -14,7 +15,7 @@ const createComponent = <Target extends HTMLElements, Props>(styleDefinition: St
 }
 
 type InferProps<Component, Props> = Component extends VueTeilerComponent<HTMLElements, infer P> ? P & Props : Props
-type InferComponent<Component, Props> = Component extends VueTeilerComponent<infer E, infer P> ? VueTeilerComponent<E, Props & P> : VueTeilerComponent<HTMLElements, Props>
+type InferComponent<Component, Props> = Component extends VueTeilerComponent<infer E extends HTMLElements, infer P> ? VueTeilerComponent<E, Props & P> : VueTeilerComponent<HTMLElements, Props>
 
 type Component<Target extends HTMLElements> = {
   <Props extends object = {}>(string: TemplateStringsArray, ...properties: Properties<Props>[]): VueTeilerComponent<Target, Props>