@reliability-design/web 1.0.3 → 1.0.6

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

@@ -0,0 +1,77 @@
+# rel-checkbox
+
+## Overview
+A tri-state checkbox component supporting checked, unchecked, and indeterminate states. Includes label and supporting text with built-in error and disabled states for form validation scenarios.
+
+## Usage
+```html
+<!-- Basic example -->
+<rel-checkbox label="Accept terms"></rel-checkbox>
+
+<!-- Example with common options -->
+<rel-checkbox
+  label="Subscribe to newsletter"
+  supportingtext="We'll send you weekly updates"
+  status="unchecked"
+  state="default">
+</rel-checkbox>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `"Label"` | Label text displayed next to the checkbox |
+| `supportingtext` | `string` | `""` | Helper text displayed below the checkbox and label |
+| `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the checkbox |
+| `status` | `"unchecked" \| "checked" \| "indeterminate"` | `"unchecked"` | Current checked state of the checkbox |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `change` | `{ checked: boolean, indeterminate: boolean }` | Fired when checkbox state changes through user interaction |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-md`, `--rel-fontSizes-sm` - Font sizes for label and supporting text
+- `--rel-fontWeights-medium` - Font weight for label
+
+### Color Tokens
+- `--rel-text-heading` - Checkbox border and checked background color
+- `--rel-colors-white` - Checkbox background and checkmark color
+- `--rel-text-primary` - Label text color
+- `--rel-text-placeholder` - Supporting text color
+- `--rel-colors-red-primary` - Error state border and background color
+- `--rel-border-info` - Focus outline color
+
+## Accessibility
+- Uses visually hidden native checkbox input for screen reader support
+- Custom visual checkbox with proper focus indicators
+- Focus visible state with outline offset for keyboard users
+- Label click targets the checkbox for larger interaction area
+- Disabled state communicated through opacity reduction and cursor change
+
+### Keyboard Interactions
+- `Space` - Toggle checkbox state
+- `Tab` - Move focus to/from checkbox
+
+### Focus Behavior
+- Focus outline appears with offset around the custom checkbox box
+- Uses info border color for high contrast
+
+## Notes / Edge Cases
+- Clicking cycles through three states in order: unchecked → checked → indeterminate → unchecked (repeating)
+- When `state="disabled"`, click events are blocked and opacity is reduced to 0.55
+- The indeterminate state displays a horizontal line instead of a checkmark
+- In error state, the checkbox border and checked background use error color
+- Supporting text is positioned below with left padding to align with checkbox content
+- Native checkbox input is visually hidden but maintains accessibility features

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

@@ -40,12 +40,18 @@ export class RelCheckbox extends LitElement {
       width: 18px;
       height: 18px;
       border-radius: 4px;
-      border: 2px solid var(--rel-colors-gray-heading);
-      background: var(--rel-colors-white);
+      border: 2px solid var(--rel-text-heading, #2b2b2b);
+      background: var(--rel-colors-white, #fff);
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.2s;
+      flex-shrink: 0;
+    }
+
+    input:focus-visible + .box {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: 2px;
     }
 
     svg {
@@ -56,8 +62,8 @@ export class RelCheckbox extends LitElement {
 
     .checked .box,
     .indeterminate .box {
-      background: var(--rel-colors-gray-heading);
-      border-color: var(--rel-colors-gray-heading);
+      background: var(--rel-text-heading, #2b2b2b);
+      border-color: var(--rel-text-heading, #2b2b2b);
     }
 
     .checked .check-icon {
@@ -84,13 +90,15 @@ export class RelCheckbox extends LitElement {
     }
 
     .label {
-      font-size: var(--rel-fontSizes-md);
-      font-weight: var(--rel-fontWeights-medium);
+      font-size: var(--rel-fontSizes-md, 14px);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      color: var(--rel-text-primary, #333);
     }
 
     .text {
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-colors-gray-text);
+      font-size: var(--rel-fontSizes-sm, 12px);
+      color: var(--rel-text-placeholder, #a9a9a9);
+      padding-left: 28px;
     }
   `;
 
