@reliability-design/web 1.4.4 → 1.4.6

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

@@ -270,6 +270,9 @@ export class RelAccordion extends LitElement {
     }
   `;
 
+  /** Stable id prefix wiring the header to its panel. */
+  private accordionId = `rel-accordion-${Math.random().toString(36).slice(2)}`;
+
   private toggle() {
     this.open = !this.open;
     this.dispatchEvent(
@@ -286,9 +289,11 @@ export class RelAccordion extends LitElement {
       <div part="base" class="accordion">
         <div
           part="trigger" class="header"
+          id="${this.accordionId}-header"
           role="button"
           tabindex="0"
           aria-expanded="${this.open}"
+          aria-controls="${this.accordionId}-body"
           @click=${this.toggle}
           @keydown=${(e: KeyboardEvent) => {
             if (e.key === "Enter" || e.key === " ") {
@@ -315,7 +320,14 @@ export class RelAccordion extends LitElement {
             </slot>
           </div>
         </div>
-        <div part="content" class="body ${this.open ? "open" : "closed"}">
+        <div
+          part="content"
+          class="body ${this.open ? "open" : "closed"}"
+          id="${this.accordionId}-body"
+          role="region"
+          aria-labelledby="${this.accordionId}-header"
+          ?inert=${!this.open}
+        >
           <slot></slot>
         </div>
       </div>

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

@@ -278,7 +278,7 @@ export class RelAlert extends LitElement {
 
   render() {
     return html`
-      <div part="base" class="rel-alert alert-${this.type}" role="alert">
+      <div part="base" class="rel-alert alert-${this.type}" role="alert" aria-atomic="true">
         <div part="icon" class="rel-icon">${this.iconTemplate}</div>
 
         <div part="content" class="rel-content">

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

@@ -9,6 +9,7 @@ import type {
   TextFieldVariant,
   FieldLabelStyle,
 } from "../rel-textfield/rel-textfield.js";
+import { announce } from "../../utils/announce";
 
 /** An item is a plain string or any object read through displayField/valueField. */
 export type AutocompleteItem = string | Record<string, unknown>;
@@ -246,6 +247,15 @@ export class RelAutocomplete extends LitElement {
     this.internalValueWrite = false;
   }
 
+  private wasLoading = false;
+
+  protected updated() {
+    if (this.open && this.isLoading && !this.wasLoading) {
+      announce("Loading suggestions");
+    }
+    this.wasLoading = this.isLoading;
+  }
+
   /** Full normalized source list (remote results while searchFn drives, else items). */
   private get allItems(): NormalizedItem[] {
     const source = this.searchFn && this.remoteItems !== null ? this.remoteItems : this.items;
@@ -290,13 +300,15 @@ export class RelAutocomplete extends LitElement {
   // pointerdown and on any outside scroll instead of re-anchoring) ──
 
   private addGlobalListeners() {
-    document.addEventListener("pointerdown", this.onOutsidePointerDown);
+    // Capture phase so a pointerdown that another component stops in its own
+    // capture listener (e.g. a rel-popover trigger) still closes this panel.
+    document.addEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.addEventListener("resize", this.updatePosition);
     window.addEventListener("scroll", this.onPageScroll, true);
   }
 
   private removeGlobalListeners() {
-    document.removeEventListener("pointerdown", this.onOutsidePointerDown);
+    document.removeEventListener("pointerdown", this.onOutsidePointerDown, true);
     window.removeEventListener("resize", this.updatePosition);
     window.removeEventListener("scroll", this.onPageScroll, true);
   }
@@ -433,6 +445,17 @@ export class RelAutocomplete extends LitElement {
       this.debounceTimer = setTimeout(() => this.runSearch(this.inputText), this.debounceMs);
     } else {
       this.syncPanel();
+      this.announceResults();
+    }
+  }
+
+  private announceResults() {
+    if (!this.open || this.isLoading) return;
+    const n = this.filteredItems.length;
+    if (n === 0) {
+      if (this.inputText) announce(this.noResultsText);
+    } else {
+      announce(`${n} result${n === 1 ? "" : "s"} available`);
     }
   }
 
@@ -452,6 +475,7 @@ export class RelAutocomplete extends LitElement {
       if (seq === this.searchSeq) {
         this.searching = false;
         this.syncPanel();
+        this.announceResults();
       }
     }
   }
