@waaelg/dga-design-system 0.4.2 → 0.4.3

package/docs/components/button.md

@@ -1,163 +0,0 @@
-# Button
-
-Primary action component for the DGA design system.
-
-**Source:** `src/styles/components/button.scss`  
-**Demo:** `index.html` (Buttons section)  
-**JavaScript required:** No
-
----
-
-## Overview
-
-Buttons use the base class `dga-btn` plus a variant and optional size modifier.
-
-```html
-<button class="dga-btn dga-btn-primary dga-btn-md">الاجراء الرئيسي</button>
-```
-
----
-
-## Base class
-
-| Class | Required |
-|-------|----------|
-| `dga-btn` | Yes |
-
-Always use a `<button>` element (or `<a>` styled as button for navigation).
-
----
-
-## Variants
-
-| Class | Use case |
-|-------|----------|
-| `dga-btn-primary` | Main action (Saudi green) |
-| `dga-btn-primary-outline` | Secondary emphasis, outline |
-| `dga-btn-neutral` | Dark neutral action |
-| `dga-btn-secondary-solid` | Secondary filled |
-| `dga-btn-secondary-outline` | Secondary outline |
-| `dga-btn-subtle` | Low emphasis |
-| `dga-btn-transparent` | Minimal, on colored backgrounds |
-| `dga-btn-ghost` | Ghost style (green text) |
-| `dga-btn-destructive` | Delete / dangerous actions |
-| `dga-btn-destructive-outline` | Destructive outline |
-| `dga-btn-success` | Success action |
-| `dga-btn-warning` | Warning action |
-| `dga-btn-info` | Info action |
-
-```html
-<button class="dga-btn dga-btn-primary">Primary</button>
-<button class="dga-btn dga-btn-secondary-outline">Secondary outline</button>
-<button class="dga-btn dga-btn-destructive">Delete</button>
-```
-
----
-
-## Sizes
-
-| Class | Height | Font size |
-|-------|--------|-----------|
-| `dga-btn-sm` | 24px | 12px |
-| `dga-btn-md` | 32px | 14px (default) |
-| `dga-btn-lg` | 40px | 16px |
-
-If no size class is set, **medium** (`md`) applies.
-
-```html
-<button class="dga-btn dga-btn-primary dga-btn-sm">Small</button>
-<button class="dga-btn dga-btn-primary dga-btn-lg">Large</button>
-```
-
----
-
-## Icons
-
-| Class | Purpose |
-|-------|---------|
-| `dga-btn__icon` | Icon inside button |
-| `dga-btn-icon-only` | Icon-only button (square) |
-| `dga-btn-icon-left` | Icon on left (LTR) |
-| `dga-btn-icon-right` | Icon on right (LTR) |
-
-```html
-<!-- Text + icon -->
-<button class="dga-btn dga-btn-primary dga-btn-md">
-  الاجراء الرئيسي
-  <img class="dga-btn__icon" src="arrow.svg" alt="" />
-</button>
-
-<!-- Icon only -->
-<button class="dga-btn dga-btn-primary dga-btn-md dga-btn-icon-only" aria-label="Next">
-  <img class="dga-btn__icon" src="arrow.svg" alt="" />
-</button>
-```
-
-Always provide `aria-label` on icon-only buttons.
-
----
-
-## Modifiers
-
-| Class | Effect |
-|-------|--------|
-| `dga-btn-block` | Full width |
-| `dga-btn-pill` | Pill border radius |
-| `dga-btn-disabled` | Disabled style |
-| `disabled` attribute | Native disabled state |
-
-```html
-<button class="dga-btn dga-btn-primary dga-btn-block" disabled>Full width</button>
-```
-
----
-
-## Button groups
-
-```html
-<div class="dga-btn-group">
-  <button class="dga-btn dga-btn-secondary-outline">Left</button>
-  <button class="dga-btn dga-btn-secondary-outline">Right</button>
-</div>
-```
-
----
-
-## Full example
-
-```html
-<div class="dga-d-flex dga-flex-col dga-gap-3 dga-align-items-start">
-  <button class="dga-btn dga-btn-primary dga-btn-md">
-    الاجراء الرئيسي
-    <img class="dga-btn__icon" src="arrow_left.svg" alt="" />
-  </button>
-  <button class="dga-btn dga-btn-neutral dga-btn-md">Neutral</button>
-  <button class="dga-btn dga-btn-subtle dga-btn-md">اجراء دقيق</button>
-</div>
-```
-
----
-
-## Accessibility
-
-- Use `<button type="button">` for actions, `type="submit"` for forms.
-- Icon-only buttons need `aria-label`.
-- Disabled buttons: `disabled` attribute or `dga-btn-disabled`.
-- Focus styles are built in (`:focus-visible`).
-
----
-
-## Do / Don't
-
-| Do | Don't |
-|----|-------|
-| `dga-btn dga-btn-primary dga-btn-md` | `dga-btn-large` (invalid — use `dga-btn-lg`) |
-| `<button class="dga-btn">` | `<div class="dga-btn">` |
-| `aria-label` on icon-only | Icon-only without label |
-
----
-
-## Related
-
-- [Colors](../foundations/colors.md)
-- [Spacing](../foundations/spacing.md)

