@vsn-ux/gaia-styles 0.6.0 → 0.6.1

package/dist/docs/ProgressBar.md

@@ -0,0 +1,87 @@
+# Progress Bar
+
+## Visual Structure
+
+```
+ga-progress [--success|--error|--indeterminate]
+  ├── ga-progress__label (optional)
+  ├── ga-progress__buffer
+  │   └── ga-progress__bar
+  └── ga-progress__helper (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-progress` - Main container for the progress bar component
+
+### Mandatory Elements
+
+- `ga-progress__buffer` - Background buffer for the progress bar
+- `ga-progress__bar` - Actual progress indicator
+
+### Optional Elements
+
+- `ga-progress__label` - Label for the progress bar
+- `ga-progress__helper` - Helper text providing additional context
+
+### Modifiers
+
+- `ga-progress--success` - Indicates a successful operation
+- `ga-progress--error` - Indicates an error or failure
+- `ga-progress--indeterminate` - Represents an ongoing process without a defined end
+
+## Examples
+
+### Default
+
+```html
+<div class="ga-progress w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">Helper text</div>
+</div>
+```
+
+### Success
+
+```html
+<div class="ga-progress ga-progress--success w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">
+    <!-- icon: circle-check, size=16, class="ga-icon" -->
+    Helper text
+  </div>
+</div>
+```
+
+### Error
+
+```html
+<div class="ga-progress ga-progress--error w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer">
+    <div class="ga-progress__bar" style="width: 40%"></div>
+  </div>
+  <div class="ga-progress__helper">
+    <!-- icon: octagon-alert, size=16, class="ga-icon" -->
+    Helper text
+  </div>
+</div>
+```
+
+### Indeterminate
+
+```html
+<div class="ga-progress ga-progress--indeterminate w-40">
+  <div class="ga-progress__label">Label</div>
+  <div class="ga-progress__buffer"><div class="ga-progress__bar"></div></div>
+  <div class="ga-progress__helper">Helper text</div>
+</div>
+```

package/dist/docs/ProgressIndicator.md

@@ -0,0 +1,217 @@
+# Progress Indicator
+
+A component for displaying multi-step progress, such as wizards, checkout flows, or onboarding processes.
+
+## Visual Structure
+
+```
+ga-progress-indicator [--vertical|--horizontal]
+  ├── ga-progress-indicator__item [--completed|--current|--incomplete|--error|--disabled]
+  │   ├── ga-progress-indicator__indicator
+  │   │   ├── ga-icon
+  │   │   └── ga-progress-indicator__current-dot (optional, for current state)
+  │   └── ga-progress-indicator__content
+  │       ├── ga-progress-indicator__label
+  │       │   ├── ga-progress-indicator__label-text
+  │       │   └── ga-progress-indicator__label-state (optional)
+  │       └── ga-progress-indicator__description (optional)
+  ├── ga-progress-indicator__item
+  └── ...
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-progress-indicator` - Main container for the progress indicator component
+
+### Mandatory Elements
+
+- `ga-progress-indicator__item` - Individual step item (use `<button>` for clickable steps). The border-top/border-left acts as the connector line.
+- `ga-progress-indicator__indicator` - Icon container (positioned to the left of content)
+- `ga-progress-indicator__content` - Container for label and description (aligned vertically)
+- `ga-progress-indicator__label` - Label wrapper
+- `ga-progress-indicator__label-text` - The text content of the step label
+
+### Optional Elements
+
+- `ga-progress-indicator__current-dot` - Small dot inside the indicator for current state
+- `ga-progress-indicator__label-state` - Additional text for the label (e.g., "(optional)")
+- `ga-progress-indicator__description` - Helper text below the label (aligned with label, not icon)
+
+### Block Modifiers
+
+- `ga-progress-indicator--vertical` - Arranges items in a vertical column (border-left as connector)
+- `ga-progress-indicator--horizontal` - Arranges items in a horizontal row (border-top as connector)
+
+### Item State Modifiers
+
+- `ga-progress-indicator__item--completed` - Step has been completed. Use `CircleCheckBigIcon` (size 22).
+- `ga-progress-indicator__item--current` - Currently active step. Use `CircleDashedIcon` (size 22) with `ga-progress-indicator__current-dot` inside.
+- `ga-progress-indicator__item--incomplete` - Step not yet reached. Use `CircleDashedIcon` (size 22).
+- `ga-progress-indicator__item--error` - Step has an error. Use `OctagonAlertIcon` (size 22).
+- `ga-progress-indicator__item--disabled` - Step is disabled/non-interactive. Use `CircleDashedIcon` (size 22).
+
+## Horizontal
+
+```html
+<div class="ga-progress-indicator ga-progress-indicator--horizontal w-250">
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Account setup</span>
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--current"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+      <span class="ga-progress-indicator__current-dot"></span>
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Personal info</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Provide your personal details.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Preferences</span>
+        <span class="ga-progress-indicator__label-state">(optional)</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Set your notification preferences.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--error"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Verification</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Identity verification failed.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
+    disabled=""
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Confirmation</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Finalize your registration.
+      </span>
+    </div>
+  </button>
+</div>
+```
+
+## Vertical
+
+```html
+<div class="ga-progress-indicator ga-progress-indicator--vertical w-60">
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--completed"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-check-big, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Account setup</span>
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--current"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+      <span class="ga-progress-indicator__current-dot"></span>
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Personal info</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Provide your personal details.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--incomplete"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Preferences</span>
+        <span class="ga-progress-indicator__label-state">(optional)</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Set your notification preferences.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--error"
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: octagon-alert, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Verification</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Identity verification failed.
+      </span>
+    </div>
+  </button>
+  <button
+    class="ga-progress-indicator__item ga-progress-indicator__item--disabled"
+    disabled=""
+  >
+    <div class="ga-progress-indicator__indicator">
+      <!-- icon: circle-dashed, size=22, class="ga-icon" -->
+    </div>
+    <div class="ga-progress-indicator__content">
+      <span class="ga-progress-indicator__label">
+        <span class="ga-progress-indicator__label-text">Confirmation</span>
+      </span>
+      <span class="ga-progress-indicator__description">
+        Finalize your registration.
+      </span>
+    </div>
+  </button>
+</div>
+```

