@reliability-design/web 1.0.3 → 1.0.6

package/dist/components/rel-resizable/rel-resizable-handle.ts

@@ -0,0 +1,149 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-resizable-handle")
+export class RelResizableHandle extends LitElement {
+  /* =======================
+   * PUBLIC API
+   * ======================= */
+
+  @property({ type: String, reflect: true }) orientation: "horizontal" | "vertical" = "horizontal";
+
+  /* =======================
+   * INTERNAL STATE
+   * ======================= */
+
+  /** Index of this handle in the parent group */
+  public handleIndex = -1;
+
+  /** Current split value (0-100) for aria-valuenow */
+  public splitValue = 50;
+
+  /* =======================
+   * STYLES
+   * ======================= */
+
+  static styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      position: relative;
+      outline: none;
+      background: var(--rel-colors-gray-border);
+      transition: background 0.15s ease;
+    }
+
+    :host([orientation="horizontal"]) {
+      width: var(--rel-borders-width-stroke-100);
+      min-width: var(--rel-borders-width-stroke-100);
+      cursor: col-resize;
+      padding: 0 var(--rel-spacing-space-xs);
+      margin: 0 calc(var(--rel-spacing-space-xs) * -1);
+    }
+
+    :host([orientation="vertical"]) {
+      height: var(--rel-borders-width-stroke-100);
+      min-height: var(--rel-borders-width-stroke-100);
+      cursor: row-resize;
+      padding: var(--rel-spacing-space-xs) 0;
+      margin: calc(var(--rel-spacing-space-xs) * -1) 0;
+    }
+
+    :host(:hover),
+    :host(:focus-visible) {
+      background: var(--rel-colors-blue-primary);
+    }
+
+    :host(:focus-visible) {
+      outline: 2px solid var(--rel-colors-blue-primary);
+      outline-offset: 2px;
+    }
+
+    .grabber {
+      background: var(--rel-colors-gray-placeholder);
+      border-radius: var(--rel-borders-radius-border-radius-500);
+      transition: background 0.15s ease;
+    }
+
+    :host([orientation="horizontal"]) .grabber {
+      width: 4px;
+      height: 24px;
+    }
+
+    :host([orientation="vertical"]) .grabber {
+      width: 24px;
+      height: 4px;
+    }
+
+    :host(:hover) .grabber,
+    :host(:focus-visible) .grabber {
+      background: var(--rel-colors-white);
+    }
+
+    :host([data-dragging]) {
+      background: var(--rel-colors-blue-primary);
+    }
+
+    :host([data-dragging]) .grabber {
+      background: var(--rel-colors-white);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        transition: none;
+      }
+
+      .grabber {
+        transition: none;
+      }
+    }
+  `;
+
+  /* =======================
+   * LIFECYCLE
+   * ======================= */
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("role", "separator");
+    this.updateAriaOrientation();
+  }
+
+  updated(changed: Map<string, unknown>) {
+    if (changed.has("orientation")) {
+      this.updateAriaOrientation();
+    }
+  }
+
+  /* =======================
+   * ARIA
+   * ======================= */
+
+  private updateAriaOrientation() {
+    this.setAttribute("aria-orientation", this.orientation);
+  }
+
+  public updateAriaValue(value: number) {
+    this.splitValue = value;
+    this.setAttribute("aria-valuenow", String(Math.round(value)));
+    this.setAttribute("aria-valuemin", "0");
+    this.setAttribute("aria-valuemax", "100");
+  }
+
+  /* =======================
+   * RENDER
+   * ======================= */
+
+  render() {
+    return html`<div class="grabber"></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-resizable-handle": RelResizableHandle;
+  }
+}

package/dist/components/rel-resizable/rel-resizable-panel.ts

@@ -0,0 +1,47 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("rel-resizable-panel")
+export class RelResizablePanel extends LitElement {
+  /* =======================
+   * PUBLIC API
+   * ======================= */
+
+  @property({ type: Number, attribute: "defaultsize" }) defaultSize?: number;
+  @property({ type: Number, attribute: "minsize" }) minSize = 10;
+  @property({ type: Number, attribute: "maxsize" }) maxSize = 90;
+
+  /* =======================
+   * INTERNAL STATE
+   * ======================= */
+
+  /** Current computed size in percentage */
+  public currentSize = 0;
+
+  /* =======================
+   * STYLES
+   * ======================= */
+
+  static styles = css`
+    :host {
+      display: flex;
+      flex-direction: column;
+      overflow: auto;
+      box-sizing: border-box;
+    }
+  `;
+
+  /* =======================
+   * RENDER
+   * ======================= */
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-resizable-panel": RelResizablePanel;
+  }
+}

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