package/docs/components/card.md

@@ -1,78 +0,0 @@
-# Card
-
-Container for grouped content with optional icon and footer.
-
-**Source:** `src/styles/components/card.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Basic card
-
-```html
-<div class="dga-card">
-  <div class="dga-card-icon">
-    <img src="icon.svg" alt="" />
-  </div>
-  <div class="dga-card-content">
-    <h3 class="dga-card-title">عنوان</h3>
-    <div class="dga-card-body">
-      <p>نص المحتوى الخاص بالكارد</p>
-    </div>
-  </div>
-</div>
-```
-
----
-
-## Structure
-
-| Element | Class | Required |
-|---------|-------|----------|
-| Root | `dga-card` | Yes |
-| Icon area | `dga-card-icon` | Optional |
-| Content | `dga-card-content` | Yes |
-| Title | `dga-card-title` | Optional |
-| Body | `dga-card-body` | Optional |
-| Footer | `dga-card-footer` | Optional |
-
-Footer inner classes: `.footer-text`, `.footer-actions`
-
----
-
-## Variants
-
-Set `data-variant` on the root:
-
-| Value | Style |
-|-------|-------|
-| `default` | Shadow (`dga-shadow-md`) — default when omitted |
-| `stroke` | Border, no shadow |
-| `noshadow` | No shadow, no border |
-
-```html
-<div class="dga-card" data-variant="stroke">
-  <div class="dga-card-content">
-    <div class="dga-card-title">عنوان</div>
-    <div class="dga-card-body">محتوى</div>
-  </div>
-</div>
-```
-
----
-
-## With utility spacing
-
-```html
-<div class="dga-card dga-p-4" data-variant="stroke">
-  ...
-</div>
-```
-
----
-
-## Related
-
-- [Spacing](../foundations/spacing.md)
-- [Border radius](../foundations/radius.md)

package/docs/components/chart.md

@@ -1,97 +0,0 @@
-# Pie Chart
-
-CSS conic-gradient pie / donut chart with labels.
-
-**Source:** `src/styles/components/chart--pie.scss`, `src/scripts/chart.js`, `src/scripts/dga-pie-chart.js`  
-**Demo:** `index.html`  
-**JavaScript:** Optional — web component or `DGAChart` class
-
----
-
-## Option 1: Web component (recommended)
-
-```html
-<dga-pie-chart
-  data='[
-    {"label":"البند الأول","from":"0%","to":"40%","color":"var(--dga-primary-100)"},
-    {"label":"البند الثاني","from":"40%","to":"70%","color":"var(--dga-gray-200)"},
-    {"label":"البند الثالث","from":"70%","to":"90%","color":"var(--dga-primary-700)"},
-    {"label":"البند الرابع","from":"90%","to":"100%","color":"var(--dga-primary-700)"}
-  ]'>
-</dga-pie-chart>
-```
-
-### Donut
-
-```html
-<dga-pie-chart hole data='[...]'></dga-pie-chart>
-```
-
-### Attributes
-
-| Attribute | Default | Description |
-|-----------|---------|-------------|
-| `data` | `[]` | JSON array of segments (see data shape) |
-| `hole` | `false` | Present = donut (white center) |
-
-No `new DGAChart()` required. Update the `data` attribute to re-render.
-
----
-
-## Option 2: Legacy markup + DGAChart
-
-```html
-<!-- Full pie -->
-<div id="chart1" class="dga-pie-chart" data-hole="false"></div>
-
-<!-- Donut -->
-<div id="chart2" class="dga-pie-chart" data-hole="true"></div>
-```
-
-```js
-import { DGAChart } from '@waaelg/dga-design-on-sass'
-
-const data = [
-  { label: 'البند الأول', from: '0%', to: '40%', color: 'var(--dga-primary-100)' },
-  { label: 'البند الثاني', from: '40%', to: '70%', color: 'var(--dga-gray-200)' },
-  { label: 'البند الثالث', from: '70%', to: '90%', color: 'var(--dga-primary-700)' },
-  { label: 'البند الرابع', from: '90%', to: '100%', color: 'var(--dga-primary-700)' },
-]
-
-new DGAChart(document.getElementById('chart1'), data)
-```
-
-| Attribute | Effect |
-|-----------|--------|
-| `data-hole="false"` | Solid pie |
-| `data-hole="true"` | Donut (white center) |
-
-Default size: 150×150px, centered with `margin: 0 auto`.
-
----
-
-## Data shape
-
-| Field | Description |
-|-------|-------------|
-| `label` | Legend text |
-| `from` | Segment start (e.g. `0%`) |
-| `to` | Segment end (e.g. `40%`) |
-| `color` | Hex (`#2d7a5a`), CSS var (`var(--dga-primary-100)`), or token name (`primary-100`) |
-
----
-
-## Generated markup
-
-JS adds:
-
-- `background: conic-gradient(...)` on the chart element
-- `.dga-pie-chart__labels` with `.dga-pie-chart__label` and `.dga-pie-chart__circle` swatches
-
----
-
-## Related
-
-- [Web Components](../getting-started/web-components.md)
-- [JavaScript API](../getting-started/javascript-api.md)
-- [Colors](../foundations/colors.md)

