@webflare/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Webflare OÜ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,235 @@
-# Temporary Holding Version
+# @webflare/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Webflare design system. One npm package with subpath exports:
+
+| Import | What you get |
+| --- | --- |
+| `@webflare/ui` / `@webflare/ui/components` | Vue 3 UI components |
+| `@webflare/ui/design-preset` / `@webflare/ui/preset` | Panda CSS preset (token-only consumers; not used with `designSystem`) |
+| `@webflare/ui/nuxt` | Nuxt module |
+| `@webflare/ui/vue/*` | Per-component Vue entries (for example `@webflare/ui/vue/Button`) |
+| `@webflare/ui/style.css` | Iconify stylesheet only |
+
+This library does **not** ship compiled Panda CSS. Consuming apps depend on `@pandacss/dev`, keep their own `panda.config.ts`, and set `designSystem: '@webflare/ui'`. `panda lib` writes `@webflare/ui/panda/*` (`lib.json`, `preset.mjs`, `buildinfo.json`) and the generated `./css`, `./tokens`, `./types`, … subpaths. Do not hand-edit those generated exports.
+
+## Install
+
+Required peers: `vue`, `reka-ui`, `@pandacss/dev`. `@pandacss/preset-base` is a normal dependency: `panda lib` inlines it into the design-system preset, so apps that set `designSystem: '@webflare/ui'` do not install it. `nuxt` and `@nuxt/kit` are optional and only needed for `@webflare/ui/nuxt` (a Nuxt app already provides both).
+
+**Nuxt**
+
+```bash
+bun add @webflare/ui reka-ui @pandacss/dev
+```
+
+```ts
+export default defineNuxtConfig({
+  modules: ['@webflare/ui/nuxt'],
+  css: ['~/assets/css/global.css'],
+  postcss: {
+    plugins: {
+      '@pandacss/dev/postcss': {},
+    },
+  },
+})
+```
+
+```css
+/* assets/css/global.css */
+@layer reset, base, tokens, recipes, utilities;
+```
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  preflight: true,
+  designSystem: '@webflare/ui',
+  include: [
+    './app/**/*.{js,ts,vue}',
+  ],
+  outdir: 'styled-system',
+})
+```
+
+Do not add `@webflare/ui/preset`, `@webflare/ui/design-preset`, or `@webflare/ui` to `presets` / `include`. `designSystem` already loads the theme and component styles. Listing the package in `include` errors with `design_system_in_include`.
+
+Components are auto-imported with a `Wf` prefix (`WfButton`, `WfAlertRoot`, `WfCardRoot`, …).
+
+**Vue (Vite)**
+
+```bash
+bun add @webflare/ui vue reka-ui @pandacss/dev
+```
+
+```ts
+import { createApp } from 'vue'
+import WfUI from '@webflare/ui'
+import '@webflare/ui/style.css'
+
+const app = createApp({})
+app.use(WfUI)
+```
+
+```ts
+import { defineConfig } from '@pandacss/dev'
+
+export default defineConfig({
+  preflight: true,
+  designSystem: '@webflare/ui',
+  include: [
+    './src/**/*.{js,ts,vue}',
+  ],
+  outdir: 'styled-system',
+})
+```
+
+You can also import from `@webflare/ui/components` if you want the subpath to be explicit.
+
+`createInjectionKey` is exported from `@webflare/ui` but is not auto-imported by the Nuxt module.
+
+## Styling components
+
+Component styles are atomic Panda classes from `cva` / `sva` definitions inside the package. They reach the app through `designSystem: '@webflare/ui'`; Panda generates every variant of each definition, so the app does not need to render a variant for its CSS to exist.
+
+**Per-instance overrides.** Every component takes a `css` prop: style objects keyed by slot, where `root` is always the outermost element. Wrap each value in `css.raw()` from the app's own `styled-system/css`. Panda only generates CSS for objects it can see at build time; a bare object literal compiles but produces no CSS.
+
+```vue
+<script setup lang="ts">
+import { css } from 'styled-system/css'
+</script>
+
+<template>
+  <WfAlertRoot
+    :messages="messages"
+    :css="{ root: css.raw({ maxWidth: 'md' }), title: css.raw({ fontSize: 'xl' }) }"
+  />
+</template>
+```
+
+The component merges the override into its own style object before generating classes, so an overridden property gets one class and the override wins.
+
+**Color modes.** Light is the default. Dark applies inside an element with the `.dark` class and when the OS prefers dark (`prefers-color-scheme: dark`). Put `class="dark"` on `<html>`, any container, or a component's own root to switch that element and its subtree. There is no class that forces light while the OS prefers dark.
+
+**Semantic colors.** Use the roles instead of raw shades; they switch between the modes on their own, so app styles rarely need a mode condition:
+
+| Role | Use |
+| --- | --- |
+| `primary`, `primary-pale` | Brand color (the same in both modes) and its pale fill |
+| `neutral`, `neutral.inverse`, `neutral.light`, `neutral.subtle` | Text, text on an inverted fill, quiet text, quiet neutral fill |
+| `surface`, `surface.raised`, `surface-muted` | Page and field background, panels, muted sections |
+| `border`, `border.hover`, `border.subtle`, `border.card` | Field borders, hovered fields, dividers, card and tab bar borders |
+| `muted`, `text.muted` | Secondary copy |
+| `text.placeholder` | Placeholder text and quiet icons inside a field |
+| `loader.track` | Ring of the loader behind the brand arc |
+| `input-border`, `input-bg`, `input-disabled-bg`, `input-color` | Form fields |
+| `accent-subtle`, `accent-border`, `accent-text` | Brand-tinted highlights |
+| `danger`, `success`, `warning`, `info` (with `.subtle`, `.subtle.light`, `.text`) | Status |
+
+When an app style does need a mode condition, write the same dark value under both `_dark` and `_osDark`:
+
+```ts
+css({ bg: { base: 'grey.100', _dark: 'grey.800', _osDark: 'grey.800' } })
+```
+
+For transparency, use the opacity modifier on a color token (`black/10`, `primary/30`).
+
+## Text and HTML content
+
+Content props render as **HTML** (`v-html`): `Button` `label`, `CardHeader` `title` / `subtitle`, `HeroLead` `headline` / `description`, list items and `PricingCard` features, accordion item `title` / `content`, tab labels, `FlyoutRoot` `label`, and field `message` / `error`. Markup such as `Build <mark>faster</mark>` works as written.
+
+The library does not sanitize these strings. **The app is responsible**: sanitize anything that can contain user input, server responses (including validation messages), CMS content, or external translations before passing it, for example with [DOMPurify](https://github.com/cure53/DOMPurify). Where a component has a slot for the same content (`CardHeader` `#title` / `#subtitle`, `HeroLead` `#headline` / `#description`, `AccordionRoot` `#content`, `ListItem` and `TabItem` default slots, `FlyoutRoot` `#trigger-label`), text passed through the slot is escaped by Vue. `Button` `label`, accordion item `title`, and field `message` / `error` have no slot; sanitize those strings.
+
+## Component names
+
+Nuxt auto-imports Vue components with a `Wf` prefix (`WfButton`, `WfAlertRoot`, `WfCardRoot`) as named exports of `@webflare/ui`. Per-component files remain available at `@webflare/ui/vue/*` for direct imports (for example `@webflare/ui/vue/Button`).
+
+Nuxt tags, the Vue plugin, and `@webflare/ui/vue/*` use the same canonical names:
+
+| Pattern | Examples |
+| --- | --- |
+| Standalone | `Button`, `Loader` (`WfButton`, `WfLoader`) |
+| Named roots / parts | `AlertRoot`, `BadgeRoot`, `TabRoot`, `CardRoot`, `CardBody`, `TabItem` |
+| Namespace object (`Card.Root`) | `Accordion`, `Alert`, `Badge`, `Card`, `Carousel`, `Dialog`, `Field`, `Flyout`, `Form`, `Hero`, `List`, `PricingCard`, `Progress`, `Switch`, `Tab` |
+
+`Alert.Root` is the same component as named `AlertRoot`. There is no `WfAlert` / `WfBadge` / `WfTab` alias. Form controls are `Field.*` / `WfField*` — `Control*` is not a public export.
+
+## Fonts
+
+The preset defines `fonts.sans`, `fonts.serif`, and `fonts.mono`. `fonts.sans` is **Figtree**, then the system sans (`ui-sans-serif, system-ui, sans-serif`, plus emoji fonts). `fonts.serif` and `fonts.mono` are those same system stacks. Semantic `fonts.body` aliases `fonts.sans`.
+
+The npm package does not include font files. Load the Figtree **variable** face so intermediate weights (450, 750) resolve. [Fontsource](https://fontsource.org/fonts/figtree) is one way:
+
+```bash
+bun add @fontsource-variable/figtree
+```
+
+```css
+@import '@fontsource-variable/figtree';
+```
+
+Self-hosting works the same way. Figtree is under the [SIL Open Font License](https://openfontlicense.org/). The `@font-face` `font-family` must be `Figtree`.
+
+`Button`, text inputs, textareas, and select triggers set `font-family: inherit`, so they follow the document face when preflight is off. With preflight on, Panda's reset already sets `font: inherit` on those controls. Preflight sets the document face to `--global-font-body`, which falls back to Panda's built-in system stack. It does not apply `fonts.sans` on its own. Point the document at the sans token:
+
+```ts
+globalCss: {
+  html: {
+    fontFamily: 'sans',
+  },
+},
+```
+
+Until the face is loaded, `fonts.sans` falls through to the system sans.
+
+## Development
+
+This repo is a Bun workspace. Internal package names (`@webflare/design-preset`, `@webflare/ui-components`, `@webflare/ui-nuxt`) stay private and are not published.
+
+```bash
+bun install
+bun run build
+bun run typecheck
+bun run test
+bun run dev:nuxt
+```
+
+`bun run build` and `bun run dev:nuxt` link the root package at `node_modules/@webflare/ui` and run `panda lib`, so the playground can set `designSystem: '@webflare/ui'` the same way consumers do.
+
+See `AGENTS.md` for lint, test, and package scripts.
+
+The Panda CSS migration skill lives in the git repository (not in the npm tarball). Use [`.agents/skills/panda-v2-migration/SKILL.md`](.agents/skills/panda-v2-migration/SKILL.md) for an app that is still on Panda CSS 1.x, still lists `panda.buildinfo.json` in `include`, or still adds the preset by hand instead of setting `designSystem: '@webflare/ui'`.
+
+## Publishing
+
+Publish the root package only. The GitHub Action uses [npm trusted publishing](https://docs.npmjs.com/trusted-publishers/) (OIDC) in the `npm-publish` environment. There is no `NPM_TOKEN`.
+
+`prepublishOnly` runs `bun run build`. The Action already builds and tests with Bun, then runs `npm publish --ignore-scripts` so that script does not rebuild. `bun publish` cannot authenticate with OIDC.
+
+The Action runs on a published GitHub Release or a manual start, and only from the tag `v<version>` that matches `package.json`.
+
+### First publish (0.1.0)
+
+Trusted publishing can only be attached to a package that already exists, so 0.1.0 is published by hand.
+
+1. `npm login` in a browser session (interactive 2FA). Do not create a bypass-2FA granular token.
+2. Tag `v0.1.0` on the release commit, then from a clean checkout of that tag:
+
+```bash
+bun install --frozen-lockfile
+bun run build
+bun run test
+npm publish --access public --ignore-scripts
+```
+
+3. Do not create a GitHub Release for 0.1.0. It would start the Action, which fails because the version is already on npm.
+4. On npmjs.com → `@webflare/ui` → Settings → Trusted Publisher → GitHub Actions:
+   - Organization or user: `webflare-sh`
+   - Repository: `ui`
+   - Workflow filename: `publish.yml` (filename only, including `.yml`)
+   - Environment name: `npm-publish`
+   - Allowed actions: `npm publish`
+
+### Later publishes
+
+Bump the version in all four `package.json` files and run `bun run changelog`. It adds the entry generated from the previous release tag. Run it from a full clone: in a shallow clone it stops with git's error and asks for `git fetch --unshallow --tags`. After the pull request is merged, tag `v<version>` on `master` and publish a GitHub Release for that tag (or start the **Publish to npm** Action from the tag). After the first OIDC publish succeeds, you can set the package to require 2FA and disallow tokens.

package/dist/AccordionRoot-CNPxdTtA.cjs

@@ -0,0 +1,182 @@
+const require_css = require("./css-BRRSQx3P.cjs");
+let vue = require("vue");
+let reka_ui = require("reka-ui");
+// src/components/Accordion/styles.ts
+var accordionStyles = (0, require("@webflare/ui/css").sva)({
+	slots: [
+		"root",
+		"item",
+		"trigger",
+		"icon",
+		"title",
+		"indicator",
+		"content"
+	],
+	base: {
+		root: {
+			width: "100%",
+			display: "flex",
+			flexWrap: "wrap",
+			overflow: "clip",
+			color: "neutral"
+		},
+		item: {
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			transition: "all 300ms",
+			overflow: "clip",
+			_closed: { _hover: { borderColor: "grey.400" } }
+		},
+		trigger: {
+			"width": "100%",
+			"display": "flex",
+			"flexWrap": "nowrap",
+			"flexDirection": "row",
+			"cursor": "pointer",
+			"fontWeight": "semibold",
+			"lineHeight": "normal",
+			"alignItems": "center",
+			"userSelect": "none",
+			"_open": {
+				"backgroundColor": "neutral.subtle",
+				"& [data-trigger=\"icon\"]": { transform: "rotate(180deg)" }
+			},
+			"& [data-trigger=\"icon\"]": {
+				marginLeft: "auto",
+				transition: "transform 0.2s ease-in-out"
+			}
+		},
+		icon: {},
+		title: {
+			flex: "1 0%",
+			whiteSpace: "normal",
+			wordBreak: "break-word",
+			textAlign: "start"
+		},
+		indicator: {},
+		content: {
+			display: "block !important",
+			interpolateSize: "allow-keywords",
+			overflow: "clip",
+			lineHeight: "1.75",
+			_open: {
+				"animationStyle": "slideDown",
+				"& [data-trigger=\"icon\"]": {
+					transform: "rotate(180deg)",
+					transition: "transform 0.2s ease-in-out"
+				}
+			},
+			_closed: { animationStyle: "slideUp" }
+		}
+	},
+	variants: {
+		orientation: {
+			horizontal: { root: { flexDirection: "row" } },
+			vertical: { root: { flexDirection: "column" } }
+		},
+		size: {
+			md: {
+				root: { gap: "md" },
+				item: { borderRadius: "lg" },
+				trigger: {
+					"paddingY": "md",
+					"paddingX": "lg",
+					"gap": "md",
+					"fontSize": "md",
+					"& [data-trigger=\"icon\"]": { fontSize: {
+						base: "sm",
+						md: "md"
+					} }
+				},
+				content: { "& > div": { padding: "lg" } }
+			},
+			lg: {
+				root: { gap: "lg" },
+				item: { borderRadius: "xl" },
+				trigger: {
+					"paddingY": "lg",
+					"paddingX": "xl",
+					"gap": "lg",
+					"fontSize": { base: "lg" },
+					"& [data-trigger=\"icon\"]": { fontSize: { base: "md" } }
+				},
+				content: { "& > div": { padding: "xl" } }
+			}
+		}
+	}
+});
+// src/components/Accordion/AccordionRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// src/components/Accordion/AccordionRoot.vue
+var AccordionRoot_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	__name: "AccordionRoot",
+	props: {
+		type: { default: "multiple" },
+		orientation: { default: "vertical" },
+		size: { default: "md" },
+		items: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = (0, vue.computed)(() => accordionStyles.raw({
+			orientation: props.orientation,
+			size: props.size
+		}));
+		return (_ctx, _cache) => {
+			return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionRoot), {
+				type: __props.type,
+				orientation: __props.orientation,
+				class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.root, props.css?.root))
+			}, {
+				default: (0, vue.withCtx)(() => [((0, vue.openBlock)(true), (0, vue.createElementBlock)(vue.Fragment, null, (0, vue.renderList)(__props.items, (item) => {
+					return (0, vue.openBlock)(), (0, vue.createBlock)((0, vue.unref)(reka_ui.AccordionItem), {
+						key: item.id,
+						value: item.id,
+						class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.item, props.css?.item))
+					}, {
+						default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.AccordionHeader), null, {
+							default: (0, vue.withCtx)(() => [(0, vue.createVNode)((0, vue.unref)(reka_ui.AccordionTrigger), { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.trigger, props.css?.trigger)) }, {
+								default: (0, vue.withCtx)(() => [
+									(0, vue.renderSlot)(_ctx.$slots, "icon", { item }, () => [item.icon ? ((0, vue.openBlock)(), (0, vue.createElementBlock)("span", {
+										key: 0,
+										class: (0, vue.normalizeClass)([`icon icon-${item.icon}`, (0, vue.unref)(require_css.withCss)(styles.value.icon, props.css?.icon)]),
+										"aria-hidden": "true"
+									}, null, 2)) : (0, vue.createCommentVNode)("", true)]),
+									(0, vue.createElementVNode)("span", {
+										class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.title, props.css?.title)),
+										innerHTML: item.title
+									}, null, 10, _hoisted_1),
+									(0, vue.createElementVNode)("span", {
+										class: (0, vue.normalizeClass)(["icon icon-caret-down-bold", (0, vue.unref)(require_css.withCss)(styles.value.indicator, props.css?.indicator)]),
+										"data-trigger": "icon",
+										"aria-hidden": "true"
+									}, null, 2)
+								]),
+								_: 2
+							}, 1032, ["class"])]),
+							_: 2
+						}, 1024), (0, vue.createVNode)((0, vue.unref)(reka_ui.AccordionContent), { class: (0, vue.normalizeClass)((0, vue.unref)(require_css.withCss)(styles.value.content, props.css?.content)) }, {
+							default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "content", { item }, () => [(0, vue.createElementVNode)("div", { innerHTML: item.content }, null, 8, _hoisted_2)])]),
+							_: 2
+						}, 1032, ["class"])]),
+						_: 2
+					}, 1032, ["value", "class"]);
+				}), 128))]),
+				_: 3
+			}, 8, [
+				"type",
+				"orientation",
+				"class"
+			]);
+		};
+	}
+});
+Object.defineProperty(exports, "AccordionRoot_default", {
+	enumerable: true,
+	get: function() {
+		return AccordionRoot_default;
+	}
+});

