@reliability-design/web 1.1.1 → 1.3.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,21 +15,21 @@
         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%;

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

@@ -8,8 +8,6 @@ export class RelDrawerFooter extends LitElement {
       display: flex;
       justify-content: flex-end;
       gap: var(--rel-spacing-space-xs);
-      padding-top: var(--rel-spacing-space-md);
-      border-top: 1px solid var(--rel-color-border-divider);
     }
   `;
 

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

@@ -1,8 +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")
@@ -17,8 +18,7 @@ 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 = "";
 
@@ -40,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;
@@ -78,10 +73,11 @@ export class RelDrawer extends LitElement {
     /* 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);
@@ -90,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 */
@@ -107,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%);
     }
 
@@ -123,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%);
     }
 
@@ -134,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;
@@ -158,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;
     }
@@ -183,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 {
@@ -192,7 +176,7 @@ export class RelDrawer extends LitElement {
 
     .header-top {
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: space-between;
     }
 
@@ -218,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;
     }
 
@@ -228,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;
     }
 
@@ -245,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 */
@@ -299,7 +282,10 @@ export class RelDrawer extends LitElement {
 
     if (this.modal) {
       this.updateComplete.then(() => {
-        const focusTarget = this.shadowRoot?.querySelector<HTMLElement>("[autofocus], .close-button, .panel");
+        const focusTarget =
+          this.querySelector<HTMLElement>("[autofocus]") ??
+          this.querySelector<HTMLElement>(".close-button") ??
+          this.querySelector<HTMLElement>(".panel");
         focusTarget?.focus();
       });
     }
@@ -356,17 +342,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 [];
 
@@ -415,7 +390,7 @@ export class RelDrawer extends LitElement {
 
       const firstFocusable = focusable[0];
       const lastFocusable = focusable[focusable.length - 1];
-      const activeElement = this.shadowRoot?.activeElement || document.activeElement;
+      const activeElement = document.activeElement;
 
       if (e.shiftKey) {
         if (activeElement === firstFocusable) {
@@ -476,7 +451,7 @@ export class RelDrawer extends LitElement {
     }
   };
 
-  private handlePointerUp = (e: PointerEvent) => {
+  private handlePointerUp = (_e: PointerEvent) => {
     if (!this.isDragging) return;
 
     this.isDragging = false;
@@ -500,7 +475,7 @@ export class RelDrawer extends LitElement {
       return "";
     }
 
-    return `transform: translateY(${this.dragOffset}px);`;
+    return `transform: translateX(-50%) translateY(${this.dragOffset}px);`;
   }
 
   private getOverlayStyle() {
@@ -515,17 +490,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.title;
     const hasDescription = !!this.description;
-    const hasFooter = this.hasSlotContent("footer");
     const showCloseButton = this.dismissible;
     const hasHeader = hasTitle || hasDescription || showCloseButton;
 
@@ -536,7 +503,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>
 
@@ -573,16 +540,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>
@@ -594,11 +552,9 @@ export class RelDrawer extends LitElement {
             <slot></slot>
           </div>
 
-          ${hasFooter
-            ? html`<div part="footer" class="footer">
-                <rel-drawer-footer><slot name="footer"></slot></rel-drawer-footer>
-              </div>`
-            : ""}
+          <div part="footer" class="footer">
+            <rel-drawer-footer><slot name="footer"></slot></rel-drawer-footer>
+          </div>
         </div>
       </div>
     `;