@waaelg/dga-design-system 0.4.2 → 0.4.3

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -1,15 +1,27 @@
 {
   "name": "@waaelg/dga-design-system",
-  "version": "0.4.2",
+  "version": "0.4.3",
+  "description": "Saudi DGA design system — compiled CSS utilities, components, and JavaScript for interactive behavior.",
   "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
   "exports": {
-    ".": "./dist/index.js",
-    "./style.css": "./dist/style.css"
+    ".": {
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./style.css": {
+      "import": "./dist/style.css",
+      "default": "./dist/style.css"
+    }
   },
+  "sideEffects": [
+    "./dist/style.css",
+    "./dist/index.js"
+  ],
   "files": [
     "dist",
-    "README.md",
-    "docs"
+    "README.md"
   ],
   "repository": {
     "type": "git",
@@ -18,12 +30,17 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
-    "preview": "vite preview"
+    "prepack": "npm run build",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
     "@types/node": "^24.9.1",
     "sass": "^1.93.2",
-    "vite": "^7.1.7"
+    "vite": "^7.1.7",
+    "vitepress": "^1.6.4"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",

package/docs/README.md

@@ -1,76 +0,0 @@
-# DGA Design System — Documentation
-
-Documentation for **@waaelg/dga-design-on-sass**: Saudi DGA design system utilities, components, and optional JavaScript.
-
-**Package:** [npm](https://www.npmjs.com/package/@waaelg/dga-design-on-sass) · **Demo:** run `npm run dev` in the repo root
-
----
-
-## Getting Started
-
-| Doc | Description |
-|-----|-------------|
-| [Installation](./getting-started/installation.md) | npm, HTML, ASP.NET, Vue, React |
-| [JavaScript API](./getting-started/javascript-api.md) | Interactive component classes |
-| [Web Components](./getting-started/web-components.md) | `<dga-*>` custom elements |
-| [RTL & Arabic](./getting-started/rtl-arabic.md) | Right-to-left setup |
-
----
-
-## Foundations
-
-| Doc | Description |
-|-----|-------------|
-| [Colors](./foundations/colors.md) | Palettes, semantic colors, utilities |
-| [Colors cheatsheet](./foundations/colors-cheatsheet.md) | Quick class reference |
-| [Color swatches](./foundations/colors-swatches.md) | Hex values per shade |
-| [Typography](./foundations/typography.md) | Display, text sizes, weights |
-| [Spacing](./foundations/spacing.md) | Padding, margin, gap |
-| [Grid & Flex](./foundations/grid.md) | Layout, flexbox, display |
-| [Width & Height](./foundations/width-height.md) | `dga-w-*`, `dga-h-*` |
-| [Border radius](./foundations/radius.md) | Radius utilities |
-
----
-
-## Components
-
-| Component | Doc | Demo | JS / WC |
-|-----------|-----|------|---------|
-| Button | [button.md](./components/button.md) | `index.html` | No |
-| Alert | [alert.md](./components/alert.md) | `alerts.html` | WC or class |
-| Accordion | [accordion.md](./components/accordion.md) | `index.html` | WC or class |
-| Navbar | [navbar.md](./components/navbar.md) | `index.html` | Yes |
-| Card | [card.md](./components/card.md) | `index.html` | No |
-| Forms | [forms.md](./components/forms.md) | `index.html` | No |
-| Table | [table.md](./components/table.md) | `index.html` | No |
-| Breadcrumb | [breadcrumb.md](./components/breadcrumb.md) | `index.html` | No |
-| Link | [link.md](./components/link.md) | `index.html` | No |
-| Tag | [tag.md](./components/tag.md) | `index.html` | No |
-| Divider | [divider.md](./components/divider.md) | `index.html` | No |
-| Code snippet | [code-snippet.md](./components/code-snippet.md) | `index.html` | WC or class |
-| Pie chart | [chart.md](./components/chart.md) | `index.html` | WC or class |
-| Verify bar | [verify-bar.md](./components/verify-bar.md) | `verify-bar.html` | WC or class |
-| Avatar | [avatar.md](./components/avatar.md) | — | No |
-
-**WC** = web component (`<dga-*>`) registered on package import.
-
----
-
-## Changelog
-
-See [changelog.md](./changelog.md).
-
----
-
-## Doc conventions
-
-Every component page includes:
-
-1. Overview  
-2. HTML structure  
-3. Classes and variants (from source SCSS)  
-4. Copy-paste examples (from demo HTML)  
-5. JavaScript setup (if needed)  
-6. Accessibility notes  
-
-Class names are verified against `dist/style.css` after `npm run build`.

package/docs/changelog.md

@@ -1,54 +0,0 @@
-# Changelog
-
-All notable changes to **@waaelg/dga-design-on-sass**.
-
----
-
-## [0.4.0] — 2026-06-29
-
-### Added
-- Web components: `<dga-alert>`, `<dga-accordion>`, `<dga-code-snippet>`, `<dga-pie-chart>`
-- [Web Components guide](./getting-started/web-components.md)
-- Full documentation under `docs/`:
-  - Getting started (installation, JS API, RTL, web components)
-  - Foundations (`colors`, `grid`, `width-height`, `radius`, typography, spacing)
-  - All 15 component docs
-
-### Changed
-- Legacy JS classes share utilities with web components (`src/scripts/shared/`)
-- Foundation docs moved to `docs/foundations/` with npm quick-start sections
-- Alert, accordion, code snippet, and chart docs: legacy + web component options
-- JavaScript API and README: web component registration and usage
-
----
-
-## [0.3.9]
-
-### Added
-- Height utilities (`dga-h-*`, `dga-max-h-*`, `dga-min-h-*`)
-- Flex direction aliases: `dga-flex-column`, `dga-flex-column-reverse`
-- Avatar component in build (`components/avatar`)
-- Initial documentation under `docs/`
-
-### Changed
-- Grid documentation: width/height section, justify-content table
-
----
-
-## [0.3.8]
-
-- Published npm package with compiled `dist/`
-- Grid, color, radius utilities
-- Components: button, alert, accordion, navbar, card, forms, table, verify bar, code snippet, chart
-- JavaScript exports: `DGAAccordion`, `DGAAlert`, `DGAChart`, `DGACodeSnippet`, `DGAMenuDropDown`, `DGAVerifyBar`
-- `<dga-verify-bar>` web component
-
----
-
-## Versioning
-
-This project uses [Semantic Versioning](https://semver.org/):
-
-- **Patch** — bug fixes, doc updates, new utility classes
-- **Minor** — new components or features (backward compatible)
-- **Major** — breaking class renames or API changes

package/docs/components/accordion.md

@@ -1,114 +0,0 @@
-# Accordion
-
-Expandable sections for FAQs and grouped content.
-
-**Source:** `src/styles/components/accordion.scss`, `src/scripts/accordion.js`, `src/scripts/dga-accordion.js`  
-**Demo:** `index.html`  
-**JavaScript:** Optional — web component or `DGAAccordion` class
-
----
-
-## Option 1: Web component (recommended)
-
-```html
-<dga-accordion>
-  <dga-accordion-item title="What is an accordion?">
-    An accordion lets users expand and collapse sections of content.
-  </dga-accordion-item>
-  <dga-accordion-item title="How do I use it?" size="lg" open>
-    Import the package once — no manual JS init required.
-  </dga-accordion-item>
-</dga-accordion>
-```
-
-### `dga-accordion-item` attributes
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `title` | — | Header label |
-| `size` | `md` | `sm`, `md`, or `lg` |
-| `open` | — | Present = expanded on load |
-
----
-
-## Option 2: Legacy markup + DGAAccordion
-
-```html
-<div class="dga-acc" id="myAccordion">
-  <div class="dga-acc-item">
-    <button class="dga-acc-header" aria-expanded="false">
-      <span>What is an accordion?</span>
-    </button>
-    <div class="dga-acc-content">
-      <div class="dga-acc-body">
-        An accordion lets users expand and collapse sections of content.
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-```js
-import { DGAAccordion } from '@waaelg/dga-design-on-sass'
-new DGAAccordion(document.getElementById('myAccordion'))
-```
-
----
-
-## HTML structure (legacy)
-
-| Element | Class |
-|---------|-------|
-| Root | `dga-acc` |
-| Item | `dga-acc-item` |
-| Header (button) | `dga-acc-header` |
-| Content wrapper | `dga-acc-content` |
-| Body | `dga-acc-body` |
-
-Open state: `dga-acc-item--active` on the item (added by JS).
-
----
-
-## Header sizes
-
-| Attribute | Height |
-|-----------|--------|
-| `data-size="sm"` | 40px |
-| `data-size="md"` | 48px (default) |
-| `data-size="lg"` | 56px |
-
-```html
-<button class="dga-acc-header" data-size="lg" aria-expanded="false">Large header</button>
-```
-
-Web component: `size="lg"` on `<dga-accordion-item>`.
-
----
-
-## Behavior
-
-- Click header to toggle
-- Keyboard: Enter / Space on focused header
-- Sets `aria-expanded` on the header
-- Multiple panels can be open at once
-
----
-
-## RTL
-
-Chevron icon flips automatically in RTL. Optional: `dir="rtl"` on header.
-
----
-
-## Accessibility
-
-- Use `<button>` for headers, not `<div>`
-- Set `aria-expanded="true"` / `"false"`
-- Web component handles this automatically
-
----
-
-## Related
-
-- [Web Components](../getting-started/web-components.md)
-- [JavaScript API](../getting-started/javascript-api.md)

package/docs/components/alert.md

@@ -1,130 +0,0 @@
-# Alert
-
-Feedback messages for success, warning, error, info, and neutral states.
-
-**Source:** `src/styles/components/alert.scss`, `src/scripts/alert.js`, `src/scripts/dga-alert.js`  
-**Demo:** `alerts.html`  
-**JavaScript:** Optional — web component or `DGAAlert` class
-
----
-
-## Option 1: Web component (recommended)
-
-Import the package once — registers `<dga-alert>` automatically:
-
-```html
-<dga-alert variant="success-color" title="Success" dismissible>
-  When successful actions need direct feedback, show it here.
-</dga-alert>
-```
-
-### Attributes
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `variant` | `info-color` | Alert theme (see variants below) |
-| `title` | — | Optional heading |
-| `dismissible` | — | Present = show close button |
-
-```html
-<dga-alert variant="info-white">
-  Informational message without dismiss.
-</dga-alert>
-```
-
-Dismiss fires `dga-alert-dismiss` on the element. No `new DGAAlert()` required.
-
-Works in plain HTML, ASP.NET `.cshtml`, and SPA frameworks — see [Web Components](../getting-started/web-components.md).
-
----
-
-## Option 2: Legacy markup + DGAAlert
-
-Alerts are **HTML + CSS**. Initialize `DGAAlert` once to handle close buttons.
-
-```html
-<div class="dga-alert" data-variant="success-color">
-  <span class="dga-alert-icon" aria-hidden="true"></span>
-  <div class="dga-alert-content">
-    <h4 class="dga-alert-title">نجاح</h4>
-    <div class="dga-alert-body">تمت العملية بنجاح!</div>
-  </div>
-  <button class="dga-alert-close" type="button" data-alert-close aria-label="إغلاق">×</button>
-</div>
-```
-
-```js
-import { DGAAlert } from '@waaelg/dga-design-on-sass'
-new DGAAlert()
-```
-
----
-
-## HTML structure (legacy)
-
-| Element | Class | Required |
-|---------|-------|----------|
-| Root | `dga-alert` | Yes |
-| Icon | `dga-alert-icon` | Recommended |
-| Content wrapper | `dga-alert-content` | Yes |
-| Title | `dga-alert-title` | Optional |
-| Body | `dga-alert-body` | Yes |
-| Close button | `dga-alert-close` + `data-alert-close` | Optional |
-
-Set variant on the root: `data-variant="success-color"` (legacy) or `variant="success-color"` (web component).
-
----
-
-## Variants
-
-Two themes: **color** (filled accent) and **white** (light background).
-
-| Value | Status |
-|-------|--------|
-| `success-color` | Success (color theme) |
-| `success-white` | Success (white theme) |
-| `warning-color` | Warning (color) |
-| `warning-white` | Warning (white) |
-| `destructive-color` | Error / destructive (color) |
-| `destructive-white` | Error / destructive (white) |
-| `info-color` | Info (color) |
-| `info-white` | Info (white) |
-| `neutral-color` | Neutral (color) |
-| `neutral-white` | Neutral (white) |
-
-Use **color** variants on light pages; **white** variants on dense or colored backgrounds.
-
----
-
-## JavaScript (legacy)
-
-### Vanilla
-
-```js
-import '@waaelg/dga-design-on-sass/style.css'
-import { DGAAlert } from '@waaelg/dga-design-on-sass'
-
-const alert = new DGAAlert()
-// alert.destroy() when removing listener
-```
-
-Listens for clicks on `[data-alert-close]` and hides the parent `.dga-alert`.
-
-For new projects, prefer `<dga-alert>` instead — see [Web Components](../getting-started/web-components.md).
-
----
-
-## Accessibility
-
-- Close button: `aria-label` (e.g. "Dismiss alert" / "إغلاق")
-- Icon: `aria-hidden="true"` (decorative)
-- Use clear title + body text
-- Do not rely on color alone — title conveys status
-
----
-
-## Related
-
-- [Web Components](../getting-started/web-components.md)
-- [JavaScript API](../getting-started/javascript-api.md)
-- [Colors](../foundations/colors.md)

package/docs/components/avatar.md

@@ -1,74 +0,0 @@
-# Avatar
-
-User profile images in circular or square shapes.
-
-**Source:** `src/styles/components/avatar.scss`  
-**Demo:** _not in index.html yet_  
-**JavaScript required:** No
-
-> **Note:** Avatar is included in the build as of the next release. Rebuild with `npm run build` after pulling latest source.
-
----
-
-## HTML
-
-```html
-<div class="dga-avatar" data-size="md">
-  <img src="user.jpg" alt="User name" />
-</div>
-```
-
----
-
-## Sizes
-
-| `data-size` | Dimensions |
-|-------------|------------|
-| `xs` | 24px |
-| `sm` | 32px |
-| `md` | 40px |
-| `lg` | 48px |
-| `xl` | 64px |
-| `2xl` | 80px |
-| `3xl` | 120px |
-
-```html
-<div class="dga-avatar" data-size="lg">
-  <img src="avatar.png" alt="" />
-</div>
-```
-
----
-
-## Shape
-
-| Attribute | Shape |
-|-----------|-------|
-| (default) / `data-square="false"` | Circle |
-| `data-square="true"` | Rounded square (4px radius) |
-
-```html
-<div class="dga-avatar" data-size="md" data-square="true">
-  <img src="logo.png" alt="Organization" />
-</div>
-```
-
----
-
-## Styling
-
-- White 2px border
-- `object-fit: cover` on images
-- `overflow: hidden`
-
----
-
-## Enable in build
-
-Avatar is imported in `src/styles/main.scss`. Run `npm run build` to include styles in `dist/style.css`.
-
----
-
-## Related
-
-- [Card](./card.md)

package/docs/components/breadcrumb.md

@@ -1,56 +0,0 @@
-# Breadcrumb
-
-Navigation trail showing the current page hierarchy.
-
-**Source:** `src/styles/components/breadcrumb.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## HTML
-
-```html
-<div class="dga-breadcrumb">
-  <a class="dga-breadcrumb-item" href="/">Home</a>
-  <a class="dga-breadcrumb-item" href="/about">About</a>
-  <a class="dga-breadcrumb-item" href="/vision" data-current="true">Our vision</a>
-</div>
-```
-
----
-
-## Classes
-
-| Class | Purpose |
-|-------|---------|
-| `dga-breadcrumb` | Flex container |
-| `dga-breadcrumb-item` | Each crumb link |
-| `data-current="true"` | Current (last) item — muted color |
-
----
-
-## RTL
-
-Separator chevron flips automatically when `dir="rtl"` is on a parent:
-
-```html
-<div class="dga-breadcrumb" dir="rtl">
-  <a class="dga-breadcrumb-item" href="#">الرئيسية</a>
-  <a class="dga-breadcrumb-item" data-current="true">رؤيتنا</a>
-</div>
-```
-
----
-
-## Accessibility
-
-- Use `<nav aria-label="Breadcrumb">` wrapper in production
-- Current page: `aria-current="page"` on the last link
-- Ensure links are keyboard focusable
-
----
-
-## Related
-
-- [Link](./link.md)