@@ -124,13 +132,13 @@ export class RelCheckbox extends LitElement {
           />
 
           <span class="box">
-            <svg class="check-icon" viewBox="0 0 18 14" fill="white">
+            <svg class="check-icon" viewBox="0 0 18 14" fill="var(--rel-colors-white, #fff)">
               <path
                 d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
               />
             </svg>
 
-            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="white">
+            <svg class="indeterminate-icon" viewBox="0 0 16 2" fill="var(--rel-colors-white, #fff)">
               <rect width="16" height="2" />
             </svg>
           </span>

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

@@ -0,0 +1,114 @@
+# rel-chip
+
+## Overview
+A compact chip component for displaying tags, labels, or selected options. Supports multiple color tones, avatar/icon decorations, outline variants, and removable functionality. Automatically hides when removed via the `removed` reflected attribute.
+
+## Usage
+```html
+<!-- Basic chip -->
+<rel-chip label="Active"></rel-chip>
+
+<!-- Colored tones -->
+<rel-chip label="Info" tone="blue"></rel-chip>
+<rel-chip label="Warning" tone="yellow"></rel-chip>
+<rel-chip label="Error" tone="red"></rel-chip>
+<rel-chip label="Success" tone="green"></rel-chip>
+
+<!-- Outline variant -->
+<rel-chip label="Outline Style" tone="blue" outline></rel-chip>
+
+<!-- With avatar -->
+<rel-chip id="avatarChip" label="John Doe" avatar="./user.jpg"></rel-chip>
+
+<!-- With leading icon (SVG string via JS) -->
+<rel-chip id="iconChip" label="Tagged"></rel-chip>
+<script>
+  const chip = document.getElementById('iconChip');
+  chip.leadingIcon = '<svg viewBox="0 0 16 16"><path d="M8 0l2 6h6l-5 4 2 6-5-4-5 4 2-6-5-4h6z"/></svg>';
+</script>
+
+<!-- Removable chip -->
+<rel-chip id="removableChip" label="Removable" removable></rel-chip>
+<script>
+  const removableChip = document.getElementById('removableChip');
+  removableChip.addEventListener('removed', () => {
+    console.log('Chip was removed');
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `"Label"` | Text displayed on the chip |
+| `tone` | `"default" \| "blue" \| "yellow" \| "red" \| "green"` | `"default"` | Color tone variant |
+| `leadingIcon` | `string` | - | SVG or HTML string for leading icon |
+| `trailingIcon` | `string` | - | SVG or HTML string for trailing icon |
+| `avatar` | `string` | - | Image URL for avatar (circular image before label) |
+| `removable` | `boolean` | `false` | Shows a remove button (✕) |
+| `outline` | `boolean` | `false` | Applies outline styling (transparent background) |
+| `removed` | `boolean` (reflected) | `false` | When true, component hides via `:host([removed])` |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `removed` | None | Fired when the remove button is clicked (sets `removed` to true) |
+
+## 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
+
+### Spacing Tokens
+- `--rel-spacing-space-2xs` - Padding and internal gaps
+- `--rel-spacing-space-sm` - Horizontal padding
+- `--rel-spacing-space-3xs` - Remove button margin
+
+### Color Tokens (by tone)
+- **default**: `--rel-colors-gray-border` (background), `--rel-colors-black` (text)
+- **blue**: `--rel-colors-blue-tertiary` (background), `--rel-colors-white` (text)
+- **yellow**: `--rel-colors-yellow-pending` (background), `--rel-colors-black` (text)
+- **red**: `--rel-colors-red-secondary` (background), `--rel-colors-white` (text)
+- **green**: `--rel-colors-green-success` (background), `--rel-colors-white` (text)
+
+### Border & Shadow Tokens
+- `--rel-borders-radius-border-radius-500` - Border radius (pill shape)
+- `--rel-borders-width-stroke-100` - Border width (used in outline mode)
+- `--rel-shadows-shadow-100` - Hover shadow
+- `--rel-colors-blue-primary` - Focus outline color
+
+## Accessibility
+- Uses `role="button"` and `tabindex="0"` on the main chip element
+- `aria-label` set to the chip's label
+- Remove button has proper `aria-label="Remove {label}"`
+- Focus visible states on chip and remove button with distinct outlines
+- Remove button focus uses white outline for contrast against colored backgrounds
+
+### Keyboard Interactions
+- `Tab` - Focus the chip (or remove button if present)
+- No built-in activation behavior on Enter/Space (purely informational/decorative)
+
+### Focus Behavior
+- Chip focus: 2px blue outline with 2px offset
+- Remove button focus: 2px white outline with 1px offset
+
+## Notes / Edge Cases
+- Icons (`leadingIcon`, `trailingIcon`) must be passed as raw HTML/SVG strings via JavaScript (see examples)
+- Icons are injected using `renderIcon()` which creates a template element and clones the content
+- Avatar images are 20px × 20px circular (`border-radius: 50%`, `object-fit: cover`)
+- When `removed` is set to `true`, the component applies `display: none` via `:host([removed])`
+- `removed` is a reflected attribute, meaning it appears in the HTML when true
+- Clicking the remove button stops propagation to prevent triggering chip-level click handlers
+- **Outline mode** removes the background color but keeps the same text color
+- Hover effect applies `filter: brightness(0.92)` and box-shadow
+- The component is `display: inline-block`, so chips flow inline by default

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

@@ -48,6 +48,11 @@ export class RelChip extends LitElement {
       box-shadow: var(--rel-shadows-shadow-100);
     }
 
+    .chip:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline-offset: 2px;
+    }
+
     /* TONES */
     .chip-default {
       background: var(--rel-colors-gray-border);
@@ -97,11 +102,23 @@ export class RelChip extends LitElement {
       margin-left: var(--rel-spacing-space-3xs);
       cursor: pointer;
       opacity: 0.7;
+      background: none;
+      border: none;
+      color: inherit;
+      font: inherit;
+      padding: 0;
+      line-height: 1;
     }
 
     .chip-remove:hover {
       opacity: 1;
     }
+
+    .chip-remove:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      outline-offset: 1px;
+      border-radius: 2px;
+    }
   `;
 
   private get classes() {
@@ -149,14 +166,13 @@ export class RelChip extends LitElement {
             </span>`
           : null}
         ${this.removable
-          ? html`<span
+          ? html`<button
               class="chip-remove"
-              role="button"
-              aria-label="Remove chip"
+              aria-label="Remove ${this.label}"
               @click=${this.handleRemove}
             >
               ✕
-            </span>`
+            </button>`
           : null}
       </span>
     `;

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

@@ -0,0 +1,99 @@
+# rel-container
+
+## Overview
+A versatile container component providing configurable padding, background colors, and optional shadow. Ideal for wrapping content sections with consistent spacing and theming.
+
+## Usage
+```html
+<!-- Default container (white background, medium padding) -->
+<rel-container>
+  <h2>Section Title</h2>
+  <p>Content goes here</p>
+</rel-container>
+
+<!-- Light background with small padding -->
+<rel-container background="light" padding="sm">
+  <p>Compact section with light background</p>
+</rel-container>
+
+<!-- Large padding with shadow -->
+<rel-container padding="lg" shadow>
+  <h1>Hero Section</h1>
+  <p>With shadow elevation</p>
+</rel-container>
+
+<!-- Transparent background -->
+<rel-container background="none">
+  <div>Content with transparent background</div>
+</rel-container>
+
+<!-- All options combined -->
+<rel-container background="white" padding="md" shadow>
+  <h3>Card-like Container</h3>
+  <p>White background, medium padding, with shadow</p>
+</rel-container>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `padding` | `"sm" \| "md" \| "lg"` | `"md"` | Padding size variant |
+| `shadow` | `boolean` | `false` | Enable box shadow |
+| `background` | `"light" \| "white" \| "none"` | `"white"` | Background color variant |
+
+## Events
+None.
+
+## Slots
+| Slot | Description |
+|------|-------------|
+| (default) | Container content (any HTML elements) |
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Color Tokens
+- `--rel-colors-white` - White background color
+- `--rel-colors-gray-light` - Light background color
+
+### Shadow Tokens
+- `--rel-shadows-shadow-300` - Shadow when `shadow` is true
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-200` - Container border radius
+
+### Spacing Tokens
+- `--rel-spacing-space-xs` - Small padding
+- `--rel-spacing-space-md` - Medium padding
+- `--rel-spacing-space-2xl` - Large padding
+
+## Accessibility
+- Purely presentational container, no specific accessibility features
+- Ensure slotted content includes proper semantic HTML
+
+### Keyboard Interactions
+- None (purely presentational container)
+
+### Focus Behavior
+- No specific focus handling
+
+## Notes / Edge Cases
+- **Padding variants**:
+  - **sm**: Uses `--rel-spacing-space-xs`
+  - **md**: Uses `--rel-spacing-space-md`
+  - **lg**: Uses `--rel-spacing-space-2xl`
+  
+- **Background variants**:
+  - **white**: White background (`--rel-colors-white`)
+  - **light**: Light gray background (`--rel-colors-gray-light`)
+  - **none**: Transparent background
+
+- The component is `display: block` and `width: 100%` with `box-sizing: border-box`
+- All styles are applied to an internal `.reliability-container` div
+- The border-radius is always applied regardless of background variant
+- The shadow is applied via the `--rel-shadows-shadow-300` token when `shadow` is true
+- Slotted content inherits the padding and background from the container

package/dist/components/rel-date-picker/README.md

@@ -0,0 +1,253 @@
+# rel-date-picker
+
+A fully accessible date picker component built with Lit for the Reliability Design System. Features a trigger button with calendar popover including month/year dropdowns.
+
+## Features
+
+- Trigger button with calendar popover
+- Month and year dropdowns for easy navigation
+- Single date selection
+- Optional clear button
+- Min/max date constraints
+- Custom disabled date predicate
+- Keyboard navigation
+- Full ARIA support
+- Token-driven styling
+
+## Usage
+
+### Basic
+
+```html
+<rel-date-picker></rel-date-picker>
+```
+
+### With Value
+
+```html
+<rel-date-picker value="2026-01-16"></rel-date-picker>
+```
+
+### With Label
+
+```html
+<rel-date-picker label="Select appointment date"></rel-date-picker>
+```
+
+### With Min/Max
+
+```html
+<rel-date-picker
+  min="2026-01-01"
+  max="2026-12-31"
+  placeholder="Select a date in 2026"
+></rel-date-picker>
+```
+
+### Clearable
+
+```html
+<rel-date-picker value="2026-01-16" clearable></rel-date-picker>
+```
+
+### Disabled
+
+```html
+<rel-date-picker value="2026-01-16" disabled></rel-date-picker>
+```
+
+### Programmatic Control (JavaScript)
+
+```javascript
+const picker = document.querySelector('rel-date-picker');
+
+// Set value
+picker.value = '2026-01-16';
+
+// Open programmatically
+picker.open = true;
+
+// Custom disabled dates (e.g., disable weekends)
+picker.isDateDisabled = (date) => {
+  const day = date.getDay();
+  return day === 0 || day === 6; // Sunday or Saturday
+};
+
+// Listen to changes
+picker.addEventListener('rel-change', (e) => {
+  console.log('Selected date:', e.detail.value); // "2026-01-16"
+  console.log('Date object:', e.detail.date); // Date object
+});
+
+// Listen to popover open/close
+picker.addEventListener('rel-open-change', (e) => {
+  console.log('Popover open:', e.detail.open); // boolean
+});
+```
+
+## Attributes
+
+| Attribute | Type | Default | Description |
+|-----------|------|---------|-------------|
+| `value` | `string \| null` | `null` | Selected date in ISO format (YYYY-MM-DD) |
+| `placeholder` | `string` | `"Select date"` | Placeholder text when no date selected |
+| `label` | `string \| null` | `null` | Accessible label for the date picker |
+| `disabled` | `boolean` | `false` | Disables all interaction |
+| `required` | `boolean` | `false` | Sets aria-required (no validation logic) |
+| `min` | `string \| null` | `null` | Minimum selectable date (ISO format) |
+| `max` | `string \| null` | `null` | Maximum selectable date (ISO format) |
+| `week-start` | `"sun" \| "mon"` | `"sun"` | First day of the week |
+| `locale` | `string` | `"en-US"` | Locale for month names (uses Intl.DateTimeFormat) |
+| `open` | `boolean` | `false` | Controls popover open state |
+| `close-on-select` | `boolean` | `true` | Close popover after selecting a date |
+| `clearable` | `boolean` | `false` | Show clear button when date is selected |
+
+## 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 selected date changes |
+| `rel-open-change` | `{ open: boolean }` | Fired when popover opens/closes |
+
+## Keyboard Navigation
+
+### Trigger Button
+- **Enter/Space**: Opens the popover
+- **Arrow Down**: Opens the popover
+
+### Inside Calendar
+- **Arrow keys**: Navigate days (left/right) and weeks (up/down)
+- **Home/End**: Jump to week start/end
+- **PageUp/PageDown**: Change month
+- **Shift + PageUp/PageDown**: Change year
+- **Enter/Space**: Select focused day
+- **Escape**: Close popover
+
+### Month/Year Dropdowns
+- **Tab**: Navigate between dropdowns
+- **Click**: Select month or year
+
+## Calendar Features
+
+### Month Dropdown
+- Lists all 12 months localized to the specified locale
+- Scroll through months quickly
+- Current month is highlighted
+
+### Year Dropdown
+- Scrollable list of years
+- Range automatically calculated:
+  - With min/max: Uses constrained range with buffer
+  - Without: Defaults to [currentYear - 100, currentYear + 10]
+- Current year is highlighted
+
+## Custom Disabled Dates
+
+Use the `isDateDisabled` property to implement custom logic:
+
+```javascript
+const picker = document.querySelector('rel-date-picker');
+
+// Disable weekends
+picker.isDateDisabled = (date) => {
+  const day = date.getDay();
+  return day === 0 || day === 6;
+};
+
+// Disable specific dates
+const blackoutDates = ['2026-01-15', '2026-01-20', '2026-01-25'];
+picker.isDateDisabled = (date) => {
+  const iso = date.toISOString().split('T')[0];
+  return blackoutDates.includes(iso);
+};
+
+// Disable dates before today
+picker.isDateDisabled = (date) => {
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
+  return date < today;
+};
+```
+
+## Complete Example
+
+```html
+<rel-date-picker
+  id="appointment-picker"
+  label="Appointment Date"
+  placeholder="Choose a date"
+  min="2026-01-01"
+  max="2026-12-31"
+  clearable
+  required
+></rel-date-picker>
+
+<script>
+  const picker = document.getElementById('appointment-picker');
+
+  // Disable weekends
+  picker.isDateDisabled = (date) => {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+  };
+
+  // Handle selection
+  picker.addEventListener('rel-change', (e) => {
+    if (e.detail.value) {
+      console.log('Appointment scheduled for:', e.detail.value);
+    } else {
+      console.log('Appointment cleared');
+    }
+  });
+
+  // Handle popover state
+  picker.addEventListener('rel-open-change', (e) => {
+    console.log('Calendar', e.detail.open ? 'opened' : 'closed');
+  });
+</script>
+```
+
+## Accessibility
+
+- Trigger button has proper `aria-haspopup`, `aria-expanded`, and `aria-label`
+- Calendar popover uses `role="dialog"`
+- Day buttons use `role="gridcell"` with proper `aria-label` and `aria-selected`
+- All interactive elements are keyboard accessible
+- Focus management:
+  - Opening popover focuses first day
+  - Closing popover returns focus to trigger
+- Visible focus rings on all interactive elements
+- Respects user's locale for month names and date formatting
+
+## 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 all colors
+- `--rel-spacing-*` for spacing
+- `--rel-fontSizes-*`, `--rel-fontWeights-*` for typography
+- `--rel-borders-*` for borders and radius
+- `--rel-shadows-*` for popover shadow
+- Selected date: `--rel-colors-green-primary`
+- Today indicator: `--rel-colors-blue-primary`
+- Focus rings: `--rel-colors-blue-primary`
+
+## Date Format
+
+- **Input/Output**: ISO 8601 format (YYYY-MM-DD)
+- **Display**: Localized format based on `locale` attribute
+- **Example**:
+  - Value: `"2026-01-16"`
+  - Display (en-US): `"January 16, 2026"`
+  - Display (es-ES): `"16 de enero de 2026"`
+
+## Browser Support
+
+Works in all modern browsers with ES2020 support and native Web Components.

package/dist/components/rel-date-picker/index.ts

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