@reliability-design/web 1.0.2 → 1.0.6

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

@@ -0,0 +1,102 @@
+#rel-breadcrumbs
+
+## Overview
+A breadcrumb navigation component that displays a hierarchical path of pages. Features accessible markup, automatic last-item detection, built-in chevron separators, and proper ARIA attributes. Automatically styles the last item as the current page.
+
+## Usage
+```html
+<!-- Basic breadcrumb -->
+<rel-breadcrumbs id="breadcrumb1"></rel-breadcrumbs>
+<script>
+  const breadcrumb = document.getElementById('breadcrumb1');
+  breadcrumb.items = [
+    { label: 'Home', url: '/' },
+    { label: 'Products', url: '/products' },
+    { label: 'Electronics', url: '/products/electronics' },
+    { label: 'Laptops' } // Last item has no URL
+  ];
+</script>
+
+<!-- Simple path -->
+<rel-breadcrumbs id="breadcrumb2"></rel-breadcrumbs>
+<script>
+  document.getElementById('breadcrumb2').items = [
+    { label: 'Dashboard', url: '/dashboard' },
+    { label: 'Settings' }
+  ];
+</script>
+
+<!-- Deep nested path -->
+<rel-breadcrumbs id="breadcrumb3"></rel-breadcrumbs>
+<script>
+  document.getElementById('breadcrumb3').items = [
+    { label: 'Docs', url: '/docs' },
+    { label: 'Components', url: '/docs/components' },
+    { label: 'Navigation', url: '/docs/components/navigation' },
+    { label: 'Breadcrumbs' }
+  ];
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `BreadcrumbItem[]` | `[]` | Array of breadcrumb items (see BreadcrumbItem interface below) |
+
+### BreadcrumbItem Interface
+```typescript
+interface BreadcrumbItem {
+  label: string;   // Display text
+  url?: string;    // Optional link URL (omit for current/last page)
+}
+```
+
+## Events
+None.
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md` - Font size
+- `--rel-fontWeights-medium` - Font weight for links
+- `--rel-fontWeights-bold` - Font weight for current page
+
+### Color Tokens
+- `--rel-text-primary` - Base text color
+- `--rel-text-heading` - Link and current page text color
+- `--rel-colors-blue-primary` - Link hover color and focus outline
+
+## Accessibility
+- Uses semantic `<nav>` with `aria-label="Breadcrumb"`
+- Uses `<ol>` ordered list for proper structure
+- Last item has `aria-current="page"` to indicate current page
+- Links have focus visible states with blue outline
+- Chevron separator has `aria-hidden="true"` to hide from screen readers
+
+### Keyboard Interactions
+- `Tab` - Navigate through breadcrumb links
+- `Enter` - Follow focused link
+
+### Focus Behavior
+- Links show 2px blue outline with 2px offset when focused
+- Border radius applied to focus outline for visual consistency
+
+## Notes / Edge Cases
+- The last item in `items` array is automatically treated as the current page
+- Last item renders as a `<span class="current">` instead of `<a>`, even if it has a `url`
+- Chevron separators (SVG chevron-right arrows) appear between all items except after the last one
+- Chevrons are 16px × 16px with 10px horizontal margins
+- Chevron color inherits `currentColor` from parent
+- Links have `text-decoration: none` by default, `underline` on hover
+- The current page label is bold and not clickable (`cursor: default`)
+- The component is `display: block` and takes full width
+- The ordered list uses `flex-wrap: wrap` to handle overflow gracefully

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

