@reliability-design/web 1.0.2 → 1.0.3

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

@@ -1,306 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-breadcrumb';
-
-/**
- * The Breadcrumbs component displays hierarchical navigation showing the user's location.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **Hierarchical Navigation**: Shows path from root to current page
- * - **Clickable Links**: All items except current page are clickable
- * - **Chevron Separators**: Visual arrow separators between items
- * - **Current Page Indicator**: Bold styling for current location
- * - **Accessible**: Uses semantic nav and aria-label for screen readers
- * - **Flexible**: Supports any number of navigation levels
- */
-const meta: Meta = {
-  title: 'Components/Breadcrumbs',
-  tags: ['autodocs'],
-  component: 'rel-breadcrumbs',
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Array of breadcrumb items with label and optional url',
-      table: {
-        type: { summary: 'BreadcrumbItem[]' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-breadcrumbs .items="${args.items}"></rel-breadcrumbs>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Simple breadcrumb - two levels
- */
-export const Simple: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Products' },
-    ],
-  },
-};
-
-/**
- * Three levels - typical navigation depth
- */
-export const ThreeLevels: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Products', url: '#products' },
-      { label: 'Electronics' },
-    ],
-  },
-};
-
-/**
- * Deep navigation - four levels
- */
-export const DeepNavigation: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Products', url: '#products' },
-      { label: 'Electronics', url: '#electronics' },
-      { label: 'Laptops' },
-    ],
-  },
-};
-
-/**
- * Very deep - five levels
- */
-export const VeryDeep: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Products', url: '#products' },
-      { label: 'Electronics', url: '#electronics' },
-      { label: 'Laptops', url: '#laptops' },
-      { label: 'Gaming Laptops' },
-    ],
-  },
-};
-
-/**
- * E-commerce example - product category navigation
- */
-export const EcommerceExample: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Shop', url: '#shop' },
-      { label: 'Electronics', url: '#electronics' },
-      { label: 'Computers', url: '#computers' },
-      { label: 'MacBook Pro 16"' },
-    ],
-  },
-};
-
-/**
- * Documentation example - docs site navigation
- */
-export const DocumentationExample: Story = {
-  args: {
-    items: [
-      { label: 'Docs', url: '#docs' },
-      { label: 'Components', url: '#components' },
-      { label: 'Navigation', url: '#navigation' },
-      { label: 'Breadcrumbs' },
-    ],
-  },
-};
-
-/**
- * Dashboard example - app navigation
- */
-export const DashboardExample: Story = {
-  args: {
-    items: [
-      { label: 'Dashboard', url: '#dashboard' },
-      { label: 'Users', url: '#users' },
-      { label: 'User Details' },
-    ],
-  },
-};
-
-/**
- * Settings example - nested settings
- */
-export const SettingsExample: Story = {
-  args: {
-    items: [
-      { label: 'Settings', url: '#settings' },
-      { label: 'Account', url: '#account' },
-      { label: 'Privacy', url: '#privacy' },
-      { label: 'Data & Permissions' },
-    ],
-  },
-};
-
-/**
- * File system example - file browser navigation
- */
-export const FileSystemExample: Story = {
-  args: {
-    items: [
-      { label: 'Root', url: '#' },
-      { label: 'Documents', url: '#documents' },
-      { label: 'Work', url: '#work' },
-      { label: 'Projects', url: '#projects' },
-      { label: '2024', url: '#2024' },
-      { label: 'Q4 Report.pdf' },
-    ],
-  },
-};
-
-/**
- * Various depths - different navigation levels
- */
-export const VariousDepths: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Two Levels</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Home', url: '#' },
-          { label: 'Products' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Three Levels</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Home', url: '#' },
-          { label: 'Products', url: '#products' },
-          { label: 'Electronics' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Four Levels</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Home', url: '#' },
-          { label: 'Products', url: '#products' },
-          { label: 'Electronics', url: '#electronics' },
-          { label: 'Laptops' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <div>
-        <p style="color: #00F49C; margin: 0 0 12px 0; font-weight: 600;">Five Levels</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Home', url: '#' },
-          { label: 'Products', url: '#products' },
-          { label: 'Electronics', url: '#electronics' },
-          { label: 'Laptops', url: '#laptops' },
-          { label: 'Gaming' },
-        ]}"></rel-breadcrumbs>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Real-world use cases
- */
-export const RealWorldUseCases: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 32px; padding: 24px; background: #000;">
-      <!-- E-commerce Product Page -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">E-commerce Product Page</p>
-        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User browsing a specific product</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Home', url: '#' },
-          { label: 'Men', url: '#men' },
-          { label: 'Clothing', url: '#clothing' },
-          { label: 'T-Shirts', url: '#t-shirts' },
-          { label: 'Classic Fit Cotton Tee' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <!-- Blog Article -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Blog Article</p>
-        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User reading a blog post</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Blog', url: '#blog' },
-          { label: 'Technology', url: '#technology' },
-          { label: 'Web Development', url: '#web-dev' },
-          { label: 'Getting Started with Web Components' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <!-- Admin Panel -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Admin Panel</p>
-        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">Admin managing user permissions</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Admin', url: '#admin' },
-          { label: 'Users', url: '#users' },
-          { label: 'John Doe', url: '#user-123' },
-          { label: 'Permissions' },
-        ]}"></rel-breadcrumbs>
-      </div>
-
-      <!-- Help Center -->
-      <div>
-        <p style="color: #00F49C; margin: 0 0 8px 0; font-weight: 600; font-size: 16px;">Help Center</p>
-        <p style="color: #999; margin: 0 0 12px 0; font-size: 12px;">User searching for help</p>
-        <rel-breadcrumbs .items="${[
-          { label: 'Help Center', url: '#help' },
-          { label: 'Account & Billing', url: '#billing' },
-          { label: 'Subscriptions', url: '#subscriptions' },
-          { label: 'How to Cancel Your Subscription' },
-        ]}"></rel-breadcrumbs>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * Long labels - breadcrumbs with lengthy text
- */
-export const LongLabels: Story = {
-  args: {
-    items: [
-      { label: 'Home', url: '#' },
-      { label: 'Product Categories', url: '#categories' },
-      { label: 'Consumer Electronics and Gadgets', url: '#electronics' },
-      { label: 'High-Performance Gaming Laptops and Workstations' },
-    ],
-  },
-};
-
-/**
- * Single item - minimal breadcrumb
- */
-export const SingleItem: Story = {
-  args: {
-    items: [
-      { label: 'Current Page' },
-    ],
-  },
-};
-
-/**
- * Without URLs - non-clickable breadcrumbs
- */
-export const WithoutURLs: Story = {
-  args: {
-    items: [
-      { label: 'Step 1' },
-      { label: 'Step 2' },
-      { label: 'Step 3' },
-      { label: 'Step 4' },
-    ],
-  },
-};

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

