@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 @customElement("rel-resizable-handle")
 export class RelResizableHandle extends LitElement {
@@ -15,7 +16,7 @@ export class RelResizableHandle extends LitElement {
 
   /** Index of this handle in the parent group */
   public handleIndex = -1;
-
+  
   /** Current split value (0-100) for aria-valuenow */
   public splitValue = 50;
 
@@ -31,29 +32,25 @@ export class RelResizableHandle extends LitElement {
       flex-shrink: 0;
       position: relative;
       outline: none;
-      background: var(--rel-colors-gray-border);
+      background: var(--rel-color-border-default);
       transition: background 0.15s ease;
     }
 
     :host([orientation="horizontal"]) {
-      width: var(--rel-borders-width-stroke-100);
-      min-width: var(--rel-borders-width-stroke-100);
+      width: 8px;
+      min-width: 8px;
       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);
+      height: 8px;
+      min-height: 8px;
       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);
+      background: var(--rel-color-bg-selected);
     }
 
     :host(:focus-visible) {
@@ -62,7 +59,7 @@ export class RelResizableHandle extends LitElement {
     }
 
     .grabber {
-      background: var(--rel-colors-gray-placeholder);
+      background: var(--rel-color-icon-primary);
       border-radius: var(--rel-borders-radius-border-radius-500);
       transition: background 0.15s ease;
     }
@@ -79,15 +76,15 @@ export class RelResizableHandle extends LitElement {
 
     :host(:hover) .grabber,
     :host(:focus-visible) .grabber {
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
     }
 
     :host([data-dragging]) {
-      background: var(--rel-colors-blue-primary);
+      background: var(--rel-color-bg-selected);
     }
 
     :host([data-dragging]) .grabber {
-      background: var(--rel-colors-white);
+      background: var(--rel-color-text-primary);
     }
 
     @media (prefers-reduced-motion: reduce) {

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type SegmentSize = "small" | "medium";
 export type SegmentAlign = "left" | "middle" | "right";
@@ -28,8 +29,8 @@ export class RelSegmentedButton extends LitElement {
 
     .segmented-buttons {
       display: inline-flex;
-      border: 2px solid var(--rel-colors-gray-border);
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      border: 1px solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-100);
       overflow: hidden;
     }
 
@@ -48,50 +49,70 @@ export class RelSegmentedButton extends LitElement {
 
     /* Base segment styling */
     .segment {
-      background: var(--rel-colors-white, #fff);
+      background: var(--rel-color-bg-primary);
       border: none;
+      border-radius: 0;
       cursor: pointer;
-      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-text-heading, #2b2b2b);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-weight: var(--rel-fontWeights-medium);
+      border-right: 1px solid var(--rel-color-border-default);
+      transition: background 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
+      color: var(--rel-color-text-heading);
+      font-family: var(--rel-fontFamilies-primary);
     }
 
-    .segment:focus-visible {
-      outline: 2px solid var(--rel-border-info, #0091ea);
-      outline-offset: -2px;
-      z-index: 1;
+    .segment:first-child {
+      border-radius: var(--rel-borders-radius-border-radius-100) 0 0 var(--rel-borders-radius-border-radius-100);
     }
 
     .segment:last-child {
+      border-radius: 0 var(--rel-borders-radius-border-radius-100) var(--rel-borders-radius-border-radius-100) 0;
       border-right: none;
     }
 
+    .segment:focus-visible {
+      outline: 2px solid var(--rel-color-border-focus);
+      outline-offset: -2px;
+      z-index: 1;
+    }
+
     /* Hover */
     .segment:hover:not(.disabled):not(.active) {
-      background: var(--rel-surface-surface, #f5f5f5);
+      background: var(--rel-color-bg-hover);
     }
 
     /* Active */
     .segment.active {
-      background: var(--rel-text-heading, #2b2b2b);
-      color: var(--rel-colors-white, #fff);
+      background: #2B2B2B;
+      color: #FFFFFF;
+      border-radius: var(--rel-borders-radius-border-radius-100) !important;
     }
 
     .segment.active:hover:not(.disabled) {
-      background: var(--rel-text-heading, #2b2b2b);
-      color: var(--rel-colors-white, #fff);
+      background: #333333;
+      color: #FFFFFF;
+    }
+
+    /* Dark mode active override */
+    :host-context([data-theme="dark"]) .segment.active,
+    :host-context(.dark) .segment.active {
+      background: #F5F5F5;
+      color: #1A1A1A;
+    }
+
+    :host-context([data-theme="dark"]) .segment.active:hover,
+    :host-context(.dark) .segment.active:hover {
+      background: #D4D4D4;
+      color: #1A1A1A;
     }
 
     /* Disabled */
     .segment.disabled,
     .segment:disabled {
       cursor: not-allowed;
+      pointer-events: auto;
       opacity: 0.5;
-      background: var(--rel-surface-surface, #f5f5f5);
-      color: var(--rel-text-disabled, #9e9e9e);
-      pointer-events: none;
+      background: var(--rel-color-bg-tertiary);
+      color: var(--rel-color-text-disabled);
     }
 
     /* Sizes */

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

@@ -1,5 +1,7 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
 
 export type SelectState = "default" | "error" | "disabled";
 export type SelectSize = "small" | "medium" | "large";
@@ -28,7 +30,7 @@ export class RelSelect extends LitElement {
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fontFamilies-primary);
       width: 100%;
     }
 
@@ -42,7 +44,7 @@ export class RelSelect extends LitElement {
       font-size: var(--rel-fontSizes-sm);
       margin-bottom: var(--rel-spacing-space-3xs);
       font-weight: var(--rel-fontWeights-medium);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-color-text-heading);
     }
 
     .select-container {
@@ -60,55 +62,74 @@ export class RelSelect extends LitElement {
       top: 50%;
       transform: translateY(-50%);
       font-size: 16px;
-      color: var(--rel-colors-gray-primary);
+      color: var(--rel-color-text-primary);
     }
 
     .icon.left {
-      left: 12px;
+      left: 10px;
+      pointer-events: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     .icon.right {
       right: 36px;
     }
 
+    .icon.chevron {
+      right: 12px;
+      pointer-events: none;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      color: var(--rel-color-text-primary);
+    }
+
+    .select-error .icon.chevron {
+      color: var(--rel-error-surface-default, #D50000);
+    }
+
+    .select-disabled .icon.chevron {
+      color: var(--rel-color-text-disabled);
+    }
+
     select {
       flex: 1;
       appearance: none;
-      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, sans-serif);
+      border: 1px solid var(--rel-color-border-default);
+      background-color: var(--rel-color-bg-primary);
+      font-family: var(--rel-fontFamilies-primary);
       cursor: pointer;
-      transition: all 0.2s ease-in-out;
-      color: var(--rel-text-heading, #2b2b2b);
+      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+      color: var(--rel-color-text-heading);
       width: 100%;
       outline: none;
     }
 
     select:hover:not(:disabled) {
-      border-color: var(--rel-colors-gray-primary, #333);
+      border-color: var(--rel-color-text-primary);
     }
 
     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);
+      border-color: var(--rel-color-border-focus);
+      box-shadow: 0 0 0 2px var(--rel-color-border-focus);
     }
 
     /* States */
     select.error {
-      border-color: var(--rel-colors-red-secondary);
+      border-color: var(--rel-error-surface-default, #D50000);
+      border-width: 2px;
     }
 
     select.error:focus {
-      box-shadow: 0 0 0 3px var(--rel-background-error-light);
+      box-shadow: 0 0 0 3px var(--rel-error-surface-light);
     }
 
     select:disabled {
-      background-color: var(--rel-surface-surface, #f5f5f5);
-      border-color: var(--rel-colors-gray-border, #ddd);
-      color: var(--rel-text-disabled, #9e9e9e);
+      background-color: var(--rel-color-bg-tertiary);
+      border-color: var(--rel-color-border-default);
+      color: var(--rel-color-text-disabled);
       cursor: not-allowed;
       opacity: 0.6;
     }
@@ -116,19 +137,19 @@ export class RelSelect extends LitElement {
     /* Sizes */
     .select-small select {
       font-size: var(--rel-fontSizes-xs);
-      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-lg)
+      padding: var(--rel-spacing-space-3xs) 36px
         var(--rel-spacing-space-3xs) var(--rel-spacing-space-2xs);
     }
 
     .select-medium select {
       font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-xl)
+      padding: var(--rel-spacing-space-2xs) 40px
         var(--rel-spacing-space-2xs) var(--rel-spacing-space-xs);
     }
 
     .select-large select {
       font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-2xl)
+      padding: var(--rel-spacing-space-xs) 44px
         var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
     }
 
@@ -159,7 +180,7 @@ export class RelSelect extends LitElement {
 
     /* Border */
     .border-rounded select {
-      border-radius: var(--rel-borders-radius-border-radius-300);
+      border-radius: var(--rel-borders-radius-border-radius-100);
     }
 
     .border-sharp select {
@@ -170,14 +191,76 @@ export class RelSelect extends LitElement {
     .supporting-text {
       font-size: var(--rel-fontSizes-xs);
       margin-top: var(--rel-spacing-space-3xs);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
     }
 
     .error-text {
-      color: var(--rel-colors-red-secondary);
+      color: var(--rel-error-surface-default, #D50000);
     }
+
+    .select-error .select-label {
+      color: var(--rel-error-surface-default, #D50000);
+    }
+
+    /* Dark mode — flip select background, text, border */
+    :host-context([data-theme="dark"]) select,
+    :host-context(.dark) select {
+      background-color: var(--rel-color-bg-secondary);
+      color: #ffffff;
+      border-color: var(--rel-color-border-default);
+    }
+
+    :host-context([data-theme="dark"]) select.error,
+    :host-context(.dark) select.error {
+      border-color: var(--rel-error-surface-default, #FF5252);
+      border-width: 2px;
+    }
+
+    /* Error — placeholder text red */
+    select.error::placeholder {
+      color: var(--rel-error-surface-default, #D50000);
+    }
+
+    /* Error — selected/placeholder option text red */
+    .select-error select {
+      color: var(--rel-error-surface-default, #D50000);
+    }
+
+    /* Error — icon red */
+    .select-error .icon,
+    .select-error rel-icon {
+      color: var(--rel-error-surface-default, #D50000);
+    }
+
+    :host-context([data-theme="dark"]) .select-error select,
+    :host-context(.dark) .select-error select {
+      color: var(--rel-error-surface-default, #FF5252);
+    }
+
+    :host-context([data-theme="dark"]) .select-error .icon,
+    :host-context([data-theme="dark"]) .select-error rel-icon,
+    :host-context(.dark) .select-error .icon,
+    :host-context(.dark) .select-error rel-icon {
+      color: var(--rel-error-surface-default, #FF5252);
+    }
+
+    /* Disabled label */
+    .select-disabled .select-label {
+      color: var(--rel-color-text-disabled);
+      cursor: not-allowed;
+      user-select: none;
+    }
+
   `;
 
+  connectedCallback() {
+    super.connectedCallback();
+    const leftIcon = this.getAttribute('left-icon');
+    if (leftIcon) this.leftIcon = leftIcon;
+    const rightIcon = this.getAttribute('right-icon');
+    if (rightIcon) this.rightIcon = rightIcon;
+  }
+
   private onChange(event: Event) {
     const value = (event.target as HTMLSelectElement).value;
     this.selected = value;
@@ -220,7 +303,7 @@ export class RelSelect extends LitElement {
 
         <div class="${containerClasses}">
           ${this.leftIcon
-            ? html`<span class="icon left">${this.leftIcon}</span>`
+            ? html`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>`
             : ""}
 
           <select
@@ -243,6 +326,8 @@ export class RelSelect extends LitElement {
           ${this.rightIcon
             ? html`<span class="icon right">${this.rightIcon}</span>`
             : ""}
+
+          <rel-icon name="chevron-down" size="sm" class="icon chevron"></rel-icon>
         </div>
 
         ${this.supportingText