@reliability-design/web 1.0.2 → 1.0.3

package/dist/components/rel-container/rel-container.stories.ts

@@ -1,239 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-container';
-
-/**
- * The Container component is a flexible layout wrapper with customizable padding, background, and shadow.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **3 Padding Sizes**: sm (8px), md (16px), lg (32px)
- * - **3 Background Options**: white, light, none (transparent)
- * - **Optional Shadow**: Elevation shadow for depth
- * - **Fully Token-Driven**: Uses design system tokens
- * - **Flexible Content**: Accepts any slotted content
- */
-const meta: Meta = {
-  title: 'Components/Container',
-  tags: ['autodocs'],
-  component: 'rel-container',
-  argTypes: {
-    padding: {
-      control: { type: 'select' },
-      options: ['sm', 'md', 'lg'],
-      description: 'Padding size',
-      table: {
-        defaultValue: { summary: 'md' },
-        type: { summary: 'string' },
-      },
-    },
-    background: {
-      control: { type: 'select' },
-      options: ['white', 'light', 'none'],
-      description: 'Background color variant',
-      table: {
-        defaultValue: { summary: 'white' },
-        type: { summary: 'string' },
-      },
-    },
-    shadow: {
-      control: 'boolean',
-      description: 'Apply elevation shadow',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-container
-      padding="${args.padding || 'md'}"
-      background="${args.background || 'white'}"
-      ?shadow="${args.shadow}"
-    >
-      <p style="margin: 0; color: #333;">
-        This is content inside the container. The container provides padding, background, and optional shadow.
-      </p>
-    </rel-container>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default container with white background and medium padding
- */
-export const Default: Story = {
-  args: {
-    padding: 'md',
-    background: 'white',
-    shadow: false,
-  },
-};
-
-/**
- * Container with shadow for elevation effect
- */
-export const WithShadow: Story = {
-  args: {
-    padding: 'md',
-    background: 'white',
-    shadow: true,
-  },
-};
-
-/**
- * All padding sizes comparison
- */
-export const PaddingSizes: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; background: #e0e0e0; padding: 24px;">
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Small Padding (8px)</h3>
-        <rel-container padding="sm" background="white" shadow>
-          <p style="margin: 0; color: #333;">Small padding content</p>
-        </rel-container>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Medium Padding (16px)</h3>
-        <rel-container padding="md" background="white" shadow>
-          <p style="margin: 0; color: #333;">Medium padding content</p>
-        </rel-container>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Large Padding (32px)</h3>
-        <rel-container padding="lg" background="white" shadow>
-          <p style="margin: 0; color: #333;">Large padding content</p>
-        </rel-container>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All background variants comparison
- */
-export const BackgroundVariants: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; background: #e0e0e0; padding: 24px;">
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">White Background</h3>
-        <rel-container padding="md" background="white" shadow>
-          <p style="margin: 0; color: #333;">White background container</p>
-        </rel-container>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">Light Background</h3>
-        <rel-container padding="md" background="light" shadow>
-          <p style="margin: 0; color: #333;">Light gray background container</p>
-        </rel-container>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 12px; font-size: 16px; font-weight: 600;">No Background (Transparent)</h3>
-        <rel-container padding="md" background="none">
-          <p style="margin: 0; color: #333; background: white; padding: 8px; border-radius: 4px;">
-            Transparent background container (content has its own background for visibility)
-          </p>
-        </rel-container>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Container with complex nested content
- */
-export const ComplexContent: Story = {
-  render: () => html`
-    <div style="background: #e0e0e0; padding: 24px;">
-      <rel-container padding="lg" background="white" shadow>
-        <h2 style="margin: 0 0 16px 0; font-size: 24px; font-weight: 600; color: #333;">User Profile</h2>
-        <div style="display: flex; gap: 16px; align-items: center; margin-bottom: 16px;">
-          <img src="/assets/dummy 1.jpeg" alt="User" style="width: 60px; height: 60px; border-radius: 50%; object-fit: cover;" />
-          <div>
-            <h3 style="margin: 0 0 4px 0; font-size: 18px; font-weight: 600; color: #333;">John Doe</h3>
-            <p style="margin: 0; color: #666; font-size: 14px;">Software Engineer</p>
-          </div>
-        </div>
-        <p style="margin: 0; color: #555; line-height: 1.6;">
-          This container holds complex content including headings, images, and text.
-          The container provides consistent spacing and visual structure.
-        </p>
-      </rel-container>
-    </div>
-  `,
-};
-
-/**
- * Nested containers for card-like layouts
- */
-export const NestedContainers: Story = {
-  render: () => html`
-    <div style="background: #e0e0e0; padding: 24px;">
-      <rel-container padding="lg" background="light">
-        <h2 style="margin: 0 0 16px 0; font-size: 20px; font-weight: 600; color: #333;">Dashboard</h2>
-
-        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px;">
-          <rel-container padding="md" background="white" shadow>
-            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Total Users</h3>
-            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #0059F4;">1,234</p>
-          </rel-container>
-
-          <rel-container padding="md" background="white" shadow>
-            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Revenue</h3>
-            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #00A86B;">$56,789</p>
-          </rel-container>
-
-          <rel-container padding="md" background="white" shadow>
-            <h3 style="margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #333;">Active Sessions</h3>
-            <p style="margin: 0; font-size: 32px; font-weight: 700; color: #FFB020;">89</p>
-          </rel-container>
-        </div>
-      </rel-container>
-    </div>
-  `,
-};
-
-/**
- * All combinations showcase
- */
-export const AllCombinations: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px; background: #e0e0e0; padding: 24px;">
-      <div>
-        <h2 style="margin-bottom: 16px; font-size: 20px; font-weight: 600;">Without Shadow</h2>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <rel-container padding="sm" background="white">
-            <p style="margin: 0; color: #333;">Small padding, white background, no shadow</p>
-          </rel-container>
-          <rel-container padding="md" background="light">
-            <p style="margin: 0; color: #333;">Medium padding, light background, no shadow</p>
-          </rel-container>
-          <rel-container padding="lg" background="white">
-            <p style="margin: 0; color: #333;">Large padding, white background, no shadow</p>
-          </rel-container>
-        </div>
-      </div>
-
-      <div>
-        <h2 style="margin-bottom: 16px; font-size: 20px; font-weight: 600;">With Shadow</h2>
-        <div style="display: flex; flex-direction: column; gap: 16px;">
-          <rel-container padding="sm" background="white" shadow>
-            <p style="margin: 0; color: #333;">Small padding, white background, with shadow</p>
-          </rel-container>
-          <rel-container padding="md" background="light" shadow>
-            <p style="margin: 0; color: #333;">Medium padding, light background, with shadow</p>
-          </rel-container>
-          <rel-container padding="lg" background="white" shadow>
-            <p style="margin: 0; color: #333;">Large padding, white background, with shadow</p>
-          </rel-container>
-        </div>
-      </div>
-    </div>
-  `,
-};

package/dist/components/rel-divider/rel-divider.stories.ts

@@ -1,229 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-divider';
-
-/**
- * The Divider component is a simple visual separator for content sections.
- * Built with Lit web components for framework-agnostic usage with full token support.
- *
- * ## Features
- * - **2 Orientations**: horizontal (default), vertical
- * - **Token-Based Styling**: Uses design system tokens for colors and spacing
- * - **ARIA Support**: Includes proper role="separator" for accessibility
- * - **Flexible Layout**: Adapts to parent container
- */
-const meta: Meta = {
-  title: 'Components/Divider',
-  tags: ['autodocs'],
-  component: 'rel-divider',
-  argTypes: {
-    orientation: {
-      control: { type: 'select' },
-      options: ['horizontal', 'vertical'],
-      description: 'Divider orientation',
-      table: {
-        defaultValue: { summary: 'horizontal' },
-        type: { summary: 'string' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-divider orientation="${args.orientation || 'horizontal'}"></rel-divider>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default horizontal divider
- */
-export const Default: Story = {
-  args: {
-    orientation: 'horizontal',
-  },
-};
-
-/**
- * Horizontal divider - separates content vertically
- */
-export const Horizontal: Story = {
-  render: () => html`
-    <div style="padding: 24px; background: #f5f5f5;">
-      <p style="margin: 0 0 16px; color: #333;">Section 1: This is some content above the divider.</p>
-      <rel-divider orientation="horizontal"></rel-divider>
-      <p style="margin: 16px 0 0; color: #333;">Section 2: This is some content below the divider.</p>
-    </div>
-  `,
-};
-
-/**
- * Vertical divider - separates content horizontally
- */
-export const Vertical: Story = {
-  render: () => html`
-    <div style="display: flex; align-items: center; padding: 24px; background: #f5f5f5; height: 100px;">
-      <div style="flex: 1; color: #333; text-align: center;">
-        <strong>Left Section</strong>
-        <p style="margin: 8px 0 0; font-size: 14px;">Content on the left</p>
-      </div>
-      <rel-divider orientation="vertical"></rel-divider>
-      <div style="flex: 1; color: #333; text-align: center;">
-        <strong>Right Section</strong>
-        <p style="margin: 8px 0 0; font-size: 14px;">Content on the right</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Multiple horizontal dividers
- */
-export const MultipleHorizontal: Story = {
-  render: () => html`
-    <div style="padding: 24px; background: #f5f5f5;">
-      <div style="color: #333;">
-        <h3 style="margin: 0 0 8px;">Section 1</h3>
-        <p style="margin: 0;">First section content with important information.</p>
-      </div>
-
-      <rel-divider orientation="horizontal"></rel-divider>
-
-      <div style="color: #333;">
-        <h3 style="margin: 0 0 8px;">Section 2</h3>
-        <p style="margin: 0;">Second section with different content.</p>
-      </div>
-
-      <rel-divider orientation="horizontal"></rel-divider>
-
-      <div style="color: #333;">
-        <h3 style="margin: 0 0 8px;">Section 3</h3>
-        <p style="margin: 0;">Third section completing the layout.</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Multiple vertical dividers
- */
-export const MultipleVertical: Story = {
-  render: () => html`
-    <div style="display: flex; align-items: stretch; padding: 24px; background: #f5f5f5; height: 120px;">
-      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
-        <strong>Column 1</strong>
-        <p style="margin: 8px 0 0; font-size: 13px;">First</p>
-      </div>
-
-      <rel-divider orientation="vertical"></rel-divider>
-
-      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
-        <strong>Column 2</strong>
-        <p style="margin: 8px 0 0; font-size: 13px;">Second</p>
-      </div>
-
-      <rel-divider orientation="vertical"></rel-divider>
-
-      <div style="flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #333;">
-        <strong>Column 3</strong>
-        <p style="margin: 8px 0 0; font-size: 13px;">Third</p>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * In a card layout
- */
-export const InCardLayout: Story = {
-  render: () => html`
-    <div style="max-width: 500px; background: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); padding: 24px;">
-      <h2 style="margin: 0 0 8px; color: #333; font-size: 20px;">User Profile</h2>
-      <p style="margin: 0; color: #666; font-size: 14px;">Personal information</p>
-
-      <rel-divider orientation="horizontal"></rel-divider>
-
-      <div style="color: #333;">
-        <div style="margin-bottom: 12px;">
-          <strong>Name:</strong> John Doe
-        </div>
-        <div style="margin-bottom: 12px;">
-          <strong>Email:</strong> john.doe@example.com
-        </div>
-        <div>
-          <strong>Role:</strong> Developer
-        </div>
-      </div>
-
-      <rel-divider orientation="horizontal"></rel-divider>
-
-      <div style="display: flex; gap: 12px;">
-        <button style="flex: 1; padding: 10px; background: #0059F4; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
-          Edit Profile
-        </button>
-        <button style="flex: 1; padding: 10px; background: #f5f5f5; color: #333; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
-          Cancel
-        </button>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * In a navigation layout
- */
-export const InNavigation: Story = {
-  render: () => html`
-    <div style="display: flex; align-items: center; padding: 16px 24px; background: white; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
-      <div style="font-weight: 700; font-size: 18px; color: #333; margin-right: 24px;">
-        Logo
-      </div>
-
-      <rel-divider orientation="vertical" style="height: 30px;"></rel-divider>
-
-      <nav style="display: flex; align-items: center; gap: 24px; margin-left: 24px; flex: 1;">
-        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Home</a>
-        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Products</a>
-        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">About</a>
-        <a href="#" style="color: #333; text-decoration: none; font-weight: 500;">Contact</a>
-      </nav>
-
-      <rel-divider orientation="vertical" style="height: 30px;"></rel-divider>
-
-      <button style="margin-left: 24px; padding: 8px 16px; background: #0059F4; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 600;">
-        Sign In
-      </button>
-    </div>
-  `,
-};
-
-/**
- * All orientations showcase
- */
-export const AllOrientations: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px;">
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">Horizontal Divider</h3>
-        <div style="background: #f5f5f5; padding: 20px;">
-          <p style="margin: 0; color: #333;">Content above</p>
-          <rel-divider orientation="horizontal"></rel-divider>
-          <p style="margin: 0; color: #333;">Content below</p>
-        </div>
-      </div>
-
-      <div>
-        <h3 style="margin-bottom: 16px; font-size: 16px; font-weight: 600; color: #333;">Vertical Divider</h3>
-        <div style="display: flex; background: #f5f5f5; padding: 20px; height: 80px;">
-          <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #333;">
-            Left
-          </div>
-          <rel-divider orientation="vertical"></rel-divider>
-          <div style="flex: 1; display: flex; align-items: center; justify-content: center; color: #333;">
-            Right
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};