@todovue/tv-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Cristhian Daza
+
+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

@@ -0,0 +1,207 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue UI (TvUi)
+An **umbrella** package for Vue 3 that installs and re-exports the official `@todovue/*` components.
+
+> Important: **this is NOT a monorepo**. `@todovue/tv-ui` is a library that declares dependencies on each `@todovue/tv-*` component (by the version published on npm), and re-exports them for unified consumption.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-ui.svg)](https://www.npmjs.com/package/@todovue/tv-ui)
+![License](https://img.shields.io/github/license/TODOvue/tv-ui)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-ui)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-ui)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-ui)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-ui)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-ui?style=social)
+
+> Demo / docs: https://ui.todovue.blog
+
+## Table of contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Using styles](#using-styles)
+- [Nuxt (SSR) / Nuxt Module](#nuxt-ssr--nuxt-module)
+- [Exported components](#exported-components)
+- [Registration options](#registration-options)
+- [SSR notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- **One-time install** to get TODOvue components available.
+- **Vue plugin**: `app.use(TvUi)` registers components globally.
+- **Re-exports**: you can import specific components from `@todovue/tv-ui`.
+- Compatible with **SPA** (Vite/Vue CLI) and **SSR** (Nuxt) as long as your app imports the styles.
+- **Does not bundle Vue nor the `@todovue/*` packages** into the build: they remain external dependencies (great for ecosystems and tree-shaking).
+
+## Installation
+With npm:
+```bash
+npm install @todovue/tv-ui
+```
+With yarn:
+```bash
+yarn add @todovue/tv-ui
+```
+With pnpm:
+```bash
+pnpm add @todovue/tv-ui
+```
+
+> Node requirement for this repo: `>= 20.19.0`.
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+// Styles (see “Using styles” section)
+import '@todovue/tv-ui/style.css'
+
+import TvUi from '@todovue/tv-ui'
+
+createApp(App)
+  .use(TvUi) // enables <TvButton />, <TvCard />, etc. globally
+  .mount('#app')
+```
+
+Usage in a component:
+```vue
+<template>
+  <TvButton variant="success" icon="check">Save</TvButton>
+</template>
+```
+
+Local import (named export) if you prefer granular control:
+```vue
+<script setup>
+import '@todovue/tv-ui/style.css'
+import { TvButton, TvCard } from '@todovue/tv-ui'
+</script>
+
+<template>
+  <TvCard>
+    <TvButton>Action</TvButton>
+  </TvCard>
+</template>
+```
+
+## Using styles
+`@todovue/tv-ui` exposes a styles entry:
+
+- Recommended import:
+```js
+import '@todovue/tv-ui/style.css'
+```
+
+This points to `./dist/tv-ui.css` (via `exports["./style.css"]`).
+
+### What about per-component styles?
+You can also import styles from each package:
+```js
+import '@todovue/tv-button/style.css'
+import '@todovue/tv-card/style.css'
+```
+
+This is useful if you:
+- only use 1–2 components,
+- want to control exactly what CSS gets into your bundle,
+- or are migrating gradually.
+
+## Nuxt (SSR) / Nuxt Module
+This package publishes a Nuxt module at `@todovue/tv-ui/nuxt` that **injects the CSS** of `@todovue/*` packages into `nuxt.options.css`.
+
+### Setup
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-ui/nuxt'
+  ]
+})
+```
+
+### Plugin registration (optional)
+You can register all components globally:
+```ts
+// plugins/tv-ui.ts
+import { defineNuxtPlugin } from '#app'
+import TvUi from '@todovue/tv-ui'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(TvUi)
+})
+```
+
+Or import them locally:
+```vue
+<script setup>
+import { TvButton } from '@todovue/tv-ui'
+</script>
+
+<template>
+  <TvButton>Hello</TvButton>
+</template>
+```
+
+## Exported components
+Currently `@todovue/tv-ui` re-exports:
+
+- `TvAlert`
+- `TvArticle`
+- `TvBreadcrumbs`
+- `TvButton`
+- `TvCard`
+- `TvDemo`
+- `TvFooter`
+- `TvHero`
+- `TvLabel`
+- `TvMenu`
+- `TvModal`
+- `TvPagination`
+- `TvProgressBar`
+- `TvRelativeTime`
+- `TvScrollTop`
+- `TvSearch`
+- `TvSettings`
+- `TvSidebar`
+- `TvThemeButton`
+- `TvToc`
+
+## Registration options
+| Approach            | Example                                     | When to use                                          |
+|---------------------|---------------------------------------------|------------------------------------------------------|
+| Global via plugin   | `app.use(TvUi)`                             | You use many components across the whole app         |
+| Local import        | `import { TvButton } from '@todovue/tv-ui'` | Isolated views, code-splitting, fine-grained control |
+| Individual packages | `import TvButton from '@todovue/tv-button'` | If you want to install/update components separately  |
+
+## SSR notes
+- This package does not assume a DOM during plugin installation.
+- Still, SSR compatibility depends on each `@todovue/*` component not accessing `window/document` at render time.
+- In Nuxt, the `@todovue/tv-ui/nuxt` module takes care of registering global CSS for you.
+
+## Development
+Available scripts:
+- `dev`: copies `README.md`/`CHANGELOG.md` from `node_modules/@todovue/*` into `public/demos/*` and starts Vite.
+- `build`: library build (ESM + CJS) + types.
+- `build:demo`: builds the demo (target `demo`) and copies `README.md`/`CHANGELOG.md` to `public/`.
+
+Commands:
+```bash
+npm run dev
+npm run build
+npm run build:demo
+```
+
+## Contributing
+PRs and issues are welcome. See:
+- `CONTRIBUTING.md`
+- `CODE_OF_CONDUCT.md`
+
+## License
+MIT © TODOvue

package/dist/.htaccess

@@ -0,0 +1,8 @@
+<IfModule mod_rewrite.c>
+  RewriteEngine On
+  RewriteBase /
+  RewriteRule ^index\.html$ - [L]
+  RewriteCond %{REQUEST_FILENAME} !-f
+  RewriteCond %{REQUEST_FILENAME} !-d
+  RewriteRule . /index.html [L]
+</IfModule>

package/dist/demos/tv-alert/CHANGELOG.md

@@ -0,0 +1,127 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [1.2.1] - 2026-01-27
+
+### Changed
+- Simplified the file list in `package.json` to include only essential assets.
+- Simplified the build configuration by removing demo-specific logic.
+- Enhanced GitHub Actions workflows to automate npm package publishing and GitHub release creation.
+- Moved the `@todovue/tv-demo` component import from main.js to `Demo.vue` to localize its usage.
+- Updated build commands to include `README.md` and `CHANGELOG.md` files in the public directory during the build process.
+
+### Added
+- Included the `src` directory in the `package.json` files list to ensure component source files are bundled in the package distribution.
+
+### Removed
+- Eliminated the global import of the `@todovue/tv-demo` component from `main.js`.
+
+### Dependencies
+- Updated `@todovue/tv-demo` to `^1.4.11`.
+- Updated `@todovue/tv-button` to `^1.2.5`.
+- Updated `vue` to `^3.5.27`.
+- Updated `sass` to `^1.97.3`.
+
+## [1.2.0] - 2026-01-20
+
+### Added
+- Enhanced the Alert component with support for customizable icons and titles.
+- Added action slots to the Alert component to support interactive elements within notifications.
+
+### Dependencies
+- Updated the `@todovue/tv-button` dependency to `^1.2.4`.
+- Updated the `@todovue/tv-demo` dependency to `^1.4.4`.
+- Updated the `sass` dependency to `^1.97.2`.
+- Updated the `vite` dependency to `^7.3.1`.
+
+## [1.1.1] - 2025-12-19
+
+### Added
+- Added automatic publishing to the TODOvue cPanel in `release.yml` for each release, simplifying package distribution and updates.
+- Added `package-lock.json` to the repository to ensure dependency consistency and facilitate version management across development and production environments.
+
+### Changed
+- Changed the `base` option in `vite.config.js` for website deployment in cpanel.
+
+### Fixed
+- Fixed repository URL in `package.json` to point to the correct GitHub repository.
+- Fixed the token configuration used to generate the package in the GitHub Actions workflow `release.yml`.
+
+### Dependencies
+- Updated dependency versions in `package.json` to maintain compatibility and benefit from improvements and bug fixes in the used libraries.
+
+## [1.1.0] - 2025-11-21
+
+### Added
+- Added `nux.js` configuration file for Nuxt 4 integration.
+- Added `tsconfig.json` for proper type checking during build.
+- Create `global.d.ts` to declare module for TypeScript users.
+- Added Nuxt module for automatic style injection and auto-registration of the `TvAlert` component.
+- The `@todovue/tv-alert` component is now externalized from the final build, reducing bundle size.
+- Added `CHANGELOG.md` in script to generate demo and documentation site.
+
+### Dependencies
+- Updated the `@todovue/tv-demo` dependency to `^1.2.1` to ensure compatibility with the latest changes.
+- Updated the `@todovue/tv-button` dependency to `^1.2.2` to ensure compatibility with the latest changes.
+
+## [1.0.2] - 2025-11-18
+
+### Fixed
+- **BREAKING FIX**: Exported `useAlert` composable from the library entry point (`src/entry.ts`). Previously, the composable was not accessible when importing from `@todovue/tv-alert`, causing errors when trying to use `import { useAlert } from '@todovue/tv-alert'`.
+- Fixed incorrect imports in demo files that were importing from `@todovue/tv-button` instead of `@todovue/tv-alert`.
+
+### Added
+- Proper exports in both ESM and CJS bundles for `useAlert`.
+
+## [1.0.1] - 2025-11-15
+
+### Changed
+- Styles are now served as a separate CSS file (`dist/tv-alert.css`) generated by Vite during the build process.
+- Users must now explicitly import the stylesheet in their application:
+  - For Vue/Vite SPA: `import '@todovue/tv-alert/style.css'` in `main.ts`
+  - For Nuxt 3/4: Add `'@todovue/tv-alert/style.css'` to the `css` array in `nuxt.config.ts`
+
+### Added
+- Added `sideEffects` field to `package.json` to support proper tree-shaking with CSS files.
+- Added `./style.css` export path in `package.json` for explicit CSS imports.
+- Improved SSR/SSG compatibility, especially for Nuxt 3/4 applications.
+
+### Dependencies
+- Removed dependency on `vite-plugin-css-injected-by-js` from `devDependencies`
+
+## [1.0.0] - 2025-11-11
+
+### Added
+- Initial release of TvAlert component
+- Multiple alert types: `info`, `success`, `warning`, `error`
+- Six position options: `top-right`, `top-center`, `top-left`, `bottom-right`, `bottom-center`, `bottom-left`
+- Auto-dismiss functionality with customizable duration
+- Progress bar showing remaining time
+- Pause on hover feature (configurable via `pauseOnHover` option)
+- Optional close button (configurable via `showClose` option)
+- Stack multiple alerts in the same position with configurable max limit
+- Composable API `useAlert` with programmatic methods
+- Type-specific convenience methods: `alert.info()`, `alert.success()`, `alert.warning()`, `alert.error()`
+- Generic `alert.open()` method with full options support
+- Smooth slide-in/slide-out transitions based on position
+- ARIA accessibility attributes (`aria-live`, `role`, `aria-label`)
+- SSR compatibility (works with Nuxt 3 and other SSR frameworks)
+- Vue 3 plugin support for global registration
+- TypeScript definitions
+- SCSS styling with customizable variables
+- Icon slot support for custom icons per alert type
+- Alert management methods: `removeAlert()`, `clearAll()`
+- Reactive alerts array access
+- Tree-shakeable ES module build
+
+[1.2.1]: https://github.com/TODOvue/todovue-alert/pull/8/files
+[1.2.0]: https://github.com/TODOvue/todovue-alert/pull/7/files
+[1.1.1]: https://github.com/TODOvue/todovue-alert/pull/6/files
+[1.1.0]: https://github.com/TODOvue/todovue-alert/pull/5/files
+[1.0.2]: https://github.com/TODOvue/todovue-alert/pull/4/files
+[1.0.1]: https://github.com/TODOvue/todovue-alert/pull/3/files
+[1.0.0]: https://github.com/TODOvue/todovue-alert/pull/1/files

package/dist/demos/tv-alert/README.md

@@ -0,0 +1,334 @@
+<p align="center"><img width="150" src="https://res.cloudinary.com/dcdfhi8qz/image/upload/v1763663056/uqqtkgp1lg3xdplutpga.png" alt="TODOvue logo">
+</p>
+
+# TODOvue Alert (TvAlert)
+A flexible, framework‑agnostic Vue 3 alert/notification component with multiple positions, types, progress bar, pause on hover, and customization utilities. Ship it in Single Page Apps or Server-Side Rendered (SSR) environments (e.g. Nuxt 3) with zero DOM assumptions.
+
+[![npm](https://img.shields.io/npm/v/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
+[![npm downloads](https://img.shields.io/npm/dm/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
+[![npm total downloads](https://img.shields.io/npm/dt/@todovue/tv-alert.svg)](https://www.npmjs.com/package/@todovue/tv-alert)
+![License](https://img.shields.io/github/license/TODOvue/tv-alert)
+![Release Date](https://img.shields.io/github/release-date/TODOvue/tv-alert)
+![Bundle Size](https://img.shields.io/bundlephobia/minzip/@todovue/tv-alert)
+![Node Version](https://img.shields.io/node/v/@todovue/tv-alert)
+![Last Commit](https://img.shields.io/github/last-commit/TODOvue/tv-alert)
+![Stars](https://img.shields.io/github/stars/TODOvue/tv-alert?style=social)
+
+> Demo: https://ui.todovue.blog/alert
+
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start (SPA)](#quick-start-spa)
+- [Nuxt 4 / SSR Usage](#nuxt-4--ssr-usage)
+- [Component Registration Options](#component-registration-options)
+- [Props](#props)
+- [Alert Options](#alert-options)
+- [Composable API (useAlert)](#composable-api-usealert)
+- [Positions](#positions)
+- [Alert Types](#alert-types)
+- [Customization (Styles / Theming)](#customization-styles--theming)
+- [Accessibility](#accessibility)
+- [SSR Notes](#ssr-notes)
+- [Development](#development)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Features
+- Multiple alert types: info, success, warning, error
+- Six position options: top-right, top-center, top-left, bottom-right, bottom-center, bottom-left
+- Auto-dismiss with customizable duration
+- Progress bar showing remaining time
+- Pause on hover (configurable)
+- Optional close button
+- Stack multiple alerts in the same position (with max limit)
+- Programmatic API via composable (`useAlert`)
+- Smooth slide-in/slide-out transitions
+- Works in SPA and SSR (Nuxt 3) contexts
+- Tree-shake friendly (Vue marked external in library build)
+
+## Installation
+Using npm:
+```bash
+npm install @todovue/tv-alert
+```
+Using yarn:
+```bash
+yarn add @todovue/tv-alert
+```
+Using pnpm:
+```bash
+pnpm add @todovue/tv-alert
+```
+
+## Quick Start (SPA)
+Global registration (main.js / main.ts):
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import '@todovue/tv-alert/style.css'
+import { TvAlert } from '@todovue/tv-alert'
+
+const app = createApp(App)
+app.component('TvAlert', TvAlert)
+app.mount('#app')
+```
+
+In your root component (App.vue):
+```vue
+<template>
+  <div id="app">
+    <TvAlert />
+    <router-view />
+  </div>
+</template>
+```
+
+Using the alert in any component:
+```vue
+<script setup>
+import { useAlert } from '@todovue/tv-alert'
+
+const { api } = useAlert()
+const alert = api()
+
+function showNotification() {
+  alert.success('Operation completed successfully!')
+}
+</script>
+
+<template>
+  <button @click="showNotification">Show Alert</button>
+</template>
+```
+
+## Nuxt 4 / SSR Usage
+
+**Step 1:** Add the stylesheet to your `nuxt.config.ts`:
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: [
+    '@todovue/tv-alert/nuxt'
+  ]
+})
+```
+
+**Step 2:** Create a plugin file: `plugins/tv-alert.client.ts` (client-only is fine, or without suffix for SSR as it is safe):
+```ts
+import { defineNuxtPlugin } from '#app'
+import { TvAlert } from '@todovue/tv-alert'
+
+export default defineNuxtPlugin(nuxtApp => {
+  nuxtApp.vueApp.component('TvAlert', TvAlert)
+})
+```
+
+**Step 3:** Add the component to your app.vue or layout:
+```vue
+<template>
+  <div>
+    <TvAlert />
+    <NuxtPage />
+  </div>
+</template>
+```
+
+Use anywhere:
+```vue
+<script setup>
+import { useAlert } from '@todovue/tv-alert'
+
+const { api } = useAlert()
+const alert = api()
+
+function notify() {
+  alert.info('Welcome to our app!')
+}
+</script>
+```
+
+## Component Registration Options
+| Approach                                                          | When to use                                    |
+|-------------------------------------------------------------------|------------------------------------------------|
+| Global via `app.use(TvAlert)`                                     | Recommended - single instance across app       |
+| Local named import `{ TvAlert }`                                  | When you need multiple alert containers        |
+| Direct default import `import TvAlert from '@todovue/tv-alert'`   | Single usage or manual registration            |
+
+## Props
+The `TvAlert` component accepts the following props:
+
+| Prop | Type   | Default | Description                                      |
+|------|--------|---------|--------------------------------------------------|
+| max  | Number | 8       | Maximum number of alerts to display per position |
+
+Example:
+```vue
+<TvAlert :max="5" />
+```
+
+## Alert Options
+When calling `alert.open()` or type-specific methods, you can pass an options object:
+
+| Option        | Type    | Default      | Description                                           |
+|---------------|---------|--------------|-------------------------------------------------------|
+| title         | String  | null         | Optional bold title above the message                 |
+| message       | String  | ''           | The message to display in the alert                   |
+| type          | String  | 'info'       | Alert type: 'info', 'success', 'warning', or 'error'  |
+| position      | String  | 'top-right'  | Position of the alert (see Positions section)         |
+| duration      | Number  | 4000         | Duration in milliseconds (0 = never auto-dismiss)     |
+| showClose     | Boolean | true         | Show/hide close button                                |
+| pauseOnHover  | Boolean | true         | Pause auto-dismiss timer on mouse hover               |
+| showProgress  | Boolean | true         | Show/hide progress bar                                |
+| icon          | String  | null         | Custom icon implementation (not widely used)          |
+| customIcon    | String  | null         | SVG/HTML string for a custom icon replacing default   |
+| actions       | Array   | []           | Array of action buttons: `{ label, handler(item) }`   |
+| allowHtml     | Boolean | false        | Allow HTML content in the message                     |
+
+Example:
+```js
+alert.open({
+  message: 'Custom alert',
+  type: 'warning',
+  position: 'bottom-center',
+  duration: 6000,
+  showClose: true,
+  pauseOnHover: true,
+  showProgress: true
+})
+```
+
+## Composable API (useAlert)
+The `useAlert` composable provides methods to manage alerts programmatically:
+
+```js
+import { useAlert } from '@todovue/tv-alert'
+
+const { api, addAlert, removeAlert, clearAll, alerts } = useAlert()
+
+// Get the simplified API
+const alert = api()
+
+// Type-specific methods
+alert.info('Information message')
+alert.success('Success message')
+alert.warning('Warning message')
+alert.error('Error message')
+
+// Generic method with full options
+alert.open({
+  message: 'Custom alert',
+  type: 'info',
+  position: 'top-center',
+  duration: 5000
+})
+
+// Direct methods
+addAlert({ message: 'Direct call', type: 'success' })
+clearAll() // Remove all alerts
+
+// Access reactive alerts array
+console.log(alerts.value) // Array of current alerts
+```
+
+### API Methods
+
+| Method          | Parameters       | Returns | Description                          |
+|-----------------|------------------|---------|--------------------------------------|
+| api()           | none             | Object  | Returns simplified alert API         |
+| alert.info()    | message, options | Number  | Show info alert, returns alert ID    |
+| alert.success() | message, options | Number  | Show success alert, returns alert ID |
+| alert.warning() | message, options | Number  | Show warning alert, returns alert ID |
+| alert.error()   | message, options | Number  | Show error alert, returns alert ID   |
+| alert.open()    | options          | Number  | Show alert with custom options       |
+| addAlert()      | options          | Number  | Add alert directly                   |
+| removeAlert()   | id               | void    | Remove specific alert by ID          |
+| clearAll()      | none             | void    | Remove all alerts                    |
+
+## Positions
+TvAlert supports six different positions:
+
+- `top-right` (default)
+- `top-center`
+- `top-left`
+- `bottom-right`
+- `bottom-center`
+- `bottom-left`
+
+Example:
+```js
+alert.success('Top left notification', { position: 'top-left' })
+alert.warning('Bottom center notification', { position: 'bottom-center' })
+```
+
+## Alert Types
+Four alert types are available, each with its own color scheme:
+
+- `info` - Blue themed (informational messages)
+- `success` - Green themed (success/completion messages)
+- `warning` - Orange/Yellow themed (warning messages)
+- `error` - Red themed (error/critical messages)
+
+Examples:
+```js
+alert.info('This is an information alert')
+alert.success('Operation completed successfully!')
+alert.warning('Please review your input')
+alert.error('An error occurred')
+```
+
+## Customization (Styles / Theming)
+The component uses SCSS variables for theming. You can customize the appearance by overriding the CSS variables or by modifying the SCSS variables:
+
+Colors are automatically applied based on the alert type. The component includes:
+- Type-specific background colors
+- Progress bar animations
+- Smooth slide transitions
+- Hover effects
+
+For advanced customization, you can override the CSS classes:
+```css
+.tv-alert {
+  /* Custom styles */
+}
+
+.tv-alert--success {
+  /* Custom success styles */
+}
+
+.tv-alert__progress-bar {
+  /* Custom progress bar */
+}
+```
+
+## Accessibility
+- Each alert container has `aria-live="polite"` for screen reader announcements
+- Individual alerts have `role="status"` for proper ARIA semantics
+- Close buttons include `aria-label` for accessibility
+- Keyboard navigation supported (close button is focusable)
+
+## SSR Notes
+- No direct DOM (`window` / `document`) access in source → safe for SSR
+- Styles are automatically applied when you import the library
+- Works seamlessly with Nuxt 3 and other SSR frameworks
+- The composable uses Vue's reactivity system, compatible with SSR
+
+## Development
+```bash
+git clone https://github.com/TODOvue/tv-alert.git
+cd tv-alert
+npm install
+npm run dev     # run demo playground
+npm run build   # build library
+```
+Local demo served from Vite using `index.html` + `src/demo` examples.
+
+## Contributing
+PRs and issues welcome. See [CONTRIBUTING.md](./CONTRIBUTING.md) and [CODE_OF_CONDUCT.md](./CODE_OF_CONDUCT.md).
+
+## License
+MIT © TODOvue
+
+### Attributions
+Crafted for the TODOvue component ecosystem