@reliability-design/web 1.2.0 → 1.3.1

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

@@ -70,7 +70,8 @@ export class RelModal extends LitElement {
       font-family: var(--rel-fontFamilies-primary);
       width: clamp(360px, 49vw, 708px);
       left: 50%;
-      transition: transform var(--modal-transition-duration) var(--modal-transition-timing);
+      transition: transform var(--modal-transition-duration) var(--modal-transition-timing),
+        opacity var(--modal-transition-duration) var(--modal-transition-timing);
     }
 
     .panel[data-side="bottom"] {
@@ -105,11 +106,13 @@ export class RelModal extends LitElement {
       width: clamp(360px, 49vw, 708px);
       max-height: calc(100vh - 96px);
       border-radius: var(--rel-borders-radius-border-radius-200);
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%) scale(0.96);
+      opacity: 0;
     }
 
     .modal-container.open .panel[data-side="center"] {
-      transform: translate(-50%, -50%);
+      transform: translate(-50%, -50%) scale(1);
+      opacity: 1;
     }
 
     .header {

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

@@ -0,0 +1,139 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+export type SkeletonShape = "line" | "circle" | "block";
+export type SkeletonAnimation = "pulse" | "shimmer" | "none";
+
+@customElement("rel-skeleton")
+export class RelSkeleton extends LitElement {
+  @property({ type: String, reflect: true }) shape: SkeletonShape = "block";
+  @property({ type: Number }) lines = 1;
+  @property({ type: String }) width = "";
+  @property({ type: String }) height = "";
+  @property({ type: String, reflect: true }) animation: SkeletonAnimation = "pulse";
+  @property({ type: Boolean, reflect: true }) loaded = false;
+
+  protected override updated(changed: Map<string, unknown>) {
+    if (changed.has("width") && this.width) this.style.width = this.width;
+    if (changed.has("height") && this.height) this.style.height = this.height;
+  }
+
+  static styles = css`
+    :host {
+      display: block;
+    }
+
+    :host([loaded]) {
+      display: none;
+    }
+
+    /* ── Circle: aspect-ratio keeps it square without requiring explicit height ── */
+    :host([shape="circle"]) {
+      aspect-ratio: 1 / 1;
+    }
+
+    /* ── Base skeleton surface ── */
+    .skeleton-shape,
+    .skeleton-bar {
+      background: var(--rel-skeleton-color, #c8c8c8);
+      border-radius: 4px;
+    }
+
+    /* ── Lines layout ── */
+    .skeleton-lines {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      width: 100%;
+    }
+
+    .skeleton-bar {
+      height: 14px;
+      width: 100%;
+    }
+
+    /* Last line shortens to 65% — mimics real paragraph text that doesn't reach the edge */
+    .skeleton-bar.is-last {
+      width: 65%;
+    }
+
+    /* ── Shape (circle / block) ── */
+    .skeleton-shape {
+      width: 100%;
+      height: 100%;
+      min-height: 16px;
+    }
+
+    :host([shape="circle"]) .skeleton-shape {
+      border-radius: 50%;
+      /* No min-height — circle is sized entirely by host width + aspect-ratio */
+      min-height: unset;
+    }
+
+    /* ── Pulse animation ── */
+    @keyframes rel-skeleton-pulse {
+      0%, 100% { opacity: 1; }
+      50%       { opacity: 0.4; }
+    }
+
+    :host([animation="pulse"]) .skeleton-shape,
+    :host([animation="pulse"]) .skeleton-bar {
+      animation: rel-skeleton-pulse 1.5s ease-in-out infinite;
+    }
+
+    /* ── Shimmer animation ── */
+    @keyframes rel-skeleton-shimmer {
+      0%   { background-position: 200% center; }
+      100% { background-position: -200% center; }
+    }
+
+    :host([animation="shimmer"]) .skeleton-shape,
+    :host([animation="shimmer"]) .skeleton-bar {
+      background: linear-gradient(
+        90deg,
+        var(--rel-skeleton-color, #c8c8c8) 25%,
+        var(--rel-skeleton-highlight, #e2e2e2) 50%,
+        var(--rel-skeleton-color, #c8c8c8) 75%
+      );
+      background-size: 200% 100%;
+      animation: rel-skeleton-shimmer 1.5s linear infinite;
+    }
+
+    /* ── Dark mode ── */
+    :host-context([data-theme="dark"]) {
+      --rel-skeleton-color: #2a2a2a;
+      --rel-skeleton-highlight: #3d3d3d;
+    }
+
+    /* ── Respect reduced-motion preference ── */
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton-shape,
+      .skeleton-bar {
+        animation: none !important;
+      }
+    }
+  `;
+
+  render() {
+    if (this.loaded) return html``;
+
+    if (this.shape === "line") {
+      const count = Math.max(1, this.lines);
+      return html`
+        <div class="skeleton-lines">
+          ${Array.from({ length: count }, (_, i) => html`
+            <div class="skeleton-bar ${i === count - 1 && count > 1 ? "is-last" : ""}"></div>
+          `)}
+        </div>
+      `;
+    }
+
+    return html`<div class="skeleton-shape"></div>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "rel-skeleton": RelSkeleton;
+  }
+}

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

@@ -6,6 +6,7 @@ import "../rel-badge/rel-badge";
 export interface TabItem {
   label: string;
   badge?: number;
+  badgeDot?: boolean;
   disabled?: boolean;
 }
 
@@ -14,6 +15,8 @@ export class RelTabItem extends LitElement {
   @property({ type: String }) label: string = "";
   @property({ type: String }) value: string = "";
   @property({ type: Number }) badge: number = 0;
+  /** Shows a small dot instead of a numbered badge — takes precedence over `badge`. */
+  @property({ type: Boolean, attribute: "badge-dot" }) badgeDot: boolean = false;
   @property({ type: Boolean }) disabled: boolean = false;
 
   render() {
@@ -106,11 +109,12 @@ export class RelTab extends LitElement {
       .filter((el): el is RelTabItem => el instanceof RelTabItem);
   }
 
-  private get _effectiveTabs(): Array<{ label: string; badge?: number; disabled?: boolean }> {
+  private get _effectiveTabs(): Array<{ label: string; badge?: number; badgeDot?: boolean; disabled?: boolean }> {
     if (this._tabItems.length > 0) {
       return this._tabItems.map((item) => ({
         label: item.label,
         badge: item.badge || 0,
+        badgeDot: item.badgeDot,
         disabled: item.disabled,
       }));
     }
@@ -173,9 +177,11 @@ export class RelTab extends LitElement {
               @keydown="${(e: KeyboardEvent) => this.onKeyDown(e, i)}"
             >
               <span class="tab-label">${tab.label}</span>
-              ${tab.badge
-                ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
-                : ""}
+              ${tab.badgeDot
+                ? html`<rel-badge variant="dot" size="sm"></rel-badge>`
+                : tab.badge
+                  ? html`<rel-badge number="${tab.badge}" variant="number" size="sm"></rel-badge>`
+                  : ""}
               <span class="tab-underline"></span>
             </div>
           `