@@ -1,25 +1,25 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
-interface BreadcrumbItem {
+export interface BreadcrumbItem {
   label: string;
   url?: string;
 }
 
 @customElement("rel-breadcrumbs")
 export class RelBreadcrumbs extends LitElement {
-  @property({ type: Array }) items: BreadcrumbItem[] = [];
+  @property({ type: Array })
+  items: BreadcrumbItem[] = [];
 
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
       font-size: var(--rel-fontSizes-md);
-      color: var(--rel-colors-gray-text);
+      color: var(--rel-text-primary, #333);
     }
 
     nav {
-      display: block;
       width: 100%;
     }
 
@@ -39,23 +39,29 @@ export class RelBreadcrumbs extends LitElement {
     a {
       text-decoration: none;
       font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-text-heading, #2b2b2b);
       transition: color 0.2s ease;
     }
 
     a:hover {
       text-decoration: underline;
-      color: var(--rel-colors-primary);
+      color: var(--rel-colors-blue-primary, #0091ea);
+    }
+
+    a:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline-offset: 2px;
+      border-radius: 2px;
     }
 
     .current {
       font-weight: var(--rel-fontWeights-bold);
-      color: var(--rel-colors-black);
+      color: var(--rel-text-heading, #2b2b2b);
       cursor: default;
     }
 
     svg {
-      stroke: var(--rel-colors-gray-text);
+      stroke: currentColor;
       width: 16px;
       height: 16px;
       margin: 0 10px;
@@ -67,26 +73,26 @@ export class RelBreadcrumbs extends LitElement {
       <nav aria-label="Breadcrumb">
         <ol>
           ${this.items.map((item, index) => {
-            const last = index === this.items.length - 1;
+            const isLast = index === this.items.length - 1;
+
             return html`
               <li>
-                ${item.url && !last
-                  ? html`<a href="${item.url}">${item.label}</a>`
-                  : html`<span class="current">${item.label}</span>`}
-                ${!last
+                ${item.url && !isLast
+                  ? html`<a href=${item.url}>${item.label}</a>`
+                  : html`<span class="current" aria-current="page">${item.label}</span>`}
+                ${!isLast
                   ? html`
-                      <svg viewBox="0 0 24 24">
+                      <svg viewBox="0 0 24 24" aria-hidden="true">
                         <polyline
                           points="9 18 15 12 9 6"
                           fill="none"
-                          stroke="currentColor"
                           stroke-width="2"
                           stroke-linecap="round"
                           stroke-linejoin="round"
-                        ></polyline>
+                        />
                       </svg>
                     `
-                  : ""}
+                  : null}
               </li>
             `;
           })}

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

@@ -0,0 +1,130 @@
+# rel-button
+
+## Overview
+A versatile button component with six variants (default, primary, secondary, text, link, icon), three tone options, three sizes, and configurable border radius. Features hover, active, and focus states with smooth transitions. Slots support custom content including text, icons, or combinations.
+
+## Usage
+```html
+<!-- Basic variants -->
+<rel-button variant="default">Default Button</rel-button>
+<rel-button variant="primary">Primary Button</rel-button>
+<rel-button variant="secondary">Secondary Button</rel-button>
+<rel-button variant="text">Text Button</rel-button>
+<rel-button variant="link">Link Style</rel-button>
+
+<!-- Icon button -->
+<rel-button variant="icon">⚙️</rel-button>
+
+<!-- Tones (affect color scheme) -->
+<rel-button variant="primary" tone="default">Default Tone</rel-button>
+<rel-button variant="primary" tone="critical">Critical Action</rel-button>
+<rel-button variant="primary" tone="success">Success Action</rel-button>
+
+<!-- Sizes -->
+<rel-button size="small">Small</rel-button>
+<rel-button size="medium">Medium</rel-button>
+<rel-button size="large">Large</rel-button>
+
+<!-- Border radius options -->
+<rel-button border="corner-radius">Rounded</rel-button>
+<rel-button border="small-corner-radius">Small Rounded</rel-button>
+<rel-button border="no-corner-radius">Sharp</rel-button>
+
+<!-- Disabled -->
+<rel-button disabled>Disabled Button</rel-button>
+
+<!-- With icon and text (using slot) -->
+<rel-button variant="primary">
+  <svg width="16" height="16" viewBox="0 0 16 16"><path d="M8 0l3 6h6l-5 4 2 6-6-4-6 4 2-6-5-4h6z"/></svg>
+  Save
+</rel-button>
+
+<!-- Listen for click -->
+<rel-button id="actionBtn" variant="primary">Click Me</rel-button>
+<script>
+  document.getElementById('actionBtn').addEventListener('click', () => {
+    console.log('Button clicked');
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `"default" \| "primary" \| "secondary" \| "text" \| "link" \| "icon"` | `"default"` | Visual style variant |
+| `tone` | `"default" \| "critical" \| "success"` | `"default"` | Color tone (affects default/primary variants) |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Button size |
+| `border` | `"corner-radius" \| "small-corner-radius" \| "no-corner-radius"` | `"corner-radius"` | Border radius style |
+| `disabled` | `boolean` (reflected) | `false` | Disables interaction and applies disabled styling |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `click` | `MouseEvent` | Re-dispatched from the internal button (for framework compatibility) |
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Button content (text, icons, or combination) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontWeights-semibold` - Font weight
+- `--rel-fontSizes-sm`, `--rel-fontSizes-md`, `--rel-fontSizes-lg` - Font sizes for sizes
+
+### Spacing Tokens
+- `--rel-spacing-space-2xs` - Internal gap between elements
+- `--rel-spacing-space-md`, `--rel-spacing-space-lg`, `--rel-spacing-space-xl` - Horizontal padding by size
+
+### Color Tokens (by variant/tone)
+- **default + default tone**: `--rel-colors-gray-primary` (bg), `--rel-colors-white` (text)
+- **default + critical tone**: `--rel-colors-red-primary` (bg), `--rel-colors-white` (text)
+- **default + success tone**: `--rel-colors-green-success` (bg), `--rel-colors-white` (text)
+- **primary + default tone**: `--rel-colors-green-primary` (bg), `--rel-colors-black` (text)
+- **primary + critical tone**: `--rel-colors-red-primary` (bg), `--rel-colors-white` (text)
+- **primary + success tone**: `--rel-colors-green-success` (bg), `--rel-colors-white` (text)
+- **secondary**: `--rel-colors-white` (bg), `--rel-colors-black` (text + border)
+- **text**: transparent (bg), `--rel-colors-black` (text)
+- **link**: transparent (bg), `--rel-colors-blue-primary` (text), underlined
+- **icon**: `--rel-colors-gray-light` (bg), `--rel-colors-black` (text), circular (40px × 40px)
+- **disabled**: `--rel-colors-gray-border` (bg), `--rel-colors-gray-disabled-text` (text)
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-500` - Large corner radius
+- `--rel-borders-radius-border-radius-200` - Small corner radius
+- `--rel-borders-radius-border-radius-0` - No corner radius
+
+## Accessibility
+- Uses native `<button>` element for proper semantics
+- `aria-disabled` attribute set on disabled buttons
+- Focus visible state with blue outline
+- Keyboard accessible (Space/Enter activation)
+
+### Keyboard Interactions
+- `Tab` - Focus the button
+- `Space/Enter` - Activate the button
+
+### Focus Behavior
+- Blue 2px outline with 2px offset on focus-visible
+- Focus outline works across all variants
+
+## Notes / Edge Cases
+- **Icon variant** is always circular (40px × 40px), ignores size property, and has no padding
+- **Link variant** has `text-decoration: underline`
+- **Secondary variant** includes a 1px border matching the text color
+- Hover effect applies `filter: brightness(0.92)` to darken
+- Active (pressed) effect applies `transform: scale(0.97)` for tactile feedback
+- Disabled buttons have `pointer-events: none` and use `!important` to override theming
+- The component re-dispatches click events to ensure framework compatibility (e.g., Angular)
+- Clicking a disabled button prevents default and stops propagation
+- Size variants affect height (32px/40px/48px) and horizontal padding
+- The button has `display: inline-flex` with `align-items: center` and `justify-content: center`
+- Internal gap of `var(--rel-spacing-space-2xs)` allows icons + text combinations
+- Transitions are `0.15s ease` for all visual changes

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

@@ -3,23 +3,19 @@ import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-button")
 export class RelButton extends LitElement {
-  @property({ type: String }) variant:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "text"
-    | "link"
-    | "icon" = "default";
-
-  @property({ type: String }) tone: "default" | "critical" | "success" =
+  @property({ type: String })
+  variant: "default" | "primary" | "secondary" | "text" | "link" | "icon" =
     "default";
 
-  @property({ type: String }) size: "small" | "medium" | "large" = "medium";
+  @property({ type: String })
+  tone: "default" | "critical" | "success" = "default";
 
-  @property({ type: String }) border:
-    | "corner-radius"
-    | "small-corner-radius"
-    | "no-corner-radius" = "corner-radius";
+  @property({ type: String })
+  size: "small" | "medium" | "large" = "medium";
+
+  @property({ type: String })
+  border: "corner-radius" | "small-corner-radius" | "no-corner-radius" =
+    "corner-radius";
 
   @property({ type: Boolean, reflect: true }) disabled = false;
 
@@ -41,9 +37,7 @@ export class RelButton extends LitElement {
       outline: none;
     }
 
-    /* -------------------------
-        SIZES (Figma)
-    -------------------------- */
+    /* Sizes */
     .size-small {
       height: 32px;
       padding: 0 var(--rel-spacing-space-md);
@@ -62,9 +56,7 @@ export class RelButton extends LitElement {
       font-size: var(--rel-fontSizes-lg);
     }
 
-    /* -------------------------
-        BORDER RADII (Tokens)
-    -------------------------- */
+    /* Borders */
     .border-corner-radius {
       border-radius: var(--rel-borders-radius-border-radius-500);
     }
@@ -77,24 +69,15 @@ export class RelButton extends LitElement {
       border-radius: var(--rel-borders-radius-border-radius-0);
     }
 
-    /* -------------------------
-        DISABLED STATE
-    -------------------------- */
-    :host([disabled]) button,
-    button:disabled {
+    /* Disabled */
+    :host([disabled]) button {
       cursor: not-allowed;
       background-color: var(--rel-colors-gray-border) !important;
       color: var(--rel-colors-gray-disabled-text) !important;
-      border-color: var(--rel-colors-gray-border) !important;
-      opacity: 1;
       pointer-events: none;
     }
 
-    /* -------------------------
-        VARIANTS & TONES
-    -------------------------- */
-
-    /* DEFAULT */
+    /* Variants & tones (unchanged) */
     .btn-default.tone-default {
       background: var(--rel-colors-gray-primary);
       color: var(--rel-colors-white);
@@ -108,7 +91,6 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
 
-    /* PRIMARY */
     .btn-primary.tone-default {
       background: var(--rel-colors-green-primary);
       color: var(--rel-colors-black);
@@ -122,27 +104,23 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-white);
     }
 
-    /* SECONDARY */
     .btn-secondary {
       background: var(--rel-colors-white);
       border: 1px solid var(--rel-colors-black);
       color: var(--rel-colors-black);
     }
 
-    /* TEXT */
     .btn-text {
       background: transparent;
       color: var(--rel-colors-black);
     }
 
-    /* LINK */
     .btn-link {
       background: transparent;
       color: var(--rel-colors-blue-primary);
       text-decoration: underline;
     }
 
-    /* ICON */
     .btn-icon {
       width: 40px;
       height: 40px;
@@ -152,32 +130,14 @@ export class RelButton extends LitElement {
       color: var(--rel-colors-black);
     }
 
-    /* -------------------------
-        STATES: Hover / Active
-    -------------------------- */
-    button:hover:not(.btn-disabled) {
+    button:hover:not(:disabled) {
       filter: brightness(0.92);
     }
 
-    button:active:not(.btn-disabled) {
+    button:active:not(:disabled) {
       transform: scale(0.97);
     }
 
-    /* TEXT BUTTON — hover border */
-    .btn-text:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-black);
-      text-decoration: none;
-    }
-
-    /* LINK BUTTON — hover border */
-    .btn-link:not(.btn-disabled):hover {
-      border: 1px solid var(--rel-colors-blue-primary);
-      text-decoration: underline;
-    }
-
-    /* -------------------------
-        FOCUS RING
-    -------------------------- */
     button:focus-visible {
       outline: 2px solid var(--rel-colors-blue-primary);
       outline-offset: 2px;
@@ -190,13 +150,33 @@ export class RelButton extends LitElement {
       `tone-${this.tone}`,
       `size-${this.size}`,
       `border-${this.border}`,
-      this.disabled ? "btn-disabled" : "",
     ].join(" ");
   }
 
+  private handleClick(e: MouseEvent) {
+    if (this.disabled) {
+      e.preventDefault();
+      e.stopImmediatePropagation();
+      return;
+    }
+
+    // Re-emit click from host (Angular-friendly)
+    this.dispatchEvent(
+      new MouseEvent("click", {
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   render() {
     return html`
-      <button class="${this.classes}" ?disabled=${this.disabled}>
+      <button
+        class="${this.classes}"
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        aria-disabled=${this.disabled}
+      >
         <slot></slot>
       </button>
     `;

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

@@ -0,0 +1,109 @@
+# rel-calendar
+
+A fully accessible calendar component built with Lit for the Reliability Design System.
+
+## Features
+
+- Single date selection
+- Month navigation
+- Keyboard navigation support (arrow keys, Home/End, PageUp/PageDown)
+- Min/max date constraints
+- Custom disabled date predicate
+- Configurable week start (Sunday or Monday)
+- Locale-aware month names
+- Today indicator
+- Full ARIA support
+
+## Usage
+
+```html
+<rel-calendar></rel-calendar>
+```
+
+### With value
+
+```html
+<rel-calendar value="2026-01-16"></rel-calendar>
+```
+
+### With min/max
+
+```html
+<rel-calendar
+  min="2026-01-01"
+  max="2026-12-31"
+></rel-calendar>
+```
+
+### Week starting Monday
+
+```html
+<rel-calendar week-start="mon"></rel-calendar>
+```
+
+### Disabled
+
+```html
+<rel-calendar disabled></rel-calendar>
+```
+
+### Custom disabled dates (JavaScript)
+
+```javascript
+const calendar = document.querySelector('rel-calendar');
+
+// Disable weekends
+calendar.isDateDisabled = (date) => {
+  const day = date.getDay();
+  return day === 0 || day === 6; // Sunday or Saturday
+};
+
+// Listen to changes
+calendar.addEventListener('rel-change', (e) => {
+  console.log('Selected date:', e.detail.value); // "2026-01-16"
+  console.log('Selected date object:', e.detail.date); // Date object
+});
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `string \| null` | `null` | Selected date in ISO format (YYYY-MM-DD) |
+| `min` | `string \| null` | `null` | Minimum selectable date (ISO format) |
+| `max` | `string \| null` | `null` | Maximum selectable date (ISO format) |
+| `disabled` | `boolean` | `false` | Disables all interaction |
+| `week-start` | `"sun" \| "mon"` | `"sun"` | First day of the week |
+| `locale` | `string` | `"en-US"` | Locale for month names (uses Intl.DateTimeFormat) |
+
+## Properties
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `isDateDisabled` | `(date: Date) => boolean` | Custom function to disable specific dates |
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rel-change` | `{ value: string \| null, date: Date \| null }` | Fired when selection changes |
+
+## Keyboard Navigation
+
+- **Arrow keys**: Move focus by day (left/right) and week (up/down)
+- **Home/End**: Jump to start/end of current week
+- **PageUp/PageDown**: Change month
+- **Shift + PageUp/PageDown**: Change year
+- **Enter/Space**: Select focused day
+
+## 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-fontSizes-*`, `--rel-fontWeights-*` for typography
+- `--rel-borders-radius-*` for border radius
+- Focus outline uses `--rel-colors-blue-primary`
+- Selected state uses `--rel-colors-green-primary`

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

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