package/docs/components/code-snippet.md

@@ -1,110 +0,0 @@
-# Code Snippet
-
-Inline and multi-line code blocks with copy button.
-
-**Source:** `src/styles/components/code-snippet.scss`, `src/scripts/codeSnippet.js`, `src/scripts/dga-code-snippet.js`  
-**Demo:** `index.html`  
-**JavaScript:** Optional — web component or `DGACodeSnippet` class
-
----
-
-## Option 1: Web component (recommended)
-
-### Inline
-
-```html
-<dga-code-snippet code="npm install @waaelg/dga-design-on-sass"></dga-code-snippet>
-```
-
-Or with text content:
-
-```html
-<dga-code-snippet>npm install @waaelg/dga-design-on-sass</dga-code-snippet>
-```
-
-### Multiline
-
-```html
-<dga-code-snippet multiline code="const app = createApp(App)
-app.mount('#app')"></dga-code-snippet>
-```
-
-### Attributes
-
-| Attribute | Description |
-|-----------|-------------|
-| `code` | Code text to display and copy |
-| `multiline` | Present = multi-line block layout |
-
-Copy fires `dga-code-copy` on success. No `new DGACodeSnippet()` required.
-
-> Tabbed multi-line snippets (Java / Python tabs) are **legacy markup only** — implement tab switching in your app.
-
----
-
-## Option 2: Legacy markup + DGACodeSnippet
-
-### Inline snippet
-
-```html
-<div class="dga-code-snippet-inline">
-  <div class="dga-code-snippet-inline__content">npm install @waaelg/dga-design-on-sass</div>
-  <button type="button" class="dga-code-snippet-inline__copy"
-          aria-label="Copy code" data-copied="false">
-    <!-- copy icon SVG -->
-  </button>
-</div>
-```
-
-```js
-import { DGACodeSnippet } from '@waaelg/dga-design-on-sass'
-new DGACodeSnippet()
-```
-
-### Multi-line snippet (with tabs)
-
-```html
-<div class="dga-code-snippet-multiline">
-  <div class="dga-code-snippet-multiline__tabs" dir="ltr">
-    <button type="button" class="dga-code-snippet-multiline__tab" data-active="true">Java</button>
-    <button type="button" class="dga-code-snippet-multiline__tab">Python</button>
-  </div>
-
-  <div class="dga-code-snippet-multiline__body">
-    <ol class="dga-code-snippet-multiline__lines">
-      <li></li><li></li><li></li>
-    </ol>
-    <pre class="dga-code-snippet-multiline__code"><code>// Your code here</code></pre>
-    <button type="button" class="dga-code-snippet-multiline__copy"
-            aria-label="Copy code" data-copied="false"></button>
-  </div>
-
-  <div class="dga-code-snippet-multiline__footer" dir="ltr">Show More</div>
-</div>
-```
-
-Tab switching is not wired in JS by default — implement in your app or extend `DGACodeSnippet`.
-
----
-
-## Copy behavior
-
-- Web component: built-in copy on button click
-- Legacy: `DGACodeSnippet` listens for clicks on `.dga-code-snippet-inline__copy` and `.dga-code-snippet-multiline__copy`
-- Sets `data-copied="true"` briefly after successful copy
-
----
-
-## Styling notes
-
-- Inline content uses `direction: ltr` for code
-- Monospace font stack built in
-- Copy button shows success state (green) when `data-copied="true"`
-
----
-
-## Related
-
-- [Web Components](../getting-started/web-components.md)
-- [JavaScript API](../getting-started/javascript-api.md)
-- [Installation](../getting-started/installation.md)

package/docs/components/divider.md

