webcake-ui-kit 1.0.0 → 1.0.2

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Webcake Team
+
+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,12 +1,362 @@
-# webcake-ui-kit
+<div align="center">
 
-### Requirement
+# 🍰 webcake-ui-kit
 
-- Node 14
-- Python <= 3.10
+### The Vue UI kit that doesn't make you choose.
 
-### Development
+**One library. Two Vue versions. Zero build step.**
+Ship the same components to Vue 2.7 _and_ Vue 3 — from a single source, with one import.
 
-- Playground Vue2: `cd playground-vue2 && npm i`
-- Storybook Vue3: `cd storybook-vue3 && npm i`
-- At root: `npm run dev:vue2` | `npm run dev:vue3`
+<br />
+
+[![npm version](https://img.shields.io/npm/v/webcake-ui-kit.svg?style=for-the-badge&color=ff6b9d&logo=npm&logoColor=white)](https://www.npmjs.com/package/webcake-ui-kit)
+[![Vue 2 & 3](https://img.shields.io/badge/Vue-2.7%20%7C%C2%A03.x-42b883?style=for-the-badge&logo=vue.js&logoColor=white)](https://vuejs.org/)
+[![No build](https://img.shields.io/badge/build-not%20required-success?style=for-the-badge)](#-why-ship-raw-sfc)
+[![License](https://img.shields.io/badge/license-ISC-blue?style=for-the-badge)](LICENSE)
+
+<br />
+
+### 📖 **[Live Docs & Storybook → ui.webcake.io](https://ui.webcake.io)**
+
+<sub>Browse every component, prop, slot, and variant — running live in the browser.</sub>
+
+<br />
+
+</div>
+
+---
+
+## 👋 Welcome
+
+Migrating from Vue 2 to Vue 3 is painful enough — your UI library shouldn't make it worse.
+
+Most Vue component libraries force you to **pick a side**. Choose Vue 2 → you're stuck. Choose Vue 3 → you have to rewrite the app first. Either way, you carry the cost.
+
+**webcake-ui-kit refuses that tradeoff.** Every component is hand-authored under strict dual-compatibility rules so the _same import_ compiles, renders, and behaves identically on **Vue 2.7** and **Vue 3.4+** — from a codebase you can grep, fork, and theme as if it were your own.
+
+```js
+import { Button, Dialog, Input } from 'webcake-ui-kit'
+// ✅ Vue 2.7 — works
+// ✅ Vue 3.x — works
+// ✅ Same API. Same styles. Same behavior. One source of truth.
+```
+
+No `-vue2` package. No `-vue3` package. No build artifact gymnastics. Just `.vue` files, the way the framework intended.
+
+---
+
+## ⚡ Quick start
+
+Get a button on screen in **under 60 seconds**.
+
+### 1. Install
+
+```bash
+npm install webcake-ui-kit
+```
+
+```bash
+pnpm add webcake-ui-kit
+```
+
+```bash
+yarn add webcake-ui-kit
+```
+
+> Peer dependency: `vue ^2.6.0 || ^3.0.0`. That's it.
+
+### 2. Import the styles once
+
+```js
+import 'webcake-ui-kit/styles'
+```
+
+### 3. Register components
+
+<table>
+<tr>
+<th width="50%">
+
+**Vue 3**
+
+</th>
+<th width="50%">
+
+**Vue 2.7**
+
+</th>
+</tr>
+<tr>
+<td>
+
+```js
+// main.js
+import { createApp } from 'vue'
+import { Button, Dialog, Input } from 'webcake-ui-kit'
+import 'webcake-ui-kit/styles'
+import App from './App.vue'
+
+const app = createApp(App)
+app.component('Button', Button)
+app.component('Dialog', Dialog)
+app.component('Input', Input)
+app.mount('#app')
+```
+
+</td>
+<td>
+
+```js
+// main.js
+import Vue from 'vue'
+import { Button, Dialog, Input } from 'webcake-ui-kit'
+import 'webcake-ui-kit/styles'
+import App from './App.vue'
+
+Vue.component('Button', Button)
+Vue.component('Dialog', Dialog)
+Vue.component('Input', Input)
+
+new Vue({ render: h => h(App) }).$mount('#app')
+```
+
+</td>
+</tr>
+</table>
+
+### 4. Use it
+
+```vue
+<template>
+  <div>
+    <Button variant="primary" @click="open = true">Open dialog</Button>
+
+    <Dialog v-model="open" title="Hello from webcake 👋">
+      <Input v-model="name" placeholder="Your name" />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({ open: false, name: '' })
+}
+</script>
+```
+
+🎉 **That's it.** The same `.vue` file works on both runtimes — no `#ifdef`, no wrapper, no shim.
+
+---
+
+## ✨ Why teams pick webcake
+
+<table>
+<tr>
+<td width="33%" valign="top">
+
+### 🎯 True dual-compat
+
+One source. Vue 2.7 and Vue 3.x. Tested on both runtimes in CI — every PR, every component.
+
+</td>
+<td width="33%" valign="top">
+
+### 📦 Ships raw SFC
+
+No pre-compiled artifacts. Your bundler compiles `.vue` files once, alongside your app. Zero version lock.
+
+</td>
+<td width="33%" valign="top">
+
+### 🎨 Token-driven theming
+
+Override `--color-primary` and the whole kit rebrands. No SASS, no providers, no JS theme objects.
+
+</td>
+</tr>
+<tr>
+<td valign="top">
+
+### ♿ Accessible by default
+
+Semantic HTML, `:focus-visible` rings, ARIA where it matters. Not retrofitted — designed in.
+
+</td>
+<td valign="top">
+
+### 🪶 Tree-shakable
+
+Named exports only. Import `Button`, leave the rest behind. No `Vue.use(KitchenSink)`.
+
+</td>
+<td valign="top">
+
+### 📖 Storybook included
+
+Every component, every variant, every prop — browsable before you `npm install`.
+
+</td>
+</tr>
+</table>
+
+---
+
+## 🧩 Components
+
+<div align="center">
+
+| Forms                | Overlays    | Layout        | Display |
+| :------------------- | :---------- | :------------ | :------ |
+| Button               | Dialog      | Accordion     | Badge   |
+| ButtonGroup          | AlertDialog | AccordionItem | Tag     |
+| Input                | Tooltip\*   | Sidebar       | Divider |
+| Checkbox             |             | Tabs          | Spinner |
+| CheckboxGroup        |             | Breadcrumb    |         |
+| Radio                |             |               |         |
+| RadioGroup           |             |               |         |
+| Select               |             |               |         |
+| Switch / SwitchGroup |             |               |         |
+| Toggle / ToggleGroup |             |               |         |
+| Slider               |             |               |         |
+| RichCheckboxGroup    |             |               |         |
+| RichSwitchGroup      |             |               |         |
+
+<sub>\* coming soon · _more on the way_</sub>
+
+</div>
+
+All components follow the same conventions: **validated props**, **declared emits**, **BEM-style hooks** (`ui-button--primary`), and `v-model` where it makes sense.
+
+👉 **Want to see them in action?** [Browse the live Storybook →](https://ui.webcake.io)
+
+---
+
+## 🎨 Theming
+
+Every component reads from CSS custom properties. Drop them on `:root` and the whole kit rebrands:
+
+```css
+:root {
+  --color-primary: #ff6b9d;
+  --color-primary-hover: #ff4d8a;
+  --radius-md: 12px;
+  --font-sans: 'Inter', system-ui, sans-serif;
+}
+```
+
+Dark mode? Already wired — every color token has a `.dark` companion. Toggle a class on `<html>` and you're done.
+
+```css
+.dark {
+  --color-bg: #0b0b0f;
+  --color-fg: #f4f4f5;
+  /* …everything else cascades */
+}
+```
+
+No SASS variables. No JS theme provider. No runtime patching. Just CSS, the way the platform meant it.
+
+---
+
+## 🛡️ The dual-compat guarantee
+
+Every component compiles cleanly on both runtimes — enforced by a strict authoring contract:
+
+- ✅ **Pure Options API** — no `<script setup>`, no `setup()`, no Composition API imports
+- ✅ **Single root template** (Vue 2 has no fragments)
+- ✅ **`emits` always declared** (Vue 3 needs it for `$attrs` separation)
+- ✅ No Vue-3-only features (`<Teleport>`, `<Suspense>`, multi `v-model`)
+- ✅ No Vue-2-only features (filters, `.native`, `$listeners`)
+
+And every commit runs through **four parallel build lanes**:
+
+|     | Runtime | Bundler                             | What it catches                       |
+| :-: | :------ | :---------------------------------- | :------------------------------------ |
+| 🟢  | Vue 3.4 | Vite + `@vitejs/plugin-vue`         | Modern compile errors, fragment leaks |
+| 🟣  | Vue 2.7 | webpack 4 + `vue-template-compiler` | Legacy compile errors, banned APIs    |
+| 🟡  | Vue 3.2 | Storybook 6.5                       | Story-side regressions                |
+| 🧪  | Both    | Vitest × 2 lanes                    | Runtime + behavior parity             |
+
+**If a PR doesn't build on either side, it doesn't ship.** Period.
+
+---
+
+## 🏗️ Why ship raw SFC?
+
+Most Vue libraries publish pre-compiled `.js` artifacts targeting _one_ Vue runtime. That's how the ecosystem ended up fragmented into `-vue2` and `-vue3` packages.
+
+webcake-ui-kit publishes the **source `.vue` files** directly. Your app's bundler — Vite, webpack, whatever you use — compiles them against _your_ Vue version. One source, two outputs, zero version lock-in.
+
+> **The tradeoff:** you need a bundler that handles `.vue`. _(You already do.)_
+
+This is the entire reason the kit exists. Everything else — the components, the tokens, the Storybook — is downstream of that decision.
+
+---
+
+## 🚦 Compatibility
+
+|                    | Version                                 |    Status    |
+| :----------------- | :-------------------------------------- | :----------: |
+| Vue 2              | `2.7.x`                                 | ✅ supported |
+| Vue 3              | `3.0+` (tested on `3.4`)                | ✅ supported |
+| Bundlers           | Vite, webpack 4/5, Rollup, esbuild      |      ✅      |
+| Node (consumer)    | any version your bundler supports       |      ✅      |
+| Node (contributor) | **14.x** (Vue 2 sandbox uses webpack 4) |  ⚠️ pinned   |
+
+---
+
+## 🧪 Local development
+
+```bash
+npm run preview        # Vue 2 + Vue 3 dev servers side by side (HMR on both)
+npm run test:build     # Compile-check everything (Vue 2, Vue 3, Storybook) — ~16s
+npm test               # Unit suite on both runtimes, in parallel
+```
+
+Visit **`localhost:8001`** (Vue 3) and **`localhost:8080`** (Vue 2) side-by-side to spot dual-compat regressions in real time.
+
+Full contributor workflow — including the 10-file checklist for adding a component — lives in [CLAUDE.md](./CLAUDE.md).
+
+**Environment:** Node 14 · Python ≤ 3.10 (the Vue 2 playground uses webpack 4 with native deps).
+
+---
+
+## 🌐 Resources
+
+<div align="center">
+
+|                         |                                                                                  |
+| :---------------------: | :------------------------------------------------------------------------------- |
+| 🌍 **Docs & Storybook** | [ui.webcake.io](https://ui.webcake.io)                                           |
+|       📦 **npm**        | [npmjs.com/package/webcake-ui-kit](https://www.npmjs.com/package/webcake-ui-kit) |
+|      🐙 **GitHub**      | [pancake-vn/webcake-ui-kit](https://github.com/pancake-vn/webcake-ui-kit)        |
+|      🐛 **Issues**      | [Report a bug](https://github.com/pancake-vn/webcake-ui-kit/issues)              |
+|   💬 **Discussions**    | [Ask a question](https://github.com/pancake-vn/webcake-ui-kit/discussions)       |
+
+</div>
+
+---
+
+## 🤝 Contributing
+
+PRs welcome — especially new components, accessibility fixes, and Vue 2/3 parity bug reports.
+
+Before opening one:
+
+1. Read [CLAUDE.md](./CLAUDE.md) — it documents the dual-compat rules and the 10-file checklist for adding a component.
+2. Run `npm run test:build && npm test` — both must pass on Vue 2 _and_ Vue 3 lanes.
+3. Add a Storybook story and a unit spec. New components without both are not accepted.
+
+---
+
+## 📜 License
+
+**ISC** © Webcake Team — use it, fork it, ship it.
+
+---
+
+<div align="center">
+  <sub>Made with 🍰 by <a href="https://github.com/pancake-vn">pancake-vn</a></sub>
+  <br />
+  <sub>Because nobody should have to rewrite their app to upgrade a UI library.</sub>
+</div>

package/package.json

@@ -1,14 +1,66 @@
 {
   "name": "webcake-ui-kit",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "UI Kit for Vue 2 && 3 - Pure Options API",
   "main": "src/index.js",
+  "module": "src/index.js",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "import": "./src/index.js",
+      "default": "./src/index.js"
+    },
+    "./styles": "./src/styles/index.css",
+    "./styles/*": "./src/styles/*",
+    "./WkAccordion": "./src/components/accordion/Accordion.vue",
+    "./WkAccordionItem": "./src/components/accordion-item/AccordionItem.vue",
+    "./WkAlertDialog": "./src/components/alert-dialog/AlertDialog.vue",
+    "./WkBadge": "./src/components/badge/Badge.vue",
+    "./WkBreadcrumb": "./src/components/breadcrumb/Breadcrumb.vue",
+    "./WkButton": "./src/components/button/Button.vue",
+    "./WkButtonGroup": "./src/components/button-group/ButtonGroup.vue",
+    "./WkCheckbox": "./src/components/checkbox/Checkbox.vue",
+    "./WkCheckboxGroup": "./src/components/checkbox-group/CheckboxGroup.vue",
+    "./WkDialog": "./src/components/dialog/Dialog.vue",
+    "./WkDivider": "./src/components/divider/Divider.vue",
+    "./WkInput": "./src/components/input/Input.vue",
+    "./WkPagination": "./src/components/pagination/Pagination.vue",
+    "./WkRadio": "./src/components/radio/Radio.vue",
+    "./WkRadioGroup": "./src/components/radio-group/RadioGroup.vue",
+    "./WkRichCheckboxGroup": "./src/components/rich-checkbox-group/RichCheckboxGroup.vue",
+    "./WkRichSwitchGroup": "./src/components/rich-switch-group/RichSwitchGroup.vue",
+    "./WkSelect": "./src/components/select/Select.vue",
+    "./WkSelectOption": "./src/components/select-option/SelectOption.vue",
+    "./WkSidebarGroupLabel": "./src/components/sidebar-group-label/SidebarGroupLabel.vue",
+    "./WkSidebarItem": "./src/components/sidebar-item/SidebarItem.vue",
+    "./WkSlider": "./src/components/slider/Slider.vue",
+    "./WkSpinner": "./src/components/spinner/Spinner.vue",
+    "./WkSwitch": "./src/components/switch/Switch.vue",
+    "./WkSwitchGroup": "./src/components/switch-group/SwitchGroup.vue",
+    "./WkTabs": "./src/components/tabs/Tabs.vue",
+    "./WkTag": "./src/components/tag/Tag.vue",
+    "./WkToggle": "./src/components/toggle/Toggle.vue",
+    "./WkToggleGroup": "./src/components/toggle-group/ToggleGroup.vue",
+    "./components/*": "./src/components/*",
+    "./package.json": "./package.json"
+  },
   "files": [
-    "src"
+    "src",
+    "README.md",
+    "LICENSE"
   ],
+  "publishConfig": {
+    "access": "public"
+  },
   "scripts": {
     "dev": "vite",
     "build": "echo 'No need to build - shipping raw SFC'",
+    "sync:exports": "node scripts/sync-exports.js",
+    "sync:exports:check": "node scripts/sync-exports.js --check",
+    "prepublishOnly": "npm run sync:exports:check && npm run test:build",
     "dev:vue2": "cd playground-vue2 && npm run dev",
     "dev:vue3": "cd playground-vue3 && npm run dev",
     "preview": "concurrently --names vue3,vue2 --prefix-colors cyan,magenta \"npm:dev:vue3\" \"npm:dev:vue2\"",
@@ -17,10 +69,20 @@
     "build:storybook": "cd storybook-vue3 && npm run build-storybook",
     "test:build": "concurrently --kill-others-on-fail --names vue3,vue2,sb --prefix-colors cyan,magenta,yellow \"npm:build:vue3\" \"npm:build:vue2\" \"npm:build:storybook\"",
     "test:storybook": "npm run build:storybook",
+    "test:vue3": "cd playground-vue3 && npm test",
+    "test:vue2": "cd playground-vue2 && npm test",
+    "test": "concurrently --names vue3,vue2 --prefix-colors cyan,magenta \"npm:test:vue3\" \"npm:test:vue2\"",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "lint": "eslint . --ext .js,.cjs,.vue",
-    "lint:fix": "eslint . --ext .js,.cjs,.vue --fix"
+    "lint:fix": "eslint . --ext .js,.cjs,.vue --fix",
+    "prepare": "husky install || echo \"(husky skipped)\"",
+    "release": "node scripts/release.js",
+    "release:patch": "node scripts/release.js patch",
+    "release:minor": "node scripts/release.js minor",
+    "release:major": "node scripts/release.js major",
+    "release:fast": "node scripts/release.js patch --skip-checks",
+    "release:dry": "node scripts/release.js patch --dry-run"
   },
   "lint-staged": {
     "*.{js,cjs,vue}": [
@@ -40,6 +102,7 @@
     "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.2",
     "eslint-plugin-vue": "^9.33.0",
+    "express": "^5.2.1",
     "husky": "^8.0.3",
     "lint-staged": "^13.3.0",
     "prettier": "^3.8.3",
@@ -54,9 +117,9 @@
     "UI Component"
   ],
   "author": "Webcake Team",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/pancake-vn/webcake-ui-kit/issues"
   },
-  "homepage": "https://github.com/pancake-vn/webcake-ui-kit#readme"
+  "homepage": "https://ui.webcake.io"
 }

package/src/components/accordion/Accordion.vue

@@ -0,0 +1,70 @@
+<template>
+  <div :class="['ui-accordion', bordered && 'ui-accordion--bordered']">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Accordion',
+  model: { prop: 'value', event: 'change' },
+  props: {
+    bordered: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    value: { type: [Array, Number, String], default: undefined },
+    modelValue: { type: [Array, Number, String], default: undefined },
+    defaultOpen: { type: [Array, Number, String], default: () => [] }
+  },
+  emits: ['change', 'update:modelValue'],
+  provide() {
+    return {
+      accordion: this
+    }
+  },
+  data() {
+    const initial =
+      this.modelValue !== undefined ? this.modelValue : this.value !== undefined ? this.value : this.defaultOpen
+    return {
+      internalKeys: this.normalizeKeys(initial)
+    }
+  },
+  computed: {
+    isControlled() {
+      return this.modelValue !== undefined || this.value !== undefined
+    },
+    openKeys() {
+      if (this.modelValue !== undefined) return this.normalizeKeys(this.modelValue)
+      if (this.value !== undefined) return this.normalizeKeys(this.value)
+      return this.internalKeys
+    }
+  },
+  methods: {
+    normalizeKeys(v) {
+      if (Array.isArray(v)) return v.slice()
+      if (v === undefined || v === null || v === '') return []
+      return [v]
+    },
+    isOpen(key) {
+      return this.openKeys.indexOf(key) !== -1
+    },
+
+    toggle(key) {
+      const isOpen = this.isOpen(key)
+      let newKeys
+      if (this.multiple) {
+        newKeys = isOpen ? this.openKeys.filter(k => k !== key) : this.openKeys.concat([key])
+      } else {
+        newKeys = isOpen ? [] : [key]
+      }
+      const emitVal = this.multiple ? newKeys : newKeys.length > 0 ? newKeys[0] : null
+      if (!this.isControlled) {
+        this.internalKeys = newKeys
+      }
+      this.$emit('change', emitVal)
+      this.$emit('update:modelValue', emitVal)
+    }
+  }
+}
+</script>
+
+<style src="./accordion.css" scoped></style>

package/src/components/accordion/accordion.css

@@ -0,0 +1,5 @@
+.ui-accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}

package/src/components/accordion-item/AccordionItem.vue

@@ -0,0 +1,98 @@
+<template>
+  <div
+    :class="[
+      'ui-accordion-item',
+      bordered && 'ui-accordion-item--bordered',
+      isOpen && 'ui-accordion-item--open',
+      disabled && 'ui-accordion-item--disabled'
+    ]"
+  >
+    <button
+      :id="triggerId"
+      type="button"
+      class="ui-accordion-item__trigger"
+      :disabled="disabled"
+      :aria-expanded="isOpen ? 'true' : 'false'"
+      :aria-controls="contentId"
+      @click="onClick"
+    >
+      <span class="ui-accordion-item__label-row">
+        <span class="ui-accordion-item__label">
+          <slot name="label">{{ label }}</slot>
+        </span>
+        <span v-if="hasAppend" class="ui-accordion-item__append">
+          <slot name="append">{{ append }}</slot>
+        </span>
+      </span>
+      <span :class="['ui-accordion-item__icon', isOpen && 'ui-accordion-item__icon--open']">
+        <slot name="icon">
+          <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+              d="m4 6 4 4 4-4"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </slot>
+      </span>
+    </button>
+    <div v-show="isOpen" :id="contentId" class="ui-accordion-item__content" role="region" :aria-labelledby="triggerId">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+let uidCounter = 0
+
+export default {
+  name: 'AccordionItem',
+  inject: {
+    accordion: { default: null }
+  },
+  props: {
+    label: { type: String, default: '' },
+    value: { type: [String, Number], default: undefined },
+    append: { type: String, default: '' },
+    disabled: { type: Boolean, default: false }
+  },
+  data() {
+    return {
+      uid: `accordion-item-${++uidCounter}`
+    }
+  },
+  computed: {
+    itemKey() {
+      return this.value !== undefined ? this.value : this.uid
+    },
+    triggerId() {
+      return `${this.uid}-trigger`
+    },
+    contentId() {
+      return `${this.uid}-content`
+    },
+    isOpen() {
+      return this.accordion ? this.accordion.isOpen(this.itemKey) : false
+    },
+    bordered() {
+      return this.accordion ? this.accordion.bordered : false
+    },
+    hasAppend() {
+      const slots = this.$slots
+      return !!this.append || !!(slots && slots['append'])
+    }
+  },
+  methods: {
+    onClick() {
+      if (this.disabled) return
+      if (this.accordion && typeof this.accordion.toggle === 'function') {
+        this.accordion.toggle(this.itemKey)
+      }
+    }
+  }
+}
+</script>
+
+<style src="./accordion-item.css" scoped></style>