rizzo-css 0.0.16 → 0.0.18

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/DropdownDoc.svelte

@@ -1,161 +0,0 @@
-<script lang="ts">
-  import Dropdown from '$lib/rizzo/Dropdown.svelte';
-  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
-
-  const basicItems = [
-    { label: 'Edit', value: 'edit', onClick: (v) => console.log('Action:', v) },
-    { label: 'Delete', value: 'delete', onClick: (v) => console.log('Action:', v) },
-    { separator: true },
-    { label: 'Settings', href: '/settings' },
-  ];
-
-  const linkItems = [
-    { label: 'Home', href: '/' },
-    { label: 'Documentation', href: '/docs' },
-    { label: 'Components', href: '/docs/components' },
-    { separator: true },
-    { label: 'GitHub', href: 'https://github.com' },
-  ];
-
-  const disabledItems = [
-    { label: 'Available Option', value: 'available' },
-    { label: 'Disabled Option', value: 'disabled', disabled: true },
-    { separator: true },
-    { label: 'Another Option', value: 'another' },
-  ];
-
-  const submenuItems = [
-    {
-      label: 'Edit',
-      submenu: [
-        { label: 'Cut', value: 'cut', onClick: (v) => console.log('Submenu:', v) },
-        { label: 'Copy', value: 'copy', onClick: (v) => console.log('Submenu:', v) },
-        { label: 'Paste', value: 'paste', onClick: (v) => console.log('Submenu:', v) },
-        { separator: true },
-        {
-          label: 'Advanced',
-          submenu: [
-            { label: 'Find & Replace', value: 'find-replace', onClick: (v) => console.log('Submenu:', v) },
-            { label: 'Go to Line', value: 'go-to-line', onClick: (v) => console.log('Submenu:', v) },
-            { label: 'Format Document', value: 'format', onClick: (v) => console.log('Submenu:', v) },
-          ],
-        },
-      ],
-    },
-    {
-      label: 'View',
-      submenu: [
-        { label: 'Zoom In', value: 'zoom-in', onClick: (v) => console.log('Submenu:', v) },
-        { label: 'Zoom Out', value: 'zoom-out', onClick: (v) => console.log('Submenu:', v) },
-        { label: 'Reset Zoom', value: 'reset-zoom', onClick: (v) => console.log('Submenu:', v) },
-      ],
-    },
-    { separator: true },
-    { label: 'Help', href: '/docs' },
-    { label: 'Settings', href: '/docs/components/settings' },
-  ];
-
-  const positionItems = [
-    { label: 'Item 1', value: '1' },
-    { label: 'Item 2', value: '2' },
-    { label: 'Item 3', value: '3' },
-  ];
-</script>
-
-<section>
-  <h2>Dropdown component</h2>
-  <p>An accessible dropdown menu component for displaying lists of actions or options. Supports menu items, separators, links, submenus, and click handlers. Matches the <a href="/docs/components/dropdown">Astro dropdown</a> in look and behavior.</p>
-
-  <h3>Basic usage</h3>
-  <div class="example">
-    <h4 class="example-title">Live example</h4>
-    <Dropdown trigger="Actions" items={basicItems} />
-  </div>
-
-  <h3>With links</h3>
-  <div class="example">
-    <h4 class="example-title">Live example</h4>
-    <Dropdown trigger="Navigate" items={linkItems} />
-  </div>
-
-  <h3>With disabled items</h3>
-  <div class="example">
-    <h4 class="example-title">Live example</h4>
-    <Dropdown trigger="Options" items={disabledItems} />
-  </div>
-
-  <h3>Nested submenus</h3>
-  <div class="example">
-    <h4 class="example-title">Live example</h4>
-    <Dropdown trigger="Actions" items={submenuItems} />
-  </div>
-
-  <h3>Menu positioning</h3>
-  <div class="example">
-    <h4 class="example-title">Live examples</h4>
-    <div class="example-row">
-      <div>
-        <p class="example-label">Left</p>
-        <Dropdown trigger="Left position" position="left" items={positionItems} />
-      </div>
-      <div class="example-right">
-        <p class="example-label">Right</p>
-        <Dropdown trigger="Right position" position="right" items={positionItems} />
-      </div>
-    </div>
-  </div>
-
-  <h3>Usage</h3>
-  <CodeBlock
-    code={`<script>
-  import Dropdown from './components/svelte/Dropdown.svelte';
-</script>
-
-<Dropdown
-  trigger="Options"
-  items={[
-    { label: 'Save', onClick: (v) => save(v) },
-    { label: 'Docs', href: '/docs' },
-    { separator: true },
-    { label: 'More', submenu: [{ label: 'A', value: 'a' }, { label: 'B', value: 'b' }] },
-  ]}
-/>`}
-    language="svelte"
-  />
-</section>
-
-<style>
-  .example {
-    margin: var(--spacing-6) 0;
-    padding: var(--spacing-4);
-    background: var(--background-alt);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-  }
-  .example-title {
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    color: var(--text-dim);
-    margin-bottom: var(--spacing-3);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider);
-  }
-  .example-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    gap: var(--spacing-4);
-    flex-wrap: wrap;
-  }
-  .example-label {
-    margin: 0 0 var(--spacing-2) 0;
-    font-size: var(--font-size-sm);
-    color: var(--text-dim);
-  }
-  .example-right {
-    margin-left: auto;
-  }
-  .example-right .example-label {
-    text-align: right;
-  }
-</style>