@@ -1,356 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-button';
-
-/**
- * The Button component is a versatile interactive element that supports multiple variants,
- * tones, sizes, and border styles. Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **6 Variants**: default, primary, secondary, text, link, icon
- * - **3 Tones**: default, critical, success
- * - **3 Sizes**: small (32px), medium (40px), large (48px)
- * - **3 Border Styles**: corner-radius (pill), small-corner-radius, no-corner-radius
- * - **Disabled State**: Full accessibility support
- * - **Keyboard Navigation**: Focus ring and keyboard interactions
- */
-const meta: Meta = {
-  title: 'Components/Button',
-  tags: ['autodocs'],
-  component: 'rel-button',
-  argTypes: {
-    variant: {
-      control: { type: 'select' },
-      options: ['default', 'primary', 'secondary', 'text', 'link', 'icon'],
-      description: 'Visual style variant',
-      table: {
-        defaultValue: { summary: 'default' },
-        type: { summary: 'string' },
-      },
-    },
-    tone: {
-      control: { type: 'select' },
-      options: ['default', 'critical', 'success'],
-      description: 'Semantic tone for user feedback',
-      table: {
-        defaultValue: { summary: 'default' },
-        type: { summary: 'string' },
-      },
-    },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-      description: 'Button size',
-      table: {
-        defaultValue: { summary: 'medium' },
-        type: { summary: 'string' },
-      },
-    },
-    border: {
-      control: { type: 'select' },
-      options: ['corner-radius', 'small-corner-radius', 'no-corner-radius'],
-      description: 'Border radius style',
-      table: {
-        defaultValue: { summary: 'corner-radius' },
-        type: { summary: 'string' },
-      },
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled state',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-button
-      variant="${args.variant || 'default'}"
-      tone="${args.tone || 'default'}"
-      size="${args.size || 'medium'}"
-      border="${args.border || 'corner-radius'}"
-      ?disabled="${args.disabled}"
-    >
-      ${args.label || 'Button'}
-    </rel-button>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default button with gray background - standard action button
- */
-export const Default: Story = {
-  args: {
-    variant: 'default',
-    tone: 'default',
-    size: 'medium',
-    label: 'Default Button',
-  },
-};
-
-/**
- * Primary button with neon green background - main call-to-action
- */
-export const Primary: Story = {
-  args: {
-    variant: 'primary',
-    tone: 'default',
-    size: 'medium',
-    label: 'Primary Button',
-  },
-};
-
-/**
- * Secondary button with white background and border - alternative action
- */
-export const Secondary: Story = {
-  args: {
-    variant: 'secondary',
-    size: 'medium',
-    label: 'Secondary Button',
-  },
-};
-
-/**
- * Text button with transparent background - subtle action
- */
-export const Text: Story = {
-  args: {
-    variant: 'text',
-    size: 'medium',
-    label: 'Text Button',
-  },
-};
-
-/**
- * Link button with underlined text - navigation action
- */
-export const Link: Story = {
-  args: {
-    variant: 'link',
-    size: 'medium',
-    label: 'Link Button',
-  },
-};
-
-/**
- * Icon button with circular shape - icon-only action
- */
-export const Icon: Story = {
-  args: {
-    variant: 'icon',
-    label: '✓',
-  },
-};
-
-/**
- * Critical tone - used for destructive or warning actions
- */
-export const Critical: Story = {
-  args: {
-    variant: 'primary',
-    tone: 'critical',
-    size: 'medium',
-    label: 'Delete Account',
-  },
-};
-
-/**
- * Success tone - used for positive confirmation actions
- */
-export const Success: Story = {
-  args: {
-    variant: 'primary',
-    tone: 'success',
-    size: 'medium',
-    label: 'Confirm Payment',
-  },
-};
-
-/**
- * Small size - compact button for tight layouts
- */
-export const Small: Story = {
-  args: {
-    variant: 'primary',
-    size: 'small',
-    label: 'Small Button',
-  },
-};
-
-/**
- * Large size - prominent button for important actions
- */
-export const Large: Story = {
-  args: {
-    variant: 'primary',
-    size: 'large',
-    label: 'Large Button',
-  },
-};
-
-/**
- * Disabled state - non-interactive button
- */
-export const Disabled: Story = {
-  args: {
-    variant: 'primary',
-    size: 'medium',
-    label: 'Disabled Button',
-    disabled: true,
-  },
-};
-
-/**
- * Small corner radius - subtle rounded corners
- */
-export const SmallRadius: Story = {
-  args: {
-    variant: 'primary',
-    size: 'medium',
-    border: 'small-corner-radius',
-    label: 'Small Radius',
-  },
-};
-
-/**
- * No corner radius - sharp rectangular edges
- */
-export const NoRadius: Story = {
-  args: {
-    variant: 'primary',
-    size: 'medium',
-    border: 'no-corner-radius',
-    label: 'No Radius',
-  },
-};
-
-/**
- * All variants showcase - displays all button variants together
- */
-export const AllVariants: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #000;">
-      <div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
-        <rel-button variant="default">Default</rel-button>
-        <rel-button variant="primary">Primary</rel-button>
-        <rel-button variant="secondary">Secondary</rel-button>
-        <rel-button variant="text">Text</rel-button>
-        <rel-button variant="link">Link</rel-button>
-        <rel-button variant="icon">✓</rel-button>
-      </div>
-    </div>
-  `,
-};
-
-/**
- * All sizes showcase - displays all button sizes together
- */
-export const AllSizes: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; align-items: center; padding: 24px; background: #000;">
-      <rel-button variant="primary" size="small">Small (32px)</rel-button>
-      <rel-button variant="primary" size="medium">Medium (40px)</rel-button>
-      <rel-button variant="primary" size="large">Large (48px)</rel-button>
-    </div>
-  `,
-};
-
-/**
- * All tones showcase - displays all semantic tones
- */
-export const AllTones: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
-      <rel-button variant="primary" tone="default">Default</rel-button>
-      <rel-button variant="primary" tone="critical">Critical</rel-button>
-      <rel-button variant="primary" tone="success">Success</rel-button>
-    </div>
-  `,
-};
-
-/**
- * Border radius showcase - displays all border radius options
- */
-export const AllBorderStyles: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
-      <rel-button variant="primary" border="corner-radius">Pill Shape</rel-button>
-      <rel-button variant="primary" border="small-corner-radius">Small Radius</rel-button>
-      <rel-button variant="primary" border="no-corner-radius">No Radius</rel-button>
-    </div>
-  `,
-};
-
-/**
- * Disabled states across variants
- */
-export const DisabledStates: Story = {
-  render: () => html`
-    <div style="display: flex; gap: 16px; padding: 24px; background: #000;">
-      <rel-button variant="default" disabled>Default</rel-button>
-      <rel-button variant="primary" disabled>Primary</rel-button>
-      <rel-button variant="secondary" disabled>Secondary</rel-button>
-      <rel-button variant="text" disabled>Text</rel-button>
-    </div>
-  `,
-};
-
-/**
- * Text button with critical tone - destructive text action
- */
-export const TextCritical: Story = {
-  args: {
-    variant: 'text',
-    tone: 'critical',
-    label: 'Delete',
-  },
-};
-
-/**
- * Text button with success tone - positive text action
- */
-export const TextSuccess: Story = {
-  args: {
-    variant: 'text',
-    tone: 'success',
-    label: 'Approve',
-  },
-};
-
-/**
- * Link button with critical tone - destructive link action
- */
-export const LinkCritical: Story = {
-  args: {
-    variant: 'link',
-    tone: 'critical',
-    label: 'Remove Account',
-  },
-};
-
-/**
- * Icon button with critical tone - destructive icon action
- */
-export const IconCritical: Story = {
-  args: {
-    variant: 'icon',
-    tone: 'critical',
-    label: '✕',
-  },
-};
-
-/**
- * Icon button with success tone - positive icon action
- */
-export const IconSuccess: Story = {
-  args: {
-    variant: 'icon',
-    tone: 'success',
-    label: '✓',
-  },
-};