package/dist/AccordionRoot-CmK-jaZz.js

@@ -0,0 +1,178 @@
+import { t as withCss } from "./css-DWYlz0rn.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, renderList, renderSlot, unref, withCtx } from "vue";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionRoot, AccordionTrigger } from "reka-ui";
+import { sva } from "@webflare/ui/css";
+// src/components/Accordion/styles.ts
+var accordionStyles = sva({
+	slots: [
+		"root",
+		"item",
+		"trigger",
+		"icon",
+		"title",
+		"indicator",
+		"content"
+	],
+	base: {
+		root: {
+			width: "100%",
+			display: "flex",
+			flexWrap: "wrap",
+			overflow: "clip",
+			color: "neutral"
+		},
+		item: {
+			borderWidth: "1px",
+			borderStyle: "solid",
+			borderColor: "border",
+			transition: "all 300ms",
+			overflow: "clip",
+			_closed: { _hover: { borderColor: "grey.400" } }
+		},
+		trigger: {
+			"width": "100%",
+			"display": "flex",
+			"flexWrap": "nowrap",
+			"flexDirection": "row",
+			"cursor": "pointer",
+			"fontWeight": "semibold",
+			"lineHeight": "normal",
+			"alignItems": "center",
+			"userSelect": "none",
+			"_open": {
+				"backgroundColor": "neutral.subtle",
+				"& [data-trigger=\"icon\"]": { transform: "rotate(180deg)" }
+			},
+			"& [data-trigger=\"icon\"]": {
+				marginLeft: "auto",
+				transition: "transform 0.2s ease-in-out"
+			}
+		},
+		icon: {},
+		title: {
+			flex: "1 0%",
+			whiteSpace: "normal",
+			wordBreak: "break-word",
+			textAlign: "start"
+		},
+		indicator: {},
+		content: {
+			display: "block !important",
+			interpolateSize: "allow-keywords",
+			overflow: "clip",
+			lineHeight: "1.75",
+			_open: {
+				"animationStyle": "slideDown",
+				"& [data-trigger=\"icon\"]": {
+					transform: "rotate(180deg)",
+					transition: "transform 0.2s ease-in-out"
+				}
+			},
+			_closed: { animationStyle: "slideUp" }
+		}
+	},
+	variants: {
+		orientation: {
+			horizontal: { root: { flexDirection: "row" } },
+			vertical: { root: { flexDirection: "column" } }
+		},
+		size: {
+			md: {
+				root: { gap: "md" },
+				item: { borderRadius: "lg" },
+				trigger: {
+					"paddingY": "md",
+					"paddingX": "lg",
+					"gap": "md",
+					"fontSize": "md",
+					"& [data-trigger=\"icon\"]": { fontSize: {
+						base: "sm",
+						md: "md"
+					} }
+				},
+				content: { "& > div": { padding: "lg" } }
+			},
+			lg: {
+				root: { gap: "lg" },
+				item: { borderRadius: "xl" },
+				trigger: {
+					"paddingY": "lg",
+					"paddingX": "xl",
+					"gap": "lg",
+					"fontSize": { base: "lg" },
+					"& [data-trigger=\"icon\"]": { fontSize: { base: "md" } }
+				},
+				content: { "& > div": { padding: "xl" } }
+			}
+		}
+	}
+});
+// src/components/Accordion/AccordionRoot.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["innerHTML"];
+var _hoisted_2 = ["innerHTML"];
+// src/components/Accordion/AccordionRoot.vue
+var AccordionRoot_default = /* @__PURE__ */ defineComponent({
+	__name: "AccordionRoot",
+	props: {
+		type: { default: "multiple" },
+		orientation: { default: "vertical" },
+		size: { default: "md" },
+		items: {},
+		css: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const styles = computed(() => accordionStyles.raw({
+			orientation: props.orientation,
+			size: props.size
+		}));
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(AccordionRoot), {
+				type: __props.type,
+				orientation: __props.orientation,
+				class: normalizeClass(unref(withCss)(styles.value.root, props.css?.root))
+			}, {
+				default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.items, (item) => {
+					return openBlock(), createBlock(unref(AccordionItem), {
+						key: item.id,
+						value: item.id,
+						class: normalizeClass(unref(withCss)(styles.value.item, props.css?.item))
+					}, {
+						default: withCtx(() => [createVNode(unref(AccordionHeader), null, {
+							default: withCtx(() => [createVNode(unref(AccordionTrigger), { class: normalizeClass(unref(withCss)(styles.value.trigger, props.css?.trigger)) }, {
+								default: withCtx(() => [
+									renderSlot(_ctx.$slots, "icon", { item }, () => [item.icon ? (openBlock(), createElementBlock("span", {
+										key: 0,
+										class: normalizeClass([`icon icon-${item.icon}`, unref(withCss)(styles.value.icon, props.css?.icon)]),
+										"aria-hidden": "true"
+									}, null, 2)) : createCommentVNode("", true)]),
+									createElementVNode("span", {
+										class: normalizeClass(unref(withCss)(styles.value.title, props.css?.title)),
+										innerHTML: item.title
+									}, null, 10, _hoisted_1),
+									createElementVNode("span", {
+										class: normalizeClass(["icon icon-caret-down-bold", unref(withCss)(styles.value.indicator, props.css?.indicator)]),
+										"data-trigger": "icon",
+										"aria-hidden": "true"
+									}, null, 2)
+								]),
+								_: 2
+							}, 1032, ["class"])]),
+							_: 2
+						}, 1024), createVNode(unref(AccordionContent), { class: normalizeClass(unref(withCss)(styles.value.content, props.css?.content)) }, {
+							default: withCtx(() => [renderSlot(_ctx.$slots, "content", { item }, () => [createElementVNode("div", { innerHTML: item.content }, null, 8, _hoisted_2)])]),
+							_: 2
+						}, 1032, ["class"])]),
+						_: 2
+					}, 1032, ["value", "class"]);
+				}), 128))]),
+				_: 3
+			}, 8, [
+				"type",
+				"orientation",
+				"class"
+			]);
+		};
+	}
+});
+export { AccordionRoot_default as t };