vanduo-framework 1.1.8-docs-update

package/LICENSE

@@ -0,0 +1,35 @@
+MIT License
+
+Copyright (c) 2024 Vanduo Framework
+
+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.
+
+---
+
+Third-Party Licenses:
+
+Open Color
+Copyright (c) 2016 Heeyeun Jeong
+MIT License
+https://yeun.github.io/open-color/
+
+Phosphor Icons
+Copyright (c) 2020 Phosphor Icons
+MIT License
+https://phosphoricons.com/

package/README.md

@@ -0,0 +1,216 @@
+# Vanduo Framework v1.1.8
+
+<p align="center">
+  <img src="vanduo-banner.svg" alt="Vanduo Framework Banner" width="100%">
+</p>
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/vanduo-framework"><img src="https://img.shields.io/npm/v/vanduo-framework?style=flat-square&color=3b82f6" alt="NPM Version"></a>
+  <a href="https://github.com/Nostromo-618/vanduo-framework/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/Nostromo-618/vanduo-framework/ci.yml?branch=main&style=flat-square&color=10b981" alt="Build Status"></a>
+  <a href="https://github.com/Nostromo-618/vanduo-framework/blob/main/dist/vanduo.min.css"><img src="https://img.shields.io/badge/minified_size-~110kb-8b5cf6?style=flat-square" alt="Minified Size"></a>
+  <a href="https://github.com/Nostromo-618/vanduo-framework/blob/main/LICENSE"><img src="https://img.shields.io/github/license/Nostromo-618/vanduo-framework?style=flat-square&color=64748b" alt="License"></a>
+</p>
+
+**Essential just like water is.** 
+
+- **Pure HTML, CSS, JS** 
+- **No third party dependencies**
+- **Free and open source.**
+
+## Overview
+
+A lightweight, pure HTML/CSS/JS framework for designing beautiful static websites. No dependencies, no build tools, just clean and simple code.
+
+[**Browse Full Documentation &rarr;**]([https://vanduo.dev/#docs](https://vanduo.dev/#docs) 
+
+## Features
+
+- 🎨 **Pure CSS/JS** - No libraries, no dependencies
+- 🚀 **Lightweight** - Minimal file size, maximum performance
+- 📱 **Responsive** - Mobile-first design approach
+- 🎯 **Utility-First** - Flexible utility classes for rapid development
+- 🧩 **Modular** - Import only what you need
+- ♿ **Accessible** - Built with accessibility in mind (WCAG 2.1 AA)
+- 🌙 **Dark Mode** - Automatic OS preference detection + manual toggle
+- 🎛️ **Theme Customizer** - Real-time color, radius, font, and mode customization
+- 🔍 **SEO-Ready** - Comprehensive meta tags, structured data, and sitemap
+
+### The Vanduo Way
+Stop wrapping everything in bloated container DOMs. Build beautiful, accessible UI components with clean, predictable utility classes:
+
+```html
+<!-- Raw HTML -->
+<button>Click Me</button>
+
+<!-- With Vanduo Framework -->
+<button class="vd-btn vd-btn-primary vd-radius-full">
+  <i class="ph ph-sparkle"></i> Click Me
+</button>
+```
+
+---
+
+## Quick Start
+
+### Option 1: Package Manager (Recommended)
+
+**We strongly recommend using [pnpm](https://pnpm.io/)** for installing Vanduo Framework. Vanduo is strictly configured with `.npmrc` security policies (such as blocking exotic sub-dependencies and strict peer enforcement) that work best with inside the pnpm ecosystem.
+
+```bash
+pnpm add vanduo-framework
+```
+
+*(Note: While `npm install vanduo-framework` and `yarn add vanduo-framework` will still technically work, they do not inherently enforce the same strict lockfile and isolated `node_modules` security guarantees that pnpm provides out-of-the-box).*
+
+### Option 2: CDN (Fastest)
+
+Load directly from jsDelivr — no download required:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <!-- Vanduo CSS via CDN -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@main/dist/vanduo.min.css">
+</head>
+<body>
+    <!-- Your content here -->
+    
+    <!-- Vanduo JS via CDN -->
+    <script src="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@main/dist/vanduo.min.js"></script>
+    <script>Vanduo.init();</script>
+</body>
+</html>
+```
+
+**Pin to a specific version** (recommended for production):
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@v1.1.8/dist/vanduo.min.css">
+<script src="https://cdn.jsdelivr.net/gh/Nostromo-618/vanduo-framework@v1.1.8/dist/vanduo.min.js"></script>
+<script>Vanduo.init();</script>
+```
+
+
+### Option 3: Download
+
+[**Download dist/ folder**](https://github.com/Nostromo-618/vanduo-framework/tree/main/dist) and include locally:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <link rel="stylesheet" href="dist/vanduo.min.css">
+</head>
+<body>
+    <!-- Your content here -->
+    
+    <script src="dist/vanduo.min.js"></script>
+    <script>Vanduo.init();</script>
+</body>
+</html>
+```
+
+The `dist/` folder is **self-contained** (CSS, JS, Fonts, Icons).
+
+### Option 4: Source Files
+
+For development or when you need more control, use the unminified source:
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>My Website</title>
+    <link rel="stylesheet" href="css/vanduo.css">
+</head>
+<body>
+    <!-- Your content here -->
+    
+    <script src="js/vanduo.js"></script>
+    <script>Vanduo.init();</script>
+</body>
+</html>
+```
+
+---
+
+## LLM Access
+
+This project includes an [`llms.txt`](llms.txt) file — a structured markdown summary designed for AI assistants and LLM-powered code editors. It provides quick access to framework documentation, component references, and usage patterns.
+
+---
+
+## Release Assets (Maintainers)
+
+Use the hardened upload script to attach only approved bundle artifacts from `dist/`:
+
+```bash
+pnpm run release:assets -- v1.1.8
+```
+
+Notes:
+- If tag is omitted, it defaults to `v` + version from `package.json`.
+- Use `--dry-run` to preview files without uploading.
+
+---
+
+## Documentation
+
+Comprehensive documentation for all components, utilities, and customization options is available at vanduo.dev.
+
+[**View Documentation**]([https://vanduo.dev/#docs](https://vanduo.dev/#docs)
+
+### Key Capabilities
+
+*   **Dark Mode**: Works automatically with system preferences. Can be forced via `data-theme="dark"` on `<html>`.
+*   **Theme Customizer**: Built-in runtime tool to change colors, fonts, and radius.
+*   **Modular Imports**: Import only specific components (e.g., `css/components/buttons.css`) to keep your site lean.
+*   **Icons**: Includes [Phosphor Icons](https://phosphoricons.com) (Regular + Fill weights bundled).
+
+---
+
+## Project Structure
+
+```
+vanduo-framework/
+├── dist/                  # Production ready files (minified)
+├── css/
+│   ├── vanduo.css         # Main framework file (imports all)
+│   ├── core/              # Foundation (colors, typography, grid)
+│   ├── components/        # UI components (buttons, cards, etc)
+│   ├── utilities/         # Utility classes
+│   └── effects/           # Visual effects
+├── js/
+│   ├── vanduo.js          # Main entry point
+│   └── components/        # Component logic
+├── icons/                 # Phosphor Icons
+├── fonts/                 # Web fonts
+└── tests/                 # Framework test suite
+```
+
+## Browser Support
+
+- Chrome (last 2 versions)
+- Firefox (last 2 versions)
+- Safari (last 2 versions)
+- Edge (last 2 versions)
+
+## License
+
+MIT License - see [LICENSE](LICENSE) file for details.
+
+## Credits
+
+- **Color System**: [Open Color](https://yeun.github.io/open-color/) by Heeyeun Jeong (MIT License)
+- **Icons**: [Phosphor Icons](https://phosphoricons.com) (MIT License)
+
+---
+Vanduo Framework - Built with ❤️ for the web.

package/css/components/alerts.css

@@ -0,0 +1,224 @@
+/**
+ * Vanduo Framework - Alerts
+ * Alert and notification components for user feedback
+ */
+
+:root {
+  /* Alert Spacing (Fibonacci: 21px/13px, ratio ~ phi) */
+  --alert-padding-x: 1.3125rem;   /* 21px - fib */
+  --alert-padding-y: 0.8125rem;   /* 13px - fib */
+  --alert-border-radius: var(--btn-border-radius);
+  --alert-border-width: 1px;
+
+  /* Alert Colors */
+  --alert-primary-bg: var(--color-primary-alpha-10);
+  --alert-primary-border: var(--color-primary);
+  --alert-primary-text: var(--color-primary-dark);
+
+  --alert-success-bg: var(--color-success-alpha-10);
+  --alert-success-border: var(--color-success);
+  --alert-success-text: var(--color-success-dark);
+
+  --alert-warning-bg: var(--color-warning-alpha-10);
+  --alert-warning-border: var(--color-warning);
+  --alert-warning-text: var(--color-warning-dark);
+
+  --alert-error-bg: var(--color-error-alpha-10);
+  --alert-error-border: var(--color-error);
+  --alert-error-text: var(--color-error-dark);
+
+  --alert-info-bg: var(--color-info-alpha-10);
+  --alert-info-border: var(--color-info);
+  --alert-info-text: var(--color-info-dark);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --alert-primary-text: var(--color-primary-light);
+  --alert-success-text: var(--color-success-light);
+  --alert-warning-text: var(--color-warning-light);
+  --alert-error-text: var(--color-error-light);
+  --alert-info-text: var(--color-info-light);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --alert-primary-text: var(--color-primary-light);
+    --alert-success-text: var(--color-success-light);
+    --alert-warning-text: var(--color-warning-light);
+    --alert-error-text: var(--color-error-light);
+    --alert-info-text: var(--color-info-light);
+  }
+}
+
+/* Base Alert */
+.vd-alert {
+  position: relative;
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  margin-bottom: 1rem;
+  border: var(--alert-border-width) solid transparent;
+  border-radius: var(--alert-border-radius);
+  font-size: var(--font-size-base);
+  line-height: var(--line-height-normal);
+}
+
+/* Alert Variants */
+.vd-alert-primary {
+  background-color: var(--alert-primary-bg);
+  border-color: var(--alert-primary-border);
+  color: var(--alert-primary-text);
+}
+
+.vd-alert-success {
+  background-color: var(--alert-success-bg);
+  border-color: var(--alert-success-border);
+  color: var(--alert-success-text);
+}
+
+.vd-alert-warning {
+  background-color: var(--alert-warning-bg);
+  border-color: var(--alert-warning-border);
+  color: var(--alert-warning-text);
+}
+
+.vd-alert-error,
+.vd-alert-danger {
+  background-color: var(--alert-error-bg);
+  border-color: var(--alert-error-border);
+  color: var(--alert-error-text);
+}
+
+.vd-alert-info {
+  background-color: var(--alert-info-bg);
+  border-color: var(--alert-info-border);
+  color: var(--alert-info-text);
+}
+
+/* Alert with Icon */
+.vd-alert-icon {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+}
+
+.vd-alert-icon > svg,
+.vd-alert-icon > .icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+/* Alert Title */
+.vd-alert-title {
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: 0.25rem;
+}
+
+/* Alert Content */
+.vd-alert-content {
+  flex: 1;
+}
+
+/* Dismissible Alert */
+.vd-alert-dismissible {
+  padding-right: 3rem;
+}
+
+.vd-alert-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: var(--alert-padding-y) var(--alert-padding-x);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: opacity 0.15s ease;
+  color: inherit;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.vd-alert-close:hover {
+  opacity: 1;
+}
+
+.vd-alert-close:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* Alert Link */
+.vd-alert a,
+.vd-alert-link {
+  font-weight: var(--font-weight-semibold);
+  color: inherit;
+  text-decoration: underline;
+}
+
+.vd-alert a:hover,
+.vd-alert-link:hover {
+  text-decoration: none;
+}
+
+/* Solid Variants (filled background) */
+.vd-alert-solid.vd-alert-primary {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.vd-alert-solid.vd-alert-success {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: var(--color-white);
+}
+
+.vd-alert-solid.vd-alert-warning {
+  background-color: var(--color-warning);
+  border-color: var(--color-warning);
+  color: var(--color-gray-900);
+}
+
+.vd-alert-solid.vd-alert-error,
+.vd-alert-solid.vd-alert-danger {
+  background-color: var(--color-error);
+  border-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.vd-alert-solid.vd-alert-info {
+  background-color: var(--color-info);
+  border-color: var(--color-info);
+  color: var(--color-white);
+}
+
+/* Outline Variants */
+.vd-alert-outline {
+  background-color: transparent;
+}
+
+/* Alert Sizes */
+.vd-alert-sm {
+  padding: 0.3125rem 0.5rem; /* 5px 8px - fib pair */
+  font-size: var(--font-size-sm);
+}
+
+.vd-alert-lg {
+  padding: 1.3125rem 2.125rem; /* 21px 34px - fib pair */
+  font-size: var(--font-size-lg);
+}
+
+/* Alert with Border Left Accent */
+.vd-alert-accent {
+  border-left-width: 4px;
+  border-radius: 0 var(--alert-border-radius) var(--alert-border-radius) 0;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-alert-close {
+    transition: none;
+  }
+}