@reliability-design/web 1.3.1 → 1.4.1

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

@@ -24,6 +24,10 @@ export class RelDrawer extends LitElement {
 
   @state() private isDragging = false;
   @state() private dragOffset = 0;
+  // Once a left/right drawer finishes sliding in, we drop its transform so that
+  // `position: fixed` descendants (select dropdowns, popovers, tooltips) are no
+  // longer trapped by the transformed panel's containing block.
+  @state() private settled = false;
 
   @query(".panel") private panelElement!: HTMLElement;
   @query(".overlay") private overlayElement!: HTMLElement;
@@ -36,6 +40,7 @@ export class RelDrawer extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       --drawer-transition-duration: 0.3s;
       --drawer-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
     }
@@ -73,13 +78,13 @@ export class RelDrawer extends LitElement {
     /* Panel base */
     .panel {
       position: absolute;
-      background: var(--rel-color-bg-primary);
+      background: var(--rel-bg-surface);
       box-shadow: var(--rel-shadows-shadow-500);
       display: flex;
       flex-direction: column;
       overflow: hidden;
       outline: none;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       transition: transform var(--drawer-transition-duration) var(--drawer-transition-timing);
     }
 
@@ -90,8 +95,8 @@ export class RelDrawer extends LitElement {
       right: auto;
       width: var(--drawer-width, clamp(640px, 66vw, 952px));
       height: var(--drawer-height, clamp(360px, 49vh, 600px));
-      border-radius: var(--rel-borders-radius-border-radius-200)
-                     var(--rel-borders-radius-border-radius-200)
+      border-radius: var(--rel-border-radius-sm)
+                     var(--rel-border-radius-sm)
                      0
                      0;
       transform: translateX(-50%) translateY(100%);
@@ -129,6 +134,15 @@ export class RelDrawer extends LitElement {
       transform: translateX(0);
     }
 
+    /* Once settled open, drop the (now identity) transform on left/right panels
+       so their fixed-position descendants (select dropdowns, popovers, tooltips)
+       escape the transformed containing block instead of being clipped by the
+       panel. Bottom keeps its transform (used for centering). */
+    .drawer-container.open .panel[data-side="left"].settled,
+    .drawer-container.open .panel[data-side="right"].settled {
+      transform: none;
+    }
+
     /* Dragging state */
     .panel.dragging {
       transition: none;
@@ -146,15 +160,16 @@ export class RelDrawer extends LitElement {
     .handle {
       width: 48px;
       height: 4px;
-      background: var(--rel-color-border-divider);
-      border-radius: var(--rel-borders-radius-border-radius-500);
-      margin: var(--rel-spacing-space-xs) auto var(--rel-spacing-space-2xs);
+      background: var(--rel-bg-neutral-elevated-2);
+      border-radius: var(--rel-border-radius-full-rounded);
+      margin: var(--rel-spacing-xs) auto var(--rel-spacing-2xs);
       cursor: grab;
       touch-action: none;
     }
 
     .handle:active {
       cursor: grabbing;
+      background: var(--rel-border-accent);
     }
 
     .handle.hidden {
@@ -165,9 +180,9 @@ export class RelDrawer extends LitElement {
     .header {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs);
-      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
-      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      gap: var(--rel-spacing-2xs);
+      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
+      border-bottom: var(--rel-stroke-sm) solid var(--rel-border-default);
     }
 
     .header.empty {
@@ -178,47 +193,73 @@ export class RelDrawer extends LitElement {
       display: flex;
       align-items: flex-start;
       justify-content: space-between;
+      gap: var(--rel-spacing-sm);
     }
 
     .title {
-      font-size: var(--rel-fontSizes-lg);
-      font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-text-heading);
+      color: var(--rel-text-label);
       margin: 0;
+
+      font-family: var(--rel-headings-lg-font-family);
+
+      font-weight: var(--rel-headings-lg-font-weight);
+
+      font-size: var(--rel-headings-lg-font-size);
+
+      line-height: var(--rel-headings-lg-line-height);
+
+      letter-spacing: var(--rel-headings-lg-letter-spacing);
+
     }
 
     .description {
-      font-size: var(--rel-fontSizes-sm);
-      color: var(--rel-text-primary);
+      color: var(--rel-text-body);
       margin: 0;
       opacity: 0.8;
+
+      font-family: var(--rel-body-lg-regular-font-family);
+
+      font-weight: var(--rel-body-lg-regular-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);
+
+    }
+
+    /* Emphasised inline text in slotted content (Figma body-lg-medium) */
+    .content ::slotted(strong),
+    .content ::slotted(b) {
+      font-weight: var(--rel-body-lg-medium-font-weight);
     }
 
     .close-button {
       background: transparent;
       border: none;
       cursor: pointer;
-      padding: var(--rel-spacing-space-2xs);
+      padding: var(--rel-spacing-2xs);
       display: flex;
       align-items: center;
       justify-content: center;
       align-self: flex-start;
       flex-shrink: 0;
-      border-radius: var(--rel-borders-radius-border-radius-100);
-      color: var(--rel-color-text-primary);
+      border-radius: var(--rel-border-radius-xs);
+      color: var(--rel-text-default);
       transition: background 0.15s ease;
     }
 
     .close-button:hover {
-      background: var(--rel-surface-secondary, #fafafa);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .close-button:active {
-      background: var(--rel-color-border-divider);
+      background: var(--rel-border-default);
     }
 
     .close-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -226,14 +267,14 @@ export class RelDrawer extends LitElement {
     .content {
       flex: 1;
       overflow-y: auto;
-      padding: var(--rel-spacing-space-lg);
+      padding: var(--rel-spacing-xl);
     }
 
     /* Footer */
     .footer {
       flex-shrink: 0;
-      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-lg);
-      border-top: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      padding: var(--rel-spacing-md) var(--rel-spacing-lg);
+      border-top: var(--rel-stroke-sm) solid var(--rel-border-default);
     }
 
     /* Reduced motion */
@@ -292,6 +333,27 @@ export class RelDrawer extends LitElement {
 
     document.addEventListener("keydown", this.handleKeydown);
 
+    // After the slide-in transition completes, mark the panel settled so its
+    // transform is dropped (frees fixed-position dropdowns/popovers). A timeout
+    // backstops the case where transitionend doesn't fire.
+    this.settled = false;
+    this.updateComplete.then(() => {
+      const panel = this.panelElement;
+      if (!panel) return;
+      let done = false;
+      const settle = () => {
+        if (done) return;
+        done = true;
+        this.settled = true;
+        panel.removeEventListener("transitionend", onEnd);
+      };
+      const onEnd = (e: TransitionEvent) => {
+        if (e.propertyName === "transform") settle();
+      };
+      panel.addEventListener("transitionend", onEnd);
+      setTimeout(settle, 500);
+    });
+
     this.dispatchEvent(
       new CustomEvent("rel-open-change", {
         detail: { open: true },
@@ -302,6 +364,7 @@ export class RelDrawer extends LitElement {
   }
 
   private handleClose() {
+    this.settled = false;
     this.unlockScroll();
     document.removeEventListener("keydown", this.handleKeydown);
 
@@ -509,7 +572,7 @@ export class RelDrawer extends LitElement {
 
         <div
           part="panel"
-          class="panel ${this.isDragging ? "dragging" : ""}"
+          class="panel ${this.isDragging ? "dragging" : ""} ${this.settled ? "settled" : ""}"
           data-side="${this.side}"
           style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"

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

@@ -49,32 +49,32 @@ A keyboard key/shortcut pill component for displaying keyboard shortcuts and key
 The component uses design tokens from the Reliability Design System:
 
 #### Colors
-- `--rel-colors-gray-light` - Default background
-- `--rel-colors-gray-background` - Muted and inset backgrounds
-- `--rel-colors-gray-heading` - Default text color
-- `--rel-colors-gray-placeholder` - Muted text color
-- `--rel-colors-gray-border` - Default border
-- `--rel-colors-gray-divider` - Muted border
+- `--rel-bg-surface-elevated` - Default background
+- `--rel-bg-neutral-elevated-1` - Muted and inset backgrounds
+- `--rel-text-label` - Default text color
+- `--rel-text-placeholder` - Muted text color
+- `--rel-border-default` - Default border
+- `--rel-border-default` - Muted border
 
 #### Typography
-- `--rel-fontFamilies-primary` - Font family (Poppins)
-- `--rel-fontWeights-medium` - Font weight (500)
-- `--rel-fontSizes-xs` - Small size font
-- `--rel-fontSizes-sm` - Medium size font
-- `--rel-fontSizes-md` - Large size font
+- `--rel-fonts-font-family` - Font family (Poppins)
+- `--rel-fonts-weight-body-medium` - Font weight (500)
+- `--rel-body-xs-regular-font-size` - Small size font
+- `--rel-body-sm-regular-font-size` - Medium size font
+- `--rel-body-md-regular-font-size` - Large size font
 
 #### Spacing
-- `--rel-spacing-space-3xs` (2px)
-- `--rel-spacing-space-2xs` (4px)
-- `--rel-spacing-space-xs` (8px)
-- `--rel-spacing-space-sm` (12px)
-- `--rel-spacing-space-md` (16px)
+- `--rel-spacing-3xs` (2px)
+- `--rel-spacing-2xs` (4px)
+- `--rel-spacing-xs` (8px)
+- `--rel-spacing-sm` (12px)
+- `--rel-spacing-md` (16px)
 
 #### Borders
-- `--rel-borders-width-stroke-100` (1px)
-- `--rel-borders-radius-border-radius-100` (2px)
-- `--rel-borders-radius-border-radius-200` (8px)
-- `--rel-borders-radius-border-radius-500` (1000px - pill shape)
+- `--rel-stroke-sm` (1px)
+- `--rel-border-radius-xs` (2px)
+- `--rel-border-radius-sm` (8px)
+- `--rel-border-radius-full-rounded` (1000px - pill shape)
 
 ## Examples
 

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

@@ -1,6 +1,5 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html, css, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-kbd")
 export class RelKbd extends LitElement {
@@ -18,58 +17,101 @@ export class RelKbd extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      font-family: var(--rel-fontFamilies-primary);
-      font-weight: var(--rel-fontWeights-medium);
+      font-family: var(--rel-label-md-font-family);
+      font-weight: var(--rel-label-md-font-weight);
+      font-size: var(--rel-label-md-font-size);
+      line-height: var(--rel-label-md-line-height);
+      letter-spacing: var(--rel-label-md-letter-spacing);
       white-space: nowrap;
       user-select: none;
       transition: box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
-      line-height: 1;
       vertical-align: middle;
     }
 
+    /* Slotted hint text (Figma body-sm-regular) */
+    ::slotted(span) {
+      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);
+    }
+
+    
     :host([size="sm"]) {
-      font-size: var(--rel-fontSizes-xs);
-      padding: var(--rel-spacing-space-3xs) var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-3xs) var(--rel-spacing-xs);
       min-width: 20px;
       height: 20px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs);
+
+      font-family: var(--rel-label-xs-font-family);
+
+      font-weight: var(--rel-label-xs-font-weight);
+
+      font-size: var(--rel-label-xs-font-size);
+
+      line-height: var(--rel-label-xs-line-height);
+
+      letter-spacing: var(--rel-label-xs-letter-spacing);
+
     }
 
     :host([size="md"]) {
-      font-size: var(--rel-fontSizes-sm);
-      padding: var(--rel-spacing-space-2xs) var(--rel-spacing-space-sm);
+      padding: var(--rel-spacing-2xs) var(--rel-spacing-sm);
       min-width: 24px;
       height: 24px;
-      border-radius: var(--rel-borders-radius-border-radius-100);
+      border-radius: var(--rel-border-radius-xs);
+
+      font-family: var(--rel-label-sm-font-family);
+
+      font-weight: var(--rel-label-sm-font-weight);
+
+      font-size: var(--rel-label-sm-font-size);
+
+      line-height: var(--rel-label-sm-line-height);
+
+      letter-spacing: var(--rel-label-sm-letter-spacing);
+
     }
 
     :host([size="lg"]) {
-      font-size: var(--rel-fontSizes-md);
-      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-md);
+      padding: var(--rel-spacing-xs) var(--rel-spacing-md);
       min-width: 32px;
       height: 32px;
-      border-radius: var(--rel-borders-radius-border-radius-200);
+      border-radius: var(--rel-border-radius-sm);
+
+      font-family: var(--rel-label-lg-font-family);
+
+      font-weight: var(--rel-label-lg-font-weight);
+
+      font-size: var(--rel-label-lg-font-size);
+
+      line-height: var(--rel-label-lg-line-height);
+
+      letter-spacing: var(--rel-label-lg-letter-spacing);
+
     }
 
     :host([variant="default"]) {
-      background: var(--rel-color-bg-secondary);
-      color: var(--rel-color-text-heading);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
+      background: var(--rel-bg-neutral-elevated-1);
+      color: var(--rel-text-label);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
       box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 0 0 rgba(255, 255, 255, 0.5) inset;
     }
 
     :host([variant="muted"]) {
-      background: var(--rel-color-bg-secondary);
-      color: var(--rel-color-text-placeholder);
-      border: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-divider);
+      background: var(--rel-bg-neutral-elevated-2);
+      color: var(--rel-text-placeholder);
+      border: var(--rel-stroke-sm) solid var(--rel-border-default);
       box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
     }
 
     :host([pill]) {
-      border-radius: var(--rel-borders-radius-border-radius-500);
+      border-radius: var(--rel-border-radius-full-rounded);
     }
 
     :host([inset]) {
@@ -78,13 +120,13 @@ export class RelKbd extends LitElement {
     }
 
     :host([inset][variant="default"]) {
-      background: var(--rel-color-bg-secondary);
-      border-color: var(--rel-color-border-divider);
+      background: var(--rel-bg-neutral-elevated-1);
+      border-color: var(--rel-border-default);
     }
 
     :host([inset][variant="muted"]) {
-      background: var(--rel-color-border-divider);
-      border-color: var(--rel-color-border-default);
+      background: var(--rel-border-default);
+      border-color: var(--rel-border-default);
     }
   `;
 
@@ -92,3 +134,55 @@ export class RelKbd extends LitElement {
     return html`<slot></slot>`;
   }
 }
+
+/**
+ * Multi-key shortcut (Figma Kbd Items=1/2/3/4): renders one <rel-kbd> per
+ * entry in `items` with "+" separators between them. Slotted <rel-kbd>
+ * children may be used instead of the items array.
+ *
+ * <rel-kbd-group .items=${["Ctrl", "Shift", "P"]} size="md"></rel-kbd-group>
+ */
+@customElement("rel-kbd-group")
+export class RelKbdGroup extends LitElement {
+  @property({ type: Array }) items: string[] = [];
+
+  @property({ type: String, reflect: true })
+  size: "sm" | "md" | "lg" = "md";
+
+  @property({ type: String, reflect: true })
+  variant: "default" | "muted" = "default";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-2xs);
+      white-space: nowrap;
+    }
+
+    /* "+" between keys (Figma body-sm-regular, caption tone) */
+    .separator {
+      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-caption);
+      user-select: none;
+    }
+  `;
+
+  render() {
+    return html`
+      ${this.items.map(
+        (key, i) => html`
+          ${i > 0
+            ? html`<span part="label" class="separator" aria-hidden="true">+</span>`
+            : nothing}
+          <rel-kbd part="item" size=${this.size} variant=${this.variant}>${key}</rel-kbd>
+        `
+      )}
+      <slot></slot>
+    `;
+  }
+}

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

@@ -62,7 +62,7 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
+- `--rel-fonts-font-family` - Font family
 
 ## Accessibility
 - Uses standard CSS Grid, which is accessible by default

package/dist/components/rel-layout/rel-layout.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-layout")
 export class RelLayout extends LitElement {
@@ -12,9 +11,10 @@ export class RelLayout extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: grid;
       width: 100%;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       gap: var(--_gap, 1rem);
       grid-template-columns: repeat(var(--_columns, 4), 1fr);
     }

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

@@ -92,31 +92,31 @@ None exposed.
 ## Tokens / CSS Variables
 
 ### Semantic Tokens
-- `--rel-fontFamilies-primary` - Font family
-- `--rel-fontSizes-sm` - Font size
-- `--rel-fontSizes-lg` - Chevron font size
-- `--rel-fontWeights-medium` - Active item font weight
-- `--rel-lineHeights-sm` - Line height
+- `--rel-fonts-font-family` - Font family
+- `--rel-body-sm-regular-font-size` - Font size
+- `--rel-body-xl-regular-font-size` - Chevron font size
+- `--rel-fonts-weight-body-medium` - Active item font weight
+- `--rel-body-sm-regular-line-height` - Line height
 
 ### Spacing Tokens
-- `--rel-spacing-space-3xs` - Menu vertical padding
-- `--rel-spacing-space-xs` - Item padding, gaps
-- `--rel-spacing-space-sm` - Item horizontal padding
-- `--rel-spacing-space-2xs` - Checkbox gap, submenu offset
+- `--rel-spacing-3xs` - Menu vertical padding
+- `--rel-spacing-xs` - Item padding, gaps
+- `--rel-spacing-sm` - Item horizontal padding
+- `--rel-spacing-2xs` - Checkbox gap, submenu offset
 
 ### Color Tokens
-- `--rel-colors-white` - Menu and submenu background
-- `--rel-text-primary` - Default text color
+- `--rel-bg-surface` - Menu and submenu background
+- `--rel-text-default` - Default text color
 - `--rel-text-disabled` - Disabled item text
-- `--rel-surface-secondary` - Hover and active background
-- `--rel-colors-gray-divider` - Active press background
-- `--rel-colors-blue-primary` - Focus outline
+- `--rel-bg-surface-elevated` - Hover and active background
+- `--rel-border-default` - Active press background
+- `--rel-bg-info` - Focus outline
 
 ### Shadow Tokens
 - `--rel-shadows-shadow-300` - Menu and submenu drop shadow
 
 ### Border Tokens
-- `--rel-borders-radius-border-radius-300` - Border radius
+- `--rel-border-radius-md` - Border radius
 
 ## Accessibility
 - Uses `role="menu"` on container and `role="menuitem"` on items