@@ -523,11 +547,13 @@ export class RelAutocomplete extends LitElement {
           return;
         }
         this.highlightedIndex = Math.min(filtered.length - 1, this.highlightedIndex + 1);
+        this.announceHighlighted(filtered);
         break;
       case "ArrowUp":
         e.preventDefault();
         if (!this.open) return;
         this.highlightedIndex = Math.max(0, this.highlightedIndex - 1);
+        this.announceHighlighted(filtered);
         break;
       case "Enter":
         if (this.open && this.highlightedIndex >= 0 && filtered[this.highlightedIndex]) {
@@ -552,6 +578,11 @@ export class RelAutocomplete extends LitElement {
     }
   }
 
+  private announceHighlighted(filtered: NormalizedItem[]) {
+    const item = filtered[this.highlightedIndex];
+    if (item) announce(`${item.label}, ${this.highlightedIndex + 1} of ${filtered.length}`);
+  }
+
   private onFocusIn() {
     if (this.disabled || this.readonly) return;
     if (this.queryLongEnough && (this.filteredItems.length > 0 || this.minSearchLength === 0)) {

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

@@ -142,6 +142,11 @@ export class RelBadge extends LitElement {
     return ["badge", `badge-${this.size}`, `badge-${this.variant}`].join(" ");
   }
 
+  private get computedAriaLabel() {
+    if (this.ariaLabel) return this.ariaLabel;
+    return this.number ? `${this.number} ${this.suffix}` : `New ${this.suffix}`;
+  }
+
   override updated(changedProperties: Map<PropertyKey, unknown>): void {
     if (changedProperties.has("color")) {
       if (this.color) {
@@ -162,7 +167,7 @@ export class RelBadge extends LitElement {
 
   render() {
     return html`
-      <span part="base" class="${this.classes}" aria-label=${this.ariaLabel || `${this.number} ${this.suffix}`}>
+      <span part="base" class="${this.classes}" role="status" aria-label=${this.computedAriaLabel}>
         ${this.variant === "number" ? this.number : null}
       </span>
     `;

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

@@ -137,9 +137,12 @@ export class RelButton extends LitElement {
       }
     }
 
-    /* Sizes */
+    /* Sizes. Min-widths come from the Figma Button master (S/M/L =
+       80/100/120) so short labels like "OK" keep a proper pill shape;
+       --rel-button-min-width lets a consumer override per instance. */
     .size-small {
       height: 32px;
+      min-width: var(--rel-button-min-width, 80px);
       padding: 0 var(--rel-spacing-sm);
       font-family: var(--rel-action-md-font-family);
       font-weight: var(--rel-action-md-font-weight);
@@ -150,6 +153,7 @@ export class RelButton extends LitElement {
 
     .size-medium {
       height: 40px;
+      min-width: var(--rel-button-min-width, 100px);
       gap: var(--rel-spacing-xs);
       padding: 0 var(--rel-spacing-md);
       font-family: var(--rel-action-lg-font-family);
@@ -161,6 +165,7 @@ export class RelButton extends LitElement {
 
     .size-large {
       height: 48px;
+      min-width: var(--rel-button-min-width, 120px);
       padding: 0 var(--rel-spacing-lg);
       font-family: var(--rel-action-xl-font-family);
       font-weight: var(--rel-action-xl-font-weight);
@@ -267,6 +272,11 @@ export class RelButton extends LitElement {
       color: var(--rel-action-neutral-label-icons-ghost);
     }
 
+    /* Figma master: ghost S has a narrower 56px min than primary/outline. */
+    .btn-text.size-small {
+      min-width: var(--rel-button-min-width, 56px);
+    }
+
     .btn-text.tone-critical {
       color: var(--rel-action-danger-label-icons-ghost);
     }
@@ -275,6 +285,8 @@ export class RelButton extends LitElement {
       background: transparent;
       color: var(--rel-action-neutral-label-icons-link);
       text-decoration: underline;
+      /* Links are inline actions — no minimum footprint in the Figma master. */
+      min-width: 0;
     }
 
     button.btn-link:hover:not(:disabled) {
@@ -303,6 +315,7 @@ export class RelButton extends LitElement {
     /* Icon Only as an independent axis: square button of the current style */
     .btn-icon-only {
       padding: 0;
+      min-width: 0;
     }
 
     .btn-icon-only.size-small {
@@ -321,6 +334,7 @@ export class RelButton extends LitElement {
       width: 40px;
       height: 40px;
       padding: 0;
+      min-width: 0;
       border-radius: 50%;
     }
     .btn-icon.tone-default {
@@ -365,7 +379,9 @@ export class RelButton extends LitElement {
        .btn-text: ghost gets tone-accent hovers below (this generic grey overlay
        has higher specificity than the per-tone ghost rules and was overriding
        them, which is why every ghost hover looked grey). */
-    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text) {
+    /* Link buttons change label color only (rule above) — the overlay fill
+       here would make a hovered link read as a ghost button. */
+    button:hover:not(:disabled):not(.btn-primary):not(.btn-default):not(.btn-icon):not(.btn-secondary):not(.btn-static):not(.btn-text):not(.btn-link) {
       background: var(--rel-action-overlay-hover);
     }
 

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 interface CalendarDay {
   date: Date;
@@ -99,6 +100,13 @@ export class RelCalendar extends LitElement {
       gap: var(--rel-spacing-2xs);
     }
 
+    .calendar-week {
+      grid-column: 1 / -1;
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: var(--rel-spacing-2xs);
+    }
+
     .weekday {
       text-align: center;
       color: var(--rel-text-placeholder);
@@ -315,6 +323,26 @@ export class RelCalendar extends LitElement {
     return formatter.format(new Date(this.viewYear, this.viewMonth, 1));
   }
 
+  private dayLabelFormatter: Intl.DateTimeFormat | null = null;
+  private dayLabelLocale = "";
+
+  private formatDayLabel(date: Date): string {
+    if (!this.dayLabelFormatter || this.dayLabelLocale !== this.locale) {
+      this.dayLabelLocale = this.locale;
+      this.dayLabelFormatter = new Intl.DateTimeFormat(this.locale, {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+      });
+    }
+    return this.dayLabelFormatter.format(date);
+  }
+
+  private announceMonth() {
+    announce(`${this.getMonthName()} ${this.viewYear}`);
+  }
+
   private previousMonth() {
     if (this.viewMonth === 0) {
       this.viewMonth = 11;
@@ -322,6 +350,7 @@ export class RelCalendar extends LitElement {
     } else {
       this.viewMonth--;
     }
+    this.announceMonth();
   }
 
   private nextMonth() {
@@ -331,6 +360,7 @@ export class RelCalendar extends LitElement {
     } else {
       this.viewMonth++;
     }
+    this.announceMonth();
   }
 
   private selectDay(day: CalendarDay) {
@@ -385,6 +415,7 @@ export class RelCalendar extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear--;
+          this.announceMonth();
         } else {
           this.previousMonth();
         }
@@ -393,6 +424,7 @@ export class RelCalendar extends LitElement {
         e.preventDefault();
         if (e.shiftKey) {
           this.viewYear++;
+          this.announceMonth();
         } else {
           this.nextMonth();
         }
@@ -426,12 +458,38 @@ export class RelCalendar extends LitElement {
     }
   }
 
+  /**
+   * Index of the single grid cell carrying tabindex="0". The old expression
+   * (`isSelected || (index === 0 && !focusedDate)`) left the grid with ZERO
+   * tab stops once the user arrowed around without a selection — Tab could
+   * never re-enter the calendar.
+   */
+  private getRovingIndex(days: CalendarDay[]): number {
+    const candidates = [
+      this.focusedDate
+        ? days.findIndex(
+            (d) => d.isCurrentMonth && this.isSameDay(d.date, this.focusedDate!)
+          )
+        : -1,
+      days.findIndex((d) => d.isSelected),
+      days.findIndex((d) => d.isCurrentMonth && d.isToday),
+      days.findIndex((d) => d.isCurrentMonth && !d.isDisabled),
+    ];
+    const found = candidates.find((i) => i >= 0);
+    return found ?? 0;
+  }
+
   render() {
     const days = this.getCalendarDays();
     const weekdayLabels = this.getWeekdayLabels();
+    const rovingIndex = this.getRovingIndex(days);
+    const weeks: CalendarDay[][] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      weeks.push(days.slice(i, i + 7));
+    }
 
     return html`
-      <div role="grid" aria-label="Calendar">
+      <div>
         <div part="header" class="header">
           <button
             part="action" class="nav-button"
@@ -461,6 +519,7 @@ export class RelCalendar extends LitElement {
           </button>
         </div>
 
+        <div role="grid" aria-label="${this.getMonthName()} ${this.viewYear}">
         <div part="list" class="calendar-grid" role="row">
           ${weekdayLabels.map(
             (label) => html`
@@ -471,26 +530,35 @@ export class RelCalendar extends LitElement {
           )}
         </div>
 
-        <div part="list" class="calendar-grid">
-          ${days.map(
-            (day, index) => html`
-              <button
-                part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
-                  ? "today"
-                  : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
-                role="gridcell"
-                aria-label="${this.formatISODate(day.date)}"
-                aria-selected="${day.isSelected}"
-                ?disabled=${day.isDisabled}
-                @click=${() => this.selectDay(day)}
-                @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
-                tabindex="${day.isSelected || (index === 0 && !this.focusedDate) ? 0 : -1}"
-              >
-                ${day.day}
-              </button>
+        <div part="list" class="calendar-grid" role="rowgroup">
+          ${weeks.map(
+            (week, weekIndex) => html`
+              <div class="calendar-week" role="row">
+                ${week.map((day, dayIndex) => {
+                  const index = weekIndex * 7 + dayIndex;
+                  return html`
+                    <button
+                      part="item" class="day-button ${day.isSelected ? "selected" : ""} ${day.isToday
+                        ? "today"
+                        : ""} ${!day.isCurrentMonth ? "other-month" : ""} ${day.isWeekend ? "weekend" : ""}"
+                      role="gridcell"
+                      aria-label="${this.formatDayLabel(day.date)}"
+                      aria-selected="${day.isSelected}"
+                      aria-current=${day.isToday ? "date" : nothing}
+                      ?disabled=${day.isDisabled}
+                      @click=${() => this.selectDay(day)}
+                      @keydown=${(e: KeyboardEvent) => this.handleKeyDown(e, day, index)}
+                      tabindex="${index === rovingIndex ? 0 : -1}"
+                    >
+                      ${day.day}
+                    </button>
+                  `;
+                })}
+              </div>
             `
           )}
         </div>
+        </div>
       </div>
     `;
   }

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

@@ -1,5 +1,6 @@
 import { LitElement, html, css, nothing } from "lit";
 import { customElement, property, state, query } from "lit/decorators.js";
+import { announce } from "../../utils/announce";
 
 @customElement("rel-carousel")
 export class RelCarousel extends LitElement {
@@ -41,6 +42,7 @@ export class RelCarousel extends LitElement {
   // Number of clone slides prepended before the real slides
   private clonesBefore = 0;
   private _silentJumping = false;
+  private _autoplayTick = false;
   private _ro?: ResizeObserver;
 
   static styles = css`
@@ -251,6 +253,11 @@ export class RelCarousel extends LitElement {
       "(prefers-reduced-motion: reduce)"
     ).matches;
 
+    // WCAG 2.2.2: auto-advance must pause while keyboard focus is inside the
+    // carousel, not just on mouse hover.
+    this.addEventListener("focusin", this.handleFocusIn);
+    this.addEventListener("focusout", this.handleFocusOut);
+
     if (this.autoplay) {
       this.startAutoplay();
     }
@@ -285,6 +292,8 @@ export class RelCarousel extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.removeEventListener("focusin", this.handleFocusIn);
+    this.removeEventListener("focusout", this.handleFocusOut);
     this._ro?.disconnect();
     this.stopAutoplay();
     if (this.animationId) {
@@ -300,6 +309,12 @@ export class RelCarousel extends LitElement {
     const elements = slot.assignedElements();
     this.slideCount = elements.length;
 
+    elements.forEach((el, i) => {
+      el.setAttribute("role", "group");
+      el.setAttribute("aria-roledescription", "slide");
+      el.setAttribute("aria-label", `${i + 1} of ${elements.length}`);
+    });
+
     // Clamp value to valid real-slide range
     if (this.value >= this.slideCount) this.value = Math.max(0, this.slideCount - 1);
     if (this.value < 0) this.value = 0;
@@ -390,9 +405,14 @@ export class RelCarousel extends LitElement {
       this.currentTranslate = translate;
       this.prevTranslate = translate;
       this.track!.style.transform = this.axisTransform(translate);
+      const fromAutoplay = this._autoplayTick;
       this.track!.addEventListener(
         "transitionend",
-        () => this.silentJump(this.slideCount - 1),
+        () => {
+          this._autoplayTick = fromAutoplay;
+          this.silentJump(this.slideCount - 1);
+          this._autoplayTick = false;
+        },
         { once: true }
       );
     }
@@ -412,9 +432,14 @@ export class RelCarousel extends LitElement {
       this.currentTranslate = translate;
       this.prevTranslate = translate;
       this.track!.style.transform = this.axisTransform(translate);
+      const fromAutoplay = this._autoplayTick;
       this.track!.addEventListener(
         "transitionend",
-        () => this.silentJump(0),
+        () => {
+          this._autoplayTick = fromAutoplay;
+          this.silentJump(0);
+          this._autoplayTick = false;
+        },
         { once: true }
       );
     }
@@ -445,6 +470,9 @@ export class RelCarousel extends LitElement {
   }
 
   private emitChange() {
+    if (!this._autoplayTick && this.slideCount > 0) {
+      announce(`Slide ${this.value + 1} of ${this.slideCount}`);
+    }
     this.dispatchEvent(
       new CustomEvent("rel-change", {
         detail: { value: this.value },
@@ -459,7 +487,9 @@ export class RelCarousel extends LitElement {
 
     this.stopAutoplay();
     this.autoplayTimer = window.setInterval(() => {
+      this._autoplayTick = true;
       this.goToNext();
+      this._autoplayTick = false;
     }, this.interval);
   }
 
@@ -556,6 +586,18 @@ export class RelCarousel extends LitElement {
     }
   }
 
+  private handleFocusIn = () => {
+    if (this.autoplay) this.stopAutoplay();
+  };
+
+  private handleFocusOut = (e: FocusEvent) => {
+    if (!this.autoplay) return;
+    const next = e.relatedTarget as Node | null;
+    // Resume only once focus has fully left the carousel (light or shadow).
+    if (next && (this.contains(next) || this.shadowRoot?.contains(next))) return;
+    this.startAutoplay();
+  };
+
   private handleMouseEnter() {
     if (this.autoplay && this.pauseOnHover) {
       this.stopAutoplay();
@@ -667,6 +709,7 @@ export class RelCarousel extends LitElement {
                       class="dot ${i === this.value ? "active" : ""}"
                       part="dot"
                       aria-label="Go to slide ${i + 1}"
+                      aria-current="${i === this.value ? "true" : nothing}"
                       @click=${() => this.goToSlide(i)}
                     ></button>
                   `)

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

@@ -1,4 +1,4 @@
-import { LitElement, html, css, type PropertyValues } from "lit";
+import { LitElement, html, css, nothing, type PropertyValues } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import "@reliability-design/icons/rel-icon";
 
@@ -334,6 +334,9 @@ export class RelCheckbox extends LitElement {
         <label class="row">
           <input
             type="checkbox"
+            .checked=${this.status === "checked"}
+            .indeterminate=${this.status === "indeterminate"}
+            aria-checked="${this.status === "indeterminate" ? "mixed" : nothing}"
             @click=${this.toggle}
             @blur=${() => this._onTouched()}
             ?disabled=${this.state === "disabled"}

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

@@ -2,6 +2,7 @@ import { LitElement, html, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import "../rel-avatar/rel-avatar.js";
 import "@reliability-design/icons/rel-icon";
+import { announce } from "../../utils/announce";
 
 export type ChipTone = "neutral" | "danger" | "warning" | "success" | "info";
 export type ChipVariant = "fill" | "subtle";
@@ -76,6 +77,13 @@ export class RelChip extends LitElement {
       transition: background-color 0.15s ease;
     }
 
+    .chip-action {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-xs);
+      outline: none;
+    }
+
     /* ── Size ── */
     :host([size="lg"]) .chip {
       height: 32px;
@@ -262,7 +270,7 @@ export class RelChip extends LitElement {
        outward by strokeWeight — outline-offset must be 0, not a positive
        gap (a positive offset was the bug: it drew a visible gap that
        doesn't exist in Figma). ── */
-    .chip:focus-visible {
+    .chip:has(.chip-action:focus-visible) {
       outline: 1.5px solid var(--rel-chip-focus-ring, var(--rel-border-focus));
       outline-offset: 1.5px;
       box-shadow: 0 0 0 1.5px var(--rel-border-focus-inner);
@@ -363,8 +371,37 @@ export class RelChip extends LitElement {
         composed: true,
       })
     );
+    announce(`${this.label} removed`);
   }
 
+  /** The chip body is announced as a button, so it must also act on keys:
+   *  Enter/Space re-dispatch as a host click (consumers' @click handlers
+   *  fire), Delete/Backspace remove when removable, and arrow keys ask the
+   *  container to reorder a draggable chip (`chip-move`) — the keyboard
+   *  alternative to pointer drag-and-drop. */
+  private handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      this.click();
+      return;
+    }
+    if ((e.key === "Delete" || e.key === "Backspace") && this.removable) {
+      e.preventDefault();
+      this.handleRemove(e);
+      return;
+    }
+    if (this.draggableChip && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+      e.preventDefault();
+      this.dispatchEvent(
+        new CustomEvent("chip-move", {
+          detail: { direction: e.key === "ArrowLeft" ? -1 : 1 },
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }
+  };
+
   private onDragStart = (e: DragEvent) => {
     if (!this.draggableChip) return;
     this.dragging = true;
@@ -404,24 +441,27 @@ export class RelChip extends LitElement {
     }
 
     return html`
-      <span
-        part="base" class="${this.classes}"
-        role="button"
-        tabindex="0"
-        aria-label="${this.label}"
-      >
-        ${showAvatar
-          ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
-          : null}
-        ${showLeadingIcon
-          ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
-          : null}
-
-        <span part="label" class="chip-label">${this.label}</span>
-
-        ${this.trailingIcon
-          ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
-          : null}
+      <span part="base" class="${this.classes}">
+        <span
+          class="chip-action"
+          role="button"
+          tabindex="0"
+          aria-label="${this.label}"
+          @keydown=${this.handleKeydown}
+        >
+          ${showAvatar
+            ? html`<rel-avatar type="text" text=${this.avatar} size="xs"></rel-avatar>`
+            : null}
+          ${showLeadingIcon
+            ? html`<rel-icon part="icon" class="chip-icon" name="${this.leadingIcon}"></rel-icon>`
+            : null}
+
+          <span part="label" class="chip-label">${this.label}</span>
+
+          ${this.trailingIcon
+            ? html`<rel-icon class="chip-icon" name="${this.trailingIcon}"></rel-icon>`
+            : null}
+        </span>
         ${this.removable
           ? html`<button
               class="chip-remove"