@reliability-design/web 1.0.3 → 1.1.1

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

@@ -0,0 +1,100 @@
+# rel-divider
+
+## Overview
+A simple divider component supporting horizontal and vertical orientations. Provides a visual separator line with configurable styling via CSS tokens.
+
+## Usage
+```html
+<!-- Horizontal divider (default) -->
+<p>Section 1</p>
+<rel-divider></rel-divider>
+<p>Section 2</p>
+
+<!-- Vertical divider -->
+<div style="display: flex; align-items: center; height: 50px;">
+  <span>Item 1</span>
+  <rel-divider orientation="vertical"></rel-divider>
+  <span>Item 2</span>
+  <rel-divider orientation="vertical"></rel-divider>
+  <span>Item 3</span>
+</div>
+
+<!-- In a toolbar -->
+<div style="display: flex; gap: 16px; align-items: center;">
+  <button>Action 1</button>
+  <rel-divider orientation="vertical"></rel-divider>
+  <button>Action 2</button>
+  <rel-divider orientation="vertical"></rel-divider>
+  <button>Action 3</button>
+</div>
+
+<!-- Between content sections -->
+<section>
+  <h2>Section A</h2>
+  <p>Content A</p>
+</section>
+<rel-divider></rel-divider>
+<section>
+  <h2>Section B</h2>
+  <p>Content B</p>
+</section>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Divider orientation |
+
+## Events
+None.
+
+## Slots
+None.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-colors-gray-primary` - Text color (not used visually, but set)
+
+### Color Tokens
+- `--rel-colors-gray-border` - Divider line color
+
+### Border Tokens
+- `--rel-borders-width-stroke-100` - Line thickness (width/height)
+
+### Spacing Tokens
+- `--rel-spacing-space-md` - Margin around divider
+
+## Accessibility
+- Uses `role="separator"` for proper ARIA semantics
+- Screen readers will announce the divider as a separator
+
+### Keyboard Interactions
+- None (non-interactive element)
+
+### Focus Behavior
+- Does not receive focus
+
+## Notes / Edge Cases
+- **Horizontal orientation**:
+  - `width: 100%`
+  - `height: var(--rel-borders-width-stroke-100)`
+  - `margin: var(--rel-spacing-space-md) 0` (vertical margin)
+  
+- **Vertical orientation**:
+  - `width: var(--rel-borders-width-stroke-100)`
+  - `height: 100%`
+  - `margin: 0 var(--rel-spacing-space-md)` (horizontal margin)
+  - Uses `align-self: stretch` to fill parent height
+
+- The divider is purely visual and has `background: transparent` on the host element
+- The actual divider line is rendered by an internal `.rel-divider` div
+- For vertical dividers to work properly, the parent must have a defined height
+- Vertical dividers use `align-self: stretch` to match the parent's height
+- The divider is `display: block` on the host element

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

@@ -36,6 +36,15 @@
       }
     `;
 
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("role", "separator");
+    }
+
+    updated() {
+      this.setAttribute("aria-orientation", this.orientation ?? "horizontal");
+    }
+
     render() {
       return html`
         <div class="rel-divider ${this.orientation}" role="separator"></div>

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

