@reliability-design/web 1.0.2 → 1.0.3

package/dist/vars-6ZIUPIU4.css

@@ -0,0 +1,184 @@
+/* AUTO-GENERATED — CLEANED — DO NOT EDIT */
+:root {
+  /* ------------------ BORDER RADII ------------------ */
+  --rel-borders-radius-border-radius-0: 0px;
+  --rel-borders-radius-border-radius-100: 2px;
+  --rel-borders-radius-border-radius-200: 8px;
+  --rel-borders-radius-border-radius-300: 16px;
+  --rel-borders-radius-border-radius-400: 24px;
+  --rel-borders-radius-border-radius-500: 1000px;
+
+  /* ------------------ BORDER WIDTHS ------------------ */
+  --rel-borders-width-stroke-050: 0.5px;
+  --rel-borders-width-stroke-100: 1px;
+  --rel-borders-width-stroke-150: 1.5px;
+  --rel-borders-width-stroke-200: 2px;
+  --rel-borders-width-stroke-300: 3px;
+  --rel-borders-width-stroke-400: 4px;
+
+  /* ------------------ COLORS ------------------ */
+  --rel-colors-green-primary: #00F49C;
+  --rel-colors-green-secondary: #06D98C;
+  --rel-colors-green-tertiary: #00A86B;
+  --rel-colors-green-success: #00A86B;
+  --rel-colors-green-credited: #4CAA47;
+  --rel-colors-green-bg-light: #E8F5E8;
+
+  --rel-colors-black: #000000;
+
+  --rel-colors-gray-primary: #333333;
+  --rel-colors-gray-heading: #2B2B2B;
+  --rel-colors-gray-placeholder: #A9A9A9;
+  --rel-colors-gray-dark-placeholder: #373737;
+  --rel-colors-gray-toast-bg: #404040;
+  --rel-colors-gray-light: #FAFAFA;
+  --rel-colors-gray-warm: #F5F5F4;
+  --rel-colors-gray-border: #DDDDDD;
+  --rel-colors-gray-disabled-text: #9E9E9E;
+  --rel-colors-gray-divider: #BDBDBD;
+  --rel-colors-gray-tab-border: #C4C4C4;
+  --rel-colors-gray-surface: #F5F5F5;
+  --rel-colors-gray-screen-bg: #EEEEEE;
+
+  --rel-colors-red-primary: #CC0000;
+  --rel-colors-red-secondary: #D50000;
+  --rel-colors-red-tertiary: #9C1E33;
+  --rel-colors-red-bg-alert: #FFE8EB;
+  --rel-colors-red-light: #FFDEDE;
+
+  --rel-colors-white: #FFFFFF;
+
+  --rel-colors-blue-primary: #0091EA;
+  --rel-colors-blue-secondary: #4A90E2;
+  --rel-colors-blue-tertiary: #0059F4;
+  --rel-colors-blue-light: #80D8FF;
+  --rel-colors-blue-bg: #E1F2FF;
+
+  --rel-colors-orange-warning: #FF6D00;
+  --rel-colors-orange-expired: #F2915C;
+  --rel-colors-orange-bg-light: #FFE9D9;
+  --rel-colors-orange-bg-counter: #FFF3E0;
+
+  --rel-colors-yellow-pending: #FFBF43;
+
+  --rel-colors-gold: #D6BA00;
+  --rel-colors-gold-light: #F6EFD7;
+  --rel-colors-gold-secondary: #F5F0D3;
+
+  --rel-colors-platinum: #8392C9;
+  --rel-colors-platinum-secondary: #E4E6F2;
+
+  --rel-colors-silver: #BABABA;
+  --rel-colors-silver-secondary: #F0F0F0;
+
+  --rel-colors-bronze: #7D5300;
+  --rel-colors-bronze-secondary: #E2DAC7;
+
+  /* ------------------ SEMANTIC TEXT ------------------ */
+  --rel-text-primary: var(--rel-colors-gray-primary);
+  --rel-text-heading: var(--rel-colors-gray-heading);
+
+  --rel-text-error: var(--rel-colors-red-primary);
+  --rel-text-error-small: var(--rel-colors-red-secondary);
+  --rel-text-error-medium: var(--rel-colors-red-tertiary);
+  --rel-text-error-large: var(--rel-colors-red-tertiary);
+
+  --rel-text-warning: var(--rel-colors-orange-warning);
+  --rel-text-warning-small: var(--rel-colors-orange-expired);
+  --rel-text-warning-medium: var(--rel-colors-yellow-pending);
+  --rel-text-warning-large: var(--rel-colors-orange-warning);
+
+  --rel-text-success: var(--rel-colors-green-success);
+  --rel-text-success-small: var(--rel-colors-green-secondary);
+  --rel-text-success-medium: var(--rel-colors-green-tertiary);
+  --rel-text-success-large: var(--rel-colors-green-success);
+
+  --rel-text-info: var(--rel-colors-blue-primary);
+  --rel-text-info-secondary: var(--rel-colors-blue-secondary);
+  --rel-text-info-hover: var(--rel-colors-blue-tertiary);
+
+  --rel-text-placeholder: var(--rel-colors-gray-placeholder);
+  --rel-text-dark-placeholder: var(--rel-colors-gray-dark-placeholder);
+
+  --rel-text-disabled: var(--rel-colors-gray-disabled-text);
+  --rel-text-credited: var(--rel-colors-green-credited);
+
+  /* ------------------ SEMANTIC ICONS ------------------ */
+  --rel-icon-info: var(--rel-colors-blue-primary);
+  --rel-icon-error: var(--rel-colors-red-primary);
+  --rel-icon-warning: var(--rel-colors-orange-warning);
+  --rel-icon-success: var(--rel-colors-green-success);
+
+  /* ------------------ SEMANTIC BORDERS ------------------ */
+  --rel-border-default: var(--rel-colors-gray-border);
+  --rel-border-error: var(--rel-colors-red-primary);
+  --rel-border-warning: var(--rel-colors-orange-warning);
+  --rel-border-success: var(--rel-colors-green-primary);
+  --rel-border-info: var(--rel-colors-blue-primary);
+  --rel-border-divider: var(--rel-colors-gray-divider);
+  --rel-border-tab: var(--rel-colors-gray-tab-border);
+
+  /* ------------------ SEMANTIC BACKGROUNDS ------------------ */
+  --rel-background-error: var(--rel-colors-red-bg-alert);
+  --rel-background-error-light: var(--rel-colors-red-light);
+  --rel-background-warning: var(--rel-colors-orange-bg-light);
+  --rel-background-warning-counter: var(--rel-colors-orange-bg-counter);
+  --rel-background-success: var(--rel-colors-green-bg-light);
+  --rel-background-info: var(--rel-colors-blue-bg);
+  --rel-background-info-accent: var(--rel-colors-blue-light);
+
+  /* ------------------ SEMANTIC SURFACES ------------------ */
+  --rel-surface-secondary: var(--rel-colors-gray-light);
+  --rel-surface-screen: var(--rel-colors-gray-screen-bg);
+  --rel-surface-surface: var(--rel-colors-gray-surface);
+  --rel-surface-warm: var(--rel-colors-gray-warm);
+  --rel-surface-toast: var(--rel-colors-gray-toast-bg);
+
+  /* ------------------ SHADOWS ------------------ */
+  --rel-shadows-shadow-100: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px rgba(0, 0, 0, 0.15);
+  --rel-shadows-shadow-200: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px rgba(0, 0, 0, 0.15);
+  --rel-shadows-shadow-300: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 4px 8px rgba(0, 0, 0, 0.15);
+  --rel-shadows-shadow-400: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px rgba(0, 0, 0, 0.15);
+  --rel-shadows-shadow-500: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px rgba(0, 0, 0, 0.15);
+
+  /* ------------------ SPACING ------------------ */
+  --rel-spacing-space-3xs: 2px;
+  --rel-spacing-space-2xs: 4px;
+  --rel-spacing-space-xs: 8px;
+  --rel-spacing-space-sm: 12px;
+  --rel-spacing-space-md: 16px;
+  --rel-spacing-space-lg: 20px;
+  --rel-spacing-space-xl: 24px;
+  --rel-spacing-space-2xl: 32px;
+  --rel-spacing-space-3xl: 48px;
+
+  /* ------------------ TYPOGRAPHY ------------------ */
+  --rel-fontFamilies-primary: Poppins, sans-serif;
+
+  --rel-fontWeights-regular: 400;
+  --rel-fontWeights-medium: 500;
+  --rel-fontWeights-semibold: 600;
+  --rel-fontWeights-bold: 700;
+
+  --rel-fontSizes-3xl: 36px;
+  --rel-fontSizes-2xl: 28px;
+  --rel-fontSizes-xl: 24px;
+  --rel-fontSizes-lg: 20px;
+  --rel-fontSizes-md: 14px;
+  --rel-fontSizes-sm: 12px;
+  --rel-fontSizes-xs: 10px;
+
+  --rel-lineHeights-3xl: 48px;
+  --rel-lineHeights-2xl: 42px;
+  --rel-lineHeights-xl: 36px;
+  --rel-lineHeights-lg: 28px;
+  --rel-lineHeights-md: 20px;
+  --rel-lineHeights-sm: 18px;
+  --rel-lineHeights-xs: 16px;
+  --rel-lineHeights-2xs: 12px;
+
+  --rel-letterSpacing-normal: 0px;
+  --rel-letterSpacing-dense: -0.2px;
+  --rel-letterSpacing-denser: -0.3px;
+  --rel-letterSpacing-densest: -0.54px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reliability-design/web",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -14,7 +14,7 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
-    "./styles/*": "./dist/styles/*"
+    "./vars.css": "./dist/styles/vars.css"
   },
   "files": [
     "dist",

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

@@ -1,313 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components-vite';
-import { html } from 'lit';
-import './rel-accordion';
-
-/**
- * The Accordion component allows users to toggle the visibility of content sections.
- * Built with Lit web components for framework-agnostic usage.
- *
- * ## Features
- * - **Expandable Sections**: Click to expand/collapse content
- * - **Smooth Animation**: Fade-in effect when expanding
- * - **Chevron Indicator**: Rotating chevron shows state
- * - **Customizable Title**: Set accordion header text
- * - **Slotted Content**: Any content can be placed inside
- * - **Open State**: Can be initialized as open or closed
- */
-const meta: Meta = {
-  title: 'Components/Accordion',
-  tags: ['autodocs'],
-  component: 'rel-accordion',
-  argTypes: {
-    title: {
-      control: 'text',
-      description: 'Accordion header title',
-      table: {
-        defaultValue: { summary: 'Accordion' },
-        type: { summary: 'string' },
-      },
-    },
-    open: {
-      control: 'boolean',
-      description: 'Initial open state',
-      table: {
-        defaultValue: { summary: false },
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  render: (args) => html`
-    <rel-accordion
-      title="${args.title || 'Accordion'}"
-      ?open="${args.open}"
-    >
-      ${args.content || 'Accordion content goes here. This section can contain any type of content including text, images, or other components.'}
-    </rel-accordion>
-  `,
-};
-
-export default meta;
-type Story = StoryObj;
-
-/**
- * Default accordion - closed by default
- */
-export const Default: Story = {
-  args: {
-    title: 'What is Reliability Design System?',
-    content: 'Reliability is a modern design system built with web components. It provides a comprehensive set of UI components that work across all JavaScript frameworks.',
-    open: false,
-  },
-};
-
-/**
- * Open accordion - initially expanded
- */
-export const Open: Story = {
-  args: {
-    title: 'Frequently Asked Questions',
-    content: 'This accordion starts in an open state, showing its content immediately. Users can click to collapse it.',
-    open: true,
-  },
-};
-
-/**
- * Simple text content
- */
-export const SimpleText: Story = {
-  args: {
-    title: 'Shipping Information',
-    content: 'We offer free shipping on all orders over $50. Standard delivery takes 3-5 business days.',
-  },
-};
-
-/**
- * Long content - accordion with extensive text
- */
-export const LongContent: Story = {
-  args: {
-    title: 'Privacy Policy',
-    content: `We take your privacy seriously. This privacy policy explains how we collect, use, and protect your personal information.
-
-Data Collection: We collect information you provide directly to us, such as when you create an account, make a purchase, or contact customer support.
-
-Data Usage: We use your information to process transactions, improve our services, and communicate with you about your account.
-
-Data Protection: We implement industry-standard security measures to protect your personal information from unauthorized access or disclosure.`,
-  },
-};
-
-/**
- * Multiple accordions - FAQ section
- */
-export const FAQSection: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Frequently Asked Questions</h2>
-
-      <rel-accordion title="What payment methods do you accept?">
-        We accept all major credit cards (Visa, MasterCard, American Express), PayPal, and Apple Pay.
-      </rel-accordion>
-
-      <rel-accordion title="How long does shipping take?">
-        Standard shipping takes 3-5 business days. Express shipping is available for 1-2 day delivery.
-      </rel-accordion>
-
-      <rel-accordion title="What is your return policy?">
-        We offer a 30-day money-back guarantee. Items must be returned in original condition with all tags attached.
-      </rel-accordion>
-
-      <rel-accordion title="Do you ship internationally?">
-        Yes, we ship to over 100 countries worldwide. Shipping costs and delivery times vary by location.
-      </rel-accordion>
-    </div>
-  `,
-};
-
-/**
- * Product details - accordion for product information
- */
-export const ProductDetails: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Product Information</h2>
-
-      <rel-accordion title="Description" open>
-        Premium wireless headphones with active noise cancellation, 30-hour battery life, and exceptional sound quality. Perfect for music lovers and frequent travelers.
-      </rel-accordion>
-
-      <rel-accordion title="Specifications">
-        <ul style="margin: 0; padding-left: 20px;">
-          <li>Driver Size: 40mm</li>
-          <li>Frequency Response: 20Hz - 20kHz</li>
-          <li>Impedance: 32 Ω</li>
-          <li>Battery Life: 30 hours</li>
-          <li>Charging Time: 2 hours</li>
-          <li>Weight: 250g</li>
-        </ul>
-      </rel-accordion>
-
-      <rel-accordion title="What's in the Box">
-        <ul style="margin: 0; padding-left: 20px;">
-          <li>Wireless Headphones</li>
-          <li>USB-C Charging Cable</li>
-          <li>3.5mm Audio Cable</li>
-          <li>Carrying Case</li>
-          <li>User Manual</li>
-        </ul>
-      </rel-accordion>
-    </div>
-  `,
-};
-
-/**
- * Documentation sections
- */
-export const DocumentationSections: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Component Documentation</h2>
-
-      <rel-accordion title="Installation" open>
-        Install the component via npm:
-        <pre style="background: #1A1A1A; padding: 12px; border-radius: 8px; margin-top: 12px;">
-npm install @reliability/components
-        </pre>
-      </rel-accordion>
-
-      <rel-accordion title="Usage">
-        Import and use the accordion component in your application:
-        <pre style="background: #1A1A1A; padding: 12px; border-radius: 8px; margin-top: 12px;">
-import '@reliability/components/accordion';
-
-&lt;rel-accordion title="My Title"&gt;
-  Content here
-&lt;/rel-accordion&gt;
-        </pre>
-      </rel-accordion>
-
-      <rel-accordion title="Properties">
-        <ul style="margin: 0; padding-left: 20px;">
-          <li><strong>title</strong>: string - Accordion header text</li>
-          <li><strong>open</strong>: boolean - Initial open/closed state</li>
-        </ul>
-      </rel-accordion>
-    </div>
-  `,
-};
-
-/**
- * Settings panels
- */
-export const SettingsPanels: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <h2 style="color: #00F49C; margin: 0 0 16px 0;">Account Settings</h2>
-
-      <rel-accordion title="Profile Settings">
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-          <div>
-            <label style="display: block; margin-bottom: 4px; color: #fff; font-size: 14px;">Display Name</label>
-            <input type="text" value="John Doe" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #2A2A2A; background: #1A1A1A; color: #fff;">
-          </div>
-          <div>
-            <label style="display: block; margin-bottom: 4px; color: #fff; font-size: 14px;">Email</label>
-            <input type="email" value="john@example.com" style="width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #2A2A2A; background: #1A1A1A; color: #fff;">
-          </div>
-        </div>
-      </rel-accordion>
-
-      <rel-accordion title="Privacy Settings">
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox" checked>
-            Make profile public
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox" checked>
-            Allow email notifications
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox">
-            Share analytics data
-          </label>
-        </div>
-      </rel-accordion>
-
-      <rel-accordion title="Notification Preferences">
-        <div style="display: flex; flex-direction: column; gap: 12px;">
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox" checked>
-            Email notifications
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox" checked>
-            Push notifications
-          </label>
-          <label style="display: flex; align-items: center; gap: 8px; color: #fff;">
-            <input type="checkbox">
-            SMS notifications
-          </label>
-        </div>
-      </rel-accordion>
-    </div>
-  `,
-};
-
-/**
- * Rich content - accordion with various content types
- */
-export const RichContent: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <rel-accordion title="Image Gallery" open>
-        <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px;">
-          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
-          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
-          <div style="aspect-ratio: 1; background: #2A2A2A; border-radius: 8px;"></div>
-        </div>
-      </rel-accordion>
-
-      <rel-accordion title="Video Tutorial">
-        <div style="aspect-ratio: 16/9; background: #2A2A2A; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #999; margin-top: 12px;">
-          Video Player Placeholder
-        </div>
-      </rel-accordion>
-
-      <rel-accordion title="Code Example">
-        <pre style="background: #1A1A1A; padding: 16px; border-radius: 8px; margin-top: 12px; overflow-x: auto;">
-function greet(name) {
-  return \`Hello, \${name}!\`;
-}
-
-console.log(greet('World'));
-        </pre>
-      </rel-accordion>
-    </div>
-  `,
-};
-
-/**
- * All states - various accordion configurations
- */
-export const AllStates: Story = {
-  render: () => html`
-    <div style="display: flex; flex-direction: column; gap: 12px; padding: 24px; background: #000; max-width: 800px;">
-      <rel-accordion title="Closed Accordion (Default)">
-        This accordion is closed by default. Click to expand.
-      </rel-accordion>
-
-      <rel-accordion title="Open Accordion" open>
-        This accordion is open by default. Click to collapse.
-      </rel-accordion>
-
-      <rel-accordion title="Short Content">
-        Brief content.
-      </rel-accordion>
-
-      <rel-accordion title="Long Title: This is an Example of a Very Long Accordion Title That Might Wrap">
-        Content for accordion with long title.
-      </rel-accordion>
-    </div>
-  `,
-};