+
`
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "accordion-element": Accordion
+ }
+}
diff --git a/examples/lit-ts/src/avatar.ts b/examples/lit-ts/src/avatar.ts
new file mode 100644
index 0000000000..5617888f60
--- /dev/null
+++ b/examples/lit-ts/src/avatar.ts
@@ -0,0 +1,39 @@
+import { spread } from "@open-wc/lit-helpers"
+import * as avatar from "@zag-js/avatar"
+import style from "@zag-js/shared/src/css/avatar.css?inline"
+import { html, unsafeCSS } from "lit"
+import { customElement } from "lit/decorators.js"
+import { Component } from "./component"
+import { normalizeProps, VanillaMachine } from "./lib"
+
+@customElement("avatar-element")
+export class Avatar extends Component
+
+
+
+ First Content
+
+
+
+
+ Second Content
+
+
+
+ Third Content
+
+ PA
+ 
+
`
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "avatar-element": Avatar
+ }
+}
diff --git a/examples/lit-ts/src/avatar2.ts b/examples/lit-ts/src/avatar2.ts
new file mode 100644
index 0000000000..885c062005
--- /dev/null
+++ b/examples/lit-ts/src/avatar2.ts
@@ -0,0 +1,43 @@
+import { spread } from "@open-wc/lit-helpers"
+import * as avatar from "@zag-js/avatar"
+import style from "@zag-js/shared/src/css/avatar.css?inline"
+import { html, LitElement, unsafeCSS } from "lit"
+import { customElement } from "lit/decorators.js"
+import { createId } from "./lib/create-id"
+import { ZagController } from "./zag-controller"
+
+@customElement("avatar-ctrl-element")
+export class Avatar extends LitElement {
+ zag: ZagController
+
+ PA
+
+
`
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "avatar-ctrl-element": Avatar
+ }
+}
diff --git a/examples/lit-ts/src/checkbox.ts b/examples/lit-ts/src/checkbox.ts
new file mode 100644
index 0000000000..0d9c9a9ddf
--- /dev/null
+++ b/examples/lit-ts/src/checkbox.ts
@@ -0,0 +1,36 @@
+import { spread } from "@open-wc/lit-helpers"
+import * as checkbox from "@zag-js/checkbox"
+import style from "@zag-js/shared/src/css/checkbox.css?inline"
+import { html, unsafeCSS } from "lit"
+import { customElement } from "lit/decorators.js"
+import { Component } from "./component"
+import { normalizeProps, VanillaMachine } from "./lib"
+
+@customElement("checkbox-element")
+export class Checkbox extends Component
+
+
+
+ `
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "combobox-element": Combobox
+ }
+}
diff --git a/examples/lit-ts/src/component.ts b/examples/lit-ts/src/component.ts
new file mode 100644
index 0000000000..c0669e0f76
--- /dev/null
+++ b/examples/lit-ts/src/component.ts
@@ -0,0 +1,39 @@
+import { LitElement } from "lit"
+import { VanillaMachine } from "./lib"
+import { createId } from "./lib/create-id"
+
+interface ComponentInterface
+
+
+
+
+ ${this.options.length > 0 &&
+ html`
+ ${this.options.map(
+ (item) =>
+ html`
`}
+
+ ${item.label}
+
`,
+ )}
+
+
+
`
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "popover-element": Popover
+ }
+}
diff --git a/examples/lit-ts/src/typescript.svg b/examples/lit-ts/src/typescript.svg
new file mode 100644
index 0000000000..d91c910cc3
--- /dev/null
+++ b/examples/lit-ts/src/typescript.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/examples/lit-ts/src/vite-env.d.ts b/examples/lit-ts/src/vite-env.d.ts
new file mode 100644
index 0000000000..11f02fe2a0
--- /dev/null
+++ b/examples/lit-ts/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
+
+
+
+
+
+
+
+
+
+ About Tabs
+
+
+ Tabs are used to organize and group content into sections that the user can navigate between.
+
+
+