@vsn-ux/gaia-styles 0.6.0 → 0.6.2

package/dist/docs/Menu.md

@@ -0,0 +1,316 @@
+# Menu
+
+## Visual Structure
+
+```
+ga-menu
+  ├── ga-menu__title (optional)
+  ├── ga-menu__item [--selected|--disabled|--active]
+  │   ├── ga-menu__item-icon (optional)
+  │   └── ga-menu__item-content
+  │       ├── ga-menu__item-title (optional)
+  │       │   ├── ga-menu__item-label
+  │       │   └── ga-menu__item-shortcut (optional)
+  │       └── ga-menu__item-description (optional)
+  └── ga-menu__separator (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-menu` - Main container for the entire menu component
+
+### Mandatory Elements
+
+- `ga-menu__title` - The heading/title of the menu section
+- `ga-menu__item` - Individual clickable/interactive menu option
+- `ga-menu__item-content` - Container for all text content within a menu item
+- `ga-menu__item-label` - The primary text label identifying the menu action
+
+### Optional Elements
+
+- `ga-menu__item-icon` - Icon displayed within a menu item for visual identification
+- `ga-menu__item-title` - Wrapper that groups the label and shortcut when both are present
+- `ga-menu__item-shortcut` - Visual representation of keyboard shortcut/hotkey
+- `ga-menu__item-description` - Additional explanatory text providing context for the menu item
+- `ga-menu__separator` - Horizontal divider that visually separates groups of related menu items
+
+### Modifiers
+
+- `ga-menu__item--selected` - Indicates the currently selected menu item
+- `ga-menu__item--disabled` - Styles the menu item as disabled/non-interactive
+- `ga-menu__item--disabled ga-menu__item--selected` - Combined state for a selected but disabled item
+- `ga-menu__item--active` - Indicates the menu item is currently active/focused through keyboard
+
+## Examples
+
+### Basic
+
+```html
+<div class="ga-menu">
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Settings</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Title
+
+```html
+<div class="ga-menu">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Settings</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Separator
+
+```html
+<div class="ga-menu">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Settings</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <div class="ga-menu__separator"></div>
+  <button class="ga-menu__item">
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Icons
+
+```html
+<div class="ga-menu">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Settings</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <div class="ga-menu__separator"></div>
+  <button class="ga-menu__item">
+    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Shortcut
+
+```html
+<div class="ga-menu max-w-50">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-title">
+        <div class="ga-menu__item-label">Settings</div>
+        <span class="ga-menu__item-shortcut">⌘ ⌥ S</span>
+      </div>
+      <div class="ga-menu__item-description">
+        Configure your account preferences and adjust application display
+        options
+      </div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <div class="ga-menu__separator"></div>
+  <button class="ga-menu__item">
+    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Description
+
+```html
+<div class="ga-menu max-w-50">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Settings</div>
+      <div class="ga-menu__item-description">
+        Configure your account preferences and adjust application display
+        options
+      </div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <div class="ga-menu__separator"></div>
+  <button class="ga-menu__item">
+    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### With Sub Menu
+
+```html
+<div class="ga-menu">
+  <div class="ga-menu__title">My menu</div>
+  <button class="ga-menu__item">
+    <!-- icon: copy, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Copy</div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: settings, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-title">
+        <div class="ga-menu__item-label">Settings</div>
+        <!-- icon: chevron-right, size=16, class="ga-menu__item-icon" -->
+      </div>
+    </div>
+  </button>
+  <button class="ga-menu__item">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Delete</div>
+    </div>
+  </button>
+  <div class="ga-menu__separator"></div>
+  <button class="ga-menu__item">
+    <!-- icon: log-out, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Sign out</div>
+    </div>
+  </button>
+</div>
+```
+
+### Statuses
+
+```html
+<div class="ga-menu">
+  <button class="ga-menu__item">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Default</div>
+    </div>
+  </button>
+  <button class="ga-menu__item ga-menu__item--selected">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Selected</div>
+    </div>
+  </button>
+  <button class="ga-menu__item ga-menu__item--active">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Active (focused)</div>
+    </div>
+  </button>
+  <button class="ga-menu__item ga-menu__item--disabled" disabled="">
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Disabled</div>
+    </div>
+  </button>
+  <button
+    class="ga-menu__item ga-menu__item--disabled ga-menu__item--selected"
+    disabled=""
+  >
+    <!-- icon: trash2, size=16, class="ga-menu__item-icon" -->
+    <div class="ga-menu__item-content">
+      <div class="ga-menu__item-label">Disabled Selected</div>
+    </div>
+  </button>
+</div>
+```

