@reliability-design/web 1.0.6 → 1.2.0

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

@@ -1,7 +1,9 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+import "@reliability-design/icons/rel-icon";
 
-export type TextFieldState = "default" | "focused" | "error" | "disabled";
+export type TextFieldState = "default" | "error" | "disabled";
 export type TextFieldSize = "small" | "medium" | "large";
 
 @customElement("rel-textfield")
@@ -15,28 +17,106 @@ export class RelTextfield extends LitElement {
   @property({ type: String }) supportingText?: string;
   @property({ type: String }) state: TextFieldState = "default";
   @property({ type: String }) size: TextFieldSize = "medium";
+  @property({ type: Boolean, reflect: true }) floatingLabel = false;
 
-  @state() private internalState: TextFieldState = "default";
+  @state() private internalState: "default" | "focused" = "default";
+  private _wasError = false;
+
+  private uniqueId = `textfield-${Math.random().toString(36).slice(2)}`;
 
   static styles = css`
     :host {
       display: block;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
+      font-family: var(--rel-fontFamilies-primary);
     }
 
     /* Wrapper */
     .textfield-wrapper {
       display: flex;
       flex-direction: column;
-      gap: var(--rel-spacing-space-2xs, 4px);
+      gap: var(--rel-spacing-space-2xs);
       width: 100%;
     }
 
     /* Label */
     .textfield-label {
-      font-size: var(--rel-fontSizes-sm, 12px);
-      font-weight: var(--rel-fontWeights-medium, 500);
-      color: var(--rel-text-heading, #2b2b2b);
+      font-size: var(--rel-fontSizes-sm);
+      font-weight: var(--rel-fontWeights-medium);
+      color: var(--rel-color-text-heading);
+    }
+
+    /* Floating label variant */
+    :host([floatinglabel]) .textfield-wrapper {
+      gap: 0;
+    }
+
+    :host([floatinglabel]) .textfield-container {
+      overflow: visible;
+      position: relative;
+      padding-top: 0;
+    }
+
+    :host([floatinglabel]) .textfield-label {
+      position: absolute;
+      left: var(--rel-spacing-space-sm);
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: var(--rel-fontSizes-md);
+      font-weight: var(--rel-fontWeights-regular);
+      color: var(--rel-color-text-placeholder);
+      pointer-events: none;
+      transition: top 0.15s ease, font-size 0.15s ease, color 0.15s ease, transform 0.15s ease;
+      background: var(--rel-color-bg-primary);
+      padding: 0 2px;
+      z-index: 1;
+      line-height: 1;
+      white-space: nowrap;
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.focused .textfield-label,
+    :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label {
+      top: 0;
+      transform: translateY(-50%);
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-color-text-primary);
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.error .textfield-label {
+      color: var(--rel-error-text);
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.focused:not(.error) .textfield-label {
+      color: var(--rel-color-text-primary);
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.focused.error .textfield-label,
+    :host([floatinglabel]) .textfield-wrapper.has-value.error .textfield-label {
+      top: 0;
+      transform: translateY(-50%);
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-error-text);
+    }
+
+    :host([floatinglabel]) .textfield-input {
+      padding-top: var(--rel-spacing-space-sm);
+      padding-bottom: var(--rel-spacing-space-sm);
+    }
+
+    :host([floatinglabel]) .textfield-input.has-left-icon {
+      padding-left: var(--rel-spacing-space-2xl);
+    }
+
+    :host([floatinglabel]) .textfield-label.has-left-icon {
+      left: var(--rel-spacing-space-2xl);
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.focused .textfield-label.has-left-icon,
+    :host([floatinglabel]) .textfield-wrapper.has-value .textfield-label.has-left-icon {
+      left: var(--rel-spacing-space-sm);
+    }
+
+    :host([floatinglabel]) .textfield-wrapper.disabled .textfield-label {
+      background: var(--rel-color-bg-tertiary);
     }
 
     /* Container */
@@ -44,14 +124,15 @@ export class RelTextfield extends LitElement {
       display: flex;
       align-items: center;
       position: relative;
-      border: 1px solid var(--rel-border-default, #ddd);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      background: var(--rel-colors-white, #fff);
+      border: 1px solid var(--rel-color-border-default);
+      border-radius: var(--rel-borders-radius-border-radius-100);
+      background: var(--rel-color-bg-primary);
+      overflow: hidden;
       transition: border 0.2s;
     }
 
     .textfield-container.disabled {
-      background: var(--rel-surface-surface, #f5f5f5);
+      background: var(--rel-color-bg-tertiary);
       cursor: not-allowed;
     }
 
@@ -60,23 +141,23 @@ export class RelTextfield extends LitElement {
       flex: 1;
       border: none;
       outline: none;
-      font-size: var(--rel-fontSizes-md, 14px);
-      padding: 0.5rem 0.75rem;
+      font-size: var(--rel-fontSizes-md);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
       background: transparent;
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      color: var(--rel-text-primary, #333);
+      font-family: var(--rel-fontFamilies-primary);
+      color: var(--rel-color-text-primary);
     }
 
     .textfield-input:disabled {
       cursor: not-allowed;
-      color: var(--rel-text-disabled, #9e9e9e);
+      color: var(--rel-color-text-disabled);
     }
 
     .icon {
       position: absolute;
       display: flex;
       pointer-events: none;
-      color: var(--rel-text-placeholder, #a9a9a9);
+      color: var(--rel-color-text-placeholder);
     }
 
     .icon.left {
@@ -88,32 +169,32 @@ export class RelTextfield extends LitElement {
     }
 
     .textfield-wrapper.small .textfield-input {
-      padding: 0.5rem 1rem;
-      font-size: 0.9rem;
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      font-size: var(--rel-fontSizes-sm);
     }
 
     .textfield-wrapper.medium .textfield-input {
-      padding: 0.688rem 1rem;
-      font-size: 1rem;
+      padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-md);
     }
 
     .textfield-wrapper.large .textfield-input {
-      padding: 0.875rem 1rem;
-      font-size: 1.1rem;
+      padding: var(--rel-spacing-space-md) var(--rel-spacing-space-md);
+      font-size: var(--rel-fontSizes-lg);
     }
 
     /* Adjust padding when icons are present */
     .textfield-wrapper .textfield-input.has-left-icon {
-      padding-left: 2.5rem;
+      padding-left: var(--rel-spacing-space-2xl);
     }
 
     .textfield-wrapper .textfield-input.has-right-icon {
-      padding-right: 2.5rem;
+      padding-right: var(--rel-spacing-space-2xl);
     }
 
     /* States */
     .textfield-wrapper.focused .textfield-container {
-      border-color: var(--rel-colors-primary-500, #0091ea);
+      border-color: var(--rel-color-text-primary);
     }
 
     .textfield-input:focus-visible {
@@ -122,40 +203,53 @@ export class RelTextfield extends LitElement {
 
     .textfield-wrapper.focused .textfield-container,
     .textfield-container:focus-within {
-      border-color: var(--rel-colors-primary-500, #0091ea);
-      box-shadow: 0 0 0 1px var(--rel-colors-primary-500, #0091ea);
+      border-color: var(--rel-color-text-primary);
+      box-shadow: 0 0 0 1px var(--rel-color-text-primary);
     }
 
     .textfield-wrapper.error .textfield-container {
-      border-color: var(--rel-border-error, #cc0000);
+      border-color: var(--rel-error-surface-default);
+      box-shadow: none;
     }
 
     .textfield-wrapper.disabled .textfield-container {
-      border-color: var(--rel-border-default, #ddd);
+      border-color: var(--rel-color-border-default);
     }
 
     /* Supporting text */
     .textfield-support {
-      font-size: var(--rel-fontSizes-xs, 10px);
-      color: var(--rel-text-placeholder, #a9a9a9);
+      font-size: var(--rel-fontSizes-xs);
+      color: var(--rel-color-text-placeholder);
     }
 
     .textfield-support.error {
-      color: var(--rel-text-error, #cc0000);
+      color: var(--rel-error-text);
     }
 
     /* Placeholder */
     .textfield-input::placeholder {
-      color: var(--rel-text-placeholder, #a9a9a9);
+      color: var(--rel-color-text-placeholder);
+    }
+
+    /* Suppress Chrome autofill blue background */
+    .textfield-input:-webkit-autofill,
+    .textfield-input:-webkit-autofill:hover,
+    .textfield-input:-webkit-autofill:focus {
+      -webkit-box-shadow: 0 0 0px 1000px var(--rel-color-bg-primary) inset;
+      -webkit-text-fill-color: var(--rel-color-text-primary);
     }
   `;
 
-  private get currentState(): TextFieldState {
-    return this.state !== "default" ? this.state : this.internalState;
+  connectedCallback() {
+    super.connectedCallback();
+    const leftIcon = this.getAttribute('lefticon') || this.getAttribute('leftIcon');
+    if (leftIcon) this.leftIcon = leftIcon;
+    const rightIcon = this.getAttribute('righticon') || this.getAttribute('rightIcon');
+    if (rightIcon) this.rightIcon = rightIcon;
   }
 
   private handleFocus() {
-    if (this.state !== "disabled" && this.state !== "error") {
+    if (this.state !== "disabled") {
       this.internalState = "focused";
     }
   }
@@ -169,8 +263,15 @@ export class RelTextfield extends LitElement {
   private handleInput(e: Event) {
     const input = e.target as HTMLInputElement;
     this.value = input.value;
+    if (this.state === "error" && this.value) {
+      this._wasError = true;
+      this.state = "default";
+    } else if (this._wasError && !this.value) {
+      this._wasError = false;
+      this.state = "error";
+    }
     this.dispatchEvent(
-      new CustomEvent<string>("input-change", {
+      new CustomEvent<string>("rel-change", {
         detail: this.value,
         bubbles: true,
         composed: true,
@@ -182,8 +283,10 @@ export class RelTextfield extends LitElement {
     const wrapperClasses = [
       "textfield-wrapper",
       this.size,
-      this.currentState,
-    ].join(" ");
+      this.state,
+      this.internalState === "focused" ? "focused" : "",
+      this.value ? "has-value" : "",
+    ].filter(Boolean).join(" ");
 
     const inputClasses = [
       "textfield-input",
@@ -195,8 +298,8 @@ export class RelTextfield extends LitElement {
 
     return html`
       <div class="${wrapperClasses}">
-        ${this.label
-          ? html`<label class="textfield-label">${this.label}</label>`
+        ${!this.floatingLabel && this.label
+          ? html`<label class="textfield-label" for="${this.uniqueId}">${this.label}</label>`
           : ""}
 
         <div
@@ -204,12 +307,18 @@ export class RelTextfield extends LitElement {
             ? "disabled"
             : ""}"
         >
+          ${this.floatingLabel && this.label
+            ? html`<label
+                class="textfield-label${this.leftIcon ? ' has-left-icon' : ''}"
+                for="${this.uniqueId}">${this.label}</label>`
+            : ""}
           ${this.leftIcon
-            ? html`<span class="icon left">${this.leftIcon}</span>`
+            ? html`<rel-icon name="${this.leftIcon}" size="sm" class="icon left"></rel-icon>`
             : ""}
 
           <input
             type="${this.type}"
+            id="${this.uniqueId}"
             class="${inputClasses}"
             placeholder="${this.placeholder}"
             .value="${this.value}"
@@ -221,7 +330,7 @@ export class RelTextfield extends LitElement {
           />
 
           ${this.rightIcon
-            ? html`<span class="icon right">${this.rightIcon}</span>`
+            ? html`<rel-icon name="${this.rightIcon}" size="sm" class="icon right"></rel-icon>`
             : ""}
         </div>
 

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
 
 export type ToastType = "default" | "error";
 
@@ -9,9 +10,10 @@ export class RelToast extends LitElement {
   @property({ type: String }) type: ToastType = "default";
   @property({ type: String }) actionLabel?: string;
   @property({ type: Number }) duration: number = 4000;
+  @property({ type: Boolean, reflect: true }) show = false;
 
   @state() private visible: boolean = false;
-  private timeoutId?: number;
+  private _dismissTimer: ReturnType<typeof setTimeout> | null = null;
 
   static styles = css`
     :host {
@@ -23,7 +25,7 @@ export class RelToast extends LitElement {
       justify-content: center;
       width: 100%;
       pointer-events: none;
-      z-index: 1000;
+      z-index: var(--rel-z-toast, 9000);
       font-family: var(--rel-fontFamilies-primary);
     }
 
@@ -31,20 +33,20 @@ export class RelToast extends LitElement {
     .toast {
       display: inline-flex;
       align-items: center;
-      gap: var(--rel-spacing-space-sm, 12px);
-      background-color: var(--rel-surface-toast, #404040);
-      color: var(--rel-colors-white, #fff);
-      font-family: var(--rel-fontFamilies-primary, sans-serif);
-      font-size: var(--rel-fontSizes-md, 14px);
-      border-radius: var(--rel-borders-radius-border-radius-200, 8px);
-      padding: var(--rel-spacing-space-md, 16px);
+      gap: var(--rel-spacing-space-sm);
+      background-color: var(--rel-color-text-primary);
+      color: var(--rel-color-bg-primary);
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-md);
+      border-radius: var(--rel-borders-radius-border-radius-200);
+      padding: var(--rel-spacing-space-md);
       box-shadow: var(--rel-shadows-shadow-300);
       pointer-events: all;
       animation: fadeInUp 0.25s ease;
     }
 
     .toast.error {
-      background-color: var(--rel-colors-red-secondary);
+      background-color: var(--rel-error-surface-default);
     }
 
     .toast.hidden {
@@ -73,7 +75,7 @@ export class RelToast extends LitElement {
     }
 
     .toast-action:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
+      outline: 2px solid #FFFFFF;
       outline-offset: 2px;
       border-radius: 2px;
     }
@@ -86,8 +88,8 @@ export class RelToast extends LitElement {
       font-size: 1rem;
       cursor: pointer;
       line-height: 1;
-      padding: var(--rel-spacing-space-2xs, 4px);
-      margin-left: var(--rel-spacing-space-2xs, 4px);
+      padding: var(--rel-spacing-space-2xs);
+      margin-left: var(--rel-spacing-space-2xs);
     }
 
     .toast-close:hover {
@@ -95,11 +97,23 @@ export class RelToast extends LitElement {
     }
 
     .toast-close:focus-visible {
-      outline: 2px solid var(--rel-colors-white, #fff);
+      outline: 2px solid #FFFFFF;
       outline-offset: 2px;
       border-radius: 2px;
     }
 
+    /* Dark mode overrides */
+    :host-context([data-theme="dark"]) .toast-action,
+    :host-context(.dark) .toast-action {
+      color: var(--rel-colors-green-tertiary);
+    }
+
+    :host-context([data-theme="dark"]) .toast.error,
+    :host-context(.dark) .toast.error {
+      background-color: var(--rel-error-surface-default);
+      color: #ffffff;
+    }
+
     @media (prefers-reduced-motion: reduce) {
       .toast {
         animation: none;
@@ -119,25 +133,45 @@ export class RelToast extends LitElement {
     }
   `;
 
-  show() {
-    this.visible = true;
-
-    if (this.duration > 0) {
-      this.timeoutId = window.setTimeout(() => this.close(), this.duration);
+  willUpdate(changed: Map<string, unknown>) {
+    if (!changed.has('show')) return;
+    if (this.show) {
+      this.visible = true;
+      if (this._dismissTimer) clearTimeout(this._dismissTimer);
+      if (this.duration > 0) {
+        this._dismissTimer = setTimeout(() => this.close(), this.duration);
+      }
+    } else {
+      this.visible = false;
+      if (this._dismissTimer) {
+        clearTimeout(this._dismissTimer);
+        this._dismissTimer = null;
+      }
     }
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._dismissTimer) clearTimeout(this._dismissTimer);
+  }
+
+  open() {
+    this.show = true;
+  }
+
   close() {
+    this.show = false;
     this.visible = false;
+    if (this._dismissTimer) {
+      clearTimeout(this._dismissTimer);
+      this._dismissTimer = null;
+    }
     this.dispatchEvent(
       new CustomEvent("dismissed", {
         bubbles: true,
         composed: true,
       })
     );
-    if (this.timeoutId) {
-      clearTimeout(this.timeoutId);
-    }
   }
 
   private handleActionClick(event: Event) {

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

@@ -7,7 +7,11 @@ export type TooltipPosition = "above" | "below";
 export class RelTooltip extends LitElement {
   @property({ type: String }) text: string = "";
   @property({ type: String }) position: TooltipPosition = "above";
-  @property({ type: Boolean }) showTail: boolean = false;
+  @property({ type: Boolean, attribute: "show-tail" }) showTail: boolean =
+    false;
+
+  // Stable id so aria-describedby can reference the bubble across renders.
+  private uniqueId = Math.random().toString(36).slice(2);
 
   static styles = css`
     :host {
@@ -20,9 +24,10 @@ export class RelTooltip extends LitElement {
       position: absolute;
       left: 50%;
       transform: translateX(-50%);
-      background-color: var(--rel-surface-toast, #404040);
-      color: var(--rel-colors-white, #fff);
-      padding: var(--rel-spacing-space-xs, 8px) var(--rel-spacing-space-sm, 12px);
+      background-color: #1a1a1a;
+      color: #ffffff;
+      padding: var(--rel-spacing-space-xs, 8px)
+        var(--rel-spacing-space-sm, 12px);
       border-radius: var(--rel-borders-radius-border-radius-200, 8px);
       font-size: var(--rel-fontSizes-sm, 12px);
       font-family: var(--rel-fontFamilies-primary, sans-serif);
@@ -31,9 +36,11 @@ export class RelTooltip extends LitElement {
       opacity: 0;
       pointer-events: none;
       transition: opacity 0.2s ease;
+      overflow: visible;
     }
 
-    :host(:hover) .tooltip-bubble {
+    :host(:hover) .tooltip-bubble,
+    :host(:focus-within) .tooltip-bubble {
       opacity: 1;
     }
 
@@ -55,23 +62,59 @@ export class RelTooltip extends LitElement {
       height: 0;
       border-left: 6px solid transparent;
       border-right: 6px solid transparent;
+      display: block;
     }
 
     .tooltip-bubble.above .tooltip-tail {
       bottom: -6px;
-      border-top: 6px solid var(--rel-surface-toast, #404040);
+      border-top: 6px solid #1a1a1a;
+      border-bottom: none;
     }
 
     .tooltip-bubble.below .tooltip-tail {
       top: -6px;
-      border-bottom: 6px solid var(--rel-surface-toast, #404040);
+      border-bottom: 6px solid #1a1a1a;
+      border-top: none;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble,
+    :host-context(.dark) .tooltip-bubble {
+      background-color: #ffffff;
+      color: #000000;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.above .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.above .tooltip-tail {
+      border-top-color: #ffffff;
+    }
+
+    :host-context([data-theme="dark"]) .tooltip-bubble.below .tooltip-tail,
+    :host-context(.dark) .tooltip-bubble.below .tooltip-tail {
+      border-bottom-color: #ffffff;
     }
   `;
 
+  firstUpdated() {
+    this.linkTrigger();
+  }
+
+  private linkTrigger() {
+    const slot = this.shadowRoot?.querySelector("slot");
+    if (!slot) return;
+    const trigger = slot.assignedElements()[0];
+    if (trigger) {
+      trigger.setAttribute("aria-describedby", `tooltip-${this.uniqueId}`);
+    }
+  }
+
   render() {
     return html`
-      <slot></slot>
-      <div class="tooltip-bubble ${this.position}" role="tooltip" aria-hidden="true">
+      <slot @slotchange="${this.linkTrigger}"></slot>
+      <div
+        class="tooltip-bubble ${this.position}"
+        id="tooltip-${this.uniqueId}"
+        role="tooltip"
+      >
         ${this.text}
         ${this.showTail ? html`<span class="tooltip-tail"></span>` : ""}
       </div>

package/dist/components/rel-topbar/rel-topbar-actions.ts

@@ -0,0 +1,24 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-topbar-actions")
+export class RelTopbarActions extends LitElement {
+  static styles = css`
+    .actions {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs, 8px);
+    }
+  `;
+
+  render() {
+    return html`<div class="actions"><slot></slot></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-actions": RelTopbarActions;
+  }
+}

package/dist/components/rel-topbar/rel-topbar-brand.ts

@@ -0,0 +1,47 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../styles/vars-v2.css";
+
+@customElement("rel-topbar-brand")
+export class RelTopbarBrand extends LitElement {
+  @property({ type: String }) src: string = "";
+  @property({ type: String }) href: string = "/";
+  @property({ type: String }) label: string = "";
+
+  static styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      text-decoration: none;
+      color: var(--rel-color-text-primary);
+      font-weight: var(--rel-fontWeights-semibold);
+      font-size: var(--rel-fontSizes-md);
+    }
+
+    img {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`
+      <a href="${this.href}" aria-label="${this.label || "Home"}">
+        ${this.src
+          ? html`<img src="${this.src}" alt="${this.label}" />`
+          : html`<slot>${this.label}</slot>`}
+      </a>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-topbar-brand": RelTopbarBrand;
+  }
+}