@reliability-design/web 1.3.1 → 1.4.0

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

@@ -1,6 +1,5 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
-import "../../styles/vars-v2.css";
 
 @customElement("rel-carousel")
 export class RelCarousel extends LitElement {
@@ -11,7 +10,17 @@ export class RelCarousel extends LitElement {
   @property({ type: Boolean, attribute: "pause-on-hover" }) pauseOnHover = true;
   @property({ type: Boolean, attribute: "show-buttons" }) showButtons = false;
   @property({ type: Boolean, attribute: "show-dots" }) showDots = false;
-  @property({ type: String }) orientation: "horizontal" | "vertical" = "horizontal";
+
+  /**
+   * Figma "Type" axis. When set it drives which controls render:
+   * default = content only · only-indicators = dots · side-arrows = overlaid
+   * arrows + dots · bottom-arrows = dots flanked by arrows below the slide.
+   * When unset, the legacy show-buttons/show-dots booleans apply unchanged.
+   */
+  @property({ type: String, reflect: true })
+  type?: "default" | "only-indicators" | "side-arrows" | "bottom-arrows";
+
+  @property({ type: String, reflect: true }) orientation: "horizontal" | "vertical" = "horizontal";
   @property({ type: String }) label: string = "Carousel";
   @property({ type: Number }) gap?: number;
   @property({ type: Boolean, reflect: true }) disabled = false;
@@ -36,8 +45,9 @@ export class RelCarousel extends LitElement {
 
   static styles = css`
     :host {
+      color: var(--rel-text-default);
       display: block;
-      font-family: var(--rel-fontFamilies-primary);
+      font-family: var(--rel-fonts-font-family);
       position: relative;
       user-select: none;
     }
@@ -62,6 +72,21 @@ export class RelCarousel extends LitElement {
       will-change: transform;
     }
 
+    /* Vertical orientation: column track inside a fixed-height viewport */
+    :host([orientation="vertical"]) .viewport {
+      height: var(--rel-carousel-height, 320px);
+    }
+
+    :host([orientation="vertical"]) .track {
+      flex-direction: column;
+      height: 100%;
+    }
+
+    :host([orientation="vertical"]) ::slotted(*) {
+      width: 100% !important;
+      height: var(--rel-carousel-slide-height, 100%) !important;
+    }
+
     .track.dragging {
       transition: none;
     }
@@ -85,9 +110,30 @@ export class RelCarousel extends LitElement {
       display: flex;
       align-items: center;
       justify-content: center;
-      background: var(--rel-color-bg-tertiary, #f0f0f0);
+      background: var(--rel-bg-neutral-elevated-1);
     }
 
+    /* Default typography for slotted slide captions (Figma roles) */
+    ::slotted(h1), ::slotted(h2), ::slotted(h3), ::slotted(h4) {
+      font-family: var(--rel-headings-sm-font-family);
+      font-weight: var(--rel-headings-sm-font-weight);
+      font-size: var(--rel-headings-xs-font-size);
+      line-height: var(--rel-headings-xs-line-height);
+      letter-spacing: var(--rel-headings-xs-letter-spacing);
+      margin: 0 0 var(--rel-spacing-2xs) 0;
+    }
+
+    ::slotted(p) {
+      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-body);
+      margin: 0 0 var(--rel-spacing-lg) 0;
+    }
+
+    
     /* Navigation buttons */
     .nav-button {
       position: absolute;
@@ -97,9 +143,9 @@ export class RelCarousel extends LitElement {
       width: var(--rel-carousel-nav-size, 40px);
       height: var(--rel-carousel-nav-size, 40px);
       border-radius: 50%;
-      border: 1px solid var(--rel-color-border-default);
-      background: var(--rel-color-bg-primary);
-      color: var(--rel-color-text-primary);
+      border: 1px solid var(--rel-border-default);
+      background: var(--rel-bg-neutral);
+      color: var(--rel-action-neutral-label-icons-ghost);
       cursor: pointer;
       display: flex;
       align-items: center;
@@ -109,11 +155,11 @@ export class RelCarousel extends LitElement {
     }
 
     .nav-button:hover:not(:disabled) {
-      background: var(--rel-color-bg-secondary);
+      background: var(--rel-bg-surface-elevated);
     }
 
     .nav-button:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -123,11 +169,20 @@ export class RelCarousel extends LitElement {
     }
 
     .nav-button.prev {
-      left: 12px;
+      left: var(--rel-spacing-sm);
     }
 
     .nav-button.next {
-      right: 12px;
+      right: var(--rel-spacing-sm);
+    }
+
+    /* Bottom arrows (Figma Type=Bottom Arrows): inline with the dots row */
+    .dots .nav-button {
+      position: static;
+      transform: none;
+      width: 32px;
+      height: 32px;
+      box-shadow: none;
     }
 
     .nav-button svg {
@@ -138,9 +193,10 @@ export class RelCarousel extends LitElement {
     /* Dots indicator */
     .dots {
       display: flex;
+      align-items: center;
       justify-content: center;
-      gap: var(--rel-spacing-space-xs);
-      margin-top: var(--rel-spacing-space-md);
+      gap: var(--rel-spacing-xs);
+      margin-top: var(--rel-spacing-md);
     }
 
     .dot {
@@ -148,24 +204,24 @@ export class RelCarousel extends LitElement {
       height: var(--rel-carousel-dot-size, 8px);
       border-radius: 50%;
       border: none;
-      background: var(--rel-color-border-default);
+      background: var(--rel-bg-neutral-elevated-2);
       cursor: pointer;
       padding: 0;
       transition: all 0.15s ease;
     }
 
     .dot:hover {
-      background: var(--rel-color-border-divider);
+      background: var(--rel-bg-neutral-elevated-2);
     }
 
     .dot.active {
-      background: var(--rel-color-brand);
+      background: var(--rel-bg-surface-brand);
       width: var(--rel-carousel-dot-size-active, 24px);
-      border-radius: 4px;
+      border-radius: var(--rel-border-radius-xs);
     }
 
     .dot:focus-visible {
-      outline: 2px solid var(--rel-color-border-focus);
+      outline: 2px solid var(--rel-border-focus);
       outline-offset: 2px;
     }
 
@@ -178,14 +234,14 @@ export class RelCarousel extends LitElement {
 
     :host-context([data-theme="dark"]) .nav-button,
     :host-context(.dark) .nav-button {
-      background: var(--rel-color-bg-secondary);
-      border-color: var(--rel-color-border-default);
-      color: var(--rel-color-text-primary);
+      background: var(--rel-bg-surface-elevated);
+      border-color: var(--rel-border-default);
+      color: var(--rel-text-default);
     }
 
     :host-context([data-theme="dark"]) .nav-button:hover,
     :host-context(.dark) .nav-button:hover {
-      background: var(--rel-color-bg-tertiary);
+      background: var(--rel-bg-neutral-elevated-1);
     }
   `;
 
@@ -203,10 +259,13 @@ export class RelCarousel extends LitElement {
   firstUpdated() {
     const ro = new ResizeObserver(() => {
       const w = this.viewport?.offsetWidth ?? 0;
-      if (w === 0) return;
+      const h = this.viewport?.offsetHeight ?? 0;
+      if (w === 0 && h === 0) return;
       this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
+      this.style.setProperty('--rel-carousel-slide-height', `${h}px`);
       this.renderRoot.querySelectorAll('.carousel-clone').forEach(el => {
-        (el as HTMLElement).style.width = `${w}px`;
+        if (this.vertical) (el as HTMLElement).style.height = `${h}px`;
+        else (el as HTMLElement).style.width = `${w}px`;
       });
       this.updateTransform();
     });
@@ -215,8 +274,10 @@ export class RelCarousel extends LitElement {
 
     requestAnimationFrame(() => {
       const w = this.viewport?.offsetWidth ?? 0;
-      if (w > 0) {
+      const h = this.viewport?.offsetHeight ?? 0;
+      if (w > 0 || h > 0) {
         this.style.setProperty('--rel-carousel-slide-width', `${w}px`);
+        this.style.setProperty('--rel-carousel-slide-height', `${h}px`);
         this.updateTransform();
       }
     });
@@ -251,13 +312,18 @@ export class RelCarousel extends LitElement {
     if (useClones) {
       this.clonesBefore = 1;
 
+      const sizeClone = (clone: HTMLElement) => {
+        if (this.vertical) clone.style.height = `${this.viewport?.offsetHeight ?? 0}px`;
+        else clone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
+        clone.style.boxSizing = 'border-box';
+      };
+
       // Clone last slide → prepend before <slot>
       const lastEl = elements[this.slideCount - 1] as HTMLElement;
       const lastClone = lastEl.cloneNode(true) as HTMLElement;
       lastClone.classList.add("carousel-clone");
       lastClone.setAttribute("aria-hidden", "true");
-      lastClone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
-      lastClone.style.boxSizing = 'border-box';
+      sizeClone(lastClone);
       track.insertBefore(lastClone, slot);
 
       // Clone first slide → append after <slot>
@@ -265,8 +331,7 @@ export class RelCarousel extends LitElement {
       const firstClone = firstEl.cloneNode(true) as HTMLElement;
       firstClone.classList.add("carousel-clone");
       firstClone.setAttribute("aria-hidden", "true");
-      firstClone.style.width = `${this.viewport?.offsetWidth ?? 0}px`;
-      firstClone.style.boxSizing = 'border-box';
+      sizeClone(firstClone);
       track.appendChild(firstClone);
     } else {
       this.clonesBefore = 0;
@@ -285,10 +350,19 @@ export class RelCarousel extends LitElement {
     }
   }
 
+  private get vertical(): boolean {
+    return this.orientation === "vertical";
+  }
+
+  /** Translate along the orientation axis. */
+  private axisTransform(px: number): string {
+    return this.vertical ? `translateY(${px}px)` : `translateX(${px}px)`;
+  }
+
   private unit(): number {
-    const slideWidth = this.viewport?.offsetWidth ?? 0;
+    const slideSize = (this.vertical ? this.viewport?.offsetHeight : this.viewport?.offsetWidth) ?? 0;
     const gapValue = this.gap && this.gap > 0 ? this.gap : 0;
-    return slideWidth + gapValue;
+    return slideSize + gapValue;
   }
 
   private updateTransform() {
@@ -299,7 +373,7 @@ export class RelCarousel extends LitElement {
 
     this.currentTranslate = translate;
     this.prevTranslate = translate;
-    this.track.style.transform = `translateX(${translate}px)`;
+    this.track.style.transform = this.axisTransform(translate);
     this.track.style.gap = this.gap && this.gap > 0 ? `${this.gap}px` : "";
   }
 
@@ -315,7 +389,7 @@ export class RelCarousel extends LitElement {
       const translate = 0;
       this.currentTranslate = translate;
       this.prevTranslate = translate;
-      this.track!.style.transform = `translateX(${translate}px)`;
+      this.track!.style.transform = this.axisTransform(translate);
       this.track!.addEventListener(
         "transitionend",
         () => this.silentJump(this.slideCount - 1),
@@ -337,7 +411,7 @@ export class RelCarousel extends LitElement {
       const translate = -(cloneFirstPos * this.unit());
       this.currentTranslate = translate;
       this.prevTranslate = translate;
-      this.track!.style.transform = `translateX(${translate}px)`;
+      this.track!.style.transform = this.axisTransform(translate);
       this.track!.addEventListener(
         "transitionend",
         () => this.silentJump(0),
@@ -400,7 +474,7 @@ export class RelCarousel extends LitElement {
     if (this.disabled || !this.track) return;
 
     this.isDragging = true;
-    this.dragStartX = e.clientX;
+    this.dragStartX = this.vertical ? e.clientY : e.clientX;
     this.prevTranslate = this.currentTranslate;
 
     this.track.classList.add("dragging");
@@ -415,9 +489,9 @@ export class RelCarousel extends LitElement {
   private handlePointerMove(e: PointerEvent) {
     if (!this.isDragging || !this.track) return;
 
-    const currentX = e.clientX;
-    const deltaX = currentX - this.dragStartX;
-    this.currentTranslate = this.prevTranslate + deltaX;
+    const current = this.vertical ? e.clientY : e.clientX;
+    const delta = current - this.dragStartX;
+    this.currentTranslate = this.prevTranslate + delta;
 
     if (!this.prefersReducedMotion && this.animationId) {
       cancelAnimationFrame(this.animationId);
@@ -425,7 +499,7 @@ export class RelCarousel extends LitElement {
 
     this.animationId = requestAnimationFrame(() => {
       if (this.track) {
-        this.track.style.transform = `translateX(${this.currentTranslate}px)`;
+        this.track.style.transform = this.axisTransform(this.currentTranslate);
       }
     });
   }
@@ -436,14 +510,14 @@ export class RelCarousel extends LitElement {
     this.isDragging = false;
     this.track.classList.remove("dragging");
 
-    const deltaX = e.clientX - this.dragStartX;
-    const slideWidth = this.viewport.offsetWidth;
-    const threshold = slideWidth * 0.2; // 20% threshold
+    const delta = (this.vertical ? e.clientY : e.clientX) - this.dragStartX;
+    const slideSize = this.vertical ? this.viewport.offsetHeight : this.viewport.offsetWidth;
+    const threshold = slideSize * 0.2; // 20% threshold
 
-    if (Math.abs(deltaX) > threshold) {
-      if (deltaX > 0 && (this.value > 0 || this.clonesBefore > 0)) {
+    if (Math.abs(delta) > threshold) {
+      if (delta > 0 && (this.value > 0 || this.clonesBefore > 0)) {
         this.goToPrevious();
-      } else if (deltaX < 0 && (this.value < this.slideCount - 1 || this.clonesBefore > 0)) {
+      } else if (delta < 0 && (this.value < this.slideCount - 1 || this.clonesBefore > 0)) {
         this.goToNext();
       } else {
         this.updateTransform();
@@ -462,10 +536,12 @@ export class RelCarousel extends LitElement {
 
     switch (e.key) {
       case "ArrowLeft":
+      case "ArrowUp":
         e.preventDefault();
         this.goToPrevious();
         break;
       case "ArrowRight":
+      case "ArrowDown":
         e.preventDefault();
         this.goToNext();
         break;
@@ -509,6 +585,43 @@ export class RelCarousel extends LitElement {
     }
   }
 
+  /** Where nav arrows render, honouring the Figma type when set. */
+  private get buttonPlacement(): "side" | "bottom" | "none" {
+    if (this.type === "side-arrows") return "side";
+    if (this.type === "bottom-arrows") return "bottom";
+    if (this.type === "only-indicators" || this.type === "default") return "none";
+    return this.showButtons ? "side" : "none";
+  }
+
+  private get dotsVisible(): boolean {
+    if (this.type === "default") return false;
+    if (this.type) return true;
+    return this.showDots;
+  }
+
+  private renderNavButton(direction: "prev" | "next", enabled: boolean) {
+    const path = direction === "prev" ? "M10 12L6 8L10 4" : "M6 4L10 8L6 12";
+    return html`
+      <button
+        class="nav-button ${direction}"
+        part="${direction}-button"
+        aria-label="${direction === "prev" ? "Previous" : "Next"} slide"
+        ?disabled=${!enabled || this.disabled}
+        @click=${direction === "prev" ? this.goToPrevious : this.goToNext}
+      >
+        <svg viewBox="0 0 16 16" fill="none">
+          <path
+            d="${path}"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </button>
+    `;
+  }
+
   render() {
     const canGoPrev = this.clonesBefore > 0 || this.value > 0;
     const canGoNext = this.clonesBefore > 0 || this.value < this.slideCount - 1;
@@ -536,58 +649,29 @@ export class RelCarousel extends LitElement {
           <slot @slotchange=${this.handleSlotChange}></slot>
         </div>
 
-        ${this.showButtons
+        ${this.buttonPlacement === "side"
           ? html`
-              <button
-                class="nav-button prev"
-                part="prev-button"
-                aria-label="Previous slide"
-                ?disabled=${!canGoPrev || this.disabled}
-                @click=${this.goToPrevious}
-              >
-                <svg viewBox="0 0 16 16" fill="none">
-                  <path
-                    d="M10 12L6 8L10 4"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </button>
-
-              <button
-                class="nav-button next"
-                part="next-button"
-                aria-label="Next slide"
-                ?disabled=${!canGoNext || this.disabled}
-                @click=${this.goToNext}
-              >
-                <svg viewBox="0 0 16 16" fill="none">
-                  <path
-                    d="M6 4L10 8L6 12"
-                    stroke="currentColor"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                  />
-                </svg>
-              </button>
+              ${this.renderNavButton("prev", canGoPrev)}
+              ${this.renderNavButton("next", canGoNext)}
             `
           : nothing}
       </div>
 
-      ${this.showDots && this.slideCount > 1
+      ${(this.dotsVisible || this.buttonPlacement === "bottom") && this.slideCount > 1
         ? html`
             <div class="dots" part="dots">
-              ${Array.from({ length: this.slideCount }, (_, i) => html`
-                <button
-                  class="dot ${i === this.value ? "active" : ""}"
-                  part="dot"
-                  aria-label="Go to slide ${i + 1}"
-                  @click=${() => this.goToSlide(i)}
-                ></button>
-              `)}
+              ${this.buttonPlacement === "bottom" ? this.renderNavButton("prev", canGoPrev) : nothing}
+              ${this.dotsVisible
+                ? Array.from({ length: this.slideCount }, (_, i) => html`
+                    <button
+                      class="dot ${i === this.value ? "active" : ""}"
+                      part="dot"
+                      aria-label="Go to slide ${i + 1}"
+                      @click=${() => this.goToSlide(i)}
+                    ></button>
+                  `)
+                : nothing}
+              ${this.buttonPlacement === "bottom" ? this.renderNavButton("next", canGoNext) : nothing}
             </div>
           `
         : nothing}

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

@@ -90,12 +90,12 @@ chart.series = [
   {
     key: 'desktop',
     label: 'Desktop',
-    colorToken: 'var(--rel-colors-blue-primary)'
+    colorToken: 'var(--rel-bg-info)'
   },
   {
     key: 'mobile',
     label: 'Mobile',
-    colorToken: 'var(--rel-colors-green-primary)'
+    colorToken: 'var(--rel-bg-brand)'
   }
 ];
 ```
@@ -223,8 +223,8 @@ Available parts:
   ];
 
   chart.series = [
-    { key: 'desktop', label: 'Desktop', colorToken: 'var(--rel-colors-blue-primary)' },
-    { key: 'mobile', label: 'Mobile', colorToken: 'var(--rel-colors-green-primary)' }
+    { key: 'desktop', label: 'Desktop', colorToken: 'var(--rel-bg-info)' },
+    { key: 'mobile', label: 'Mobile', colorToken: 'var(--rel-bg-brand)' }
   ];
 
   chart.addEventListener('rel-hover', (e) => {
@@ -256,7 +256,7 @@ Available parts:
   ];
 
   chart.series = [
-    { key: 'revenue', label: 'Revenue', colorToken: 'var(--rel-colors-green-success)' }
+    { key: 'revenue', label: 'Revenue', colorToken: 'var(--rel-text-success)' }
   ];
 </script>
 ```
@@ -274,10 +274,10 @@ Available parts:
 The component uses design tokens from the Reliability Design System. All colors, spacing, and typography are inherited from CSS variables.
 
 Key tokens used:
-- `--rel-colors-*` for all colors
+- `--rel-bg-*` / `--rel-text-*` semantic colors
 - `--rel-spacing-*` for spacing
-- `--rel-fontSizes-*`, `--rel-fontWeights-*` for typography
-- `--rel-borders-*` for borders and radius
+- `--rel-body-*` composite typography roles
+- `--rel-border-*` / `--rel-border-radius-*` tokens
 - `--rel-shadows-*` for shadows
 - Default series colors use system color tokens