package/dist/docs/Modal.md

@@ -0,0 +1,337 @@
+# Modal
+
+## Visual Structure
+
+```
+ga-modal__backdrop
+ga-modal__container (optional)
+  └── ga-modal [--small|--medium|--large] [--danger|--warning|--success|--information]
+      ├── ga-modal__top-section [--scrollable]
+      │   ├── ga-modal__icon (optional)
+      │   ├── ga-modal__heading
+      │   │   ├── ga-modal__label (optional)
+      │   │   ├── ga-modal__title
+      │   │   └── ga-modal__description (optional)
+      │   └── ga-modal__close-icon (optional)
+      ├── ga-modal__content (optional)
+      └── ga-modal__actions
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-modal` - Main container for the modal component
+
+### Mandatory Elements
+
+- `ga-modal__backdrop` - Semi-transparent overlay that covers the screen behind the modal
+- `ga-modal__top-section` - Upper section of the modal containing title and close button
+- `ga-modal__heading` - Container for title and optional label text
+- `ga-modal__title` - Main title text of the modal
+- `ga-modal__actions` - Container for action buttons
+
+### Optional Elements
+
+- `ga-modal__container` - Container used for modal positioning, can be omitted if positioning is handled manually by the framework
+- `ga-modal__icon` - Icon that appears at the top of the modal (for status modals)
+- `ga-modal__label` - Secondary text displayed above the title
+- `ga-modal__close-icon` - Button for closing the modal
+- `ga-modal__description` - Description of the modal
+- `ga-modal__content` - Container for the main content area of the modal
+
+### Modifiers
+
+- `ga-modal__top-section--scrollable` - Allows the modal's top section to shrink and enables vertical scrolling of description when content overflows. Note: This is necessary due to technical constraints, since the description and main content are rendered in separate containers, explicit scrolling must be enabled to prevent duplicate overflow behavior.
+
+#### Size Variants
+
+- `ga-modal--small` - Small-sized modal
+- `ga-modal--medium` - Medium-sized modal
+- `ga-modal--large` - Large-sized modal
+
+#### Type Variants
+
+- `ga-modal--danger` - Modal with danger/error styling
+- `ga-modal--warning` - Modal with warning styling
+- `ga-modal--success` - Modal with success styling
+- `ga-modal--information` - Modal with information styling
+
+## Examples
+
+### Types
+
+#### Default
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Danger
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--danger">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Warning
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--warning">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: triangle-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Success
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--success">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: circle-check, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Information
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small ga-modal--information">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: info, size=48 --></div>
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### Sizes
+
+#### Small
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Medium
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--medium">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+#### Large
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--large">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### With Label
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--small">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__heading">
+        <div class="ga-modal__label">Label</div>
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">Description</div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Confirm</button>
+      <button class="ga-button ga-button--secondary">Cancel</button>
+    </div>
+  </div>
+</div>
+```
+
+### Full Example
+
+```html
+<div class="ga-modal__backdrop"></div>
+<div class="ga-modal__container">
+  <div class="ga-modal ga-modal--medium ga-modal--danger">
+    <div class="ga-modal__top-section">
+      <div class="ga-modal__icon"><!-- icon: octagon-alert, size=48 --></div>
+      <div class="ga-modal__heading">
+        <div class="ga-modal__label">Label</div>
+        <h2 class="ga-modal__title">Title</h2>
+        <div class="ga-modal__description">
+          The data could not be updated due to a server error. Please check your
+          internet connection and try again.
+        </div>
+      </div>
+      <button
+        class="ga-button ga-button--icon-only ga-button--ghost ga-modal__close-icon"
+      >
+        <!-- icon: x, size=24 -->
+      </button>
+    </div>
+    <div class="ga-modal__content">
+      <div class="ga-form-field">
+        <label class="ga-form-field__label" for="input2">
+          <span class="ga-form-field__label-text">Send invitation(s) to:</span>
+        </label>
+        <div class="ga-input">
+          <input id="input2" type="text" placeholder="user@domain.example" />
+        </div>
+        <div class="ga-form-field__info">
+          Please make sure no sensitive data is shared.
+        </div>
+      </div>
+    </div>
+    <div class="ga-modal__actions">
+      <button class="ga-button ga-button--primary">Accept</button>
+      <button class="ga-button ga-button--secondary">Decline</button>
+    </div>
+  </div>
+</div>
+```