@@ -0,0 +1,141 @@
+# rel-segmented-button
+
+## Overview
+A segmented button group for mutually exclusive selections. Displays multiple options as connected buttons with a single active selection. Supports size variants, alignment options, and individual option states (disabled).
+
+## Usage
+```html
+<!-- Basic segmented button -->
+<rel-segmented-button id="viewMode" active="grid"></rel-segmented-button>
+<script>
+  const viewMode = document.getElementById('viewMode');
+  viewMode.options = [
+    { label: 'List', value: 'list' },
+    { label: 'Grid', value: 'grid' },
+    { label: 'Table', value: 'table' }
+  ];
+</script>
+
+<!-- Small size with alignment -->
+<rel-segmented-button
+  id="textAlign"
+  size="small"
+  align="middle"
+  active="center">
+</rel-segmented-button>
+<script>
+  const textAlign = document.getElementById('textAlign');
+  textAlign.options = [
+    { label: 'Left', value: 'left' },
+    { label: 'Center', value: 'center' },
+    { label: 'Right', value: 'right' }
+  ];
+</script>
+
+<!-- With disabled option -->
+<rel-segmented-button id="planSelector"></rel-segmented-button>
+<script>
+  const planSelector = document.getElementById('planSelector');
+  planSelector.options = [
+    { label: 'Free', value: 'free' },
+    { label: 'Pro', value: 'pro' },
+    { label: 'Enterprise', value: 'enterprise', disabled: true }
+  ];
+  planSelector.active = 'free';
+</script>
+
+<!-- Listen for changes -->
+<rel-segmented-button id="sortOrder"></rel-segmented-button>
+<script>
+  const sortOrder = document.getElementById('sortOrder');
+  sortOrder.options = [
+    { label: 'Newest', value: 'newest' },
+    { label: 'Oldest', value: 'oldest' },
+    { label: 'Popular', value: 'popular' }
+  ];
+  sortOrder.addEventListener('changed', (e) => {
+    console.log('Selected:', e.detail.value);
+  });
+</script>
+```
+
+## API
+
+### Attributes/Properties
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `SegmentOption[]` | `[]` | Array of segment options (see SegmentOption interface below) |
+| `active` | `string` | `""` | Value of the currently active segment |
+| `size` | `"small" \| "medium"` | `"medium"` | Size variant |
+| `align` | `"left" \| "middle" \| "right"` | `"left"` | Horizontal alignment of the button group |
+
+### SegmentOption Interface
+```typescript
+interface SegmentOption {
+  label: string;      // Display text for the button
+  value: string;      // Unique value identifier
+  disabled?: boolean; // Optional: disable this specific segment
+}
+```
+
+## Events
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `changed` | `{ value: string }` | Fired when a different segment is selected |
+
+## 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` - Font sizes for small and medium variants
+- `--rel-fontWeights-medium` - Font weight for segment labels
+
+### Spacing Tokens
+- `--rel-spacing-space-3xs`, `--rel-spacing-space-2xs` - Vertical padding for sizes
+- `--rel-spacing-space-xs`, `--rel-spacing-space-sm` - Horizontal padding for sizes
+
+### Color Tokens
+- `--rel-colors-white` - Default segment background
+- `--rel-colors-gray-border` - Outer border and segment dividers
+- `--rel-text-heading` - Active segment background and default text color
+- `--rel-surface-surface` - Hover and disabled background
+- `--rel-text-disabled` - Disabled text color
+- `--rel-border-info` - Focus outline color
+
+### Border Tokens
+- `--rel-borders-radius-border-radius-300` - Border radius for the group
+
+## Accessibility
+- Uses native `<button>` elements for proper keyboard navigation
+- Focus visible state with inner outline for keyboard users
+- Disabled segments use `pointer-events: none` and reduced opacity
+- Each segment can receive focus independently
+
+### Keyboard Interactions
+- `Tab` - Move focus between segments
+- `Space/Enter` - Activate focused segment
+- `Arrow Left/Right` - Navigate between segments (browser default)
+
+### Focus Behavior
+- Focus outline appears inside the button boundary with `-2px` offset
+- Uses info border color for high contrast
+- Active button has `z-index: 1` to ensure focus ring is visible over adjacent segments
+
+## Notes / Edge Cases
+- The component is `display: inline-block` and sizes to fit content
+- All segments are connected with shared borders (2px solid gray)
+- The last segment has no right border to avoid doubling with the outer container border
+- Active segment has inverted colors (dark background, white text)
+- Hovering a non-active, non-disabled segment shows a light gray background
+- Hovering the active segment does not change its appearance
+- Disabled segments show reduced opacity (0.5), gray background, and are non-interactive
+- The `align` property uses flexbox justify-content (left → flex-start, middle → center, right → flex-end)
+- Size variants affect both font size and padding
+- Smooth transitions (0.2s ease-in-out) apply to all visual changes
+- Clicking a disabled option will not change the `active` value or dispatch events

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;
     }