@reliability-design/web 1.0.2 → 1.0.6

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

@@ -0,0 +1,132 @@
+# rel-accordion
+
+## Overview
+An animated accordion component with a collapsible body section. Features a clickable header with chevron icon rotation, smooth expand/collapse transitions, and keyboard support. Respects reduced motion preferences.
+
+## Usage
+```html
+<!-- Basic accordion -->
+<rel-accordion title="Section 1">
+  <p>This is the content of section 1.</p>
+</rel-accordion>
+
+<!-- Initially open -->
+<rel-accordion title="FAQ: How does it work?" open>
+  <p>This accordion starts in the open state.</p>
+  <ul>
+    <li>Bullet 1</li>
+    <li>Bullet 2</li>
+  </ul>
+</rel-accordion>
+
+<!-- Multiple accordions -->
+<rel-accordion title="Introduction">
+  <p>Introduction content...</p>
+</rel-accordion>
+<rel-accordion title="Features">
+  <p>Features content...</p>
+</rel-accordion>
+<rel-accordion title="Pricing">
+  <p>Pricing content...</p>
+</rel-accordion>
+
+<!-- Listen for open state changes -->
+<rel-accordion id="myAccordion" title="Details"></rel-accordion>
+<script>
+  const accordion = document.getElementById('myAccordion');
+  accordion.addEventListener('open-change', (e) => {
+    console.log('Accordion open:', e.detail); // true or false
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `title` | `string` | `"Accordion"` | Header title text |
+| `open` (reflected) | `boolean` | `false` | Whether the accordion is expanded |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `open-change` | `boolean` | Fired when the accordion is toggled (detail is the new `open` state) |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Accordion body content |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+
+### Font Tokens
+- `--rel-fontSizes-lg` - Title font size (20px)
+- `--rel-fontSizes-md` - Body font size (14px)
+- `--rel-fontWeights-medium` - Title font weight (500)
+
+### Color Tokens
+- `--rel-colors-white` - Background color
+- `--rel-text-heading` - Title text color
+- `--rel-text-primary` - Body text color, icon stroke color
+- `--rel-border-default` - Border color
+- `--rel-border-info` - Focus outline color
+
+### Shadow Tokens
+- `--rel-shadows-shadow-100` - Shadow
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius (8px)
+
+### Spacing Tokens
+- `--rel-spacing-space-md` - Header horizontal padding, body horizontal padding in closed state (16px)
+- `--rel-spacing-space-xl` - Body top padding when open (24px)
+- `--rel-spacing-space-lg` - Body bottom padding when open (20px)
+
+## Accessibility
+- Header uses `role="button"` and `aria-expanded` attribute
+- Header is keyboard accessible with `tabindex="0"`
+- Supports Enter and Space key activation
+- Focus visible outline on keyboard focus
+
+### Keyboard Interactions
+| Key | Action |
+|-----|--------|
+| `Enter` | Toggle accordion open/closed |
+| `Space` | Toggle accordion open/closed |
+| `Tab` | Navigate to/from the header |
+
+### Focus Behavior
+- Header receives focus outline (`outline: 2px solid --rel-border-info`)
+- Focus offset is `-2px` inset
+
+## Notes / Edge Cases
+- **Animation details**:
+  - Chevron rotates 180° when open (`transform: rotate(180deg)`)
+  - Body expands from `max-height: 0` to `max-height: 1000px`
+  - Body padding animates from `0` to full padding when opening
+  - Transitions: `transform 0.25s ease`, `max-height 0.25s ease`, `padding 0.2s ease`
+
+- **Reduced motion**: When `prefers-reduced-motion: reduce`, icon rotation and body transitions are disabled
+
+- **Body rendering**: The slotted content is always in the DOM (not conditionally rendered), but hidden via `max-height: 0` and `overflow: hidden` when closed
+
+- The header has hover styling (`background: --rel-surface-surface`)
+
+- The component is `display: block` and `width: 100%`
+
+- The accordion border is `1px solid` with rounded corners
+
+- The chevron icon is an inline SVG (9-point downward-pointing chevron)
+
+- When closed, the body has `padding: 0 var(--rel-spacing-space-md)` to maintain horizontal padding
+
+- The `open` attribute is reflected in HTML when set
+
+- Multiple accordions can be open simultaneously (no automatic closing of others)

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

@@ -1,24 +1,23 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-accordion")
 export class RelAccordion extends LitElement {
   @property({ type: String }) title = "Accordion";
-  @property({ type: Boolean }) open = false;
+  @property({ type: Boolean, reflect: true }) open = false;
 
   static styles = css`
     :host {
       display: block;
       width: 100%;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
     }
 
     .accordion {
-      background: var(--rel-colors-white);
-      border: 1px solid var(--rel-border-default);
-      border-radius: var(--rel-borders-radius-border-radius-200); /* 8px */
+      background: var(--rel-colors-white, #fff);
+      border: 1px solid var(--rel-border-default, #ddd);
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       box-shadow: var(--rel-shadows-shadow-100);
-      transition: all 0.2s ease;
       overflow: hidden;
     }
 
@@ -27,15 +26,25 @@ export class RelAccordion extends LitElement {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: var(--rel-spacing-space-md); /* 16px */
+      padding: var(--rel-spacing-space-md, 16px);
       cursor: pointer;
       user-select: none;
+      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+    }
+
+    .header:hover {
+      background: var(--rel-surface-surface, #f5f5f5);
+    }
+
+    .header:focus-visible {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: -2px;
     }
 
     .title {
-      font-size: var(--rel-fontSizes-lg); /* 20px */
-      font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-black);
+      font-size: var(--rel-fontSizes-lg, 20px);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-text-heading, #2b2b2b);
     }
 
     /* ICON ----------------------------------------------------- */
@@ -51,41 +60,51 @@ export class RelAccordion extends LitElement {
     .icon svg {
       width: 20px;
       height: 20px;
-      stroke: var(--rel-colors-gray-primary);
+      stroke: var(--rel-text-primary, #333);
       stroke-width: 2;
       fill: none;
       stroke-linecap: round;
       stroke-linejoin: round;
     }
 
-    .rotated {
+    .icon.rotated {
       transform: rotate(180deg);
     }
 
     /* BODY ------------------------------------------------------ */
     .body {
-      padding: var(--rel-spacing-space-xl) var(--rel-spacing-space-md)
-        var(--rel-spacing-space-lg);
-      /* 24px 16px 20px */
-      font-size: var(--rel-fontSizes-lg); /* 20px */
-      color: var(--rel-colors-gray-primary);
-      animation: fadeIn 0.2s ease;
+      overflow: hidden;
+      max-height: 0;
+      padding: 0 var(--rel-spacing-space-md, 16px);
+      font-size: var(--rel-fontSizes-md, 14px);
+      color: var(--rel-text-primary, #333);
+      transition: max-height 0.25s ease, padding 0.2s ease;
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-        transform: translateY(-4px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
+    .body.open {
+      max-height: 1000px;
+      padding: var(--rel-spacing-space-xl, 24px) var(--rel-spacing-space-md, 16px)
+        var(--rel-spacing-space-lg, 20px);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .icon,
+      .body {
+        transition: none;
       }
     }
   `;
 
   private toggle() {
     this.open = !this.open;
+
+    this.dispatchEvent(
+      new CustomEvent<boolean>("open-change", {
+        detail: this.open,
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
 
   private chevron() {
@@ -99,7 +118,17 @@ export class RelAccordion extends LitElement {
   render() {
     return html`
       <div class="accordion">
-        <div class="header" @click=${this.toggle}>
+        <div class="header"
+          role="button"
+          tabindex="0"
+          aria-expanded="${this.open}"
+          @click=${this.toggle}
+          @keydown=${(e: KeyboardEvent) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              this.toggle();
+            }
+          }}>
           <div class="title">${this.title}</div>
 
           <div class="icon ${this.open ? "rotated" : ""}">
@@ -107,7 +136,10 @@ export class RelAccordion extends LitElement {
           </div>
         </div>
 
-        ${this.open ? html`<div class="body"><slot></slot></div>` : ""}
+        <!-- IMPORTANT: slot is ALWAYS rendered -->
+        <div class="body ${this.open ? "open" : ""}">
+          <slot></slot>
+        </div>
       </div>
     `;
   }

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

@@ -0,0 +1,141 @@
+# rel-alert
+
+## Overview
+A versatile alert component for displaying informational, success, warning, error, or neutral messages. Features built-in icons, optional dismissibility, secondary message text, and inline links. Automatically hides when dismissed via the `dismissed` reflected attribute.
+
+## Usage
+```html
+<!-- Basic neutral alert -->
+<rel-alert
+  message1="This is a neutral alert"
+  type="neutral">
+</rel-alert>
+
+<!-- Info alert with secondary message -->
+<rel-alert
+  type="info"
+  message1="System Notification"
+  message2="Your settings have been updated successfully.">
+</rel-alert>
+
+<!-- Success alert -->
+<rel-alert
+  type="success"
+  message1="Operation Completed"
+  message2="Your data has been saved.">
+</rel-alert>
+
+<!-- Warning alert -->
+<rel-alert
+  type="warning"
+  message1="Warning"
+  message2="Please verify your input before continuing.">
+</rel-alert>
+
+<!-- Error alert -->
+<rel-alert
+  type="error"
+  message1="Error Occurred"
+  message2="Unable to process your request.">
+</rel-alert>
+
+<!-- With action link -->
+<rel-alert
+  type="info"
+  message1="Update Available"
+  message2="A new version is ready."
+  urlText="Learn More"
+  urlHref="https://example.com/release-notes">
+</rel-alert>
+
+<!-- Non-dismissible -->
+<rel-alert
+  type="warning"
+  message1="Required Action"
+  dismissible="false">
+</rel-alert>
+
+<!-- Listen for dismiss -->
+<rel-alert id="myAlert" type="success" message1="Success!"></rel-alert>
+<script>
+  const alert = document.getElementById('myAlert');
+  alert.addEventListener('dismiss', () => {
+    console.log('Alert was dismissed');
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `type` | `"info" \| "success" \| "warning" \| "error" \| "neutral"` | `"neutral"` | Alert type determining icon and color scheme |
+| `message1` | `string` | `""` | Primary message text (bold) |
+| `message2` | `string` | - | Optional secondary message text (smaller, slightly transparent) |
+| `urlText` | `string` | - | Link text (shown below messages) |
+| `urlHref` | `string` | - | Link URL (both `urlText` and `urlHref` required for link to show) |
+| `dismissible` | `boolean` | `true` | Whether to show the close (✕) button |
+| `dismissed` | `boolean` (reflected) | `false` | When true, hides the component via `:host([dismissed])` |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `dismiss` | None | Fired when the close button is clicked (sets `dismissed` to true) |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Primary message font size
+- `--rel-fontSizes-sm` - Secondary message and link font size
+- `--rel-fontWeights-medium` - Primary message and link font weight
+- `--rel-fontWeights-semibold` - Used implicitly in link styling
+
+### Spacing Tokens
+- `--rel-spacing-space-xs` - Gap between icon and content
+- `--rel-spacing-space-sm` - Vertical padding
+- `--rel-spacing-space-md` - Horizontal padding
+- `--rel-spacing-space-2xs` - Close button padding
+
+### Color Tokens (by type)
+- **info**: `--rel-background-info` (background), `--rel-text-info` (text), `--rel-icon-info` (icon)
+- **success**: `--rel-background-success`, `--rel-text-success`, `--rel-icon-success`
+- **warning**: `--rel-background-warning`, `--rel-text-warning`, `--rel-icon-warning`
+- **error**: `--rel-background-error`, `--rel-text-error`, `--rel-icon-error`
+- **neutral**: `--rel-colors-white` (background), `--rel-text-primary` (text), `--rel-colors-black` (icon), `--rel-border-default` (border)
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Border radius
+
+## Accessibility
+- Uses `role="alert"` for screen reader announcements
+- Close button has `aria-label="Dismiss"`
+- Focus visible states on close button with 2px outline
+- Secondary message has reduced opacity for visual hierarchy
+
+### Keyboard Interactions
+- `Tab` - Focus the close button (if dismissible)
+- `Space/Enter` - Dismiss the alert (when close button focused)
+
+### Focus Behavior
+- Close button shows 2px outline matching the alert's text color with 2px offset
+- Border radius applied to maintain visual consistency
+
+## Notes / Edge Cases
+- Icons are built-in SVG graphics that change based on `type` (info: ℹ️, success: ✓, warning: ⚠️, error: ❗, neutral: ℹ️)
+- Icon colors are controlled by type-specific `--rel-icon-*` tokens
+- The alert has a minimum width of `360px`
+- Both `urlText` and `urlHref` must be set for the link to appear
+- Links inherit the alert's text color and are underlined
+- `message2` has `opacity: 0.9` for subtle contrast with `message1`
+- When `dismissed` is set to `true`, the component applies `display: none` via `:host([dismissed])`
+- `dismissed` is a reflected attribute, meaning it appears in the HTML when true
+- The close button is always positioned at the right edge via `margin-left: auto`
+- Neutral type includes a 1px border while colored types do not