@reliability-design/web 1.0.2 → 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,75 +40,65 @@ 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;
     }
 
-    /* ICONS FIXED SIZE */
     svg {
       width: 12px;
       height: 12px;
       display: none;
-      pointer-events: none;
     }
 
-    /* CHECKED */
-    .checked .box {
-      background: var(--rel-colors-gray-heading);
-      border-color: var(--rel-colors-gray-heading);
+    .checked .box,
+    .indeterminate .box {
+      background: var(--rel-text-heading, #2b2b2b);
+      border-color: var(--rel-text-heading, #2b2b2b);
     }
+
     .checked .check-icon {
       display: block;
     }
 
-    /* INDETERMINATE */
-    .indeterminate .box {
-      background: var(--rel-colors-gray-heading);
-      border-color: var(--rel-colors-gray-heading);
-    }
     .indeterminate .indeterminate-icon {
       display: block;
     }
 
-    /* ERROR */
     .error .box {
       border-color: var(--rel-colors-red-primary);
     }
+
     .error.checked .box,
     .error.indeterminate .box {
       background: var(--rel-colors-red-primary);
       border-color: var(--rel-colors-red-primary);
     }
-    .error .label,
-    .error .text {
-      color: var(--rel-colors-red-primary);
-    }
 
-    /* DISABLED */
     .disabled {
       opacity: 0.55;
-      cursor: not-allowed !important;
+      cursor: not-allowed;
     }
 
     .label {
-      font-size: var(--rel-fontSizes-md);
-      color: var(--rel-colors-gray-heading);
-      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);
-    }
-
-    /* Focus ring */
-    input:focus-visible + .box {
-      outline: 2px solid var(--rel-colors-blue-primary);
-      outline-offset: 2px;
+      font-size: var(--rel-fontSizes-sm, 12px);
+      color: var(--rel-text-placeholder, #a9a9a9);
+      padding-left: 28px;
     }
   `;
 
@@ -119,35 +109,36 @@ export class RelCheckbox extends LitElement {
     else if (this.status === "checked") this.status = "indeterminate";
     else this.status = "unchecked";
 
-    this.dispatchEvent(new CustomEvent("changed", { detail: this.status }));
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: {
+          checked: this.status === "checked",
+          indeterminate: this.status === "indeterminate",
+        },
+        bubbles: true,
+        composed: true,
+      })
+    );
   }
 
   render() {
-    const className = `
-      wrapper
-      ${this.state}
-      ${this.status}
-    `;
-
     return html`
-      <div class="${className}">
+      <div class="wrapper ${this.state} ${this.status}">
         <label class="row">
           <input
             type="checkbox"
-            @change=${this.toggle}
+            @click=${this.toggle}
             ?disabled=${this.state === "disabled"}
           />
 
           <span class="box">
-            <!-- CHECK ICON -->
-            <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.44479 14L0.5 7.36383L1.9862 5.70478L6.44479 10.6819L16.0138 0L17.5 1.65904L6.44479 14Z"
+                d="M6.44 14L0.5 7.36l1.49-1.66L6.44 10.68 16.01 0 17.5 1.66z"
               />
             </svg>
 
-            <!-- INDETERMINATE ICON -->
-            <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

@@ -1,23 +1,22 @@
 import { LitElement, html, css } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 @customElement("rel-chip")
 export class RelChip extends LitElement {
-  @property({ type: String }) label: string = "Label";
+  @property({ type: String }) label = "Label";
 
-  @property({ type: String }) tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
+  @property({ type: String })
+  tone: "default" | "blue" | "yellow" | "red" | "green" = "default";
 
   @property({ type: String }) leadingIcon?: string;
-
   @property({ type: String }) trailingIcon?: string;
-
   @property({ type: String }) avatar?: string;
 
-  @property({ type: Boolean }) removable: boolean = false;
+  @property({ type: Boolean }) removable = false;
+  @property({ type: Boolean }) outline = false;
 
-  @property({ type: Boolean }) outline: boolean = false;
-
-  @state() private removed: boolean = false;
+  /** IMPORTANT: reflected so CSS + Angular can see it */
+  @property({ type: Boolean, reflect: true }) removed = false;
 
   static styles = css`
     :host {
@@ -38,123 +37,60 @@ export class RelChip extends LitElement {
       padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
       gap: var(--rel-spacing-space-2xs);
       cursor: pointer;
-      transition: all 0.2s ease-in-out;
       border: var(--rel-borders-width-stroke-100) solid transparent;
       user-select: none;
       white-space: nowrap;
+      background: transparent;
     }
 
     .chip:hover {
       filter: brightness(0.92);
-      transform: translateY(-1px);
       box-shadow: var(--rel-shadows-shadow-100);
     }
 
-    .chip:focus:not(:focus-visible) {
-      outline: none;
+    .chip:focus-visible {
+      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline-offset: 2px;
     }
 
-    .chip:active {
-      transform: scale(0.97) translateY(0);
-      box-shadow: none;
-      filter: brightness(0.88);
-    }
-
-    /* Tone Variants - Filled */
+    /* TONES */
     .chip-default {
       background: var(--rel-colors-gray-border);
       color: var(--rel-colors-black);
     }
 
-    .chip-default:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-blue {
       background: var(--rel-colors-blue-tertiary);
       color: var(--rel-colors-white);
     }
 
-    .chip-blue:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-blue-tertiary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-yellow {
       background: var(--rel-colors-yellow-pending);
       color: var(--rel-colors-black);
     }
 
-    .chip-yellow:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-yellow-pending);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-red {
       background: var(--rel-colors-red-secondary);
       color: var(--rel-colors-white);
     }
 
-    .chip-red:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-red-secondary);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
     .chip-green {
       background: var(--rel-colors-green-success);
       color: var(--rel-colors-white);
     }
 
-    .chip-green:focus {
-      outline: var(--rel-borders-width-stroke-200) solid var(--rel-colors-green-success);
-      outline-offset: var(--rel-spacing-space-3xs);
-    }
-
-    /* Outline Variants */
-    .chip-outline.chip-default {
-      background: transparent;
-      border-color: var(--rel-colors-gray-border);
-      color: var(--rel-colors-black);
-    }
-
-    .chip-outline.chip-blue {
-      background: transparent;
-      border-color: var(--rel-colors-blue-tertiary);
-      color: var(--rel-colors-blue-tertiary);
-    }
-
-    .chip-outline.chip-yellow {
+    /* OUTLINE */
+    .chip-outline {
       background: transparent;
-      border-color: var(--rel-colors-yellow-pending);
-      color: var(--rel-colors-yellow-pending);
-    }
-
-    .chip-outline.chip-red {
-      background: transparent;
-      border-color: var(--rel-colors-red-secondary);
-      color: var(--rel-colors-red-secondary);
-    }
-
-    .chip-outline.chip-green {
-      background: transparent;
-      border-color: var(--rel-colors-green-success);
-      color: var(--rel-colors-green-success);
     }
 
     .chip-avatar {
       width: 20px;
       height: 20px;
-      border-radius: var(--rel-borders-radius-border-radius-500);
+      border-radius: 50%;
       object-fit: cover;
     }
 
-    .chip-icon {
-      display: flex;
-      align-items: center;
-      line-height: 0;
-    }
-
     .chip-icon ::slotted(svg),
     .chip-icon svg {
       width: 16px;
@@ -162,24 +98,26 @@ export class RelChip extends LitElement {
       fill: currentColor;
     }
 
-    .chip-label {
-      line-height: var(--rel-lineHeights-md);
-    }
-
     .chip-remove {
-      background: transparent;
+      margin-left: var(--rel-spacing-space-3xs);
+      cursor: pointer;
+      opacity: 0.7;
+      background: none;
       border: none;
       color: inherit;
-      font-size: var(--rel-fontSizes-md);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
+      font: inherit;
       padding: 0;
-      margin-left: var(--rel-spacing-space-3xs);
+      line-height: 1;
     }
 
     .chip-remove:hover {
-      opacity: 0.6;
+      opacity: 1;
+    }
+
+    .chip-remove:focus-visible {
+      outline: 2px solid var(--rel-colors-white, #fff);
+      outline-offset: 1px;
+      border-radius: 2px;
     }
   `;
 
@@ -194,6 +132,7 @@ export class RelChip extends LitElement {
   private handleRemove(event: Event) {
     event.stopPropagation();
     this.removed = true;
+
     this.dispatchEvent(
       new CustomEvent("removed", {
         bubbles: true,
@@ -202,60 +141,46 @@ export class RelChip extends LitElement {
     );
   }
 
-  private handleKeyDown(event: KeyboardEvent) {
-    if (!this.removable) return;
-
-    if (event.key === "Backspace" || event.key === "Delete") {
-      event.preventDefault();
-      this.handleRemove(event);
-    }
-  }
-
   render() {
-    if (this.removed) {
-      return null;
-    }
-
     return html`
-      <button
+      <span
         class="${this.classes}"
-        type="button"
         role="button"
-        aria-label="${this.label}"
-        @keydown=${this.handleKeyDown}
         tabindex="0"
+        aria-label="${this.label}"
       >
         ${this.avatar
-          ? html`<img src="${this.avatar}" alt="avatar" class="chip-avatar" />`
-          : ""}
+          ? html`<img src=${this.avatar} alt="" class="chip-avatar" />`
+          : null}
         ${this.leadingIcon
-          ? html`<span class="chip-icon leading">
-              <slot name="leading-icon">${this.renderIcon(this.leadingIcon)}</slot>
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.leadingIcon)}
             </span>`
-          : ""}
+          : null}
+
         <span class="chip-label">${this.label}</span>
+
         ${this.trailingIcon
-          ? html`<span class="chip-icon trailing">
-              <slot name="trailing-icon">${this.renderIcon(this.trailingIcon)}</slot>
+          ? html`<span class="chip-icon">
+              ${this.renderIcon(this.trailingIcon)}
             </span>`
-          : ""}
+          : null}
         ${this.removable
           ? html`<button
-              type="button"
               class="chip-remove"
+              aria-label="Remove ${this.label}"
               @click=${this.handleRemove}
-              aria-label="Remove chip"
             >
-              
+              ✕
             </button>`
-          : ""}
-      </button>
+          : null}
+      </span>
     `;
   }
 
   private renderIcon(iconString: string) {
     const template = document.createElement("template");
     template.innerHTML = iconString.trim();
-    return html`${template.content.cloneNode(true)}`;
+    return template.content.cloneNode(true);
   }
 }