package/dist/docs/QuickFilterButton.md

@@ -0,0 +1,74 @@
+# Quick Filter Button
+
+## Visual Structure
+
+```
+ga-quick-filter-button [--selected|--transparent|--disabled]
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-quick-filter-button` - Main container for the quick filter button component used for filtering content
+
+### Modifiers
+
+- `ga-quick-filter-button--selected` - Selected state indicating the filter is active
+- `ga-quick-filter-button--transparent` - Transparent variant for use on colored backgrounds
+- `ga-quick-filter-button--disabled` - An explicit disabled state (can be omitted if used on a native `<button>` element)
+
+## Examples
+
+### Default
+
+```html
+<button class="ga-quick-filter-button">Button</button>
+```
+
+### With Icon
+
+```html
+<button class="ga-quick-filter-button">
+  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
+  Button
+</button>
+```
+
+### Selected
+
+```html
+<button class="ga-quick-filter-button ga-quick-filter-button--selected">
+  Button
+</button>
+```
+
+### Selected with Icon
+
+```html
+<button class="ga-quick-filter-button ga-quick-filter-button--selected">
+  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
+  Button
+</button>
+```
+
+### Transparent
+
+```html
+<button class="ga-quick-filter-button ga-quick-filter-button--transparent">
+  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
+  Button
+</button>
+```
+
+### Disabled
+
+```html
+<button
+  class="ga-quick-filter-button ga-quick-filter-button--disabled"
+  disabled=""
+>
+  <!-- icon: user-round-plus, size=24, class="ga-icon" -->
+  Button
+</button>
+```

package/dist/docs/Radio.md