package/scaffold/svelte-app/src/lib/rizzo-docs/pages/FormsDoc.svelte

@@ -1,375 +0,0 @@
-<script lang="ts">
-  import FormGroup from '$lib/rizzo/FormGroup.svelte';
-  import Input from '$lib/rizzo/Input.svelte';
-  import Checkbox from '$lib/rizzo/Checkbox.svelte';
-  import Textarea from '$lib/rizzo/Textarea.svelte';
-  import Select from '$lib/rizzo/Select.svelte';
-  import Radio from '$lib/rizzo/Radio.svelte';
-  import CodeBlock from '$lib/rizzo-docs/CodeBlock.svelte';
-
-  let paymentMethod = $state('card');
-</script>
-
-<section>
-  <h2>Form Components</h2>
-  <p>Rizzo CSS includes a comprehensive set of accessible form components built with semantic HTML and ARIA attributes. All form components use theme variables and support validation states.</p>
-</section>
-
-<section>
-  <h2>FormGroup</h2>
-  <p>The <code>FormGroup</code> component provides a wrapper for form fields with labels, help text, and error/success messages.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>label</code> (string, optional) - Label text</li>
-    <li><code>labelFor</code> (string, optional) - ID of the input element</li>
-    <li><code>required</code> (boolean, optional) - Shows required indicator</li>
-    <li><code>help</code> (string, optional) - Help text displayed below input</li>
-    <li><code>error</code> (string, optional) - Error message</li>
-    <li><code>success</code> (string, optional) - Success message</li>
-    <li><code>class</code> (string, optional) - Additional CSS classes</li>
-  </ul>
-
-  <div class="example">
-    <div class="example-title">Live Example</div>
-    <FormGroup label="Email Address" labelFor="email-example" required help="We'll never share your email">
-      <Input type="email" id="email-example" name="email" placeholder="you@example.com" />
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<script>
-  import FormGroup from './components/svelte/FormGroup.svelte';
-  import Input from './components/svelte/Input.svelte';
-</script>
-
-<FormGroup label="Email Address" labelFor="email" required help="We'll never share your email">
-  <Input id="email" type="email" name="email" placeholder="you@example.com" />
-</FormGroup>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Input</h2>
-  <p>The <code>Input</code> component supports various input types with validation states and sizes.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>type</code> (string, optional) - Input type (text, email, password, number, tel, url, search, date, time, datetime-local, month, week)</li>
-    <li><code>id</code>, <code>name</code>, <code>value</code>, <code>placeholder</code>, <code>required</code>, <code>disabled</code>, <code>readonly</code></li>
-    <li><code>size</code> ('sm' | 'md' | 'lg', optional) - Input size (default: 'md')</li>
-    <li><code>error</code> (boolean, optional) - Error state</li>
-    <li><code>success</code> (boolean, optional) - Success state</li>
-  </ul>
-
-  <h3>Input Types</h3>
-  <div class="example">
-    <div class="example-title">Live Examples</div>
-    <FormGroup label="Text Input" labelFor="text-input">
-      <Input type="text" id="text-input" name="text" placeholder="Enter text" />
-    </FormGroup>
-    <FormGroup label="Email Input" labelFor="email-input">
-      <Input type="email" id="email-input" name="email" placeholder="you@example.com" />
-    </FormGroup>
-    <FormGroup label="Password Input" labelFor="password-input">
-      <Input type="password" id="password-input" name="password" placeholder="Enter password" />
-    </FormGroup>
-    <FormGroup label="Number Input" labelFor="number-input">
-      <Input type="number" id="number-input" name="number" placeholder="Enter number" />
-    </FormGroup>
-  </div>
-
-  <h3>Input Sizes</h3>
-  <div class="example">
-    <div class="example-title">Live Examples</div>
-    <FormGroup label="Small Input" labelFor="input-sm">
-      <Input type="text" id="input-sm" name="input-sm" size="sm" placeholder="Small input" />
-    </FormGroup>
-    <FormGroup label="Medium Input (default)" labelFor="input-md">
-      <Input type="text" id="input-md" name="input-md" size="md" placeholder="Medium input" />
-    </FormGroup>
-    <FormGroup label="Large Input" labelFor="input-lg">
-      <Input type="text" id="input-lg" name="input-lg" size="lg" placeholder="Large input" />
-    </FormGroup>
-  </div>
-
-  <h3>Validation States</h3>
-  <div class="example">
-    <div class="example-title">Live Examples</div>
-    <FormGroup label="Error State" labelFor="input-error" error="This field is required">
-      <Input type="text" id="input-error" name="input-error" error placeholder="Enter text" />
-    </FormGroup>
-    <FormGroup label="Success State" labelFor="input-success" success="Looks good!">
-      <Input type="text" id="input-success" name="input-success" success value="Valid input" />
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<FormGroup label="Email" labelFor="email" required>
-  <Input id="email" type="email" name="email" placeholder="you@example.com" />
-</FormGroup>
-
-<!-- With error state -->
-<FormGroup label="Email" labelFor="email-error" error="Invalid email address">
-  <Input id="email-error" type="email" name="email" error />
-</FormGroup>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Textarea</h2>
-  <p>The <code>Textarea</code> component for multi-line text input.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>id</code>, <code>name</code>, <code>value</code>, <code>placeholder</code>, <code>required</code>, <code>disabled</code>, <code>readonly</code></li>
-    <li><code>rows</code> (number, optional) - Number of rows (default: 4)</li>
-    <li><code>cols</code> (number, optional) - Number of columns</li>
-    <li><code>size</code>, <code>error</code>, <code>success</code> - Same as Input</li>
-  </ul>
-
-  <div class="example">
-    <div class="example-title">Live Example</div>
-    <FormGroup label="Message" labelFor="textarea-example" help="Enter your message here">
-      <Textarea id="textarea-example" name="message" rows={5} placeholder="Your message..." />
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<FormGroup label="Message" labelFor="message" help="Enter your message here">
-  <Textarea id="message" name="message" rows={5} placeholder="Your message..." />
-</FormGroup>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Select</h2>
-  <p>The <code>Select</code> component for dropdown selections.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>id</code>, <code>name</code>, <code>value</code>, <code>required</code>, <code>disabled</code></li>
-    <li><code>size</code>, <code>error</code>, <code>success</code> - Same as Input</li>
-  </ul>
-
-  <div class="example">
-    <div class="example-title">Live Example</div>
-    <FormGroup label="Country" labelFor="select-example" required>
-      <Select id="select-example" name="country">
-        <option value="">Select a country</option>
-        <option value="us">United States</option>
-        <option value="ca">Canada</option>
-        <option value="uk">United Kingdom</option>
-        <option value="au">Australia</option>
-      </Select>
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<FormGroup label="Country" labelFor="country" required>
-  <Select id="country" name="country">
-    <option value="">Select a country</option>
-    <option value="us">United States</option>
-    <option value="ca">Canada</option>
-    <option value="uk">United Kingdom</option>
-  </Select>
-</FormGroup>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Checkbox</h2>
-  <p>The <code>Checkbox</code> component for single or multiple selections.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>id</code>, <code>name</code>, <code>value</code>, <code>checked</code>, <code>required</code>, <code>disabled</code></li>
-    <li><code>ariaLabel</code> (string, optional) - Accessible label</li>
-    <li><code>ariaDescribedby</code> (string, optional) - ID of element that describes this checkbox</li>
-  </ul>
-
-  <div class="example">
-    <div class="example-title">Live Examples</div>
-    <FormGroup label="Preferences">
-      <div class="checkbox-group">
-        <label class="checkbox-label">
-          <Checkbox id="newsletter" name="preferences" value="newsletter" />
-          Subscribe to newsletter
-        </label>
-        <label class="checkbox-label">
-          <Checkbox id="updates" name="preferences" value="updates" />
-          Receive product updates
-        </label>
-        <label class="checkbox-label">
-          <Checkbox id="marketing" name="preferences" value="marketing" />
-          Marketing communications
-        </label>
-      </div>
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<label class="checkbox-label">
-  <Checkbox id="newsletter" name="preferences" value="newsletter" />
-  Subscribe to newsletter
-</label>
-
-<!-- Checkbox Group -->
-<div class="checkbox-group">
-  <label class="checkbox-label">
-    <Checkbox id="opt1" name="options" value="1" />
-    Option 1
-  </label>
-  <label class="checkbox-label">
-    <Checkbox id="opt2" name="options" value="2" />
-    Option 2
-  </label>
-</div>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Radio</h2>
-  <p>The <code>Radio</code> component for single selection from multiple options.</p>
-
-  <h3>Props</h3>
-  <ul>
-    <li><code>id</code>, <code>name</code>, <code>value</code>, <code>checked</code>, <code>required</code>, <code>disabled</code></li>
-    <li><code>group</code> (bindable, optional) - Bound value for the selected option (use same bound variable for all radios in the group)</li>
-    <li><code>ariaLabel</code>, <code>ariaDescribedby</code> - Same as Checkbox</li>
-  </ul>
-
-  <div class="example">
-    <div class="example-title">Live Example</div>
-    <FormGroup label="Payment Method" required>
-      <div class="radio-group">
-        <label class="radio-label">
-          <Radio name="payment" id="payment-card" value="card" bind:group={paymentMethod} />
-          Credit Card
-        </label>
-        <label class="radio-label">
-          <Radio name="payment" id="payment-paypal" value="paypal" bind:group={paymentMethod} />
-          PayPal
-        </label>
-        <label class="radio-label">
-          <Radio name="payment" id="payment-bank" value="bank" bind:group={paymentMethod} />
-          Bank Transfer
-        </label>
-      </div>
-    </FormGroup>
-  </div>
-
-  <h3>Code Example</h3>
-  <CodeBlock
-    code={`<script>
-  let payment = $state('card');
-</script>
-
-<div class="radio-group">
-  <label class="radio-label">
-    <Radio name="payment" id="payment-card" value="card" bind:group={payment} />
-    Credit Card
-  </label>
-  <label class="radio-label">
-    <Radio name="payment" id="payment-paypal" value="paypal" bind:group={payment} />
-    PayPal
-  </label>
-</div>`}
-    language="svelte"
-  />
-</section>
-
-<section>
-  <h2>Complete Form Example</h2>
-  <div class="example">
-    <div class="example-title">Live Example</div>
-    <form style="max-width: 600px;">
-      <FormGroup label="Full Name" labelFor="form-name" required>
-        <Input type="text" id="form-name" name="name" placeholder="John Doe" required />
-      </FormGroup>
-
-      <FormGroup label="Email Address" labelFor="form-email" required help="We'll never share your email">
-        <Input type="email" id="form-email" name="email" placeholder="you@example.com" required />
-      </FormGroup>
-
-      <FormGroup label="Country" labelFor="form-country" required>
-        <Select id="form-country" name="country" required>
-          <option value="">Select a country</option>
-          <option value="us">United States</option>
-          <option value="ca">Canada</option>
-          <option value="uk">United Kingdom</option>
-        </Select>
-      </FormGroup>
-
-      <FormGroup label="Message" labelFor="form-message">
-        <Textarea id="form-message" name="message" rows={4} placeholder="Your message..." />
-      </FormGroup>
-
-      <FormGroup>
-        <label class="checkbox-label">
-          <Checkbox id="form-consent" name="consent" value="yes" required />
-          I agree to the terms and conditions
-        </label>
-      </FormGroup>
-
-      <button type="submit" class="btn btn-primary">Submit</button>
-    </form>
-  </div>
-</section>
-
-<section>
-  <h2>Accessibility</h2>
-  <p>All form components follow accessibility best practices:</p>
-  <ul>
-    <li>Proper label associations using <code>for</code> and <code>id</code> attributes</li>
-    <li>ARIA attributes for validation states (<code>aria-invalid</code>, <code>aria-describedby</code>)</li>
-    <li>Error messages with <code>role="alert"</code> for screen readers</li>
-    <li>Keyboard navigation support</li>
-    <li>Focus indicators using theme accent color</li>
-    <li>Required field indicators</li>
-  </ul>
-</section>
-
-<section>
-  <h2>Styling</h2>
-  <p>All form components use semantic theme variables and automatically adapt to the selected theme. Form styles are defined in <code>src/styles/forms.css</code>.</p>
-
-  <h3>Customization</h3>
-  <p>You can customize form inputs using CSS variables or by adding custom classes:</p>
-  <CodeBlock
-    code={`.custom-input {
-  border-radius: var(--radius-lg);
-  padding: var(--spacing-4);
-}`}
-    language="css"
-  />
-  <p><strong>Astro &amp; Vanilla:</strong> <a href="/docs/components/forms">Astro</a> · <a href="/docs/vanilla/components/forms">Vanilla</a> — same BEM classes and HTML structure.</p>
-</section>
-
-<style>
-  .example {
-    margin: var(--spacing-6) 0;
-    padding: var(--spacing-4);
-    background: var(--background-alt);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-lg);
-  }
-  .example-title {
-    font-size: var(--font-size-sm);
-    font-weight: var(--font-weight-medium);
-    color: var(--text-dim);
-    margin-bottom: var(--spacing-3);
-    text-transform: uppercase;
-    letter-spacing: var(--letter-spacing-wider);
-  }
-</style>