@kubex/zinc 1.0.25 → 1.0.99

package/docs/pages/components/well.md

@@ -1,13 +1,310 @@
 ---
 meta:
   title: Well
-  description:
+  description: Wells are used to display informational content in a subtle, contained format with optional icons and inline display.
 layout: component
 ---
 
 ```html:preview
-<div>
 <zn-well icon="calendar_month">Triggers every <strong>5 minutes</strong></zn-well>
-<zn-well inline icon="calendar_month">Triggers every <strong>5 minutes</strong></zn-well>
+```
+
+## Examples
+
+### Basic Well
+
+A basic well component displays content in a subtle, bordered container with a light background.
+
+```html:preview
+<zn-well>This is a basic well with simple text content.</zn-well>
+```
+
+### With Icon
+
+Use the `icon` attribute to add an icon to the left side of the well content. The icon uses the Material Icons library.
+
+```html:preview
+<zn-well icon="schedule">Scheduled for execution</zn-well>
+<br />
+<zn-well icon="calendar_month">Triggers every <strong>5 minutes</strong></zn-well>
+<br />
+<zn-well icon="info">Additional information available</zn-well>
+<br />
+<zn-well icon="cloud_upload">Automatically syncs to cloud storage</zn-well>
+```
+
+### Inline Display
+
+Use the `inline` attribute to display the well as an inline-flex element, allowing it to flow with surrounding content.
+
+```html:preview
+<p>
+  This text is followed by
+  <zn-well inline icon="timer">a 30-second timeout</zn-well>
+  and continues here.
+</p>
+```
+
+### Inline vs Block
+
+Compare the difference between inline and block (default) display modes.
+
+```html:preview
+<div>
+  <p>Block well (default):</p>
+  <zn-well icon="notification_important">This well spans the full width of its container</zn-well>
+</div>
+<br />
+<div>
+  <p>Inline well:</p>
+  <p>
+    Text before
+    <zn-well inline icon="notification_important">inline well here</zn-well>
+    text after
+  </p>
+</div>
+```
+
+### With Action Slot
+
+Use the `action` slot to add interactive elements or additional information to the right side of the well.
+
+```html:preview
+<zn-well icon="schedule">
+  Triggers every <strong>5 minutes</strong>
+  <zn-button slot="action" color="transparent" size="small">Edit</zn-button>
+</zn-well>
+<br />
+<zn-well icon="cloud_sync">
+  Last sync: 2 minutes ago
+  <zn-button slot="action" color="primary" size="small">Sync Now</zn-button>
+</zn-well>
+```
+
+### Multiple Action Items
+
+The action slot can contain multiple elements for more complex interactions.
+
+```html:preview
+<zn-well icon="settings">
+  Configuration status: Active
+  <div slot="action" style="display: flex; gap: 8px;">
+    <zn-button color="transparent" size="small">Configure</zn-button>
+    <zn-button color="transparent" size="small">Disable</zn-button>
+  </div>
+</zn-well>
+```
+
+### Rich Content
+
+Wells can contain rich HTML content including formatted text, links, and nested elements.
+
+```html:preview
+<zn-well icon="description">
+  <div>
+    <strong>Document Type:</strong> Configuration File<br />
+    <small style="color: var(--zn-color-text-muted);">Last modified: 01/23/26</small>
+  </div>
+  <zn-button slot="action" color="transparent" size="small">View</zn-button>
+</zn-well>
+<br />
+<zn-well icon="folder_open">
+  <div>
+    <p style="margin: 0;"><strong>Project Files</strong></p>
+    <p style="margin: 4px 0 0 0;">
+      <small>Contains 24 files | 12.5 MB total</small>
+    </p>
+  </div>
+  <zn-button slot="action" color="primary" size="small">Open</zn-button>
+</zn-well>
+```
+
+### Status Indicators
+
+Wells are perfect for displaying status information with icons and formatted content.
+
+```html:preview
+<zn-well icon="check_circle">
+  <strong>Deployment successful</strong> - Version 1.2.3 deployed to production
+</zn-well>
+<br />
+<zn-well icon="sync">
+  <strong>Syncing...</strong> - 45% complete
+</zn-well>
+<br />
+<zn-well icon="warning">
+  <strong>Warning:</strong> Low disk space - 2.1 GB remaining
+</zn-well>
+<br />
+<zn-well icon="error">
+  <strong>Build failed</strong> - See logs for details
+  <zn-button slot="action" color="error" size="small">View Logs</zn-button>
+</zn-well>
+```
+
+### Schedule and Timing Information
+
+Use wells to display scheduling and timing details.
+
+```html:preview
+<zn-well icon="schedule">
+  Runs every <strong>Monday at 9:00 AM</strong>
+  <zn-button slot="action" color="transparent" size="small">Edit Schedule</zn-button>
+</zn-well>
+<br />
+<zn-well icon="timer">
+  Timeout: <strong>5 minutes</strong>
+</zn-well>
+<br />
+<zn-well icon="event">
+  Next execution: <strong>Tomorrow at 3:00 PM</strong>
+</zn-well>
+```
+
+### Configuration Details
+
+Display configuration information in a clean, organized format.
+
+```html:preview
+<zn-well icon="dns">
+  <div>
+    <strong>Database Connection</strong><br />
+    <small>PostgreSQL • us-east-1 • Read/Write</small>
+  </div>
+  <zn-button slot="action" color="transparent" size="small">Test Connection</zn-button>
+</zn-well>
+<br />
+<zn-well icon="storage">
+  <div>
+    <strong>Cache Configuration</strong><br />
+    <small>Redis • 500 MB limit • TTL: 3600s</small>
+  </div>
+  <zn-button slot="action" color="transparent" size="small">Clear Cache</zn-button>
+</zn-well>
+```
+
+### Without Icon
+
+Wells work perfectly fine without an icon for simpler, cleaner displays.
+
+```html:preview
+<zn-well>Simple well without an icon</zn-well>
+<br />
+<zn-well>
+  <strong>Important:</strong> Configuration changes require a restart
+  <zn-button slot="action" color="warning" size="small">Restart Now</zn-button>
+</zn-well>
+```
+
+### Inline Wells in Lists
+
+Combine inline wells with other content for compact information display.
+
+```html:preview
+<ul>
+  <li>Task 1: Complete <zn-well inline icon="schedule">Due in 2 hours</zn-well></li>
+  <li>Task 2: In Progress <zn-well inline icon="sync">50% complete</zn-well></li>
+  <li>Task 3: Done <zn-well inline icon="check_circle">Completed</zn-well></li>
+</ul>
+```
+
+### Real-World Use Cases
+
+#### Cron Job Information
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <zn-well icon="schedule">
+    <strong>Daily Backup</strong><br />
+    Triggers every day at <strong>2:00 AM UTC</strong>
+    <div slot="action" style="display: flex; gap: 8px;">
+      <zn-button color="transparent" size="small">Edit</zn-button>
+      <zn-button color="transparent" size="small">Run Now</zn-button>
+    </div>
+  </zn-well>
+
+  <zn-well icon="update">
+    <strong>Weekly Reports</strong><br />
+    Triggers every <strong>Monday at 9:00 AM</strong>
+    <div slot="action" style="display: flex; gap: 8px;">
+      <zn-button color="transparent" size="small">Edit</zn-button>
+      <zn-button color="primary" size="small">View Reports</zn-button>
+    </div>
+  </zn-well>
+</div>
+```
+
+#### System Resource Information
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <zn-well icon="memory">
+    <div>
+      <strong>Memory Usage</strong><br />
+      <small>2.4 GB / 8.0 GB (30%)</small>
+    </div>
+  </zn-well>
+
+  <zn-well icon="storage">
+    <div>
+      <strong>Disk Space</strong><br />
+      <small>45.2 GB / 100 GB (45%)</small>
+    </div>
+    <zn-button slot="action" color="transparent" size="small">Details</zn-button>
+  </zn-well>
+
+  <zn-well icon="speed">
+    <div>
+      <strong>CPU Load</strong><br />
+      <small>12% average over last hour</small>
+    </div>
+  </zn-well>
+</div>
+```
+
+#### Integration Status
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <zn-well icon="cloud_done">
+    <strong>AWS S3</strong> - Connected
+    <zn-button slot="action" color="transparent" size="small">Configure</zn-button>
+  </zn-well>
+
+  <zn-well icon="sync">
+    <strong>GitHub</strong> - Syncing
+    <zn-button slot="action" color="transparent" size="small">View Status</zn-button>
+  </zn-well>
+
+  <zn-well icon="check_circle">
+    <strong>Stripe</strong> - Active • Webhook configured
+    <zn-button slot="action" color="transparent" size="small">Settings</zn-button>
+  </zn-well>
+</div>
+```
+
+#### Workflow Steps
+
+```html:preview
+<div style="display: flex; flex-direction: column; gap: 12px;">
+  <zn-well icon="filter_1">
+    <strong>Step 1:</strong> Data Collection
+    <span slot="action"><small style="color: var(--zn-color-text-muted);">Completed</small></span>
+  </zn-well>
+
+  <zn-well icon="filter_2">
+    <strong>Step 2:</strong> Processing
+    <span slot="action"><small style="color: var(--zn-color-text-success);">In Progress (65%)</small></span>
+  </zn-well>
+
+  <zn-well icon="filter_3">
+    <strong>Step 3:</strong> Validation
+    <span slot="action"><small style="color: var(--zn-color-text-muted);">Pending</small></span>
+  </zn-well>
+
+  <zn-well icon="filter_4">
+    <strong>Step 4:</strong> Export Results
+    <span slot="action"><small style="color: var(--zn-color-text-muted);">Pending</small></span>
+  </zn-well>
 </div>
 ```

package/docs/pages/getting-started/form-controls.md

@@ -255,6 +255,168 @@ Custom validation can be applied to any form control that supports the `setCusto
 to inputs and textareas.
 :::
 
