- ```
-
- **JavaScript Considerations:**
-
- - Implement Enter and Space key handlers for expansion/collapse
- - Optionally implement Arrow key navigation between headers
- - Update aria-expanded state when panels toggle
- - Consider implementing single-expand vs multi-expand behavior
- - Use hidden attribute or CSS to show/hide panels (note: CSS visibility property can be animated)
- - Ensure smooth keyboard navigation flow
- - Implement Escape key handler to close open panel and return focus to header
- - Add/remove event listeners when panels open/close to manage Escape key support
-
- **Accessibility Notes:**
-
- - Role 'region' helps screen readers understand panel structure
- - Avoid role='region' proliferation with many simultaneous panels
- - Button should be direct child of heading element
- - Consider aria-disabled='true' for panels that cannot be collapsed
- - Test with screen readers to ensure proper announcement
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/assets.mdc b/.cursor/rules/assets.mdc
deleted file mode 100644
index 10c15dd36..000000000
--- a/.cursor/rules/assets.mdc
+++ /dev/null
@@ -1,12 +0,0 @@
----
-description: Static files (css, js, and images) for theme templates
-globs: assets/*
-alwaysApply: false
----
-# Assets
-
-The assets directory contains any assets that need to be referenced within a `.liquid` file, usually using the [asset_url](mdc:https:/shopify.dev/docs/api/liquid/filters/asset_url) Liquid filter.
-
-Assets is a flat directory, it may not contain subdirectories.
-
-Any images that are required in the code, including icons, may be stored within assets. Icons can be used in `.liquid` files via the [inline_asset_content](mdc:https:/shopify.dev/docs/api/liquid/filters/inline_asset_content) Liquid filter.
diff --git a/.cursor/rules/blocks.mdc b/.cursor/rules/blocks.mdc
deleted file mode 100644
index c1562d3cd..000000000
--- a/.cursor/rules/blocks.mdc
+++ /dev/null
@@ -1,341 +0,0 @@
----
-description: Development standards and best practices for creating/configuring/styling theme blocks, including static and nested blocks, schema configuration, CSS, and usage examples
-globs: blocks/*.liquid
-alwaysApply: false
----
-# Theme Blocks Development Standards
-
-Follow [Shopify's theme blocks documentation](mdc:https:/shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/quick-start?framework=liquid.txt).
-
-## Theme Block Fundamentals
-
-Theme blocks are reusable components defined at the theme level that can be:
-- Nested under sections and blocks
-- Configured using settings in the theme editor
-- Given presets and added by merchants
-- Used as [static blocks](mdc:https:/shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/static-blocks#statically-vs-dynamically-rendered-theme-blocks) by theme developers
-
-Blocks render in the editor and storefront when they are referenced in [template files](mdc:.cursor/rules/templates.mdc).
-
-### Basic Block Structure
-```liquid
-{% doc %}
- Block description and usage examples
-
- @example
- {% content_for 'block', type: 'block-name', id: 'unique-id' %}
-{% enddoc %}
-
-
-
-
-
-{% stylesheet %}
- /*
- Scoped CSS for this block
-
- Use BEM structure
- CSS written in here should be for components that are exclusively in this block. If the CSS will be used elsewhere, it should instead be written in [assets/base.css](mdc:@assets/base.css)
- */
-{% endstylesheet %}
-
-{% schema %}
-{
- "name": "Block Name",
- "settings": [],
- "presets": []
-}
-{% endschema %}
-```
-
-### Static Block Usage
-
-Static blocks are theme blocks that are rendered directly in Liquid templates by developers, rather than being dynamically added through the theme editor. This allows for predetermined block placement with optional default settings.
-
-**Basic Static Block Syntax:**
-```liquid
-{% content_for 'block', type: 'text', id: 'header-announcement' %}
-```
-
-**Example: Product Template with Mixed Static and Dynamic Blocks**
-```liquid
-
-
-```
-
-**Key Points about Static Blocks:**
-- They have a fixed `id` that makes them identifiable in the theme editor
-- Settings can be overridden in the theme editor despite having defaults
-- They appear in the theme editor as locked blocks that can't be removed or reordered
-- Useful for consistent layout elements that should always be present
-- Can be mixed with dynamic block areas using `{% content_for 'blocks' %}`
-
-## Schema Configuration
-
-See [schemas.mdc](mdc:.cursor/rules/schemas.mdc) for rules on schemas
-
-### Advanced Schema Features
-
-#### Exclude wrapper
-
-```json
-{
- "tag": null // No wrapper - must include {{ block.shopify_attributes }} for proper editor function
-}
-```
-
-## Block Implementation Patterns
-
-### Accessing Block Data
-
-**Block Settings:**
-```liquid
-{{ block.settings.text }}
-{{ block.settings.heading | escape }}
-{{ block.settings.image | image_url: width: 800 }}
-```
-
-**Block Properties:**
-```liquid
-{{ block.id }} // Unique block identifier
-{{ block.type }} // Block type name
-{{ block.shopify_attributes }} // Required for theme editor
-```
-
-**Section Context:**
-```liquid
-{{ section.id }} // Parent section ID
-{{ section.settings.heading | escape }}
-{{ section.settings.image | image_url: width: 800 }}
-```
-
-## Nested Blocks Implementation
-
-### Rendering Nested Blocks
-```liquid
-
-
{{ block.settings.heading | escape }}
-
-
- {% content_for 'blocks' %}
-
-
-```
-
-### Nesting with Layout Control
-```liquid
-
-
-
-
-
- ```
-
- **JavaScript Considerations:**
-
- - Implement auto-rotation pause on focus or mouse hover
- - Handle keyboard navigation
- - Update ARIA labels for rotation state
- - Implement proper tab sequence
- - Handle slide picker controls
- - Consider touch/swipe interactions
- - Ensure minimum 5-second interval between slides
- - Stop rotation on user interaction
- - Do not restart rotation automatically after manual pause
- - Handle mouse enter/leave events for pause/resume
- - Maintain manual pause state across mouse events
- - Separate auto-rotation pause behavior from Play/Pause button state
- - Update button state only on explicit user interaction
- - Update aria-live attribute based on rotation state
- - Track and manage multiple pause states (manual vs. focus/hover)
-
- **Accessibility Notes:**
-
- - Auto-rotation should be paused by default
- - Provide clear visual focus indicators
- - Ensure sufficient color contrast
- - Test with screen readers
- - Consider motion sensitivity
- - Provide alternative navigation methods
- - Comply with WCAG 2.2.2 Pause, Stop, Hide requirement
- - Ensure mouse hover behavior is consistent and predictable
- - Maintain clear distinction between temporary and permanent pause states
- - Ensure screen reader announcements are appropriate for current state
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/cart-drawer-accessibility.mdc b/.cursor/rules/cart-drawer-accessibility.mdc
deleted file mode 100644
index 571d756b1..000000000
--- a/.cursor/rules/cart-drawer-accessibility.mdc
+++ /dev/null
@@ -1,206 +0,0 @@
----
-description: Cart drawer component accessibility compliance pattern
-globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
-alwaysApply: false
----
-
-# Cart Drawer Component Accessibility Standards
-
-Ensures cart drawer components follow WCAG compliance and ARIA Dialog Pattern specifications for ecommerce applications.
-
-
-name: cart_drawer_accessibility_standards
-description: Enforce cart drawer component accessibility standards and ARIA Dialog Pattern compliance
-filters:
- - type: file_extension
- pattern: "\\.(vue|jsx|tsx|html|php|js|ts|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Cart activator missing aria-haspopup
-
- - pattern: "(?i)]_(?:cart|basket|shopping)[^>]_>"
- pattern_negate: "aria-haspopup=\"dialog\""
- message: "Cart activator buttons must include aria-haspopup='dialog' to inform users a dialog will open."
-
- # Cart container missing dialog role
-
- - pattern: "(?i)<(div|section|aside)[^>]_(?:cart|basket|drawer)[^>]_>"
- pattern_negate: "role=\"dialog\""
- message: "Cart drawer containers must have role='dialog' attribute."
-
- # Cart container missing aria-modal
-
- - pattern: "(?i)<[^>]_role=\"dialog\"[^>]_(?:cart|basket|drawer)[^>]\*>"
- pattern_negate: "aria-modal=\"true\""
- message: "Cart drawer dialog elements must have aria-modal='true' attribute."
-
- # Cart container missing proper labeling
-
- - pattern: "(?i)<[^>]_role=\"dialog\"[^>]_(?:cart|basket|drawer)[^>]\*>"
- pattern_negate: "(aria-labelledby|aria-label)"
- message: "Cart drawer dialog elements must have either aria-labelledby or aria-label for accessibility."
-
- # Empty aria-label check
-
- - pattern: "(?i)<[^>]_role=\"dialog\"[^>]_(?:cart|basket|drawer)[^>]_aria-label=\"\"[^>]_>"
- message: "Cart drawer aria-label should not be empty; provide a meaningful description like 'Shopping Cart'."
-
- # Close button missing proper functionality
-
- - pattern: "(?i)]_(?:close|dismiss|cancel)[^>]_(?:cart|basket|drawer)[^>]\*>"
- pattern_negate: "(onClick|onclick|@click|v-on:click)"
- message: "Cart drawer close buttons should have proper click handlers to close the dialog."
-
- # Close button missing aria-label
-
- - pattern: "(?i)]_(?:close|dismiss|×|×)[^>]_(?:cart|basket|drawer)[^>]_>"
- pattern_negate: "aria-label=\"[^\"]_[Cc]lose[^\"]\*\""
- message: "Cart drawer close buttons should have aria-label='Close cart' or similar descriptive text."
-
- # Missing focus management indicators
-
- - pattern: "(?i)(?:openCart|showCart|toggleCart|openDrawer)\\s\*\\("
- message: "When opening cart drawers, ensure focus management is implemented (focus should move to first focusable element inside the dialog)."
-
- # Missing checkout button accessibility
-
- - pattern: "(?i)]_(?:checkout|proceed|purchase)[^>]_(?:cart|basket|drawer)[^>]\*>"
- pattern_negate: "(aria-label|aria-describedby)"
- message: "Cart drawer checkout buttons should have proper labeling for screen readers."
-
-- type: suggest
- message: |
- **Cart Drawer Component Accessibility Best Practices:**
-
- **Required ARIA Attributes:**
-
- - **aria-haspopup='dialog':** Set on cart activator buttons to inform users a dialog will open
- - **role='dialog':** Set on the cart drawer container element
- - **aria-modal='true':** Indicates the cart drawer is modal and traps focus
- - **aria-labelledby:** Reference to visible cart title, OR
- - **aria-label:** Descriptive label like "Shopping Cart" if no visible title exists
-
- **Keyboard Interaction Requirements:**
-
- - **Initial Focus:** When cart drawer opens, focus must move to the first focusable element (typically close button)
- - **Tab Cycling:** Tab key should cycle through focusable elements within the cart drawer only
- - **Shift+Tab:** Should cycle backwards through focusable elements within the cart drawer
- - **Escape Key:** Must close the cart drawer and return focus to the activator
- - **Focus Trap:** Focus should be contained within the cart drawer while open
-
- **Focus Management:**
-
- - Implement focus trapping to prevent tab navigation outside the cart drawer
- - Return focus to the cart activator when drawer closes
- - Move focus to the close button (first focusable element) when drawer opens
- - Ensure close button is positioned first in DOM order within the dialog container
-
- **Screen Reader Interaction:**
-
- - Activator should announce "dialog popup" when focused
- - On activation, announce "{Cart label}, dialog" when focus moves to cart drawer
- - Provide clear navigation through cart content
- - Announce return to activator when drawer closes
-
- **Structure Requirements:**
-
- - All interactive elements must be descendants of the cart drawer container
- - Position close button first in DOM order within the cart drawer container
- - Use semantic HTML within the cart drawer (headings, buttons, form labels)
- - Provide clear visual focus indicators
- - Close buttons should use aria-label="Close cart" with × entity for visual 'x' icon
-
- **Implementation Patterns:**
-
- **Cart Activator Button:**
-
- ```html
-
- ```
-
- **Cart Drawer Container:**
-
- ```html
-
-
-
Shopping Cart
-
-
-
-
-
Total: $99.99
-
-
-
- ```
-
- **JavaScript Considerations:**
-
- - Implement proper event listeners for Escape key
- - Manage body scroll when cart drawer is open
- - Handle focus restoration on cart drawer close
- - Implement focus trapping within cart drawer
- - Store reference to activator for focus return
- - Handle dynamic cart content updates
- - Ensure proper announcement of cart state changes
-
- **Ecommerce-Specific Considerations:**
-
- - Announce cart item count changes
- - Provide clear product information in cart items
- - Ensure checkout button is prominently accessible
- - Handle empty cart states appropriately
- - Provide clear pricing and total information
- - Support quantity adjustments with proper labeling
- - Handle cart item removal with confirmation
-
- **Accessibility Notes:**
-
- - Cart drawers should not contain critical page navigation
- - Ensure cart content is fully accessible to screen readers
- - Test with screen readers to ensure proper announcement
- - Consider using aria-live regions for dynamic cart updates
- - Provide clear error messages for cart operations
- - Ensure cart drawer works with keyboard-only navigation
- - Test focus management with multiple cart activators
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/color-contrast-accessibility.mdc b/.cursor/rules/color-contrast-accessibility.mdc
deleted file mode 100644
index 451973226..000000000
--- a/.cursor/rules/color-contrast-accessibility.mdc
+++ /dev/null
@@ -1,329 +0,0 @@
----
-description: Text and user interface color contrast compliance with WCAG 2.2 1.4.3 and 1.4.11
-globs: *.css, *.scss, *.sass, *.less, *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
-alwaysApply: true
----
-
-# Color Contrast Accessibility Standards
-
-Ensures color contrast meets WCAG 2.2 1.4.3: Contrast (Minimum) and 1.4.11: Non-text Contrast requirements.
-
-
-name: color_contrast_accessibility_standards
-description: Enforce color contrast accessibility standards per WCAG 2.2 1.4.3 and 1.4.11
-filters:
- - type: file_extension
- pattern: "\\.(css|scss|sass|less|vue|jsx|tsx|html|php|js|ts|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Common low-contrast text color combinations
-
- - pattern: "color:\\s\*#[89abcdefABCDEF]{6}"
- message: "Light text colors may not meet 4.5:1 contrast ratio requirement. Verify contrast against background."
-
- - pattern: "color:\\s\*#[0-6]{6}"
- message: "Very light text colors likely fail contrast requirements. Use darker colors for better accessibility."
-
- # Light gray text (common accessibility issue)
-
- - pattern: "color:\\s\*(#[cdefCDEF]{3,6}|lightgray|lightgrey|silver)"
- message: "Light gray text often fails WCAG contrast requirements (4.5:1 minimum). Use darker colors."
-
- # Common problematic color combinations
-
- - pattern: "background.*#fff.*color.\*#[89abcdefABCDEF]"
- message: "Light text on white background may not meet 4.5:1 contrast ratio requirement."
-
- - pattern: "background.*#f[0-9a-fA-F]{5}.*color.\*#[89abcdefABCDEF]"
- message: "Light text on light background may not meet contrast requirements."
-
- # UI component border/focus indicators
-
- - pattern: "border.\*#[cdefCDEF]{3,6}"
- message: "Light borders may not meet 3:1 non-text contrast requirement for UI components."
-
- - pattern: "outline.\*#[cdefCDEF]{3,6}"
- message: "Light focus outlines may not meet 3:1 contrast requirement for UI component identification."
-
- # Button states with insufficient contrast
-
- - pattern: "button._background._#[cdefCDEF]{3,6}"
- message: "Light button backgrounds may not provide sufficient 3:1 contrast for UI component identification."
-
- # Form input borders
-
- - pattern: "input._border._#[defDEF]{3,6}"
- message: "Very light input borders may not meet 3:1 contrast requirement for form field identification."
-
- # SVG icon fill colors that may lack contrast
-
- - pattern: "fill=\"#[cdefCDEF]{3,6}\""
- message: "Light SVG fill colors may not meet 3:1 contrast requirement for icon identification."
-
- # SVG stroke colors for icon outlines
-
- - pattern: "stroke=\"#[defDEF]{3,6}\""
- message: "Very light SVG stroke colors may not provide sufficient contrast for icon visibility."
-
- # Missing prefers-contrast considerations
-
- - pattern: "@media\\s*\\(prefers-contrast:\\s*more\\)"
- pattern_negate: "color|background|border"
- message: "prefers-contrast: more media query should include enhanced color/contrast properties."
-
-- type: suggest
- message: |
- **WCAG 2.2 Color Contrast Requirements:**
-
- **1.4.3: Text Contrast (Minimum) - Level AA:**
-
- - **Normal Text:** Minimum 4.5:1 contrast ratio
- - **Large Text:** Minimum 3:1 contrast ratio (18pt+ regular or 14pt+ bold)
- - **Enhanced (Level AAA):** 7:1 for normal text, 4.5:1 for large text
-
- **1.4.11: Non-text Contrast - Level AA:**
-
- - **UI Components:** Minimum 3:1 contrast ratio for component identification
- - **Focus Indicators:** Minimum 3:1 contrast ratio for focus visibility
- - **Graphical Objects:** Minimum 3:1 contrast ratio for content understanding
-
- **Exceptions (No Contrast Requirement):**
-
- - Inactive/disabled UI components
- - Pure decorative elements
- - Text in logos or brand names
- - Text that is not visible to users
- - Graphics where specific presentation is essential
-
- **High Contrast Color Combinations:**
-
- **Dark Text on Light Backgrounds:**
-
- - `#212529` on `#ffffff` - 16.6:1 ✅
- - `#495057` on `#ffffff` - 8.3:1 ✅
- - `#6c757d` on `#ffffff` - 5.4:1 ✅
- - `#343a40` on `#f8f9fa` - 11.7:1 ✅
-
- **Light Text on Dark Backgrounds:**
-
- - `#ffffff` on `#212529` - 16.6:1 ✅
- - `#f8f9fa` on `#495057` - 7.0:1 ✅
- - `#ffffff` on `#0056b3` - 7.7:1 ✅
- - `#ffffff` on `#dc3545` - 5.8:1 ✅
-
- **UI Component Colors (3:1 minimum):**
-
- - Focus outlines: `#0056b3`, `#dc3545`, `#198754`
- - Border colors: `#ced4da`, `#adb5bd`, `#6c757d`
- - Button states: `#0056b3`, `#157347`, `#b02a37`
-
- **Implementation Examples:**
-
- **CSS Text Contrast:**
-
- ```css
- /* Good: High contrast text */
- .primary-text {
- color: #212529;
- background: #ffffff;
- }
-
- .secondary-text {
- color: #495057;
- background: #ffffff;
- }
-
- /* Good: Large text with 3:1 minimum */
- .large-heading {
- font-size: 18px;
- font-weight: normal;
- color: #6c757d;
- background: #ffffff;
- }
- ```
-
- **CSS UI Component Contrast:**
-
- ```css
- /* Good: Form inputs with sufficient border contrast */
- .form-control {
- border: 2px solid #ced4da; /* 3:1+ contrast */
- background: #ffffff;
- }
-
- .form-control:focus {
- border-color: #0056b3; /* High contrast focus */
- outline: 3px solid #0056b3;
- outline-offset: 2px;
- }
-
- /* Good: Button states */
- .btn-primary {
- background: #0056b3;
- color: #ffffff;
- border: 1px solid #004085;
- }
- ```
-
- **Contrast Testing:**
-
- - Use browser dev tools color picker for contrast ratios
- - Test with tools like WebAIM Contrast Checker
- - Verify with automated accessibility testing tools
- - Test with actual users who have visual impairments
-
- **Common Problematic Combinations to Avoid:**
-
- - Light gray text (#999999) on white backgrounds
- - Yellow text (#ffff00) on white backgrounds
- - Light blue links (#87ceeb) on white backgrounds
- - Thin borders (#e0e0e0) for essential UI components
- - Low contrast placeholder text
- - Insufficient focus indicator contrast
-
- **Responsive Considerations:**
-
- - Maintain contrast ratios across all screen sizes
- - Consider dark mode color schemes
- - Test contrast in different lighting conditions
- - Ensure contrast is maintained with CSS filters/effects
-
- **CSS `prefers-contrast` Media Query:**
- The `prefers-contrast` media query allows adaptation to user contrast preferences:
-
- ```css
- /* Default styles */
- .button {
- background: #0056b3;
- color: #ffffff;
- border: 1px solid #004085;
- }
-
- /* High contrast preference */
- @media (prefers-contrast: more) {
- .button {
- background: #000000;
- color: #ffffff;
- border: 2px solid #ffffff;
- font-weight: bold;
- }
-
- .text-secondary {
- color: #000000; /* Increase from gray to black */
- }
-
- .form-control {
- border: 3px solid #000000; /* Thicker, darker borders */
- }
- }
-
- /* Low contrast preference (rare) */
- @media (prefers-contrast: less) {
- .high-contrast-element {
- /* Reduce contrast only where specifically needed */
- /* Still maintain minimum WCAG requirements */
- }
- }
-
- /* Custom contrast preference */
- @media (prefers-contrast: custom) {
- /* Allow user-defined contrast settings */
- /* Respect system/browser contrast customizations */
- }
- ```
-
- **Icon Accessibility & Contrast Requirements:**
- Icons are UI components and must meet 3:1 contrast ratio for identification:
-
- **SVG Icon Examples:**
-
- ```html
-
-
-
-
-
-
- /* CSS for icon button with 3:1 contrast */ .icon-button { background: #0056b3; /* High contrast background */ border:
- 2px solid #004085; /* Visible border for component identification */ padding: 8px; border-radius: 4px; }
- .icon-button:focus { outline: 3px solid #ffd700; /* High contrast focus indicator */ outline-offset: 2px; }
- ```
-
- **Icon Contrast Considerations:**
-
- - **Informative Icons:** Must meet 3:1 contrast against background
- - **Decorative Icons:** No contrast requirement (use `aria-hidden="true"`)
- - **Icon Buttons:** Both icon and button background need sufficient contrast
- - **State Icons:** Different states (active/inactive) need distinguishable contrast
- - **Icon + Text:** Ensure both elements meet their respective requirements
-
- **Complex Icon Examples:**
-
- ```css
- /* Multi-state icon button */
- .toggle-icon {
- background: #f8f9fa;
- border: 2px solid #6c757d; /* 3:1+ contrast for UI component */
- color: #495057;
- }
-
- .toggle-icon[aria-pressed='true'] {
- background: #0056b3;
- color: #ffffff;
- border-color: #004085;
- }
-
- /* Icon with adaptive contrast */
- @media (prefers-contrast: more) {
- .icon-subtle {
- filter: contrast(150%); /* Increase icon contrast */
- }
-
- .icon-button {
- border-width: 3px; /* Thicker borders for better identification */
- }
- }
- ```
-
- **Design System Approach:**
-
- - Establish a palette of WCAG-compliant color combinations
- - Document contrast ratios for all color pairs
- - Create design tokens with built-in accessibility
- - Implement automated contrast checking in build process
- - Define icon contrast standards for different contexts
- - Test icons across different contrast preferences
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/color-swatch-accessibility.mdc b/.cursor/rules/color-swatch-accessibility.mdc
deleted file mode 100644
index c5105db8d..000000000
--- a/.cursor/rules/color-swatch-accessibility.mdc
+++ /dev/null
@@ -1,216 +0,0 @@
----
-description: Color swatch component accessibility compliance pattern
-globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
-alwaysApply: false
----
-
-# Color Swatch Variant Selector Component Accessibility Standards
-
-Ensures color swatch variant selectors follow WCAG compliance and provide proper accessibility for all users.
-
-
-name: color_swatch_accessibility_standards
-description: Enforce color swatch variant selector accessibility standards and WCAG compliance
-filters:
- - type: file_extension
- pattern: "\\.(vue|jsx|tsx|html|php|js|ts|css|scss|sass|less|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Radio buttons hidden with display: none (accessibility blocker)
-
- - pattern: "(?i)input\\[type=\"radio\"\\].*\\{[^}]*display:\\s\*none"
- message: "Radio buttons must not use display: none as it removes keyboard and screen reader access. Use appearance: none or visually-hidden class instead."
-
- # Color swatches missing accessible labels
-
- - pattern: "(?i)]_type=\"radio\"[^>]_>"
- pattern_negate: "(id.*for|label.*for)"
- message: "Color swatch radio buttons must have associated label elements via id/for attributes."
-
- # Color-only information without text alternatives
-
- - pattern: "(?i)<[^>]_(?:color|swatch|variant)[^>]_>"
- pattern_negate: "(data-label|aria-label|title|data-tooltip|class.\*tooltip)"
- message: "Color swatches must include text alternatives (data-label, tooltips, labels) as color alone cannot convey information to all users."
-
- # Missing fieldset and legend for variant groups
-
- - pattern: "(?i)]*type=\"radio\"[^>]*name=\"[^\"]_\"[^>]_>"
- pattern_negate: "(fieldset|role=\"group\"|aria-labelledby)"
- message: "Radio button groups should be wrapped in fieldset with legend or have role='group' with aria-labelledby."
-
- # Missing keyboard navigation support
-
- - pattern: "(?i)<[^>]_(?:color|swatch|variant)[^>]_>"
- pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown|tabindex)"
- message: "Color swatch components should handle keyboard navigation (arrow keys) for variant selection."
-
- # Missing focus indicators
-
- - pattern: "(?i)<[^>]_(?:color|swatch|variant)[^>]_>"
- pattern_negate: "(focus|:focus|outline|box-shadow)"
- message: "Color swatch components must have visible focus indicators for keyboard navigation."
-
- # Tooltip missing proper accessibility
-
- - pattern: "(?i)<[^>]_(?:tooltip|title)[^>]_>"
- pattern_negate: "(role=\"tooltip\"|aria-describedby|aria-label)"
- message: "Color swatch tooltips must have proper ARIA attributes for screen reader accessibility."
-
-- type: suggest
- message: |
- **Color Swatch Variant Selector Accessibility Best Practices:**
-
- **Required Accessibility Features:**
-
- - **Keyboard Navigation:** Arrow keys (←/→) to navigate between variants
- - **Screen Reader Support:** Proper labeling and announcements
- - **Focus Indicators:** Highly visible focus states
- - **Text Alternatives:** Tooltips or labels for color information
- - **Proper Styling:** Use appearance: none instead of display: none
-
- **Implementation Patterns:**
-
- **Basic Color Swatch Structure:**
-
- ```html
-
- ```
-
- **CSS for Accessible Styling:**
-
- ```css
- /* Visually hide radio buttons while keeping them accessible */
- .visually-hidden {
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- border: 0;
- }
-
- /* Alternative: Use appearance: none for custom styling */
- input[type='radio'] {
- appearance: none;
- -webkit-appearance: none;
- -moz-appearance: none;
- /* Custom styling here */
- }
-
- /* Color swatch styling */
- .color-swatch {
- display: inline-block;
- width: 40px;
- height: 40px;
- border: 2px solid transparent;
- border-radius: 50%;
- cursor: pointer;
- position: relative;
- transition: border-color 0.2s ease;
- }
-
- .color-swatch:focus {
- outline: 3px solid #0056b3;
- outline-offset: 2px;
- border-color: #0056b3;
- }
-
- /* Show focus styles on label when input is focused */
- .color-swatch:has(+ input:focus) {
- outline: 3px solid #0056b3;
- outline-offset: 2px;
- border-color: #0056b3;
- }
-
- .color-swatch:has(+ input:checked) {
- border-color: #212529;
- box-shadow: 0 0 0 2px #fff, 0 0 0 4px #212529;
- }
-
- .swatch-color {
- width: 100%;
- height: 100%;
- border-radius: 50%;
- display: block;
- }
-
- /* Tooltip styling */
- .color-swatch::after {
- content: attr(data-label);
- position: absolute;
- bottom: 100%;
- left: 50%;
- transform: translateX(-50%);
- background: #212529;
- color: white;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 0.75rem;
- white-space: nowrap;
- opacity: 0;
- pointer-events: none;
- transition: opacity 0.2s ease;
- z-index: 1000;
- }
-
- .color-swatch:hover::after,
- .color-swatch:focus::after,
- .color-swatch:has(+ input:focus)::after {
- opacity: 1;
- }
- ```
diff --git a/.cursor/rules/combobox-accessibility.mdc b/.cursor/rules/combobox-accessibility.mdc
deleted file mode 100644
index 2f9a56344..000000000
--- a/.cursor/rules/combobox-accessibility.mdc
+++ /dev/null
@@ -1,242 +0,0 @@
----
-description: Combobox component accessibility compliance pattern
-globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
-alwaysApply: false
----
-
-# Combobox Component Accessibility Standards
-
-Ensures combobox components follow WCAG compliance and WAI-ARIA Combobox Pattern specifications.
-
-
-name: combobox_accessibility_standards
-description: Enforce combobox component accessibility standards and WAI-ARIA Combobox Pattern compliance
-filters:
- - type: file_extension
- pattern: "\\.(vue|jsx|tsx|html|php|js|ts|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Combobox role requirement
-
- - pattern: "(?i)<(div|section)[^>]_(?:combobox|autocomplete)[^>]_>"
- pattern_negate: "role=\"combobox\""
- message: "Combobox containers must have role='combobox' attribute."
-
- # aria-expanded requirement
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "aria-expanded=\"(true|false)\""
- message: "Combobox elements must have aria-expanded attribute set to 'true' or 'false'."
-
- # aria-haspopup requirement
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "aria-haspopup=\"listbox\""
- message: "Combobox elements must have aria-haspopup='listbox' attribute."
-
- # aria-controls requirement
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "aria-controls=\"[^\"]+\""
- message: "Combobox elements must have aria-controls attribute referencing the ID of the associated listbox."
-
- # aria-autocomplete requirement
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "aria-autocomplete=\"(list|both|inline|none)\""
- message: "Combobox elements must have aria-autocomplete attribute set to 'list', 'both', 'inline', or 'none'."
-
- # aria-activedescendant requirement when expanded
-
- - pattern: "(?i)<[^>]*role=\"combobox\"[^>]*aria-expanded=\"true\"[^>]\*>"
- pattern_negate: "aria-activedescendant=\"[^\"]+\""
- message: "Expanded combobox elements must have aria-activedescendant attribute referencing the ID of the active option."
-
- # Listbox role requirement
-
- - pattern: "(?i)<(div|ul)[^>]_(?:listbox|dropdown|popup)[^>]_>"
- pattern_negate: "role=\"listbox\""
- message: "Listbox containers must have role='listbox' attribute."
-
- # Option role requirement
-
- - pattern: "(?i)<(div|li)[^>]_(?:option|item)[^>]_>"
- pattern_negate: "role=\"option\""
- message: "Listbox options must have role='option' attribute."
-
- # aria-selected requirement for options
-
- - pattern: "(?i)<[^>]_role=\"option\"[^>]_>"
- pattern_negate: "aria-selected=\"(true|false)\""
- message: "Listbox options must have aria-selected attribute set to 'true' or 'false'."
-
- # Missing keyboard event handlers
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
- message: "Combobox elements should handle keyboard events (Arrow keys, Enter, Escape, etc.)."
-
- # Missing status region
-
- - pattern: "(?i)<[^>]_role=\"combobox\"[^>]_>"
- pattern_negate: "aria-controls=\"[^\"]+\".*?<[^>]*role=\"status\""
- message: "Combobox should have a status region to announce available options."
-
-- type: suggest
- message: |
- **Combobox Component Accessibility Best Practices:**
-
- **Required ARIA Attributes:**
-
- - **role='combobox':** Set on the input container element
- - **aria-expanded:** 'true' if listbox is visible, 'false' if hidden
- - **aria-haspopup='listbox':** Indicates the combobox has a listbox popup
- - **aria-controls:** Reference to the ID of the associated listbox
- - **aria-autocomplete:** 'list', 'both', 'inline', or 'none' based on behavior
- - **aria-activedescendant:** Reference to the ID of the currently active option
- - **role='listbox':** Set on the popup container element
- - **role='option':** Set on each selectable item in the listbox
- - **aria-selected:** 'true' or 'false' on each option
- - **role='status':** Set on a visually hidden element to announce available options
-
- **Keyboard Interaction Requirements:**
-
- - **Down Arrow:** Open listbox and move focus to first option
- - **Up Arrow:** Open listbox and move focus to last option
- - **Enter/Space:** Select focused option and close listbox
- - **Escape:** Close listbox without selection
- - **Tab:** Move focus to next focusable element
- - **Shift+Tab:** Move focus to previous focusable element
- - **Home/End:** Move focus to first/last option
- - **Character Keys:** Filter options based on input
-
- **Focus Management:**
-
- - Focus should remain on the input while navigating options
- - Use aria-activedescendant to indicate the currently focused option
- - Return focus to input after selection or closing
- - Ensure focus is trapped within the combobox while open
-
- **Status Region Requirements:**
-
- - Must announce number of available options when listbox opens
- - Must announce when no options are available
- - Must use proper pluralization ("1 item available" vs "2 items available")
- - Must be visually hidden but available to screen readers
- - Should update dynamically as options are filtered
-
- **Implementation Example:**
-
- ```html
-
-
-
-
-
-
-
-
- Option 1
-
-
- Option 2
-
-
-
-
-
-
-
-
-
-
- ```
-
- **JavaScript Considerations:**
-
- - Implement proper event listeners for all keyboard interactions
- - Update ARIA attributes dynamically based on state
- - Handle focus management and trapping
- - Implement proper filtering and selection logic
- - Update status messages for all state changes
- - Ensure proper pluralization in status messages
- - Handle edge cases (no matches, empty input, etc.)
-
- **Accessibility Notes:**
-
- - Status region helps screen readers understand available options
- - Proper pluralization improves user experience
- - Clear status messages help users understand the current state
- - Visual feedback should match announced status
- - Test with screen readers to ensure proper announcement
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/css-standards.mdc b/.cursor/rules/css-standards.mdc
deleted file mode 100644
index 2b0a6aa7c..000000000
--- a/.cursor/rules/css-standards.mdc
+++ /dev/null
@@ -1,918 +0,0 @@
----
-description: Writing CSS, whether inside .css files or in the `{% stylesheet %}…{% endstylesheet %}` or `{% style %}…{% endstyle %}` tags
-globs:
-alwaysApply: false
----
-
-# CSS Standards
-
-## Specificity Rules
-
-- **Never** use IDs as selectors
-- **Avoid** using elements as selectors
-- **Avoid** using `!important` at all costs - if you must use it, comment why in the code
-- Use a `0 1 0` specificity wherever possible, meaning a single `.class` selector.
-- In cases where you must use higher specificity due to a parent/child relationship, try to keep the specificity to a maximum of `0 4 0`
- - Note that this can sometimes be impossible due to the `0 1 0` specificity of pseudo-classes like `:hover`. There may be situations where `.parent:hover .child` is the only way to achieve the desired effect.
-- **Avoid** complex selectors. A selector should be easy to understand at a glance. Don't over do it with pseudo selectors (:has, :where, :nth-child, etc).
-
-See [MDN](mdc:https:/developer.mozilla.org/en-US/docs/Web/CSS/Specificity) for more a comprehensive list of specificity rules.
-
-## CSS Variables
-
-CSS variables, a.k.a. custom properties, are a powerful tool for reducing redundancy and making it easier to update values across a component.
-
-- If you need to hardcode a value, set it to a variable and use that variable in the declaration. Example: a touch target size. `--touch-target-size: 44px;`
-- **Never** hardcode colors, always use the color schemes
-
-### Global Variables
-
-Global variables should be scoped to the `:root` selector in `snippets/theme-styles-variables.liquid`.
-
-**Example of global variables**
-
-```css
-/* in snippets/theme-styles-variables.liquid */
-:root {
- --page-width: 1400px;
- --font-body--family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }}; /* Referencing a theme setting */
- --font-{{ preset_name_dash }}--family: {{ settings[preset_font] | prepend: 'var(--font-' | append: '--family)' }}; /* Using Liquid to set a variable */
-}
-```
-
-### Scoped Variables
-
-Be sure to scope your CSS variables to the component they are being used in, if they are not meant to be global. Scoped variables can reference global variables.
-
-**Example of scoped variables**
-
-```css
-/* in assets/facets.css */
-.facets {
- --drawer-padding: var(--padding-md); /* Referencing a global variable */
- --facets-upper-z-index: 3;
- --facets-open-z-index: 4;
-
- --facets-clear-shadow: 0px -4px 14px 0px rgb(var(--color-foreground-rgb) / var(--opacity-10)); /* Referencing a Color Scheme variable */
-}
-```
-
-### Namespace Your CSS Variables
-
-Namespace your variables to avoid collisions unless you explicitly want them to bleed through to other components.
-
-✅ Do this:
-
-```css
-.component {
- --component-padding: ...;
- --component-aspect-ratio: ...;
-}
-```
-
-❌ Don't do this:
-
-```css
-.component {
- --padding: ...;
- --aspect-ratio: ...;
-}
-```
-
-### Semantic Color Variables
-
-Use semantic naming for better maintainability:
-
-```css
-:root {
- /* Base colors */
- --color-primary: {{ settings.colors_accent_1 }};
- --color-secondary: {{ settings.colors_accent_2 }};
-
- /* Semantic colors */
- --color-text-primary: rgb(var(--color-foreground));
- --color-text-secondary: rgb(var(--color-foreground) / 0.75);
- --color-text-disabled: rgb(var(--color-foreground) / 0.38);
-
- /* Interactive states */
- --color-interactive-default: rgb(var(--color-accent));
- /* color-mix isn't supported in earlier version of iOS <16.2 so limit its usage to progressive enhancement */
- --color-interactive-hover: color-mix(in srgb, rgb(var(--color-accent)) 90%, black);
- --color-interactive-pressed: color-mix(in srgb, rgb(var(--color-accent)) 80%, black);
- --color-interactive-disabled: rgb(var(--color-accent) / 0.38);
-}
-```
-
-### Design Token System
-
-Establish consistent spacing and typography scales:
-
-```css
-:root {
- /* Spacing scale */
- --space-3xs: 0.25rem; /* 4px */
- --space-2xs: 0.5rem; /* 8px */
- --space-xs: 0.75rem; /* 12px */
- --space-sm: 1rem; /* 16px */
- --space-md: 1.5rem; /* 24px */
- --space-lg: 2rem; /* 32px */
- --space-xl: 3rem; /* 48px */
- --space-2xl: 4rem; /* 64px */
- --space-3xl: 6rem; /* 96px */
-
- /* Typography scale */
- --font-size-xs: 0.75rem; /* 12px */
- --font-size-sm: 0.875rem; /* 14px */
- --font-size-base: 1rem; /* 16px */
- --font-size-lg: 1.125rem; /* 18px */
- --font-size-xl: 1.25rem; /* 20px */
- --font-size-2xl: 1.5rem; /* 24px */
- --font-size-3xl: 1.875rem; /* 30px */
-}
-```
-
-## Scoping CSS to Instances of Sections and Blocks
-
-Reset CSS variable values inline on a `style` attribute with a section/block settings. This has a couple benefits:
-
-- Less CSS in Liquid which allows us to use the `{% stylesheet %}` tag for all CSS.
-- Reduces redundancy in CSS selectors and number of selectors in the HTML, i.e. `.selector--{{ block.id }}` pattern.
-
-✅ Do this:
-
-```html
-
- ...
-
-
-
-```
-
-❌ Don't do this:
-
-```html
-{% style %} .selector--{{ block.id }} { --button-color: {{ settings.button_color }}; } {% endstyle %}
-
-
-```
-
-### Redundancy
-
-Use variables to reduce property assignment redundancy.
-
-```css
-/* Do this */
-.button {
- background: rgb(var(--button-color) / 0.75);
-}
-
-.button--secondary {
- --button-color: var(--secondary-color);
-}
-
-/* Not this */
-.button {
- background: rgb(var(--primary-color) / 0.75);
-}
-
-.button--secondary {
- background: rgb(var(--secondary-color) / 0.75);
-}
-```
-
-## BEM Naming Convention
-
-Use the @BEM CSS convention for class names.
-
-BEM TL;DR:
-
-- **Block**: Component name (`.product-card`)
-- **Element**: Block + element (`.product-card__title`)
-- **Modifier**: Block/element + modifier (`.product-card--featured`)
-- **Use dashes** to separate words in names
-
-```css
-/* Good BEM structure */
-.product-card {
-}
-.product-card__image {
-}
-.product-card__title {
-}
-.product-card__price {
-}
-.product-card--featured {
-}
-.product-card__title--large {
-}
-```
-
-```css
-.block {
- ...;
-}
-.block--modifier {
- ...;
-}
-.block__element {
- ...;
-}
-.block__multi-word-element {
- ...;
-}
-.block__element--modifier {
- ...;
-}
-.block__element--multi-word-modifier {
- ...;
-}
-```
-
-Dashes are used to separate words in blocks, elements, and modifiers.
-
-Exception: We also use global @utility classes that can be applied to block and and elements without following BEM naming convention.
-
-### Naming a "Block" (component)
-
-The root "block" namespace must wrap any elements derived from it.
-
-✅ Do this:
-
-```html
-
-
-
-```
-
-❌ Not this:
-
-`.my-component__wrapper` is used as a parent to `.my-component`.
-
-```html
-
-
-
-```
-
-### Naming an "Element" (child)
-
-There should only be a _single_ "element" in a classname. Only the root "block" name needs to be included in child classnames. If additional naming specificity is necessary, use a "-" to seperate words or consider starting a new BEM scope altogether when an element could make sense as a standalone entity.
-
-✅ Do this:
-
-```html
-
-
-
-
-
-```
-
-✅ Or this:
-
-Started new scope with `.button-component`.
-
-```html
-
-
-
-
-
-```
-
-❌ Not this:
-
-Multiple element names are used (`__wrapper__button__label`).
-
-```html
-
-
-
-
-
-```
-
-### Naming a "Modifier" (variant)
-
-Any "modifier" classname should always use a "--" and should always correspond to an existing block and element namespace. Never use a modifier class on an element that doesn't also have a base classname.
-
-✅ Do this:
-
-The `.button` class is the base classname and modified by `--secondary`.
-
-```html
-
-```
-
-❌ Not this:
-
-The `.button` and `.button-secondary` classes are both named as _exclusive_ components and should not used together.
-
-```html
-
-```
-
-❌ Or this:
-
-Modifer class is used without corresponding base classname.
-
-```html
-
-```
-
-Also consider keeping modifiers at the highest element that makes sense. This makes the component more extensible and resilient as styling needs are changed or added in the future.
-
-✅ Do this:
-
-```html
-
-
-
-```
-
-### Utility Classes
-
-Utility classes are intended to act as global overrides for a single styling decision, e.g. alignment, show/hide, etc. BEM conventions are not followed, there is no hierarchy in utility classes and utility classes do not assume they are used with any particular block or element.
-
-Name multi-word utility classes with hyphens `-`. Append any viewport specifications at the **end**, e.g. `hidden-mobile`.
-
-✅ This is fine:
-
-```css
-.align-left {
- text-align: left;
-}
-```
-
-```html
-
-
-
-```
-
-## Modern CSS Features
-
-### Container Queries
-
-Use container queries for truly responsive components:
-
-```css
-.product-grid {
- container-type: inline-size;
-}
-
-@container (min-width: 400px) {
- .product-card {
- display: grid;
- grid-template-columns: 1fr 1fr;
- }
-}
-```
-
-### CSS Functions
-
-Leverage modern CSS functions for better responsiveness:
-
-```css
-.component {
- /* Fluid spacing */
- padding: clamp(1rem, 4vw, 3rem);
-
- /* Intrinsic sizing */
- width: min(100%, 800px);
-
- /* Dynamic colors */
- /* color-mix isn't supported in earlier version of iOS <16.2 so limit its usage */
- background: color-mix(in srgb, rgb(var(--color-primary)) 90%, white);
-}
-```
-
-### Cascade Layers
-
-For better CSS organization in complex themes:
-
-```css
-@layer reset, base, components, utilities, overrides;
-
-@layer components {
- .button {
- /* Component styles here won't conflict with utilities */
- }
-}
-```
-
-### View Transitions
-
-```css
-@view-transition {
- navigation: auto;
-}
-
-.page-content {
- view-transition-name: main-content;
-}
-```
-
-## Media Queries
-
-- Default to mobile first. e.g. `min-width` queries
-- Use `screen` for all media queries
-
-### Breakpoint System
-
-Define consistent breakpoints:
-
-```css
-/* Mobile first breakpoints */
---breakpoint-sm: 576px; /* Small devices */
---breakpoint-md: 768px; /* Medium devices */
---breakpoint-lg: 992px; /* Large devices */
---breakpoint-xl: 1200px; /* Extra large devices */
---breakpoint-2xl: 1400px; /* 2X Extra large devices */
-```
-
-### Context-Aware Queries
-
-Use feature queries alongside media queries:
-
-```css
-@supports (display: grid) {
- .product-grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- }
-}
-
-@supports not (display: grid) {
- .product-grid {
- display: flex;
- flex-wrap: wrap;
- }
-}
-```
-
-### Print Styles
-
-Always consider print stylesheets:
-
-```css
-@media print {
- .no-print {
- display: none !important;
- }
-
- a[href^='http']:after {
- content: ' (' attr(href) ')';
- }
-}
-```
-
-## CSS Nesting Rules
-
-Nesting can make styles harder to read. Be responsible with it.
-
-- **No `&` operator** in nested selectors
-- **Never nest beyond first level** (except media queries/states)
-- **Keep nesting simple** and readable
-- Only use `&` when there is a direct relationship between the two selectors
- - State based selectors e.g. `&:hover`, `&:focus`, `&:active`
- - Modifiers that affect each other e.g. `button--integrated { &.button--text }`
-- Never nest beyond the first level
-- See below for exceptions
-
-### Nesting Media Queries
-
-Use nesting for media queries
-
-```css
-.header {
- width: 100%;
-
- @media screen and (min-width: 750px) {
- width: 100px;
- }
-}
-```
-
-This includes when there is nothing to override, e.g.
-
-```css
-.header {
- @media screen and (min-width: 750px) {
- width: 100px;
- }
-}
-```
-
-That way, if something needs to be added later, it can just be added without needing to flip the media query to the inside.
-
-### If-like Parent-Child Relationships
-
-You may use nesting to help organize parent-child relationship when the parent can have **multiple states or modifiers** that affect children. In the example below, a number of child selectors need to change when the parent is the `--full-width` variant. This saves you from needing to append `parent--full-width` to each css selector.
-
-```css
-.parent {
- grid-columns: var(--gap) 1fr var(--gap);
-}
-
-.child {
- grid-column: 2;
-}
-
-.grand-child {
- ...;
-}
-
-.parent--full-screen {
- grid-columns: 1fr;
-
- .child {
- grid-column: 1;
- }
-
- .grand-child {
- ...;
- }
-}
-```
-
-In cases like this, the styles that are being applied are the direct result of the parent's modifier. We can see this as a kind of if-like relationship where the logic is easier to follow if the child styles are nested inside the parent.
-
-This is not a reason to nest multiple levels. Maintain the single level rule.
-
-## Logical Properties
-
-Where appropriate, use logical properties to have baseline support for Right-to-Left (RTL) languages.
-Focusing on these properties:
-
-- padding
-- margin
-- border
-- text-align
-- top, bottom, left, right
-
-✅ Do this:
-
-```css
-.element {
- padding-inline: 2rem;
- padding-block: 1rem;
- margin-inline: auto;
- margin-block: 0;
- border-inline-end: 1rem solid var(--color-background);
- text-align: start;
- inset: 0;
-}
-```
-
-❌ Not this:
-
-```css
-.element {
- padding: 1rem 2rem;
- margin: 0 auto;
- border-bottom: 1rem solid var(--color-background);
- text-align: left;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
-}
-```
-
-## Layout Patterns
-
-### CSS Grid for Layouts
-
-```css
-.section-content {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
- gap: var(--spacing-lg);
-}
-```
-
-### Flexbox for Components
-
-```css
-.product-card {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-sm);
-}
-```
-
-### Aspect Ratio for Media
-
-```css
-.product-card__image {
- aspect-ratio: 4 / 3;
- object-fit: cover;
-}
-```
-
-## Fancy Selectors
-
-### Using `:is()`
-
-When giving the same styles to multiple selectors, use a comma separated list.
-
-✅ Do this:
-
-```css
-.facets__label,
-.facets__clear-all,
-.clear-filter {
- ...;
-}
-```
-
-❌ Not this:
-
-```css
-:is(.facets__label, .facets__clear-all, .clear-filter) {
- ...;
-}
-```
-
-However, if you are giving the same styles to a parent-child relationship with different selectors, you may use `:is()`.
-
-✅ Do this:
-
-```css
-.parent:is(.child-1, .child-2) {
- ...;
-}
-```
-
-❌ Not this:
-
-```css
-.parent .child-1,
-.parent .child-2 {
- ...;
-}
-```
-
-✅ Do this:
-
-```css
-:is(.parent, .parent-2) .child {
- ...;
-}
-```
-
-❌ Not this:
-
-```css
-.parent .child,
-.parent-2 .child {
- ...;
-}
-```
-
-Try to keep the same specificity for all selectors within a single `:is()` to avoid increasing the overall specificity of the selector unintentionally.
-
-## Accessibility
-
-### Motion and Animation
-
-- Always respect user motion preferences
-- Provide fallbacks for users who prefer reduced motion
-
-```css
-@media (prefers-reduced-motion: reduce) {
- *,
- *::before,
- *::after {
- animation-duration: 0.01ms !important;
- animation-iteration-count: 1 !important;
- transition-duration: 0.01ms !important;
- scroll-behavior: auto !important;
- }
-}
-```
-
-### Focus Management
-
-- Ensure all interactive elements have visible focus indicators
-- Use `:focus-visible` for better UX
-
-```css
-.button:focus-visible {
- outline: 2px solid rgb(var(--color-focus));
- outline-offset: 2px;
-}
-```
-
-### Color and Contrast
-
-- Maintain WCAG AA contrast ratios (4.5:1 for normal text, 3:1 for large text)
-- Test with high contrast mode
-- Never rely solely on color to convey information
-
-```css
-@media (prefers-color-scheme: dark) {
- :root {
- /* Dark theme variables */
- }
-}
-```
-
-## Performance Considerations
-
-### Animation Performance
-
-- Use `transform` and `opacity` for animations
-- Avoid animating layout properties (`width`, `height`, `margin`, `padding`)
-- Use `will-change` sparingly and remove after animation
-
-```css
-.product-card {
- transition: transform 0.2s ease;
-}
-
-.product-card:hover {
- transform: translateY(-2px); /* Better than animating top/margin */
-}
-
-/* Only use will-change during animation */
-.product-card:hover {
- will-change: transform;
-}
-
-.product-card:not(:hover) {
- will-change: auto;
-}
-```
-
-### Layout Performance
-
-- Use `contain` property for better rendering performance
-- Prefer CSS Grid and Flexbox over complex positioning
-
-```css
-.product-grid {
- contain: layout style paint;
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-```
-
-## CSS Organization
-
-### CSS Property Order
-
-Maintain consistent property order within declarations:
-
-```css
-.component {
- /* 1. Layout & Positioning */
- position: relative;
- display: flex;
- flex-direction: column;
-
- /* 2. Box Model */
- width: 100%;
- margin: 0;
- padding: var(--space-md);
- border: 1px solid rgb(var(--color-border));
-
- /* 3. Typography */
- font-family: var(--font-body-family);
- font-size: var(--font-size-base);
-
- /* 4. Visual */
- background: rgb(var(--color-surface));
- color: rgb(var(--color-text));
-
- /* 5. Animation & Transforms */
- transition: transform 0.2s ease;
-}
-```
-
-## Error Prevention
-
-### Common Pitfalls
-
-- **Never** use `position: fixed` without considering mobile keyboards
-- **Always** test with zoom up to 200%
-- **Avoid** magic numbers - use variables or calc() instead
-- **Remember** that `vh` units can be problematic on mobile, use `dvh` to mitage this
-
-### Defensive CSS
-
-Write CSS that gracefully handles edge cases:
-
-```css
-.product-card {
- /* Prevent content overflow */
- word-wrap: break-word;
- overflow-wrap: break-word;
-
- /* Handle long content */
- min-width: 0; /* Allows flex items to shrink below content size */
-
- /* Prevent layout shift */
- aspect-ratio: 1 / 1;
-
- /* Fallback for missing images */
- background: rgb(var(--color-surface-secondary));
-}
-```
-
-### Browser Support
-
-- Test in browsers used by your audience
-- Provide fallbacks for newer CSS features
-- Use progressive enhancement approach
-
-## CSS Documentation
-
-### Commenting Standards
-
-Use consistent commenting for better maintainability:
-
-```css
-/* =============================================================================
- Component Name
- ============================================================================= */
-
-/**
- * Brief component description
- *
- * @example
- *
- *
Content
- *
- */
-.component {
- /* Implementation */
-}
-
-/* Component modifiers
- ========================================================================== */
-
-/**
- * Modifier description
- */
-.component--modifier {
- /* Modifier styles */
-}
-
-/* Component elements
- ========================================================================== */
-
-/**
- * Element description
- */
-.component__element {
- /* Element styles */
-}
-```
-
-## Example Component Structure
-
-```liquid
-{% stylesheet %}
- .featured-collection {
- --section-padding: {{ section.settings.padding | default: 60 }}px;
- --bg-color: {{ section.settings.background_color | default: '#ffffff' }};
- --text-color: {{ section.settings.text_color | default: '#000000' }};
-
- padding: var(--section-padding) 0;
- background-color: var(--bg-color);
- color: var(--text-color);
- container-type: inline-size;
- }
-
- .featured-collection__grid {
- display: grid;
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
- gap: var(--spacing-md);
- }
-
- @container (min-width: 768px) {
- .featured-collection__grid {
- grid-template-columns: repeat({{ section.settings.columns | default: 4 }}, 1fr);
- }
- }
-
- @media (prefers-reduced-motion: reduce) {
- .featured-collection * {
- transition: none !important;
- }
- }
-{% endstylesheet %}
-```
diff --git a/.cursor/rules/disclosure-accessibility.mdc b/.cursor/rules/disclosure-accessibility.mdc
deleted file mode 100644
index 0e361b39a..000000000
--- a/.cursor/rules/disclosure-accessibility.mdc
+++ /dev/null
@@ -1,150 +0,0 @@
----
-description: Disclosure component accessibility compliance pattern
-globs: *.vue, *.jsx, *.tsx, *.html, *.php, *.js, *.ts, *.liquid
-alwaysApply: false
----
-
-# Disclosure Component Accessibility Standards
-
-Ensures disclosure components follow WCAG compliance and WAI-ARIA Disclosure Pattern specifications.
-
-
-name: disclosure_accessibility_standards
-description: Enforce disclosure component accessibility standards and WAI-ARIA Disclosure Pattern compliance
-filters:
- - type: file_extension
- pattern: "\\.(vue|jsx|tsx|html|php|js|ts|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Button role requirement
-
- - pattern: "(?i)<(button|div|span)[^>]_(?:disclosure|expand|collapse)[^>]_>"
- pattern_negate: "role=\"button\""
- message: "Disclosure controls must have role='button' (or use native button element which has implicit role)."
-
- # aria-expanded requirement
-
- - pattern: "(?i)<[^>]_role=\"button\"[^>]_(?:disclosure|expand|collapse)[^>]\*>"
- pattern_negate: "aria-expanded=\"(true|false)\""
- message: "Disclosure controls must have aria-expanded attribute set to 'true' or 'false'."
-
- # Missing keyboard event handlers
-
- - pattern: "(?i)<[^>]_role=\"button\"[^>]_(?:disclosure|expand|collapse)[^>]\*>"
- pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
- message: "Disclosure controls should handle keyboard events (Enter and Space)."
-
-- type: suggest
- message: |
- **Disclosure Component Accessibility Best Practices:**
-
- **Required ARIA Attributes:**
-
- - **role='button':** Set on the disclosure control element (or use native button)
- - **aria-expanded:** 'true' if content is visible, 'false' if hidden
- - **aria-controls:** (Optional) Reference to the ID of the associated content
-
- **DOM Structure Requirements:**
-
- - The disclosure content MUST be a sibling to the disclosure control in the DOM
- - This ensures proper content discovery and navigation for all users
- - Avoid placing content in different containers or far from the control
- - Maintain a logical reading order in the DOM
-
- **Keyboard Interaction Requirements:**
-
- - **Enter:** Toggle disclosure content visibility
- - **Space:** Toggle disclosure content visibility
- - **Tab:** Move focus to next focusable element
- - **Shift+Tab:** Move focus to previous focusable element
-
- **Implementation Example:**
-
- ```html
-
-
-
-
- Disclosure content goes here...
-
-
-
-
-
-
-
-
-
Other content...
-
- Disclosure content goes here...
-
-
-
-
- ```
-
- **JavaScript Considerations:**
-
- - Implement Enter and Space key handlers for toggling
- - Update aria-expanded state when content toggles
- - Use hidden attribute or CSS to show/hide content
- - Consider implementing smooth transitions
-
- **Accessibility Notes:**
-
- - Button should be the only element inside the control
- - Content MUST be a sibling to the control in the DOM
- - Visual focus indicators should be clear
- - Test with screen readers to ensure proper announcement
- - Consider adding aria-label if the button text is not descriptive
- - Maintain proper reading order for screen reader users
- - Avoid complex DOM structures that could confuse navigation
-
-metadata:
-priority: high
-version: 1.0
-
diff --git a/.cursor/rules/dropdown-navigation-accessibility.mdc b/.cursor/rules/dropdown-navigation-accessibility.mdc
deleted file mode 100644
index 5708227f8..000000000
--- a/.cursor/rules/dropdown-navigation-accessibility.mdc
+++ /dev/null
@@ -1,442 +0,0 @@
-# Dropdown Navigation Component Accessibility Standards
-
-Ensures dropdown navigation components follow WCAG compliance and proper navigation semantics, including mobile modal patterns and disclosure controls.
-
-
-name: dropdown_navigation_accessibility_standards
-description: Enforce dropdown navigation component accessibility standards and proper navigation semantics
-filters:
- - type: file_extension
- pattern: "\\.(vue|jsx|tsx|html|php|js|ts|liquid)$"
-
-actions:
-
-- type: enforce
- conditions:
-
- # Navigation landmark requirement
-
- - pattern: "(?i)]_(?:navigation|menu|dropdown)[^>]_>"
- pattern_negate: "(aria-label|aria-labelledby)=\"[^\"]+\""
- message: "Navigation elements must have aria-label or aria-labelledby attribute for accessibility."
-
- # Navigation list structure requirement
-
- - pattern: "(?i)]_(?:navigation|menu|dropdown)[^>]_>"
- pattern_negate: "]\*>"
- message: "Navigation should use unordered list (ul) for proper semantic structure."
-
- # Dropdown button role requirement
-
- - pattern: "(?i)<(button|div|span)[^>]_(?:dropdown|expand|collapse)[^>]_>"
- pattern_negate: "role=\"button\""
- message: "Dropdown controls must have role='button' (or use native button element which has implicit role)."
-
- # Dropdown button aria-expanded requirement
-
- - pattern: "(?i)<[^>]_role=\"button\"[^>]_(?:dropdown|expand|collapse)[^>]\*>"
- pattern_negate: "aria-expanded=\"(true|false)\""
- message: "Dropdown controls must have aria-expanded attribute set to 'true' or 'false'."
-
- # Dropdown content missing proper identification
-
- - pattern: "(?i)<(div|section)[^>]*(?:dropdown.*content|content._dropdown)[^>]_>"
- pattern_negate: "id=\"[^\"]+\""
- message: "Dropdown content must have unique ID attributes for aria-controls reference."
-
- # Missing aria-current on navigation items
-
- - pattern: "(?i)]_(?:nav|navigation)[^>]_>"
- pattern_negate: "aria-current=\"(page|false)\""
- message: "Navigation links should have aria-current attribute set to 'page' for active items or 'false' for inactive."
-
- # Mobile modal missing dialog role
-
- - pattern: "(?i)<(div|section)[^>]*(?:mobile.*nav|nav.*mobile|modal.*nav)[^>]\*>"
- pattern_negate: "role=\"dialog\""
- message: "Mobile navigation modal containers must have role='dialog' attribute."
-
- # Mobile modal missing aria-modal
-
- - pattern: "(?i)<[^>]_role=\"dialog\"[^>]_(?:mobile.*nav|nav.*mobile)[^>]\*>"
- pattern_negate: "aria-modal=\"true\""
- message: "Mobile navigation dialog elements must have aria-modal='true' attribute."
-
- # Mobile modal missing proper labeling
-
- - pattern: "(?i)<[^>]_role=\"dialog\"[^>]_(?:mobile.*nav|nav.*mobile)[^>]\*>"
- pattern_negate: "(aria-labelledby|aria-label)"
- message: "Mobile navigation dialog elements must have either aria-labelledby or aria-label for accessibility."
-
- # Mobile launcher missing aria-haspopup
-
- - pattern: "(?i)]*(?:mobile.*nav|nav._mobile|hamburger|menu)[^>]_>"
- pattern_negate: "aria-haspopup=\"dialog\""
- message: "Mobile navigation launcher buttons must include aria-haspopup='dialog' to inform users a dialog will open."
-
- # Mobile close button missing aria-label
-
- - pattern: "(?i)]_(?:close|dismiss|×|×)[^>]_(?:mobile.*nav|nav.*mobile)[^>]_>"
- pattern_negate: "aria-label=\"[^\"]_[Cc]lose[^\"]\*\""
- message: "Mobile navigation close buttons should have aria-label='Close navigation' or similar descriptive text."
-
- # Missing keyboard event handlers for dropdown
-
- - pattern: "(?i)<[^>]_role=\"button\"[^>]_(?:dropdown|expand|collapse)[^>]\*>"
- pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
- message: "Dropdown controls should handle keyboard events (Enter, Space, and Escape)."
-
- # Missing Escape key support for dropdown content
-
- - pattern: "(?i)]*(?:dropdown.*content|content._dropdown)[^>]_>"
- pattern_negate: "(onKeyDown|onkeydown|@keydown|v-on:keydown)"
- message: "Dropdown content areas should handle Escape key to close dropdown and return focus to launcher."
-
- # Incorrect menu role usage
-
- - pattern: "(?i)role=\"(menu|menuitem|menubar|menuitemcheckbox|menuitemradio)\""
- message: "Navigation components should NOT use menu roles. Use proper navigation semantics with ul/li/a elements."
-
- # Incorrect aria-haspopup usage
-
- - pattern: "(?i)aria-haspopup=\"(true|menu|listbox)\""
- pattern_negate: "aria-haspopup=\"dialog\""
- message: "Navigation components should NOT use aria-haspopup except for mobile modal launchers with aria-haspopup='dialog'."
-
-- type: suggest
- message: |
- **Dropdown Navigation Component Accessibility Best Practices:**
-
- **Navigation Semantics:**
-
- - **role='navigation':** Implicit on nav element, provides landmark
- - **aria-label/aria-labelledby:** On nav element to describe the navigation
- - **aria-current:** Set on active navigation items ('page' for current page, 'false' for inactive)
- - **ul + li + a:** Use semantic list structure for navigation items
- - **NO menu roles:** Do not use role="menu", role="menuitem", etc.
-
- **Dropdown Disclosure Pattern:**
-
- - **role='button':** Set on dropdown launcher elements (or use native button)
- - **aria-expanded:** 'true' if dropdown content is visible, 'false' if hidden
- - **aria-controls:** Reference to the ID of the associated dropdown content
- - **aria-current:** Set on active dropdown items
-
- **Mobile Modal Pattern:**
-
- - **role='dialog':** Set on mobile navigation modal container
- - **aria-modal='true':** Indicates the dialog is modal
- - **aria-labelledby/aria-label:** On mobile dialog for accessibility
- - **aria-haspopup='dialog':** Set on mobile launcher button
- - **aria-label:** Set on mobile close button
-
- **Keyboard Interaction Requirements:**
-
- - **Tab:** Move through natural tab order on page
- - **Enter:** Activate links
- - **Space/Enter:** Open/close dropdown when launcher is focused
- - **Escape:** Close dropdown component (launcher focused or not)
- - **NO auto-open:** Do not open dropdown on keyboard focus
- - **Mobile:** Focus management for modal open/close
-
- **Mouse Interaction Requirements:**
-
- - **Hover:** Show underline on links
- - **Hover:** Open dropdown, close on mouse-away
- - **Click:** Activate links (include mouse-specific click handlers)
- - **Mobile:** Click launcher opens modal, click close button closes modal
- - **Double-click:** Mobile dropdown launchers navigate to associated page
-
- **Mobile Interaction Requirements:**
-
- - **Three-line button:** Opens modal, focus moves to first focusable item
- - **X close button:** Closes modal, focus returns to launcher
- - **Dropdown launcher:** Reveals content section, single-click toggles, double-click navigates
- - **Focus management:** Proper focus trapping and restoration
-
- **Implementation Patterns:**
-
- **Desktop Navigation Structure:**
-
- ```html
-
-
-
- ```
-
- **Mobile Navigation Structure:**
-
- ```html
-
-
-
-
-
-
-
Navigation
-
-
- ```
-
- **JavaScript for Dropdown Toggle:**
-
- ```javascript
- function toggleDropdown(button) {
- const isExpanded = button.getAttribute('aria-expanded') === 'true';
- const content = document.getElementById(button.getAttribute('aria-controls'));
-
- button.setAttribute('aria-expanded', !isExpanded);
- content.hidden = isExpanded;
-
- // Update chevron icon
- const chevron = button.querySelector('.chevron');
- if (chevron) {
- chevron.textContent = isExpanded ? '▼' : '▲';
- }
-
- if (!isExpanded) {
- // Add escape key listener to content
- content.addEventListener('keydown', handleDropdownEscapeKey);
- } else {
- // Remove escape key listener
- content.removeEventListener('keydown', handleDropdownEscapeKey);
- }
- }
-
- function handleDropdownEscapeKey(event) {
- if (event.key === 'Escape') {
- const content = event.target.closest('[hidden]');
- if (content) {
- const button = document.querySelector(`[aria-controls="${content.id}"]`);
- if (button) {
- button.setAttribute('aria-expanded', 'false');
- content.hidden = true;
- button.focus(); // Return focus to launcher
- content.removeEventListener('keydown', handleDropdownEscapeKey);
- }
- }
- }
- }
- ```
-
- **JavaScript for Mobile Modal:**
-
- ```javascript
- function openMobileNav() {
- const modal = document.querySelector('.mobile-nav-modal');
- const closeButton = modal.querySelector('button[aria-label*="Close"]');
-
- modal.hidden = false;
- closeButton.focus(); // Focus first focusable element
- }
-
- function closeMobileNav() {
- const modal = document.querySelector('.mobile-nav-modal');
- const launcher = document.querySelector('[aria-haspopup="dialog"]');
-
- modal.hidden = true;
- launcher.focus(); // Return focus to launcher
- }
-
- // Handle escape key for mobile modal
- document.addEventListener('keydown', function (event) {
- if (event.key === 'Escape') {
- const modal = document.querySelector('.mobile-nav-modal');
- if (!modal.hidden) {
- closeMobileNav();
- }
- }
- });
-
- // Mobile dropdown click and double-click handlers
- document.addEventListener('DOMContentLoaded', function () {
- const mobileDropdownButtons = document.querySelectorAll('.mobile-dropdown-button');
-
- mobileDropdownButtons.forEach((button) => {
- // Single click toggles dropdown
- button.addEventListener('click', (event) => {
- event.preventDefault();
- toggleDropdown(button);
- });
-
- // Double click navigates to page
- button.addEventListener('dblclick', (event) => {
- event.preventDefault();
- const href = button.getAttribute('data-href') || '/default';
- window.location.href = href;
- });
- });
- });
- ```
-
- **CSS for Hover Interactions:**
-
- ```css
- /* Link hover underline */
- nav a:hover {
- text-decoration: underline;
- }
-
- /* Dropdown hover behavior */
- .dropdown-launcher:hover + .dropdown-content,
- .dropdown-content:hover {
- display: block;
- }
-
- .dropdown-content {
- display: none;
- }
-
- /* Chevron rotation */
- .chevron {
- transition: transform 0.2s ease;
- }
-
- button[aria-expanded='true'] .chevron {
- transform: rotate(180deg);
- }
- ```
-
- **JavaScript Considerations:**
-
- - Implement proper event listeners for all keyboard interactions
- - Handle mouse hover events for dropdown display
- - Manage focus for mobile modal open/close
- - Update aria-current states based on current page
- - Handle chevron icon rotation
- - Implement proper escape key handling
- - Ensure no auto-opening on keyboard focus
- - Handle mouse-specific click events for navigation
- - Implement double-click navigation for mobile dropdown launchers
-
- **Accessibility Notes:**
-
- - Navigation is NOT a menu - use proper navigation semantics
- - Avoid menu roles and aria-haspopup (except mobile modal)
- - Ensure proper focus management for mobile modal
- - Test with screen readers for proper announcement
- - Maintain clear visual indicators for active states
- - Consider implementing skip links for large navigation
- - Ensure sufficient color contrast for all navigation elements
- - Test keyboard navigation flow thoroughly
-
- **Testing Requirements:**
-
- - Test keyboard navigation through all navigation items
- - Verify dropdown opens/closes with keyboard and mouse
- - Test mobile modal focus management
- - Verify screen reader announcement of navigation structure
- - Test aria-current updates correctly
- - Ensure escape key closes dropdowns and modals
- - Test hover interactions work as expected
- - Verify no auto-opening on keyboard focus
-
-metadata:
-priority: high
-version: 1.0
-
-description:
-globs:
-alwaysApply: false
-
----
-
-description:
-globs:
-alwaysApply: false
-
----
diff --git a/.cursor/rules/examples/block-example-group.liquid b/.cursor/rules/examples/block-example-group.liquid
deleted file mode 100644
index baea31c58..000000000
--- a/.cursor/rules/examples/block-example-group.liquid
+++ /dev/null
@@ -1,105 +0,0 @@
-{% doc %}
- Renders a group of blocks with configurable layout direction, gap and
- alignment.
-
- All settings apply to only one dimension to reduce configuration complexity.
-
- This component is a wrapper concerned only with rendering its children in
- the specified layout direction with appropriate padding and alignment.
-
- @example
- {% content_for 'block', type: 'group', id: 'group' %}
-{% enddoc %}
-
-
diff --git a/.cursor/rules/html-standards.mdc b/.cursor/rules/html-standards.mdc
deleted file mode 100644
index ed19d526b..000000000
--- a/.cursor/rules/html-standards.mdc
+++ /dev/null
@@ -1,299 +0,0 @@
----
-description:
-globs: *.liquid
-alwaysApply: false
----
-# Modern HTML Standards
-
-Use the latest evergreen browser features for better user experience and simpler code.
-All features should be supported in the last two versions of all major browsers.
-All necessary features must be "Baseline widely available".
-Progressive enhancement features may be "Baseline 2024".
-These are strictly for UX improvements that are non-blocking for conversions.
-
-## Native Interactive Elements
-
-**Expandable Content:**
-- Use `` and `` instead of JavaScript toggles
-- Perfect for FAQs, product details, filters
-- See the [accordion component](mdc:assets/accordion-custom.js) for cases where animation is involved
-
-**Modals and Popups:**
-- Use `
-