@@ -0,0 +1,200 @@
+# RelDrawer Component
+
+A flexible, accessible drawer/sheet component for the Reliability Design System.
+
+## Features
+
+- Slides from bottom (default), left, right, or top
+- Overlay/backdrop with configurable dismiss behavior
+- Drag-to-close for bottom drawers (touch & mouse)
+- Focus trapping for modal mode
+- Keyboard navigation (Escape to close, Tab trap)
+- Token-driven styling (no hardcoded colors)
+- Respects `prefers-reduced-motion`
+- Slot-based content API
+
+## Basic Usage
+
+```html
+<rel-drawer open>
+  <h3 slot="title">Drawer Title</h3>
+  <p slot="description">Optional description text</p>
+
+  <p>Your drawer content goes here.</p>
+
+  <div slot="footer">
+    <button>Cancel</button>
+    <button>Save</button>
+  </div>
+</rel-drawer>
+```
+
+## Properties
+
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| `open` | `boolean` | `false` | Controls drawer visibility (reflects) |
+| `side` | `"bottom" \| "left" \| "right" \| "top"` | `"bottom"` | Edge from which drawer slides |
+| `dismissible` | `boolean` | `true` | Allows backdrop/Escape close |
+| `modal` | `boolean` | `true` | Enables focus trap and `aria-modal` |
+| `close-on-backdrop` | `boolean` | `true` | Close when clicking backdrop |
+| `close-on-escape` | `boolean` | `true` | Close when pressing Escape |
+| `show-handle` | `boolean` | `true` | Show handle bar (bottom drawer only) |
+| `draggable` | `boolean` | `true` | Enable drag-to-close (bottom only) |
+| `snap-threshold` | `number` | `0.25` | Drag distance % to trigger close |
+| `max-height` | `string` | `"80vh"` | Max height for bottom/top drawers |
+| `width` | `string` | `"420px"` | Width for left/right drawers |
+| `disabled` | `boolean` | `false` | Disables all interaction |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rel-open-change` | `{ open: boolean }` | Fires when open state changes |
+| `rel-close` | `{ reason: "backdrop" \| "escape" \| "drag" \| "programmatic" }` | Fires when drawer closes |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| (default) | Drawer content body |
+| `title` | Header title text |
+| `description` | Header description text |
+| `footer` | Footer content (buttons, actions) |
+
+## CSS Parts
+
+| Part | Description |
+|------|-------------|
+| `overlay` | Backdrop element |
+| `panel` | Drawer panel container |
+| `handle` | Drag handle bar |
+| `header` | Header container |
+| `content` | Content container |
+| `footer` | Footer container |
+| `close-button` | Close button (X) |
+
+## Examples
+
+### Bottom Sheet (Mobile-style)
+
+```html
+<rel-drawer open side="bottom" max-height="60vh">
+  <h3 slot="title">Select an option</h3>
+  <ul>
+    <li>Option 1</li>
+    <li>Option 2</li>
+    <li>Option 3</li>
+  </ul>
+</rel-drawer>
+```
+
+### Side Panel (Desktop Navigation)
+
+```html
+<rel-drawer open side="right" width="300px">
+  <h3 slot="title">Navigation</h3>
+  <nav>
+    <a href="/home">Home</a>
+    <a href="/about">About</a>
+    <a href="/contact">Contact</a>
+  </nav>
+</rel-drawer>
+```
+
+### Programmatic Control
+
+```javascript
+const drawer = document.querySelector('rel-drawer');
+
+// Open drawer
+drawer.open = true;
+
+// Close drawer
+drawer.open = false;
+
+// Listen for close event
+drawer.addEventListener('rel-close', (e) => {
+  console.log('Closed via:', e.detail.reason);
+});
+```
+
+### Non-Modal Drawer
+
+```html
+<rel-drawer open modal="false" dismissible="false">
+  <!-- Doesn't trap focus, can't be dismissed -->
+  <p>Persistent sidebar content</p>
+</rel-drawer>
+```
+
+## Accessibility
+
+- When `modal="true"`:
+  - Sets `role="dialog"` and `aria-modal="true"`
+  - Traps focus within drawer
+  - Returns focus to trigger element on close
+  - Locks body scroll to prevent background scrolling
+- Keyboard support:
+  - `Escape`: Close drawer (if `close-on-escape`)
+  - `Tab`: Cycle focus within drawer (if `modal`)
+- Screen reader: Announced as dialog when opened
+
+## Styling
+
+The drawer uses design system tokens for all colors, spacing, shadows, and borders. You can customize appearance using CSS parts:
+
+```css
+rel-drawer::part(overlay) {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+rel-drawer::part(panel) {
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
+}
+
+rel-drawer::part(handle) {
+  background: var(--rel-colors-blue-primary);
+}
+```
+
+## Framework Integration
+
+### React
+
+```jsx
+<RelDrawer
+  open={isOpen}
+  onRelClose={(e) => setIsOpen(false)}
+  side="right"
+>
+  <span slot="title">Settings</span>
+  <SettingsForm />
+</RelDrawer>
+```
+
+### Angular
+
+```html
+<rel-drawer
+  [open]="isOpen"
+  (rel-close)="isOpen = false"
+  side="left"
+>
+  <span slot="title">Menu</span>
+  <app-menu></app-menu>
+</rel-drawer>
+```
+
+### Vue
+
+```vue
+<rel-drawer
+  :open="isOpen"
+  @rel-close="isOpen = false"
+  side="bottom"
+>
+  <template #title>Options</template>
+  <OptionsPanel />
+</rel-drawer>
+```

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

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

package/dist/components/rel-drawer/rel-drawer-footer.ts

@@ -0,0 +1,29 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-drawer-footer")
+export class RelDrawerFooter extends LitElement {
+  static styles = css`
+    .drawer-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--rel-spacing-space-xs);
+      padding-top: var(--rel-spacing-space-md);
+      border-top: 1px solid var(--rel-color-border-divider);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="drawer-footer">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-drawer-footer": RelDrawerFooter;
+  }
+}