@reliability-design/web 1.0.2 → 1.0.6

package/dist/components/rel-cardmedia/README.md

@@ -0,0 +1,127 @@
+# rel-card-media
+
+## Overview
+A media-rich card component combining an image, title, subtitle, and custom content area. Features automatic image sizing with object-fit, enhanced hover lift effect (4px), and semantic heading structure. Ideal for blog posts, product listings, or media galleries.
+
+## Usage
+```html
+<!-- Basic media card -->
+<rel-card-media
+  imageSrc="./photo.jpg"
+  imageAlt="Beautiful landscape"
+  title="Card Title"
+  subtitle="Card subtitle or description">
+</rel-card-media>
+
+<!-- With custom slotted content -->
+<rel-card-media
+  imageSrc="./product.jpg"
+  imageAlt="Product image"
+  title="Premium Product"
+  subtitle="$99.99">
+  <p>Additional product details go here.</p>
+  <button>Buy Now</button>
+</rel-card-media>
+
+<!-- Without image -->
+<rel-card-media
+  title="Text-Only Card"
+  subtitle="No image provided">
+  <p>This card has no image, just title, subtitle, and content.</p>
+</rel-card-media>
+
+<!-- With title only -->
+<rel-card-media
+  imageSrc="./banner.jpg"
+  imageAlt="Banner"
+  title="Event Title">
+  <p>Event description and details.</p>
+</rel-card-media>
+
+<!-- Gallery layout -->
+<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
+  <rel-card-media
+    imageSrc="./img1.jpg"
+    title="Gallery Item 1">
+  </rel-card-media>
+  <rel-card-media
+    imageSrc="./img2.jpg"
+    title="Gallery Item 2">
+  </rel-card-media>
+  <rel-card-media
+    imageSrc="./img3.jpg"
+    title="Gallery Item 3">
+  </rel-card-media>
+</div>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `imageSrc` | `string` | `""` | URL of the card image (optional) |
+| `imageAlt` | `string` | `"Card image"` | Alt text for the image (for accessibility) |
+| `title` | `string` | `""` | Card title displayed as `<h3>` (optional) |
+| `subtitle` | `string` | `""` | Card subtitle displayed as `<p>` (optional) |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Additional content rendered below title and subtitle |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Title font size
+- `--rel-fontSizes-sm` - Subtitle font size
+- `--rel-fontWeights-semibold` - Title font weight
+
+### Color Tokens
+- `--rel-colors-white` - Card background color
+- `--rel-text-primary` - General text color
+- `--rel-text-heading` - Title color
+
+### Shadow Tokens
+- `--rel-shadows-shadow-200` - Default elevation shadow
+- `--rel-shadows-shadow-300` - Hover elevation shadow (larger)
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Card border radius
+
+### Spacing Tokens
+- `--rel-spacing-space-md` - Content area padding
+
+## Accessibility
+- Image has `alt` attribute for screen reader support
+- Title uses semantic `<h3>` heading
+- Subtitle uses `<p>` for proper text hierarchy
+- Hover effect is purely visual and does not affect accessibility
+
+### Keyboard Interactions
+- None (purely presentational container)
+- Ensure slotted interactive elements are keyboard accessible
+
+### Focus Behavior
+- Does not receive focus (container only)
+
+## Notes / Edge Cases
+- **Image rendering**: If `imageSrc` is not provided or empty, the image section is not rendered
+- **Image sizing**: The image uses `width: 100%`, `height: auto`, and `object-fit: cover` for responsive scaling
+- The image is `display: block` to remove default inline spacing
+- **Title and subtitle**: Both are optional; if not provided, their respective elements are not rendered
+- Title has `margin: 0 0 4px 0` for spacing from subtitle
+- Subtitle has `margin: 0 0 8px 0` for spacing from slotted content
+- **Hover effect**: Translates the card upward by 4px (`translateY(-4px)`) and increases shadow depth (1px more than rel-card)
+- **Animation**: Uses `transition: transform 0.2s ease, box-shadow 0.2s ease`
+- **Motion preferences**: When `prefers-reduced-motion: reduce`, both hover transform and transitions are disabled
+- The card uses `overflow: hidden` to ensure image respects border radius
+- The `.card-content` wrapper provides consistent padding for title, subtitle, and slotted content
+- The component is `display: block` and takes full width of its container

package/dist/components/rel-cardmedia/rel-cardmedia.ts

@@ -11,24 +11,30 @@ export class RelCardMedia extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
 
     .card-media {
-      background-color: var(--rel-colors-white, #ffffff);
-      border-radius: var(--rel-borderRadius-lg, 12px);
+      background-color: var(--rel-colors-white, #fff);
+      color: var(--rel-text-primary, #333);
+      border-radius: var(--rel-borders-radius-border-radius-300);
       overflow: hidden;
-
-      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3),
-        0px 8px 12px 6px rgba(0, 0, 0, 0.15);
-
+      box-shadow: var(--rel-shadows-shadow-200);
       transition: transform 0.2s ease, box-shadow 0.2s ease;
     }
 
     .card-media:hover {
       transform: translateY(-4px);
-      box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.35),
-        0px 10px 16px 6px rgba(0, 0, 0, 0.2);
+      box-shadow: var(--rel-shadows-shadow-300);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card-media {
+        transition: none;
+      }
+      .card-media:hover {
+        transform: none;
+      }
     }
 
     .card-image img {
@@ -39,20 +45,20 @@ export class RelCardMedia extends LitElement {
     }
 
     .card-content {
-      padding: var(--rel-spacing-space-md, 16px);
+      padding: var(--rel-spacing-space-md);
     }
 
     .card-content h3 {
       margin: 0 0 4px 0;
-      font-size: var(--rel-fontSizes-md, 16px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-colors-gray-heading, #2b2b2b);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-semibold);
+      color: var(--rel-text-heading, #2b2b2b);
     }
 
     .card-content p {
       margin: 0 0 8px 0;
-      font-size: var(--rel-fontSizes-sm, 14px);
-      color: var(--rel-colors-gray-text, #555);
+      font-size: var(--rel-fontSizes-sm);
+      color: var(--rel-text-primary, #333);
     }
   `;
 
