@reliability-design/web 1.0.6 → 1.2.0

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

@@ -9,7 +9,7 @@ interface CalendarDay {
   isSelected: boolean;
   isDisabled: boolean;
 }
-
+  
 @customElement("rel-date-picker")
 export class RelDatePicker extends LitElement {
   @property({ type: String, reflect: true }) value: string | null = null;
@@ -47,6 +47,10 @@ export class RelDatePicker extends LitElement {
 
     :host([disabled]) {
       opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :host([disabled]) * {
       pointer-events: none;
     }
 
@@ -70,7 +74,7 @@ export class RelDatePicker extends LitElement {
       justify-content: space-between;
       gap: var(--rel-spacing-space-xs);
       padding: var(--rel-spacing-space-sm) var(--rel-spacing-space-md);
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       font-family: var(--rel-fontFamilies-primary);
@@ -82,13 +86,13 @@ export class RelDatePicker extends LitElement {
     }
 
     .trigger-button:hover:not(:disabled) {
-      border-color: var(--rel-colors-gray-heading);
+      border-color: var(--rel-color-border-strong);
     }
 
     .trigger-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
-      border-color: var(--rel-colors-blue-primary);
+      border-color: var(--rel-color-border-focus);
     }
 
     .trigger-button:disabled {
@@ -116,7 +120,7 @@ export class RelDatePicker extends LitElement {
       border: none;
       padding: var(--rel-spacing-space-3xs);
       cursor: pointer;
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -126,7 +130,7 @@ export class RelDatePicker extends LitElement {
 
     .icon-button:hover {
       background: var(--rel-surface-secondary);
-      color: var(--rel-colors-gray-heading);
+      color: var(--rel-color-text-primary);
     }
 
     .icon-button svg {
@@ -139,7 +143,7 @@ export class RelDatePicker extends LitElement {
       top: calc(100% + 4px);
       left: 0;
       z-index: 1000;
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-300);
@@ -170,7 +174,7 @@ export class RelDatePicker extends LitElement {
       align-items: center;
       justify-content: center;
       cursor: pointer;
-      color: var(--rel-colors-gray-primary);
+      color: var(--rel-color-text-primary);
       transition: background-color 0.15s ease;
     }
 
@@ -179,7 +183,7 @@ export class RelDatePicker extends LitElement {
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -191,7 +195,7 @@ export class RelDatePicker extends LitElement {
     .dropdown-trigger {
       width: 100%;
       padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       font-family: var(--rel-fontFamilies-primary);
@@ -208,7 +212,7 @@ export class RelDatePicker extends LitElement {
     }
 
     .dropdown-trigger:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -218,7 +222,7 @@ export class RelDatePicker extends LitElement {
       left: 0;
       right: 0;
       z-index: 10;
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       border: 1px solid var(--rel-border-default);
       border-radius: var(--rel-borders-radius-border-radius-200);
       box-shadow: var(--rel-shadows-shadow-200);
@@ -244,8 +248,8 @@ export class RelDatePicker extends LitElement {
     }
 
     .dropdown-item.selected {
-      background: var(--rel-colors-blue-bg);
-      color: var(--rel-colors-blue-primary);
+      background: var(--rel-background-info);
+      color: var(--rel-text-info);
       font-weight: var(--rel-fontWeights-semibold);
     }
 
@@ -260,7 +264,7 @@ export class RelDatePicker extends LitElement {
       text-align: center;
       font-size: var(--rel-fontSizes-xs);
       font-weight: var(--rel-fontWeights-semibold);
-      color: var(--rel-colors-gray-placeholder);
+      color: var(--rel-color-text-placeholder);
       padding: var(--rel-spacing-space-xs);
       text-transform: uppercase;
     }
@@ -290,18 +294,18 @@ export class RelDatePicker extends LitElement {
     }
 
     .day-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: -2px;
       z-index: 1;
     }
 
     .day-button.today:not(.selected) {
-      border: 2px solid var(--rel-colors-blue-primary);
+      border: 2px solid var(--rel-colors-green-primary);
     }
 
     .day-button.selected {
       background: var(--rel-colors-green-primary);
-      color: var(--rel-colors-black);
+      color: var(--rel-color-text-inverse);
       font-weight: var(--rel-fontWeights-semibold);
     }
 

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

@@ -15,27 +15,36 @@
         display: flex;
         background: transparent;
         font-family: var(--rel-fontFamilies-primary);
-        color: var(--rel-colors-gray-primary);
+        color: var(--rel-color-text-primary);
       }
 
       /* Horizontal */
       .rel-divider.horizontal {
         width: 100%;
         height: var(--rel-borders-width-stroke-100);
-        background-color: var(--rel-colors-gray-border);
+        background-color: var(--rel-color-border-divider);
         margin: var(--rel-spacing-space-md) 0;
       }
 
       /* Vertical */
       .rel-divider.vertical {
         width: var(--rel-borders-width-stroke-100);
-        background-color: var(--rel-colors-gray-border);
+        background-color: var(--rel-color-border-divider);
         margin: 0 var(--rel-spacing-space-md);
         align-self: stretch;
         height: 100%;
       }
     `;
 
+    connectedCallback() {
+      super.connectedCallback();
+      this.setAttribute("role", "separator");
+    }
+
+    updated() {
+      this.setAttribute("aria-orientation", this.orientation ?? "horizontal");
+    }
+
     render() {
       return html`
         <div class="rel-divider ${this.orientation}" role="separator"></div>

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

@@ -0,0 +1,27 @@
+import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
+
+@customElement("rel-drawer-footer")
+export class RelDrawerFooter extends LitElement {
+  static styles = css`
+    .drawer-footer {
+      display: flex;
+      justify-content: flex-end;
+      gap: var(--rel-spacing-space-xs);
+    }
+  `;
+
+  render() {
+    return html`
+      <div class="drawer-footer">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-drawer-footer": RelDrawerFooter;
+  }
+}

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

@@ -1,7 +1,9 @@
 import { LitElement, html, css } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import "@reliability-design/icons/rel-icon";
+import "./rel-drawer-footer";
 
-export type DrawerSide = "bottom" | "left" | "right" | "top";
+export type DrawerSide = "bottom" | "left" | "right";
 export type DrawerCloseReason = "backdrop" | "escape" | "drag" | "programmatic";
 
 @customElement("rel-drawer")
@@ -16,8 +18,9 @@ export class RelDrawer extends LitElement {
   @property({ type: Boolean }) draggable = true;
   @property({ type: Number, attribute: "snap-threshold" }) snapThreshold = 0.25;
   @property({ type: String, attribute: "max-height" }) maxHeight = "80vh";
-  @property({ type: String }) width = "420px";
-  @property({ type: Boolean, reflect: true }) disabled = false;
+  @property({ type: String }) width = "";
+  @property({ type: String }) title: string = "";
+  @property({ type: String }) description: string = "";
 
   @state() private isDragging = false;
   @state() private dragOffset = 0;
@@ -37,11 +40,6 @@ export class RelDrawer extends LitElement {
       --drawer-transition-timing: cubic-bezier(0.32, 0.72, 0, 1);
     }
 
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 0.6;
-    }
-
     .drawer-container {
       position: fixed;
       top: 0;
@@ -69,16 +67,17 @@ export class RelDrawer extends LitElement {
     }
 
     .drawer-container.open .overlay {
-      opacity: 1;
+      opacity: var(--rel-drawer-scrim-opacity, 1);
     }
 
     /* Panel base */
     .panel {
       position: absolute;
-      background: var(--rel-colors-white);
+      background: var(--rel-color-bg-primary);
       box-shadow: var(--rel-shadows-shadow-500);
       display: flex;
       flex-direction: column;
+      overflow: hidden;
       outline: none;
       font-family: var(--rel-fontFamilies-primary);
       transition: transform var(--drawer-transition-duration) var(--drawer-transition-timing);
@@ -87,16 +86,19 @@ export class RelDrawer extends LitElement {
     /* Bottom drawer */
     .panel[data-side="bottom"] {
       bottom: 0;
-      left: 0;
-      right: 0;
-      max-height: var(--drawer-max-height, 80vh);
-      border-top-left-radius: var(--rel-borders-radius-border-radius-300);
-      border-top-right-radius: var(--rel-borders-radius-border-radius-300);
-      transform: translateY(100%);
+      left: 50%;
+      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)
+                     0
+                     0;
+      transform: translateX(-50%) translateY(100%);
     }
 
     .drawer-container.open .panel[data-side="bottom"] {
-      transform: translateY(0);
+      transform: translateX(-50%) translateY(0);
     }
 
     /* Left drawer */
@@ -104,10 +106,8 @@ export class RelDrawer extends LitElement {
       top: 0;
       left: 0;
       bottom: 0;
-      width: var(--drawer-width, 420px);
-      max-width: 90vw;
-      border-top-right-radius: var(--rel-borders-radius-border-radius-300);
-      border-bottom-right-radius: var(--rel-borders-radius-border-radius-300);
+      width: var(--drawer-width, clamp(280px, 24vw, 420px));
+      border-radius: 0;
       transform: translateX(-100%);
     }
 
@@ -120,10 +120,8 @@ export class RelDrawer extends LitElement {
       top: 0;
       right: 0;
       bottom: 0;
-      width: var(--drawer-width, 420px);
-      max-width: 90vw;
-      border-top-left-radius: var(--rel-borders-radius-border-radius-300);
-      border-bottom-left-radius: var(--rel-borders-radius-border-radius-300);
+      width: var(--drawer-width, clamp(280px, 24vw, 420px));
+      border-radius: 0;
       transform: translateX(100%);
     }
 
@@ -131,21 +129,6 @@ export class RelDrawer extends LitElement {
       transform: translateX(0);
     }
 
-    /* Top drawer */
-    .panel[data-side="top"] {
-      top: 0;
-      left: 0;
-      right: 0;
-      max-height: var(--drawer-max-height, 80vh);
-      border-bottom-left-radius: var(--rel-borders-radius-border-radius-300);
-      border-bottom-right-radius: var(--rel-borders-radius-border-radius-300);
-      transform: translateY(-100%);
-    }
-
-    .drawer-container.open .panel[data-side="top"] {
-      transform: translateY(0);
-    }
-
     /* Dragging state */
     .panel.dragging {
       transition: none;
@@ -155,13 +138,17 @@ export class RelDrawer extends LitElement {
       transition: none;
     }
 
+    .overlay.no-modal {
+      display: none !important;
+    }
+
     /* Handle */
     .handle {
       width: 48px;
       height: 4px;
-      background: var(--rel-colors-gray-divider);
+      background: var(--rel-color-border-divider);
       border-radius: var(--rel-borders-radius-border-radius-500);
-      margin: var(--rel-spacing-space-sm) auto var(--rel-spacing-space-xs);
+      margin: var(--rel-spacing-space-xs) auto var(--rel-spacing-space-2xs);
       cursor: grab;
       touch-action: none;
     }
@@ -180,7 +167,7 @@ export class RelDrawer extends LitElement {
       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-colors-gray-border);
+      border-bottom: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
     }
 
     .header.empty {
@@ -189,7 +176,7 @@ export class RelDrawer extends LitElement {
 
     .header-top {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
     }
 
@@ -215,8 +202,10 @@ export class RelDrawer extends LitElement {
       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-colors-gray-primary, #333);
+      color: var(--rel-color-text-primary);
       transition: background 0.15s ease;
     }
 
@@ -225,11 +214,11 @@ export class RelDrawer extends LitElement {
     }
 
     .close-button:active {
-      background: var(--rel-colors-gray-divider, #bdbdbd);
+      background: var(--rel-color-border-divider);
     }
 
     .close-button:focus-visible {
-      outline: 2px solid var(--rel-colors-blue-primary, #0091ea);
+      outline: 2px solid var(--rel-color-border-focus);
       outline-offset: 2px;
     }
 
@@ -242,12 +231,9 @@ export class RelDrawer extends LitElement {
 
     /* 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-colors-gray-border);
-    }
-
-    .footer.empty {
-      display: none;
+      border-top: var(--rel-borders-width-stroke-100) solid var(--rel-color-border-default);
     }
 
     /* Reduced motion */
@@ -295,9 +281,10 @@ export class RelDrawer extends LitElement {
     this.lockScroll();
 
     if (this.modal) {
-      setTimeout(() => {
-        this.focusPanel();
-      }, 50);
+      this.updateComplete.then(() => {
+        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        focusTarget?.focus();
+      });
     }
 
     document.addEventListener("keydown", this.handleKeydown);
@@ -316,10 +303,10 @@ export class RelDrawer extends LitElement {
     document.removeEventListener("keydown", this.handleKeydown);
 
     if (this.previousFocus && this.previousFocus.focus) {
-      setTimeout(() => {
+      this.updateComplete.then(() => {
         this.previousFocus?.focus();
         this.previousFocus = null;
-      }, 50);
+      });
     }
 
     this.dispatchEvent(
@@ -352,17 +339,6 @@ export class RelDrawer extends LitElement {
     document.body.style.paddingRight = this.originalBodyPaddingRight;
   }
 
-  private focusPanel() {
-    if (!this.panelElement) return;
-
-    const focusable = this.getFocusableElements();
-    if (focusable.length > 0) {
-      focusable[0].focus();
-    } else {
-      this.panelElement.focus();
-    }
-  }
-
   private getFocusableElements(): HTMLElement[] {
     if (!this.panelElement) return [];
 
@@ -439,16 +415,8 @@ export class RelDrawer extends LitElement {
     this.close("programmatic");
   }
 
-  private close(reason: DrawerCloseReason) {
+  private close(_reason: DrawerCloseReason) {
     this.open = false;
-
-    this.dispatchEvent(
-      new CustomEvent("rel-close", {
-        detail: { reason },
-        bubbles: true,
-        composed: true,
-      })
-    );
   }
 
   // Drag-to-close handlers
@@ -480,7 +448,7 @@ export class RelDrawer extends LitElement {
     }
   };
 
-  private handlePointerUp = (e: PointerEvent) => {
+  private handlePointerUp = (_e: PointerEvent) => {
     if (!this.isDragging) return;
 
     this.isDragging = false;
@@ -504,7 +472,7 @@ export class RelDrawer extends LitElement {
       return "";
     }
 
-    return `transform: translateY(${this.dragOffset}px);`;
+    return `transform: translateX(-50%) translateY(${this.dragOffset}px);`;
   }
 
   private getOverlayStyle() {
@@ -519,17 +487,9 @@ export class RelDrawer extends LitElement {
     return `opacity: ${opacity};`;
   }
 
-  private hasSlotContent(slotName?: string): boolean {
-    const slot = this.shadowRoot?.querySelector(
-      slotName ? `slot[name="${slotName}"]` : "slot:not([name])"
-    ) as HTMLSlotElement;
-    return slot ? slot.assignedElements({ flatten: true }).length > 0 : false;
-  }
-
   render() {
-    const hasTitle = this.hasSlotContent("title");
-    const hasDescription = this.hasSlotContent("description");
-    const hasFooter = this.hasSlotContent("footer");
+    const hasTitle = !!this.title;
+    const hasDescription = !!this.description;
     const showCloseButton = this.dismissible;
     const hasHeader = hasTitle || hasDescription || showCloseButton;
 
@@ -540,7 +500,7 @@ export class RelDrawer extends LitElement {
       <div class="drawer-container ${this.open ? "open" : ""}">
         <div
           part="overlay"
-          class="overlay ${this.isDragging ? "dragging" : ""}"
+          class="overlay ${!this.modal ? 'no-modal' : ''} ${this.isDragging ? 'dragging' : ''}"
           style="${this.getOverlayStyle()}"
           @click="${this.handleOverlayClick}"></div>
 
@@ -548,8 +508,7 @@ export class RelDrawer extends LitElement {
           part="panel"
           class="panel ${this.isDragging ? "dragging" : ""}"
           data-side="${this.side}"
-          style="--drawer-width: ${this.width}; --drawer-max-height: ${this
-            .maxHeight}; ${this.getPanelStyle()}"
+          style="${this.width ? `--drawer-width: ${this.width};` : ''}${this.maxHeight ? `--drawer-max-height: ${this.maxHeight};` : ''}${this.getPanelStyle()}"
           role="${this.modal ? "dialog" : "region"}"
           aria-modal="${this.modal}"
           tabindex="-1">
@@ -566,14 +525,10 @@ export class RelDrawer extends LitElement {
                   <div class="header-top">
                     <div>
                       ${hasTitle
-                        ? html`<h2 class="title">
-                            <slot name="title"></slot>
-                          </h2>`
+                        ? html`<h2 class="title">${this.title}</h2>`
                         : ""}
                       ${hasDescription
-                        ? html`<p class="description">
-                            <slot name="description"></slot>
-                          </p>`
+                        ? html`<p class="description">${this.description}</p>`
                         : ""}
                     </div>
                     ${showCloseButton
@@ -582,16 +537,7 @@ export class RelDrawer extends LitElement {
                           class="close-button"
                           @click="${this.handleCloseButtonClick}"
                           aria-label="Close">
-                          <svg
-                            width="16"
-                            height="16"
-                            viewBox="0 0 16 16"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg">
-                            <path
-                              d="M12.8 4.27L11.73 3.2L8 6.93L4.27 3.2L3.2 4.27L6.93 8L3.2 11.73L4.27 12.8L8 9.07L11.73 12.8L12.8 11.73L9.07 8L12.8 4.27Z"
-                              fill="currentColor" />
-                          </svg>
+                          <rel-icon name="close" size="sm"></rel-icon>
                         </button>`
                       : ""}
                   </div>
@@ -603,11 +549,9 @@ export class RelDrawer extends LitElement {
             <slot></slot>
           </div>
 
-          ${hasFooter
-            ? html`<div part="footer" class="footer">
-                <slot name="footer"></slot>
-              </div>`
-            : ""}
+          <div part="footer" class="footer">
+            <rel-drawer-footer><slot name="footer"></slot></rel-drawer-footer>
+          </div>
         </div>
       </div>
     `;