+## Form Navigation with Enter Key
+
+Zinc forms support an opt-in Enter key navigation feature that improves the user experience for data entry forms. When
+enabled using the `data-enter-navigation` attribute on a `<form>` element, pressing Enter will:
+
+- Move focus to the next input field if all named fields are not yet complete
+- Submit the form when all named fields are filled and valid
+
+This feature is particularly useful for forms where users naturally want to press Enter to advance through fields, such
+as registration forms, checkout flows, or data entry interfaces.
+
+### Basic Example
+
+```html:preview
+<form class="form-nav-example" data-enter-navigation>
+  <zn-input name="firstName" label="First Name" required></zn-input>
+  <br />
+  <zn-input name="lastName" label="Last Name" required></zn-input>
+  <br />
+  <zn-input name="email" type="email" label="Email" required></zn-input>
+  <br />
+  <zn-input name="phone" type="tel" label="Phone"></zn-input>
+  <br />
+  <zn-button type="submit" variant="primary">Submit</zn-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.form-nav-example');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('zn-button'),
+    customElements.whenDefined('zn-input')
+  ]).then(() => {
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      alert('Form submitted successfully!');
+    });
+  });
+</script>
+```
+
+In this example:
+
+1. Pressing Enter in "First Name" moves the focus to "Last Name"
+2. Pressing Enter in "Last Name" moves the focus to "Email"
+3. Pressing Enter in "Email" moves the focus to "Phone"
+4. Pressing Enter in "Phone" (the last field with a name) submits the form when all named fields are filled
+
+### Comprehensive Example with All Input Types
+
+This example demonstrates Enter key navigation with all available Zinc form controls:
+
+```html:preview
+<form class="form-nav-comprehensive" data-enter-navigation>
+  <zn-input name="username" label="Username" required></zn-input>
+  <br />
+  <zn-input name="email" type="email" label="Email" required></zn-input>
+  <br />
+  <zn-input name="phone" type="tel" label="Phone" required></zn-input>
+  <br />
+  <zn-input name="age" type="number" label="Age" min="18" required></zn-input>
+  <br />
+  <zn-input name="salary" type="currency" label="Salary" required></zn-input>
+  <br />
+  <zn-datepicker name="startDate" label="Start Date" required></zn-datepicker>
+  <br />
+  <zn-select name="department" label="Department" required clearable>
+    <zn-option value="engineering">Engineering</zn-option>
+    <zn-option value="sales">Sales</zn-option>
+    <zn-option value="marketing">Marketing</zn-option>
+    <zn-option value="hr">Human Resources</zn-option>
+  </zn-select>
+  <br />
+  <zn-select name="level" label="Level" required clearable>
+    <zn-option value="junior">Junior</zn-option>
+    <zn-option value="mid">Mid-level</zn-option>
+    <zn-option value="senior">Senior</zn-option>
+    <zn-option value="lead">Lead</zn-option>
+  </zn-select>
+  <br />
+  <zn-radio-group name="employment" label="Employment Type" required>
+    <zn-radio value="fulltime">Full-time</zn-radio>
+    <zn-radio value="parttime">Part-time</zn-radio>
+    <zn-radio value="contract">Contract</zn-radio>
+  </zn-radio-group>
+  <br /><br />
+  <zn-checkbox name="terms" value="accepted" required>I accept the terms and conditions</zn-checkbox>
+  <br /><br />
+  <zn-checkbox name="newsletter" value="yes">Subscribe to newsletter</zn-checkbox>
+  <br /><br />
+  <zn-toggle name="notifications" value="enabled">Enable notifications</zn-toggle>
+  <br /><br />
+  <zn-textarea name="bio" label="Bio (Press Tab to navigate, Enter for newlines)"></zn-textarea>
+  <br />
+  <zn-button type="submit" variant="primary">Submit Application</zn-button>
+</form>
+
+<script type="module">
+  const form = document.querySelector('.form-nav-comprehensive');
+
+  // Wait for controls to be defined before attaching form listeners
+  await Promise.all([
+    customElements.whenDefined('zn-button'),
+    customElements.whenDefined('zn-checkbox'),
+    customElements.whenDefined('zn-datepicker'),
+    customElements.whenDefined('zn-input'),
+    customElements.whenDefined('zn-option'),
+    customElements.whenDefined('zn-radio'),
+    customElements.whenDefined('zn-radio-group'),
+    customElements.whenDefined('zn-select'),
+    customElements.whenDefined('zn-textarea'),
+    customElements.whenDefined('zn-toggle')
+  ]).then(() => {
+    form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      const formData = new FormData(form);
+      const data = Object.fromEntries(formData);
+      alert('Application submitted!\n\n' + JSON.stringify(data, null, 2));
+    });
+  });
+</script>
+```
+
+**Navigation flow:**
+
+- Press Enter to move through: Username → Email → Phone → Age → Salary → Start Date → Department → Level → Employment
+  Type (radio group) → Terms checkbox → Newsletter checkbox → Notifications toggle → Bio
+- The form submits when all named fields are filled and valid
+- Note: Textarea uses Tab for navigation since Enter is needed for newlines
+
+### Navigation Keys
+
+The form navigation feature supports multiple keyboard shortcuts:
+
+- **Enter key** - Moves to the next field. Submits the form when all named fields are complete.
+- **Arrow Down/Up keys** – On checkboxes and toggles, moves to the next/previous field. On radio buttons, selects the next/previous option within the radio group.
+- **Tab key** – Standard browser tab navigation still works alongside form navigation.
+
+### Control-Specific Behaviors
+
+Different form controls have specialized navigation behaviors:
+
+- **Text inputs** – Enter moves to the next field
+- **Number/Currency inputs** – Enter moves to the next field
+- **Datepicker** – Automatically opens when navigated to with Enter. Press Enter on a date to select it and move to the next field.
+- **Select dropdowns** - Automatically opens when navigated to with Enter. Press Enter on an option to select it and
+  move to the next field.
+- **Radio buttons** – Arrow keys select different options within the radio group. Space or Enter selects the current option. Press Enter to move to the next form control.
+- **Checkboxes** – Space toggles the checkbox. Enter, Arrow Down, or Arrow Up moves to the next/previous field.
+- **Toggles** – Space toggles the toggle. Enter, Arrow Down, or Arrow Up moves to the next/previous field.
+- **Textareas** – You can navigate TO a textarea with Enter, but pressing Enter inside a textarea adds newlines. Use Tab
+  to navigate away from textareas.
+- **Search inputs** – You can navigate TO a search input with Enter, but pressing Enter inside a search input triggers
+  search. Use Tab to navigate away from search inputs.
+- **Buttons** – Excluded from navigation entirely (handle their own Enter key behavior)
+
+:::tip
+For more examples and interactive demonstrations, see
+the [Form Navigation section](/components/input#form-navigation-with-enter-key) in the Input component documentation.
+:::
+
 ## Custom Validation Styles
 
 Due to the many ways form controls are used, Zinc doesn't provide out of the box validation styles for form controls as

package/docs/pages/index.md

@@ -5,28 +5,129 @@ meta:
 toc: false
 ---
 
-# A Library of Web Components based off of Shoelace
+# Zinc Web Components
+
+A comprehensive library of 88+ web components built with Lit, designed for modern web applications.
 
 <div class="badges">
 
 [![npm](https://img.shields.io/npm/dw/@kubex/zinc?label=npm&style=flat-square)](https://www.npmjs.com/package/@kubex/zinc)
-[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/kubex/zinc/blob/LICENSE.md)<br>
+[![License](https://img.shields.io/badge/license-MIT-232323.svg?style=flat-square)](https://github.com/kubex/zinc/blob/LICENSE.md)
 
 </div>
 
-<br />
+## Features
+
+- **88+ Components** - From form controls to data visualization
+- **TypeScript First** - Full type safety with comprehensive declarations
+- **Lit-based** - Built on the modern Lit framework for fast, lightweight components
+- **Accessible** - ARIA compliant with keyboard navigation support
+- **Form Integration** - Native form controls that work with standard HTML forms
+- **Customizable** - CSS custom properties and parts for easy styling
+- **Theme Support** - Light/dark mode built-in
+- **Tree-shakeable** - Import only what you need
+
+## Quick Start
+
+Install Zinc via npm:
+
+```bash
+npm install @kubex/zinc
+```
+
+Import the components you need:
+
+```javascript
+import '@kubex/zinc/dist/zn.min.js';
+```
+
+Use them in your HTML:
+
+```html
+<zn-button color="success">Click Me</zn-button>
+<zn-input label="Name" placeholder="Enter your name"></zn-input>
+<zn-select label="Country">
+  <zn-option value="us">United States</zn-option>
+  <zn-option value="uk">United Kingdom</zn-option>
+  <zn-option value="ca">Canada</zn-option>
+</zn-select>
+```
+
+## Component Categories
+
+### Form Controls
+Complete set of form elements with validation, accessibility, and native form integration:
+- [Button](/components/button), [Input](/components/input), [Textarea](/components/textarea)
+- [Checkbox](/components/checkbox), [Radio](/components/radio), [Toggle](/components/toggle)
+- [Select](/components/select), [Datepicker](/components/datepicker), [File](/components/file)
+- [Rating](/components/rating), [Editor](/components/editor)
+
+### Layout & Navigation
+Build complex layouts with flexible containers and navigation patterns:
+- [Dialog](/components/dialog), [Slideout](/components/slideout), [Tabs](/components/tabs)
+- [Panel](/components/panel), [Pane](/components/pane), [Split Pane](/components/split-pane)
+- [Menu](/components/menu), [Dropdown](/components/dropdown), [Navbar](/components/navbar)
+
+### Data Display
+Present data in clear, interactive formats:
+- [Data Table](/components/data-table), [Chart](/components/chart), [Stat](/components/stat)
+- [Pagination](/components/pagination), [Progress Bar](/components/progress-bar)
+- [Tile](/components/tile), [Collapsible](/components/collapsible)
+
+### Feedback & Indicators
+Communicate state and provide feedback to users:
+- [Alert](/components/alert), [Note](/components/note), [Tooltip](/components/tooltip)
+- [Empty State](/components/empty-state), [Skeleton](/components/skeleton)
+- [Status Indicator](/components/status-indicator), [Stepper](/components/stepper)
+
+### Utilities
+Helper components for common UI patterns:
+- [Icon](/components/icon), [Chip](/components/chip), [Copy Button](/components/copy-button)
+- [Reveal](/components/reveal), [Inline Edit](/components/inline-edit)
+- [Scroll Container](/components/scroll-container), [Well](/components/well)
+
+## Why Zinc?
+
+**Developer Experience**: Comprehensive documentation with live examples, TypeScript support, and intuitive APIs make development fast and enjoyable.
+
+**Production Ready**: Battle-tested components used in real-world applications with robust error handling and edge case coverage.
+
+**Customizable**: Every component exposes CSS custom properties and parts for granular styling control without fighting the framework.
+
+**Performance**: Lightweight components with lazy loading support and optimized rendering for smooth 60fps interactions.
+
+**Future Proof**: Built on web standards with modern JavaScript features, ensuring long-term compatibility and maintainability.
+
+## Browser Support
+
+Zinc works in all modern browsers:
+- Chrome/Edge 90+
+- Firefox 88+
+- Safari 14+
+- Opera 76+
+
+For older browsers, you may need polyfills for Web Components and ES2017+ features.
 
 ## Attribution
 
-Special thanks to the following projects and individuals that help make zinc possible.
-
-- [Shoelace](https://shoelace.style/) Where a lot of these components were taken from, and altered to fit our needs.
-- Components are built with [Lit](https://lit.dev/)
-- Component metadata is generated by
-  the [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest)
-- Documentation is powered by [11ty](https://www.11ty.dev/)
-- Color primitives are inspired by [Tailwind](https://tailwindcss.com/)
-- Icons are courtesy of [Material Icons](https://fonts.google.com/icons)
-- Positioning of dropdowns, tooltips, et al is handled by [Floating UI](https://floating-ui.com/)
-- Animations are courtesy of [animate.css](https://animate.style/)
-- Search is powered by [Lunr](https://lunrjs.com/)
+Special thanks to the following projects and individuals that help make Zinc possible:
+
+- [Shoelace](https://shoelace.style/) - Many components were inspired by and adapted from Shoelace
+- [Lit](https://lit.dev/) - Fast, lightweight web component base class
+- [Custom Elements Manifest Analyzer](https://github.com/open-wc/custom-elements-manifest) - Component metadata generation
+- [11ty](https://www.11ty.dev/) - Static site generator powering this documentation
+- [Tailwind CSS](https://tailwindcss.com/) - Color primitive inspiration
+- [Material Icons](https://fonts.google.com/icons) - Icon library
+- [Floating UI](https://floating-ui.com/) - Positioning engine for dropdowns and tooltips
+- [ApexCharts](https://apexcharts.com/) - Charting library
+- [Quill](https://quilljs.com/) - Rich text editor
+- [Lunr](https://lunrjs.com/) - Client-side search
+
+## License
+
+Zinc is available under the [MIT License](https://github.com/kubex/zinc/blob/master/LICENSE.md).
+
+## Getting Help
+
+- **Documentation**: Browse the [component documentation](/components/button) for detailed usage examples
+- **GitHub Issues**: Report bugs or request features on [GitHub](https://github.com/kubex/zinc/issues)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.0.25",
+  "version": "1.0.99",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",
@@ -13,7 +13,7 @@
   },
   "repository": {
     "type": "git",
-    "directory": "git@github.com:kubex/zinc"
+    "url": "https://github.com/kubex/zinc"
   },
   "license": "MIT",
   "author": "",
@@ -34,10 +34,9 @@
     "lint": "eslint src --max-warnings 0",
     "lint:fix": "eslint src --max-warnings 0 --fix",
     "lint:component": "eslint -- ",
-    "prepare": "npx playwright install",
-    "test": "web-test-runner --group default",
-    "test:component": "web-test-runner -- --watch --group",
-    "test:watch": "web-test-runner --watch --group default",
+    "test": "npx playwright install --with-deps && web-test-runner --group default",
+    "test:component": "npx playwright install --with-deps && web-test-runner -- --watch --group",
+    "test:watch": "npx playwright install --with-deps && web-test-runner --watch --group default",
     "watch": "node scripts/build.js --serve"
   },
   "dependencies": {

package/scss/_global-spacing.scss

@@ -61,6 +61,10 @@
   }
 }
 
+.form-spacing ~ .form-spacing {
+  margin-top: var(--zn-spacing-medium);
+}
+
 .form-spacing > * {
   grid-column: span 6 / span 6;
 }