@@ -62,7 +68,7 @@ export class RelCardMedia extends LitElement {
         ${this.imageSrc
           ? html`
               <div class="card-image">
-                <img src="${this.imageSrc}" alt="${this.imageAlt}" />
+                <img src=${this.imageSrc} alt=${this.imageAlt} />
               </div>
             `
           : null}
@@ -70,8 +76,6 @@ export class RelCardMedia extends LitElement {
         <div class="card-content">
           ${this.title ? html`<h3>${this.title}</h3>` : null}
           ${this.subtitle ? html`<p>${this.subtitle}</p>` : null}
-
-          <!-- Slot for extra content such as buttons, descriptions, etc -->
           <slot></slot>
         </div>
       </div>

package/dist/components/rel-carousel/README.md

@@ -0,0 +1,166 @@
+# rel-carousel
+
+A fully accessible carousel component built with Lit for the Reliability Design System.
+
+## Features
+
+- Horizontal sliding carousel
+- Touch/mouse drag support
+- Keyboard navigation
+- Optional autoplay
+- Navigation buttons and dot indicators
+- Loop mode
+- Smooth transitions with reduced motion support
+- Full ARIA support
+
+## Usage
+
+```html
+<rel-carousel>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</rel-carousel>
+```
+
+### With Loop
+
+```html
+<rel-carousel loop>
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</rel-carousel>
+```
+
+### With Autoplay
+
+```html
+<rel-carousel autoplay interval="3000">
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</rel-carousel>
+```
+
+### Without Navigation
+
+```html
+<rel-carousel show-buttons="false" show-dots="false">
+  <div>Slide 1</div>
+  <div>Slide 2</div>
+  <div>Slide 3</div>
+</rel-carousel>
+```
+
+### Programmatic Control (JavaScript)
+
+```javascript
+const carousel = document.querySelector('rel-carousel');
+
+// Navigate to specific slide
+carousel.value = 2;
+
+// Listen to changes
+carousel.addEventListener('rel-change', (e) => {
+  console.log('Current slide:', e.detail.value);
+});
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `number` | `0` | Current slide index (0-based) |
+| `loop` | `boolean` | `false` | Enable infinite loop |
+| `autoplay` | `boolean` | `false` | Enable automatic slide advancement |
+| `interval` | `number` | `5000` | Autoplay interval in milliseconds |
+| `pause-on-hover` | `boolean` | `true` | Pause autoplay on mouse hover |
+| `show-buttons` | `boolean` | `true` | Show prev/next navigation buttons |
+| `show-dots` | `boolean` | `true` | Show dot indicators |
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Carousel orientation (v1: horizontal only) |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Slide alignment in viewport |
+| `slides-per-view` | `number` | `1` | Number of slides visible at once (v1: 1 only) |
+| `gap` | `number` | - | Gap between slides in pixels (optional) |
+| `disabled` | `boolean` | `false` | Disable all interactions |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rel-change` | `{ value: number }` | Fired when active slide changes |
+
+## Keyboard Navigation
+
+- **Arrow Left**: Go to previous slide
+- **Arrow Right**: Go to next slide
+- **Home**: Go to first slide
+- **End**: Go to last slide
+- **Tab**: Navigate through carousel controls
+
+## CSS Parts
+
+Use `::part()` to customize carousel appearance:
+
+```css
+rel-carousel::part(viewport) {
+  border-radius: 12px;
+}
+
+rel-carousel::part(prev-button),
+rel-carousel::part(next-button) {
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+}
+
+rel-carousel::part(dot) {
+  width: 10px;
+  height: 10px;
+}
+```
+
+Available parts:
+- `viewport` - The carousel viewport container
+- `track` - The sliding track container
+- `prev-button` - Previous navigation button
+- `next-button` - Next navigation button
+- `dots` - Dots container
+- `dot` - Individual dot indicator
+
+## Accessibility
+
+- Carousel uses `role="region"` with `aria-roledescription="carousel"`
+- Each slide has proper ARIA labels
+- Navigation buttons have descriptive `aria-label` attributes
+- Supports keyboard navigation
+- Respects `prefers-reduced-motion` user preference
+
+## Styling
+
+The component uses design tokens from the Reliability Design System. All colors, spacing, and typography are inherited from CSS variables.
+
+Key tokens used:
+- `--rel-colors-*` for colors
+- `--rel-spacing-*` for spacing
+- `--rel-shadows-*` for shadows
+- `--rel-border-*` for borders
+- Focus outline uses `--rel-colors-blue-primary`
+- Active dot uses `--rel-colors-green-primary`
+
+## Interaction
+
+### Mouse/Touch Drag
+- Click and drag to swipe between slides
+- Threshold-based snap: swipe 20% of slide width to trigger navigation
+- Smooth animation on release
+
+### Autoplay
+- Automatically advances slides at specified interval
+- Pauses on hover (configurable via `pause-on-hover`)
+- Pauses during manual interaction
+- Resumes after interaction ends
+
+### Reduced Motion
+- Component respects `prefers-reduced-motion` media query
+- Disables or reduces transitions when user prefers reduced motion
+- Drag interactions remain functional but with instant snap

package/dist/components/rel-carousel/index.ts

@@ -0,0 +1 @@
+export * from "./rel-carousel";