@reliability-design/web 1.3.1 → 1.4.1

package/dist/components/rel-range-picker/rel-range-picker.ts

@@ -1,7 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
-import "../../styles/vars-v2.css";
 import "../rel-button/rel-button";
 
 interface RangeDay {
@@ -13,6 +12,7 @@ interface RangeDay {
   isDraftTo: boolean;
   isInRange: boolean;
   isDisabled: boolean;
+  isWeekend: boolean;
 }
 
 interface QuickSelect {
@@ -55,8 +55,9 @@ export class RelRangePicker extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-block;
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
+      font-family: var(--rel-body-md-regular-font-family);
       position: relative;
     }
 
@@ -75,36 +76,39 @@ export class RelRangePicker extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      gap: var(--rel-spacing-space-xs, 8px);
-      padding: var(--rel-spacing-space-sm, 12px) var(--rel-spacing-space-md, 16px);
-      background: var(--rel-color-bg-primary, #fff);
-      border: 1px solid var(--rel-color-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      color: var(--rel-color-text-primary, #333);
+      gap: var(--rel-spacing-xs, 8px);
+      padding: var(--rel-spacing-sm, 12px) var(--rel-spacing-md, 16px);
+      background: var(--rel-bg-surface);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      color: var(--rel-text-default);
       cursor: pointer;
       width: 100%;
       text-align: left;
       transition: border-color 0.15s ease;
+      font-family: var(--rel-body-md-regular-font-family);
+      font-weight: var(--rel-body-md-regular-font-weight);
+      font-size: var(--rel-body-md-regular-font-size);
+      line-height: var(--rel-body-md-regular-line-height);
+      letter-spacing: var(--rel-body-md-regular-letter-spacing);
     }
 
     .trigger-button:hover:not(:disabled) {
-      border-color: var(--rel-color-border-strong, #999);
+      border-color: var(--rel-border-accent);
     }
 
     .trigger-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus, #0091ea);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     .trigger-content {
       flex: 1;
-      color: var(--rel-color-text-primary, #333);
+      color: var(--rel-text-default);
     }
 
     .trigger-content.placeholder {
-      color: var(--rel-color-text-placeholder, #a9a9a9);
+      color: var(--rel-text-placeholder);
     }
 
     /* ── Popover shell ── */
@@ -113,9 +117,9 @@ export class RelRangePicker extends LitElement {
       top: calc(100% + 4px);
       left: 0;
       z-index: 2147483647;
-      border: 1px solid var(--rel-color-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      background: var(--rel-color-bg-primary, #fff);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
+      background: var(--rel-bg-neutral);
       box-shadow: var(--rel-shadows-shadow-200);
       overflow: visible;
       display: none;
@@ -139,6 +143,8 @@ export class RelRangePicker extends LitElement {
 
     /* ── Two-panel wrapper ── */
     .picker-wrapper {
+      font-family: var(--rel-body-lg-regular-font-family);
+      font-weight: var(--rel-body-lg-regular-font-weight);
       display: flex;
       flex-direction: row;
       align-items: stretch;
@@ -149,8 +155,9 @@ export class RelRangePicker extends LitElement {
       width: 280px;
       flex-shrink: 0;
       flex-grow: 0;
-      border-right: 1px solid var(--rel-color-border-default, #ddd);
-      padding: 12px;
+      border-right: 1px solid var(--rel-border-default);
+      padding: var(--rel-spacing-sm);
+      background: var(--rel-bg-surface-elevated);
       display: flex;
       flex-direction: column;
       gap: 0;
@@ -166,31 +173,32 @@ export class RelRangePicker extends LitElement {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px 12px;
+      padding: 10px var(--rel-spacing-sm);
       cursor: pointer;
-      font-size: 13px;
-      font-weight: var(--rel-fontWeights-medium, 500);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      color: var(--rel-color-text-primary, #333);
-      background: var(--rel-color-bg-tertiary, #f5f5f5);
+      font-family: var(--rel-body-sm-medium-font-family);
+      font-weight: var(--rel-body-sm-medium-font-weight);
+      font-size: var(--rel-body-sm-medium-font-size);
+      line-height: var(--rel-body-sm-medium-line-height);
+      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      color: var(--rel-action-neutral-label-icons-link);
+      background: var(--rel-bg-neutral-elevated-1);
       border: none;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border-radius: var(--rel-border-radius-sm, 8px);
       width: 100%;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       transition: background 0.15s ease;
-      line-height: 1.3;
     }
 
     .preset-item:hover:not(.active) {
-      background: var(--rel-color-bg-hover, #eeeeee);
+      background: var(--rel-action-overlay-hover);
     }
 
     .preset-item.active {
-      background: #1A1A1A;
-      color: #FFFFFF;
-      font-weight: var(--rel-fontWeights-semibold, 600);
+      background: var(--rel-bg-neutral-inverse-2);
+      color: var(--rel-text-inverse);
+      font-weight: var(--rel-body-sm-semibold-font-weight);
     }
 
     .preset-item.full-width {
@@ -203,7 +211,7 @@ export class RelRangePicker extends LitElement {
       align-items: center;
       gap: 8px;
       padding: 14px 8px 4px;
-      border-top: 1px solid var(--rel-color-border-default, #ddd);
+      border-top: 1px solid var(--rel-border-default);
       margin-top: auto;
     }
 
@@ -217,31 +225,36 @@ export class RelRangePicker extends LitElement {
       position: absolute;
       top: -8px;
       left: 10px;
-      font-size: 11px;
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-color-text-secondary, #9e9e9e);
-      background: var(--rel-color-bg-primary, #fff);
+      /* Figma: the FROM/TO tag is the nested TextField's floating label (body-sm-regular) */
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-sm-regular-font-weight);
+      font-size: var(--rel-body-sm-regular-font-size);
+      line-height: var(--rel-body-sm-regular-line-height);
+      letter-spacing: var(--rel-body-sm-regular-letter-spacing);
+      color: var(--rel-text-body);
+      background: var(--rel-bg-surface);
       padding: 0 3px;
-      line-height: 1;
     }
 
     .date-input-value {
       display: block;
-      border: 1px solid var(--rel-color-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      border: 1px solid var(--rel-border-default);
+      border-radius: var(--rel-border-radius-sm, 8px);
       padding: 6px 8px;
-      font-size: var(--rel-fontSizes-md, 14px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      color: var(--rel-color-text-primary, #333);
-      background: var(--rel-color-bg-primary, #fff);
+      color: var(--rel-text-default);
+      background: var(--rel-bg-surface);
       width: 100%;
       box-sizing: border-box;
+      font-family: var(--rel-body-md-semibold-font-family);
+      font-weight: var(--rel-body-md-semibold-font-weight);
+      font-size: var(--rel-body-md-semibold-font-size);
+      line-height: var(--rel-body-md-semibold-line-height);
+      letter-spacing: var(--rel-body-md-semibold-letter-spacing);
     }
 
     .date-input-value.empty {
-      color: var(--rel-color-text-placeholder, #a9a9a9);
-      font-weight: var(--rel-fontWeights-regular, 400);
+      color: var(--rel-text-placeholder);
+      font-weight: var(--rel-body-md-regular-font-weight);
     }
 
     /* ── Right panel: calendar ── */
@@ -263,24 +276,27 @@ export class RelRangePicker extends LitElement {
     }
 
     .month-label {
-      font-size: 15px;
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-color-text-heading, #2b2b2b);
+      font-family: var(--rel-body-lg-semibold-font-family);
+      font-weight: var(--rel-body-lg-semibold-font-weight);
+      font-size: var(--rel-body-lg-regular-font-size);
+      line-height: var(--rel-body-lg-regular-line-height);
+      letter-spacing: var(--rel-body-lg-regular-letter-spacing);
+      color: var(--rel-text-label);
     }
 
     .nav-btn {
       background: none;
       border: none;
       cursor: pointer;
-      color: var(--rel-color-text-primary, #333);
-      padding: 4px;
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
+      color: var(--rel-action-neutral-label-icons-ghost);
+      padding: var(--rel-spacing-2xs);
+      border-radius: var(--rel-border-radius-sm, 8px);
       display: flex;
       align-items: center;
       transition: background 0.15s ease;
     }
 
-    .nav-btn:hover { background: var(--rel-color-bg-hover, #f5f5f5); }
+    .nav-btn:hover { background: var(--rel-action-overlay-hover); }
 
     /* ── Weekday header ── */
     .week-header {
@@ -290,10 +306,14 @@ export class RelRangePicker extends LitElement {
     }
 
     .week-day {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-semibold, 600);
-      color: var(--rel-color-text-secondary, #9e9e9e);
+      color: var(--rel-text-body);
       padding: 2px 0;
+      /* Figma: sm-regular family + xs-medium weight on sm-medium metrics */
+      font-family: var(--rel-body-sm-regular-font-family);
+      font-weight: var(--rel-body-xs-medium-font-weight);
+      font-size: var(--rel-body-sm-medium-font-size);
+      line-height: var(--rel-body-sm-medium-line-height);
+      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
       text-align: center;
     }
 
@@ -323,15 +343,15 @@ export class RelRangePicker extends LitElement {
     }
 
     .day-cell.in-range {
-      background: var(--rel-color-bg-selected, #eeeeee);
+      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .day-cell.range-start:not(.range-end) {
-      background: linear-gradient(to right, transparent 50%, var(--rel-color-bg-selected, #eeeeee) 50%);
+      background: linear-gradient(to right, transparent 50%, var(--rel-bg-neutral-elevated-2) 50%);
     }
 
     .day-cell.range-end:not(.range-start) {
-      background: linear-gradient(to left, transparent 50%, var(--rel-color-bg-selected, #eeeeee) 50%);
+      background: linear-gradient(to left, transparent 50%, var(--rel-bg-neutral-elevated-2) 50%);
     }
 
     .day-cell.range-start.range-end {
@@ -346,72 +366,51 @@ export class RelRangePicker extends LitElement {
       align-items: center;
       justify-content: center;
       border-radius: 50%;
-      font-size: 13px;
-      font-weight: var(--rel-fontWeights-medium, 500);
-      font-family: var(--rel-fontFamilies-primary, Poppins, sans-serif);
-      color: var(--rel-color-text-primary, #333);
+      font-family: var(--rel-body-sm-medium-font-family);
+      font-weight: var(--rel-body-sm-medium-font-weight);
+      font-size: var(--rel-body-sm-medium-font-size);
+      line-height: var(--rel-body-sm-medium-line-height);
+      letter-spacing: var(--rel-body-sm-medium-letter-spacing);
+      color: var(--rel-text-default);
       position: relative;
       z-index: 1;
       transition: background 0.15s ease;
-      line-height: 1;
     }
 
     .day-cell:not(.disabled):not(.other-month):not(.range-start):not(.range-end):hover .day-inner {
-      background: var(--rel-color-bg-hover, #f5f5f5);
+      background: var(--rel-action-overlay-hover);
+    }
+
+    /* Pressed (Figma State=Active): elevated-2 fill on the day circle */
+    .day-cell:not(.disabled):not(.other-month):not(.range-start):not(.range-end):active .day-inner {
+      background: var(--rel-bg-neutral-elevated-2);
+    }
+
+    /* Weekend (Figma Day of a week=Weekend): 70% text opacity unless a range endpoint */
+    .day-cell.weekend:not(.range-start):not(.range-end) .day-inner {
+      opacity: 0.7;
     }
 
     /* Today: green outline */
     .day-cell.today:not(.range-start):not(.range-end) .day-inner {
-      border: 2px solid var(--rel-colors-green-primary, #00f49c);
+      font-weight: var(--rel-body-md-medium-font-weight);
+      border: 2px solid var(--rel-border-brand);
     }
 
     /* Range endpoints: dark fill */
     .day-cell.range-start .day-inner,
     .day-cell.range-end .day-inner {
-      background: #1A1A1A;
-      color: #FFFFFF;
-      font-weight: var(--rel-fontWeights-semibold, 600);
+      background: var(--rel-action-brand-fill);
+      color: var(--rel-action-brand-label-icons-primary);
+      font-weight: var(--rel-body-sm-semibold-font-weight);
     }
 
     /* Today AND endpoint: green ring + dark fill */
     .day-cell.today.range-start .day-inner,
     .day-cell.today.range-end .day-inner {
-      background: #1A1A1A;
-      color: #FFFFFF;
-      border: 2px solid var(--rel-colors-green-primary, #00f49c);
-    }
-
-    /* ── Dark mode overrides ── */
-    :host-context([data-theme="dark"]) .day-cell.in-range,
-    :host-context(.dark) .day-cell.in-range {
-      background: var(--rel-color-bg-selected, #404040);
-    }
-
-    :host-context([data-theme="dark"]) .day-cell.range-start:not(.range-end),
-    :host-context(.dark) .day-cell.range-start:not(.range-end) {
-      background: linear-gradient(to right, transparent 50%, var(--rel-color-bg-selected, #404040) 50%);
-    }
-
-    :host-context([data-theme="dark"]) .day-cell.range-end:not(.range-start),
-    :host-context(.dark) .day-cell.range-end:not(.range-start) {
-      background: linear-gradient(to left, transparent 50%, var(--rel-color-bg-selected, #404040) 50%);
-    }
-
-    :host-context([data-theme="dark"]) .day-cell.range-start .day-inner,
-    :host-context([data-theme="dark"]) .day-cell.range-end .day-inner,
-    :host-context(.dark) .day-cell.range-start .day-inner,
-    :host-context(.dark) .day-cell.range-end .day-inner {
-      background: #F5F5F5;
-      color: #1A1A1A;
-    }
-
-    :host-context([data-theme="dark"]) .day-cell.today.range-start .day-inner,
-    :host-context([data-theme="dark"]) .day-cell.today.range-end .day-inner,
-    :host-context(.dark) .day-cell.today.range-start .day-inner,
-    :host-context(.dark) .day-cell.today.range-end .day-inner {
-      background: #F5F5F5;
-      color: #1A1A1A;
-      border: 2px solid var(--rel-colors-green-primary, #00f49c);
+      background: var(--rel-action-brand-fill);
+      color: var(--rel-action-brand-label-icons-primary);
+      border: 2px solid var(--rel-border-brand);
     }
 
     /* ── Footer ── */
@@ -420,7 +419,7 @@ export class RelRangePicker extends LitElement {
       align-items: center;
       justify-content: space-between;
       padding-top: 12px;
-      border-top: 1px solid var(--rel-color-border-default, #ddd);
+      border-top: 1px solid var(--rel-border-default);
       margin-top: auto;
       gap: 8px;
     }
@@ -783,6 +782,7 @@ export class RelRangePicker extends LitElement {
         isDraftTo: false,
         isInRange: false,
         isDisabled: true,
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -807,6 +807,7 @@ export class RelRangePicker extends LitElement {
         isDraftTo,
         isInRange,
         isDisabled: this.isDateDisabled(date),
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -822,6 +823,7 @@ export class RelRangePicker extends LitElement {
         isDraftTo: false,
         isInRange: false,
         isDisabled: true,
+        isWeekend: date.getDay() === 0 || date.getDay() === 6,
       });
     }
 
@@ -896,7 +898,7 @@ export class RelRangePicker extends LitElement {
           `
         : html`
             <button
-              class="trigger-button"
+              part="trigger" class="trigger-button"
               type="button"
               ?disabled=${this.disabled}
               aria-haspopup="dialog"
@@ -914,23 +916,23 @@ export class RelRangePicker extends LitElement {
           `}
 
       ${isPopup && this.open
-        ? html`<div class="backdrop" @click=${this.cancelPopover}></div>`
+        ? html`<div part="overlay" class="backdrop" @click=${this.cancelPopover}></div>`
         : nothing}
 
       <div
-        class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
+        part="panel" class="popover ${this.open ? "open" : ""} ${isPopup ? "popup" : ""}"
         role="dialog"
         aria-label="Select date range"
       >
         <div class="picker-wrapper">
 
           <!-- ── Left: Quick select ── -->
-          <div class="presets">
+          <div part="list" class="presets">
             <div class="presets-grid" role="list" aria-label="Quick date selections">
               ${quickSelects.map(
                 (qs) => html`
                   <button
-                    class="preset-item ${qs.fullWidth ? "full-width" : ""} ${this.draftActivePreset === qs.label ? "active" : ""}"
+                    part="option" class="preset-item ${qs.fullWidth ? "full-width" : ""} ${this.draftActivePreset === qs.label ? "active" : ""}"
                     type="button"
                     role="listitem"
                     ?disabled=${this.disabled}
@@ -940,8 +942,8 @@ export class RelRangePicker extends LitElement {
                     <span>${qs.label}</span>
                     ${this.draftActivePreset === qs.label
                       ? html`<svg width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-                          <circle cx="12" cy="12" r="12" fill="#00F49C"/>
-                          <path d="M7 12.5l3.5 3.5 6.5-7" stroke="#000000" stroke-width="2"
+                          <circle cx="12" cy="12" r="12" fill="var(--rel-bg-brand)"/>
+                          <path d="M7 12.5l3.5 3.5 6.5-7" stroke="var(--rel-text-static-dark)" stroke-width="2"
                             stroke-linecap="round" stroke-linejoin="round"/>
                         </svg>`
                       : nothing}
@@ -971,7 +973,7 @@ export class RelRangePicker extends LitElement {
 
             <div class="calendar-header">
               <button
-                class="nav-btn"
+                part="action" class="nav-btn"
                 type="button"
                 aria-label="Previous month"
                 @click=${this.previousMonth}
@@ -980,7 +982,7 @@ export class RelRangePicker extends LitElement {
               </button>
               <span class="month-label">${this.getMonthName()} ${this.viewYear}</span>
               <button
-                class="nav-btn"
+                part="action" class="nav-btn"
                 type="button"
                 aria-label="Next month"
                 @click=${this.nextMonth}
@@ -1000,7 +1002,7 @@ export class RelRangePicker extends LitElement {
             </div>
 
             <div
-              class="calendar-grid"
+              part="list" class="calendar-grid"
               role="grid"
               aria-label="Select date range"
               @mouseleave=${() => { this.hoverDate = null; }}
@@ -1014,6 +1016,7 @@ export class RelRangePicker extends LitElement {
                   day.isToday ? "today" : "",
                   day.isDisabled ? "disabled" : "",
                   !day.isCurrentMonth ? "other-month" : "",
+                  day.isWeekend ? "weekend" : "",
                 ]
                   .filter(Boolean)
                   .join(" ");
@@ -1033,7 +1036,7 @@ export class RelRangePicker extends LitElement {
               })}
             </div>
 
-            <div class="calendar-footer">
+            <div part="footer" class="calendar-footer">
               <rel-button
                 variant="secondary"
                 size="small"

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

@@ -124,10 +124,10 @@ Draggable separator between panels.
 ## Styling
 
 All styling uses Reliability Design System tokens:
-- Borders: `--rel-borders-width-stroke-100`
-- Colors: `--rel-colors-gray-*`, `--rel-colors-blue-primary`, `--rel-colors-white`
-- Spacing: `--rel-spacing-space-*`
-- Border radius: `--rel-borders-radius-border-radius-*`
+- Borders: `--rel-stroke-sm`
+- Colors: `--rel-bg-neutral-elevated-*`, `--rel-bg-info`, `--rel-bg-surface`
+- Spacing: `--rel-spacing-*`
+- Border radius: `--rel-border-radius-*`
 
 Panels have `overflow: auto` by default for scrollable content.
 

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

@@ -9,7 +9,9 @@ export class RelResizableGroup extends LitElement {
    * PUBLIC API
    * ======================= */
 
-  @property({ type: String }) direction: "horizontal" | "vertical" = "horizontal";
+  // reflect: CSS targets :host([direction="…"]) for flex-direction — without
+  // reflection, setting the property in JS leaves the layout unchanged.
+  @property({ type: String, reflect: true }) direction: "horizontal" | "vertical" = "horizontal";
 
   /* =======================
    * INTERNAL STATE
@@ -28,6 +30,7 @@ export class RelResizableGroup extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: flex;
       width: 100%;
       height: 100%;
@@ -135,10 +138,18 @@ export class RelResizableGroup extends LitElement {
    * ======================= */
 
   private onPointerDown = (e: PointerEvent) => {
-    const target = e.composedPath()[0] as HTMLElement;
-    if (target.tagName !== "REL-RESIZABLE-HANDLE") return;
+    // Find the handle anywhere in the composed path — a pointerdown on the
+    // visible `.grabber` (which lives inside the handle's shadow DOM) makes
+    // composedPath()[0] a <div>, not the handle, so indexing [0] would abort
+    // the drag whenever the user grabs the obvious target.
+    const handle = e
+      .composedPath()
+      .find(
+        (el): el is RelResizableHandle =>
+          el instanceof HTMLElement && el.tagName === "REL-RESIZABLE-HANDLE"
+      );
+    if (!handle) return;
 
-    const handle = target as RelResizableHandle;
     const handleIndex = this.handles.indexOf(handle);
     if (handleIndex === -1) return;
 

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

@@ -1,6 +1,5 @@
 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 {
@@ -26,13 +25,14 @@ export class RelResizableHandle extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       position: relative;
       outline: none;
-      background: var(--rel-color-border-default);
+      background: var(--rel-border-default);
       transition: background 0.15s ease;
     }
 
@@ -50,17 +50,21 @@ export class RelResizableHandle extends LitElement {
 
     :host(:hover),
     :host(:focus-visible) {
-      background: var(--rel-color-bg-selected);
+      background: var(--rel-bg-neutral-elevated-1);
+    }
+
+    :host([dragging]) {
+      background: var(--rel-bg-neutral-elevated-3);
     }
 
     :host(:focus-visible) {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
     .grabber {
-      background: var(--rel-color-icon-primary);
-      border-radius: var(--rel-borders-radius-border-radius-500);
+      background: var(--rel-text-body);
+      border-radius: var(--rel-border-radius-full-rounded);
       transition: background 0.15s ease;
     }
 
@@ -76,15 +80,15 @@ export class RelResizableHandle extends LitElement {
 
     :host(:hover) .grabber,
     :host(:focus-visible) .grabber {
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-surface);
     }
 
     :host([data-dragging]) {
-      background: var(--rel-color-bg-selected);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
     :host([data-dragging]) .grabber {
-      background: var(--rel-color-text-primary);
+      background: var(--rel-text-default);
     }
 
     @media (prefers-reduced-motion: reduce) {

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

@@ -23,7 +23,18 @@ export class RelResizablePanel extends LitElement {
    * ======================= */
 
   static styles = css`
+    /* Default typography for slotted panel headings (Figma headings-md) */
+    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
+      font-family: var(--rel-headings-md-font-family);
+      font-weight: var(--rel-headings-md-font-weight);
+      font-size: var(--rel-headings-md-font-size);
+      line-height: var(--rel-headings-md-line-height);
+      letter-spacing: var(--rel-headings-md-letter-spacing);
+    }
+
     :host {
+      padding: var(--rel-spacing-md);
+      color: var(--rel-text-default);
       display: flex;
       flex-direction: column;
       overflow: auto;