@reliability-design/web 1.0.2 → 1.0.6

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

@@ -48,15 +48,20 @@ export class RelSegmentedButton extends LitElement {
 
     /* Base segment styling */
     .segment {
-      background: var(--rel-colors-white);
+      background: var(--rel-colors-white, #fff);
       border: none;
       cursor: pointer;
-      font-weight: var(--rel-fontWeights-medium);
-      border-right: 2px solid var(--rel-colors-gray-border);
+      font-weight: var(--rel-fontWeights-medium, 500);
+      border-right: 2px solid var(--rel-colors-gray-border, #ddd);
       transition: all 0.2s ease-in-out;
-      color: var(--rel-colors-gray-heading);
-      font-family: var(--rel-fontFamilies-primary);
-      outline: none;
+      color: var(--rel-text-heading, #2b2b2b);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
+    }
+
+    .segment:focus-visible {
+      outline: 2px solid var(--rel-border-info, #0091ea);
+      outline-offset: -2px;
+      z-index: 1;
     }
 
     .segment:last-child {
@@ -65,18 +70,18 @@ export class RelSegmentedButton extends LitElement {
 
     /* Hover */
     .segment:hover:not(.disabled):not(.active) {
-      background: var(--rel-colors-gray-bg);
+      background: var(--rel-surface-surface, #f5f5f5);
     }
 
     /* Active */
     .segment.active {
-      background: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-colors-white, #fff);
     }
 
     .segment.active:hover:not(.disabled) {
-      background: var(--rel-colors-black);
-      color: var(--rel-colors-white);
+      background: var(--rel-text-heading, #2b2b2b);
+      color: var(--rel-colors-white, #fff);
     }
 
     /* Disabled */
@@ -84,8 +89,8 @@ export class RelSegmentedButton extends LitElement {
     .segment:disabled {
       cursor: not-allowed;
       opacity: 0.5;
-      background: var(--rel-colors-gray-bg);
-      color: var(--rel-colors-gray-placeholder);
+      background: var(--rel-surface-surface, #f5f5f5);
+      color: var(--rel-text-disabled, #9e9e9e);
       pointer-events: none;
     }
 

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

@@ -0,0 +1,107 @@
+# rel-select
+
+## Overview
+A customizable dropdown select component with support for icons, multiple states, and sizes. Features built-in validation states, supporting text, and comprehensive styling options for form-based interfaces.
+
+## Usage
+```html
+<!-- Basic example -->
+<rel-select id="countrySelect" label="Country" selected="USA"></rel-select>
+<script>
+  const select = document.getElementById('countrySelect');
+  select.options = ['USA', 'Canada', 'Mexico'];
+</script>
+
+<!-- Example with common options -->
+<rel-select
+  id="emailPreference"
+  label="Email Preference"
+  selected="Weekly"
+  size="medium"
+  state="default"
+  supportingText="Choose how often you want to receive emails"
+  leftIcon="📧">
+</rel-select>
+<script>
+  const emailPref = document.getElementById('emailPreference');
+  emailPref.options = ['Daily', 'Weekly', 'Monthly', 'Never'];
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string` | `""` | Label text displayed above the select |
+| `options` | `string[]` | `[]` | Array of option values to display in dropdown |
+| `selected` | `string` | `""` | Currently selected option value |
+| `state` | `"default" \| "error" \| "disabled"` | `"default"` | Visual and interaction state of the select |
+| `supportingText` | `string` | `""` | Helper or error text displayed below the select |
+| `size` | `"small" \| "medium" \| "large"` | `"medium"` | Size variant affecting padding and font size |
+| `border` | `"rounded" \| "sharp"` | `"rounded"` | Border radius style |
+| `leftIcon` | `string` | `""` | Icon or text displayed on the left side |
+| `rightIcon` | `string` | `""` | Icon or text displayed on the right side (before dropdown arrow) |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | `{ value: string }` | Fired when the selected value changes |
+
+## Slots
+Default slot not used.
+
+## CSS Parts
+None exposed.
+
+## Tokens / CSS Variables
+
+### Semantic Tokens
+- `--rel-fontFamilies-primary` - Font family
+- `--rel-fontSizes-xs`, `--rel-fontSizes-sm`, `--rel-fontSizes-md` - Font sizes for different size variants
+- `--rel-fontWeights-medium` - Font weight for label
+
+### Spacing Tokens
+- `--rel-spacing-space-3xs`, `--rel-spacing-space-2xs`, `--rel-spacing-space-xs` - Internal padding
+- `--rel-spacing-space-sm`, `--rel-spacing-space-lg`, `--rel-spacing-space-xl`, `--rel-spacing-space-2xl`, `--rel-spacing-space-3xl` - Padding and icon positioning
+
+### Color Tokens
+- `--rel-colors-gray-heading` - Label text color
+- `--rel-colors-gray-primary` - Icon and border hover color
+- `--rel-colors-gray-border` - Default border color
+- `--rel-colors-gray-placeholder` - Supporting text color
+- `--rel-colors-white` - Background color
+- `--rel-colors-primary-500` - Focus border and shadow color
+- `--rel-colors-red-secondary` - Error state border color
+- `--rel-background-error-light` - Error state focus shadow
+- `--rel-surface-surface` - Disabled background
+- `--rel-text-heading` - Select text color
+- `--rel-text-disabled` - Disabled text color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Rounded border radius
+
+## Accessibility
+- Native `<select>` element provides built-in keyboard navigation
+- Focus visible states with clear visual indicators (border color and box shadow)
+- Label properly associated with select for screen readers
+- Disabled state prevents interaction and reduces opacity
+- Error state communicated through color and supporting text
+
+### Keyboard Interactions
+- `Space/Enter` - Open dropdown
+- `Arrow Up/Down` - Navigate options
+- `Escape` - Close dropdown
+- `Tab` - Move focus to next element
+
+### Focus Behavior
+- Clear focus ring with primary color on keyboard focus
+- Focus state uses box-shadow for visibility
+
+## Notes / Edge Cases
+- When `state="disabled"`, the select becomes non-interactive with reduced opacity and cursor indication
+- Empty `selected` value shows placeholder text "Select Option" which is hidden from the dropdown list
+- Icons (left/right) adjust internal padding automatically to accommodate icon space
+- The native dropdown arrow is always visible on the right side, custom rightIcon appears before it
+- In error state, supporting text is styled with error color for visual consistency
+- Options array is rendered as-is; complex objects not supported (use string values only)

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

@@ -28,7 +28,7 @@ export class RelSelect extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
       width: 100%;
     }
 
@@ -74,26 +74,26 @@ export class RelSelect extends LitElement {
     select {
       flex: 1;
       appearance: none;
-      border: 1px solid var(--rel-colors-gray-border);
-      background-color: var(--rel-colors-white);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
+      border: 1px solid var(--rel-colors-gray-border, #ddd);
+      background-color: var(--rel-colors-white, #fff);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='currentColor' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
       background-repeat: no-repeat;
       background-position: right 12px center;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fontFamilies-primary, sans-serif);
       cursor: pointer;
       transition: all 0.2s ease-in-out;
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-text-heading, #2b2b2b);
       width: 100%;
       outline: none;
     }
 
     select:hover:not(:disabled) {
-      border-color: var(--rel-colors-gray-primary);
+      border-color: var(--rel-colors-gray-primary, #333);
     }
 
-    select:focus:not(:disabled) {
-      border-color: var(--rel-colors-black);
-      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
+    select:focus-visible:not(:disabled) {
+      border-color: var(--rel-colors-primary-500, #0091ea);
+      box-shadow: 0 0 0 2px var(--rel-colors-primary-500, #0091ea);
     }
 
     /* States */
@@ -102,13 +102,13 @@ export class RelSelect extends LitElement {
     }
 
     select.error:focus {
-      box-shadow: 0 0 0 3px rgba(213, 0, 0, 0.1);
+      box-shadow: 0 0 0 3px var(--rel-background-error-light);
     }
 
     select:disabled {
-      background-color: var(--rel-colors-gray-bg);
-      border-color: var(--rel-colors-gray-border);
-      color: var(--rel-colors-gray-placeholder);
+      background-color: var(--rel-surface-surface, #f5f5f5);
+      border-color: var(--rel-colors-gray-border, #ddd);
+      color: var(--rel-text-disabled, #9e9e9e);
       cursor: not-allowed;
       opacity: 0.6;
     }

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

@@ -0,0 +1,224 @@
+# rel-sheet
+
+## Overview
+A slide-in panel component system with multiple helper components. Features four slide directions (top, right, bottom, left), configurable sizes, modal/non-modal modes, focus trapping, scroll locking, and optional overlay. Built with composition: `rel-sheet` (controller), `rel-sheet-trigger` (opener), `rel-sheet-content` (panel), and layout helpers (`rel-sheet-header`, `rel-sheet-footer`, `rel-sheet-title`, `rel-sheet-description`, `rel-sheet-close`).
+
+## Components
+- **`<rel-sheet>`**: Root wrapper that manages open state
+- **`<rel-sheet-trigger>`**: Button to open the sheet
+- **`<rel-sheet-content>`**: Slide-in panel with all visual elements
+- **`<rel-sheet-header>`**: Header layout helper with bottom border
+- **`<rel-sheet-footer>`**: Footer layout helper with top border
+- **`<rel-sheet-title>`**: Title text (auto-linked to `aria-labelledby`)
+- **`<rel-sheet-description>`**: Description text (auto-linked to `aria-describedby`)
+- **`<rel-sheet-close>`**: Custom close button wrapper
+
+## Usage
+```html
+<!-- Basic right-side sheet -->
+<rel-sheet>
+  <rel-sheet-trigger>
+    <button>Open Settings</button>
+  </rel-sheet-trigger>
+  
+  <rel-sheet-content>
+    <rel-sheet-header>
+      <rel-sheet-title>Settings</rel-sheet-title>
+      <rel-sheet-description>Configure your preferences</rel-sheet-description>
+    </rel-sheet-header>
+    
+    <p>Sheet content goes here...</p>
+    
+    <rel-sheet-footer>
+      <rel-sheet-close>
+        <button>Cancel</button>
+      </rel-sheet-close>
+      <button>Save</button>
+    </rel-sheet-footer>
+  </rel-sheet-content>
+</rel-sheet>
+
+<!-- Left-side sheet, large size -->
+<rel-sheet>
+  <rel-sheet-trigger>
+    <button>Open Menu</button>
+  </rel-sheet-trigger>
+  
+  <rel-sheet-content side="left" size="lg">
+    <nav>
+      <a href="#home">Home</a>
+      <a href="#about">About</a>
+      <a href="#contact">Contact</a>
+    </nav>
+  </rel-sheet-content>
+</rel-sheet>
+
+<!-- Bottom sheet without overlay -->
+<rel-sheet defaultopen>
+  <rel-sheet-trigger>
+    <button>Toggle Bottom Sheet</button>
+  </rel-sheet-trigger>
+  
+  <rel-sheet-content side="bottom" hide-overlay>
+    <p>Bottom sheet content</p>
+  </rel-sheet-content>
+</rel-sheet>
+
+<!-- Controlled state -->
+<rel-sheet id="controlledSheet" open>
+  <rel-sheet-trigger>
+    <button>Open</button>
+  </rel-sheet-trigger>
+  
+  <rel-sheet-content>
+    <p>This sheet is controlled externally</p>
+  </rel-sheet-content>
+</rel-sheet>
+<script>
+  const sheet = document.getElementById('controlledSheet');
+  sheet.addEventListener('rel-open-change', (e) => {
+    console.log('Sheet open:', e.detail.open);
+    console.log('Reason:', e.detail.reason);
+  });
+</script>
+
+<!-- Without built-in close button -->
+<rel-sheet>
+  <rel-sheet-trigger>
+    <button>Open</button>
+  </rel-sheet-trigger>
+  
+  <rel-sheet-content show-close="false">
+    <p>Custom close handling</p>
+    <rel-sheet-close>
+      <button>Close Me</button>
+    </rel-sheet-close>
+  </rel-sheet-content>
+</rel-sheet>
+```
+
+## API
+
+### rel-sheet Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` (reflected) | `boolean?` | `undefined` | Controlled open state |
+| `defaultopen` | `boolean` | `false` | Default open state (uncontrolled) |
+| `disabled` | `boolean` | `false` | Disable trigger |
+| `modal` | `boolean` | `true` | Enable modal behavior (focus trap) |
+
+### rel-sheet-content Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"right"` | Which side the sheet slides from |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Sheet width/height (320/420/540/640px) |
+| `hide-overlay` | `boolean` | `false` | Hide the backdrop overlay |
+| `close-on-overlay` | `boolean` | `true` | Allow closing by clicking overlay |
+| `show-close` | `boolean` | `true` | Show built-in close button (✕) |
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `rel-open-change` | `{ open, reason }` | Fired when sheet opens/closes |
+
+### Close Reasons
+- `"trigger"`: Toggled via trigger button
+- `"close"`: Closed via close button
+- `"overlay"`: Closed by clicking overlay
+- `"escape"`: Closed via Escape key
+- `"api"`: Changed via `setOpen()` method
+
+## Methods
+
+### Sheet Methods
+```typescript
+sheet.setOpen(nextOpen: boolean, reason?: string): void
+```
+
+## Slots
+| Slot | Component | Description |
+|------|-----------|-------------|
+| (default) | `rel-sheet` | Trigger and content elements |
+| (default) | `rel-sheet-trigger` | Trigger button/element |
+| (default) | `rel-sheet-content` | Panel content |
+| (default) | Layout helpers | Content within headers/footers/titles |
+
+## CSS Parts
+| Part | Description |
+|------|-------------|
+| `overlay` | Backdrop overlay element |
+| `panel` | Main panel container |
+
+## Tokens / CSS Variables
+
+### Size Tokens (defined on `<rel-sheet-content>`)
+- `--sheet-size-sm`: `320px`
+- `--sheet-size-md`: `420px`
+- `--sheet-size-lg`: `540px`
+- `--sheet-size-xl`: `640px`
+
+### Transition Tokens
+- `--sheet-transition-duration`: `0.3s`
+- `--sheet-transition-timing`: `cubic-bezier(0.32, 0.72, 0, 1)`
+
+### Color Tokens
+- `--rel-colors-white` - Panel background
+- `--rel-colors-gray-heading` - Title and close button color
+- `--rel-colors-gray-body` - Description color
+- `--rel-colors-gray-surface` - Close button hover background
+- `--rel-colors-gray-border` - Header/footer borders
+- `--rel-overlay-scrim` - Overlay background
+- `--rel-colors-primary-500` - Close button focus outline
+
+### Shadow Tokens
+- `--rel-shadows-shadow-500` - Panel shadow
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Panel border radius (top corners for bottom, etc.)
+
+### Spacing Tokens
+- `--rel-spacing-space-lg` - Panel content padding
+- `--rel-spacing-space-md` - Header/footer padding, close button positioning
+- `--rel-spacing-space-xs` - Close button padding
+
+## Accessibility
+- Panel uses `role="dialog"` and `aria-modal`
+- Auto-links `aria-labelledby` to `<rel-sheet-title>`
+- Auto-links `aria-describedby` to `<rel-sheet-description>`
+- Focus trap in modal mode
+- Escape key closes sheet
+- Restores focus to trigger on close
+
+### Keyboard Interactions
+| Key | Action |
+|-----|--------|
+| `Escape` | Close sheet |
+| `Tab` | Focus trap within sheet (modal mode only) |
+
+### Focus Behavior
+- On open, focuses first focusable element (or panel if none found)
+- Focus trapped within panel in modal mode
+- On close, restores focus to trigger button
+
+## Notes / Edge Cases
+- **Side positioning and transforms**:
+  - **right**: Slides in from right edge, `translateX(100%)` to `translateX(0)`
+  - **left**: Slides in from left edge, `translateX(-100%)` to `translateX(0)`
+  - **bottom**: Slides in from bottom, `translateY(100%)` to `translateY(0)`
+  - **top**: Slides in from top, `translateY(-100%)` to `translateY(0)`
+
+- **Size constraints**:
+  - Left/right: `max-width: 90vw`
+  - Top/bottom: `max-height: 80vh`
+
+- **Scroll locking**: Body scroll is locked when sheet is open (with scrollbar width compensation)
+- **Close button position**: Top-right by default, but top-left for `side="left"`
+- **Reduced motion**: Transitions disabled, panel hidden via `display: none` instead of transform
+- The sheet root uses `display: contents`
+- Panel is overlaid with `z-index: 1000`, fixed position
+- Overlay detection for `aria-labelledby`/`aria-describedby` happens automatically based on slotted `<rel-sheet-title>` and `<rel-sheet-description>` elements
+- Built-in close button is "✕" character at font-size 20px
+
+### Controlled vs Uncontrolled
+- If `open` prop is set, the sheet is controlled and won't manage its own state
+- Use `rel-open-change` event to sync controlled state