@@ -1,54 +0,0 @@
-# Divider
-
-Horizontal or vertical separator lines.
-
-**Source:** `src/styles/components/divider.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Horizontal divider
-
-```html
-<div class="dga-divider" data-variant="primary" data-direction="h"></div>
-```
-
-Default is horizontal if `data-direction` is omitted (height 1px, width 192px max 90%).
-
----
-
-## Vertical divider
-
-```html
-<div class="dga-divider" data-variant="primary" data-direction="v"></div>
-```
-
-Width 1px, height 192px max 90%. Use between inline items (e.g. tags).
-
----
-
-## Variants
-
-| `data-variant` | Color |
-|----------------|-------|
-| `secondary` | Gray (`$dga-gray-300`) |
-| `primary` | Saudi green (`$dga-sa-600`) |
-
----
-
-## Example with tags
-
-```html
-<div class="dga-d-flex dga-gap-2 dga-align-items-center">
-  <span class="dga-tag">Tag 1</span>
-  <div class="dga-divider" data-variant="primary" data-direction="v"></div>
-  <span class="dga-tag">Tag 2</span>
-</div>
-```
-
----
-
-## Related
-
-- [Tag](./tag.md)

package/docs/components/forms.md

@@ -1,123 +0,0 @@
-# Forms
-
-Input, select, textarea, and label components.
-
-**Source:** `src/styles/components/input.scss`, `select.scss`, `textarea.scss`, `label.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Label
-
-```html
-<label for="field-id" class="dga-label">حقل نص عادي</label>
-```
-
-Always pair `for` with the control `id`.
-
----
-
-## Text input
-
-```html
-<label for="dga-input" class="dga-label">حقل نص عادي</label>
-<input type="text" id="dga-input" class="dga-input" />
-```
-
-### Error state
-
-```html
-<input type="text" class="dga-input dga-input-error" aria-invalid="true" />
-```
-
-| Class | Purpose |
-|-------|---------|
-| `dga-input` | Base input (40px height, full width) |
-| `dga-input-error` | Red border and error underline |
-
----
-
-## Select
-
-```html
-<label for="dga-select" class="dga-label">قائمة منسدلة</label>
-<select id="dga-select" class="dga-select">
-  <option>خيار 1</option>
-  <option>خيار 2</option>
-</select>
-```
-
-### Error state
-
-```html
-<select class="dga-select error" aria-invalid="true">...</select>
-```
-
-> Note: select uses class `error`, not `dga-select-error`.
-
----
-
-## Textarea
-
-```html
-<label for="dga-textarea" class="dga-label">رسالة</label>
-<textarea id="dga-textarea" class="dga-textarea"></textarea>
-```
-
-### Error state
-
-```html
-<textarea class="dga-textarea dga-textarea-error" aria-invalid="true"></textarea>
-```
-
-Min height: 96px. Resizable by default.
-
----
-
-## Full form example
-
-```html
-<div class="dga-d-flex dga-flex-col dga-gap-3">
-  <div>
-    <label for="name" class="dga-label">الاسم</label>
-    <input type="text" id="name" class="dga-input" />
-  </div>
-  <div>
-    <label for="role" class="dga-label">الدور</label>
-    <select id="role" class="dga-select">
-      <option>مواطن</option>
-      <option>موظف</option>
-    </select>
-  </div>
-  <div>
-    <label for="message" class="dga-label">الرسالة</label>
-    <textarea id="message" class="dga-textarea"></textarea>
-  </div>
-</div>
-```
-
----
-
-## States
-
-All form controls support:
-
-- **Hover** — darker border
-- **Focus** — bottom accent line + shadow
-- **Active** — partial underline + gray background
-- **Error** — red border (see classes above)
-
----
-
-## Accessibility
-
-- Always use `<label class="dga-label">` with matching `for` / `id`
-- Set `aria-invalid="true"` on error fields
-- Add error message text linked with `aria-describedby`
-
----
-
-## Related
-
-- [Label](./forms.md#label) · [Button](./button.md)

package/docs/components/link.md

@@ -1,52 +0,0 @@
-# Link
-
-Styled anchor links for inline navigation.
-
-**Source:** `src/styles/components/link.scss`  
-**Demo:** `index.html`  
-**JavaScript required:** No
-
----
-
-## Basic link
-
-```html
-<a href="#" class="dga-link">Link</a>
-```
-
-Saudi green color (`$dga-sa-600`), underline on hover.
-
----
-
-## Variants
-
-| Attribute | Effect |
-|-----------|--------|
-| (default) | No underline until hover |
-| `data-variant="inline"` | Always underlined |
-
-```html
-<a href="#" class="dga-link" data-variant="inline">Inline link</a>
-```
-
----
-
-## States
-
-- **Hover** — lighter green + underline
-- **Active** — darker green + underline
-- **Focus** — bottom border accent
-
----
-
-## Accessibility
-
-- Use descriptive link text (not "click here")
-- External links: add `rel="noopener"` and indicate opens in new tab if needed
-
----
-
-## Related
-
-- [Breadcrumb](./breadcrumb.md)
-- [Button](./button.md) — for actions use `<button>`, not links