@reliability-design/web 1.0.3 → 1.1.1

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

@@ -10,6 +10,17 @@ export class RelCheckbox extends LitElement {
   @property({ type: String }) supportingtext = "";
   @property({ type: String }) state: CheckboxState = "default";
   @property({ type: String }) status: CheckboxStatus = "unchecked";
+  @property({ type: String }) value = "";
+
+  get checked(): boolean {
+    return this.status === "checked";
+  }
+  set checked(val: boolean) {
+    this.status = val ? "checked" : "unchecked";
+  }
+
+  private _onChange: (value: boolean) => void = () => {};
+  private _onTouched: () => void = () => {};
 
   static styles = css`
     :host {
@@ -40,12 +51,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 +73,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 {
@@ -78,19 +95,35 @@ export class RelCheckbox extends LitElement {
       border-color: var(--rel-colors-red-primary);
     }
 
+    /* Pin checkmark/dash to white on red background — correct in both themes */
+    .error.checked svg,
+    .error.indeterminate svg {
+      fill: #ffffff;
+    }
+
     .disabled {
       opacity: 0.55;
       cursor: not-allowed;
     }
 
+    :host([state="disabled"]) {
+      cursor: not-allowed;
+    }
+
+    :host([state="disabled"]) * {
+      pointer-events: none;
+    }
+
     .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;
     }
   `;
 
@@ -102,17 +135,22 @@ export class RelCheckbox extends LitElement {
     else this.status = "unchecked";
 
     this.dispatchEvent(
-      new CustomEvent("change", {
+      new CustomEvent("rel-change", {
         detail: {
           checked: this.status === "checked",
-          indeterminate: this.status === "indeterminate",
+          value: this.value,
         },
         bubbles: true,
         composed: true,
       })
     );
+    this._onChange(this.checked);
   }
 
+  registerOnChange(fn: (value: boolean) => void): void { this._onChange = fn; }
+  registerOnTouched(fn: () => void): void { this._onTouched = fn; }
+  writeValue(checked: boolean): void { this.checked = checked; }
+
   render() {
     return html`
       <div class="wrapper ${this.state} ${this.status}">
@@ -120,17 +158,18 @@ export class RelCheckbox extends LitElement {
           <input
             type="checkbox"
             @click=${this.toggle}
+            @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}
           />
 
           <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,35 +48,65 @@ 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);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
 
     .chip-blue {
       background: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     .chip-yellow {
       background: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-black);
+      color: #000000;
     }
 
     .chip-red {
       background: var(--rel-colors-red-secondary);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     .chip-green {
       background: var(--rel-colors-green-success);
-      color: var(--rel-colors-white);
+      color: #ffffff;
     }
 
     /* OUTLINE */
     .chip-outline {
       background: transparent;
+      border-color: var(--rel-color-border-default);
+    }
+
+    .chip-blue.chip-outline {
+      color: #000000;
+      background: transparent;
+      border-color: #0059F4;
+    }
+
+    .chip-red.chip-outline {
+      color: #9C1E33;
+      background: transparent;
+      border-color: #9C1E33;
+    }
+
+    .chip-green.chip-outline {
+      color: #00A86B;
+      background: transparent;
+      border-color: #00A86B;
+    }
+
+    .chip-yellow.chip-outline {
+      color: #92400E;
+      background: transparent;
+      border-color: #F2915C;
     }
 
     .chip-avatar {
@@ -86,6 +116,20 @@ export class RelChip extends LitElement {
       object-fit: cover;
     }
 
+    .chip-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 14px;
+      height: 14px;
+      flex-shrink: 0;
+    }
+
+    .chip-icon * {
+      width: 100%;
+      height: 100%;
+    }
+
     .chip-icon ::slotted(svg),
     .chip-icon svg {
       width: 16px;
@@ -97,11 +141,42 @@ 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;
+    }
+
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) .chip-default,
+    :host-context(.dark) .chip-default {
+      color: #ffffff;
+      background: var(--rel-color-bg-secondary);
+    }
+
+    :host-context([data-theme="dark"]) .chip-default.chip-outline,
+    :host-context(.dark) .chip-default.chip-outline {
+      color: #ffffff;
+      border-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .chip-outline,
+    :host-context(.dark) .chip-outline {
+      color: #ffffff;
+      border-color: currentColor;
+    }
   `;
 
   private get classes() {
@@ -149,14 +224,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