@@ -0,0 +1,106 @@
+# Radio Button
+
+## Visual Structure
+
+```
+ga-radio-button [--invalid]
+  ├── ga-radio-button__native
+  ├── ga-radio-button__marker
+  └── ga-radio-button__label (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-radio-button` - Main container for the radio button component
+
+### Mandatory Elements
+
+- `ga-radio-button__native` - Native HTML radio input element (visually hidden)
+- `ga-radio-button__marker` - Visual circular marker for the radio button state
+
+### Optional Elements
+
+- `ga-radio-button__label` - Text label for the radio button
+
+### Modifiers
+
+- `ga-radio-button--invalid` - Styles the radio button to indicate an invalid/error state
+
+## Additional Elements
+
+- `ga-radio-group` - Container for grouping multiple radio buttons with proper spacing
+
+## Examples
+
+### Default
+
+```html
+<label class="ga-radio-button">
+  <input
+    type="radio"
+    class="ga-radio-button__native"
+    name="radio1"
+    checked=""
+  />
+  <div class="ga-radio-button__marker"></div>
+  <div class="ga-radio-button__label">Option A</div>
+</label>
+```
+
+### Disabled
+
+```html
+<label class="ga-radio-button">
+  <input type="radio" class="ga-radio-button__native" disabled="" checked="" />
+  <div class="ga-radio-button__marker"></div>
+  <div class="ga-radio-button__label">Option A</div>
+</label>
+```
+
+### Invalid
+
+```html
+<label class="ga-radio-button ga-radio-button--invalid">
+  <input type="radio" class="ga-radio-button__native" required="" />
+  <div class="ga-radio-button__marker"></div>
+  <div class="ga-radio-button__label">Option A</div>
+</label>
+```
+
+### No Label
+
+```html
+<div class="ga-radio-button">
+  <input type="radio" class="ga-radio-button__native" name="radio2" />
+  <div class="ga-radio-button__marker"></div>
+</div>
+```
+
+### Radio Group
+
+```html
+<div class="ga-radio-group">
+  <label class="ga-radio-button">
+    <input
+      type="radio"
+      class="ga-radio-button__native"
+      name="radio3"
+      checked=""
+    />
+    <div class="ga-radio-button__marker"></div>
+    <div class="ga-radio-button__label">Option A</div>
+  </label>
+  <label class="ga-radio-button">
+    <input type="radio" class="ga-radio-button__native" name="radio3" />
+    <div class="ga-radio-button__marker"></div>
+    <div class="ga-radio-button__label">Option B</div>
+  </label>
+  <label class="ga-radio-button">
+    <input type="radio" class="ga-radio-button__native" name="radio3" />
+    <div class="ga-radio-button__marker"></div>
+    <div class="ga-radio-button__label">Option C</div>
+  </label>
+</div>
+```

package/dist/docs/SegmentedControl.md

@@ -0,0 +1,69 @@
+# Segmented Control
+
+## Visual Structure
+
+```
+ga-segmented-control
+  └── ga-segmented-control__button [--selected] [--icon-only]
+      └── ga-segmented-control__button-sr-label (optional)
+```
+
+## Elements Hierarchy
+
+### Core Block
+
+- `ga-segmented-control` - Main container for the entire segmented control component
+
+### Mandatory Elements
+
+- `ga-segmented-control__button` - Individual button segments within the control
+
+### Optional Elements
+
+- `ga-segmented-control__button-sr-label` - Hidden label for screen readers when using an icon-only button, alternative to aria-label
+
+### Modifiers
+
+- `ga-segmented-control__button--icon-only` - Styles the button to only display an icon. Make sure the icon is 16px in size.
+- `ga-segmented-control__button--selected` - Styles the button as currently selected
+
+## Examples
+
+### Text
+
+```html
+<div class="ga-segmented-control">
+  <button
+    class="ga-segmented-control__button ga-segmented-control__button--selected"
+  >
+    All documents
+  </button>
+  <button class="ga-segmented-control__button">Invoices</button>
+  <button class="ga-segmented-control__button">Expense claims</button>
+</div>
+```
+
+### Icon
+
+```html
+<div class="ga-segmented-control">
+  <button
+    class="ga-segmented-control__button ga-segmented-control__button--icon-only ga-segmented-control__button--selected"
+  >
+    <!-- icon: tree-palm, size=16 -->
+    <span class="ga-segmented-control__button-sr-label">Item 1</span>
+  </button>
+  <button
+    class="ga-segmented-control__button ga-segmented-control__button--icon-only"
+  >
+    <!-- icon: hand, size=16 -->
+    <span class="ga-segmented-control__button-sr-label">Item 2</span>
+  </button>
+  <button
+    class="ga-segmented-control__button ga-segmented-control__button--icon-only"
+    aria-label="Item 3"
+  >
+    <!-- icon: shopping-cart, size=16 -->
+  </button>
+</div>
+```