@adia-ai/web-components 0.5.15 → 0.5.16

package/components/swiper/class.js

@@ -46,13 +46,17 @@ export class UISwiper extends UIElement {
     snap:              { type: String,  default: 'start', reflect: true },
     gap:               { type: String,  default: '',    reflect: true },
     slidesPerView:     { type: String,  default: '',    reflect: true, attribute: 'slides-per-view' },
+    chrome:            { type: String,  default: 'default', reflect: true },
+    label:             { type: String,  default: '' },
+    counter:           { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;
 
   #track = null;
   #timer = null;
-  #observer = null;
+  #resizeObserver = null;
+  #scrollHandler = null;
   #activeIndex = 0;
   #bound = false;
   #fallbackNav = false;
@@ -110,6 +114,9 @@ export class UISwiper extends UIElement {
       this.#track.addEventListener('pointercancel', this.#onPointerUp);
       // Capture-phase click suppression so a drag-on-button doesn't activate it.
       this.#track.addEventListener('click', this.#onClickCapture, true);
+      // Suppress native HTML5 drag (e.g. on <img>) so it doesn't preempt
+      // the pointermove gesture before our threshold is reached.
+      this.#track.addEventListener('dragstart', this.#onDragStart);
     }
 
     if (this.autoplay) this.play();
@@ -117,15 +124,24 @@ export class UISwiper extends UIElement {
 
   render() {
     if (this.gap && this.#track) {
-      const space = `var(--a-space-${this.gap})`;
-      this.style.setProperty('--swiper-gap', space);
+      // Pure-numeric values ("0", "4") are space-token indices that
+      // resolve to `--a-space-N`. Anything else (e.g. "1rem", "8px",
+      // "var(--my-gap)") is treated as a raw CSS length — matches the
+      // example HTML's "Accepts any CSS length or spacing token" claim.
+      const isTokenIndex = /^[0-9]+$/.test(this.gap);
+      const value = isTokenIndex ? `var(--a-space-${this.gap})` : this.gap;
+      this.style.setProperty('--swiper-gap', value);
     }
   }
 
   disconnected() {
     this.pause();
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+    if (this.#track && this.#scrollHandler) {
+      this.#track.removeEventListener('scroll', this.#scrollHandler);
+    }
+    this.#scrollHandler = null;
     this.removeEventListener('pointerenter', this.#onPauseHover);
     this.removeEventListener('pointerleave', this.#onResumeHover);
     this.removeEventListener('focusin', this.#onPauseFocus);
@@ -137,6 +153,7 @@ export class UISwiper extends UIElement {
       this.#track.removeEventListener('pointerup',     this.#onPointerUp);
       this.#track.removeEventListener('pointercancel', this.#onPointerUp);
       this.#track.removeEventListener('click',         this.#onClickCapture, true);
+      this.#track.removeEventListener('dragstart',     this.#onDragStart);
     }
     this.#drag = null;
     this.#track = null;
@@ -146,27 +163,30 @@ export class UISwiper extends UIElement {
   // ── Public API ──
 
   next() {
-    const slides = this.slides;
-    const nextIndex = Math.min(this.#activeIndex + 1, slides.length - 1);
-    if (nextIndex !== this.#activeIndex || this.loop) {
-      this.goTo(this.loop && nextIndex === this.#activeIndex ? 0 : nextIndex);
+    const lastPage = this.#getPageCount() - 1;
+    const currentPage = this.#slideToPageIndex(this.#activeIndex);
+    const nextPage = Math.min(currentPage + 1, lastPage);
+    if (nextPage !== currentPage || this.loop) {
+      const target = this.loop && nextPage === currentPage ? 0 : nextPage;
+      this.goTo(this.#pageToSlideIndex(target));
     }
   }
 
   prev() {
-    const slides = this.slides;
-    const prevIndex = Math.max(this.#activeIndex - 1, 0);
-    if (prevIndex !== this.#activeIndex || this.loop) {
-      this.goTo(this.loop && prevIndex === this.#activeIndex ? slides.length - 1 : prevIndex);
+    const lastPage = this.#getPageCount() - 1;
+    const currentPage = this.#slideToPageIndex(this.#activeIndex);
+    const prevPage = Math.max(currentPage - 1, 0);
+    if (prevPage !== currentPage || this.loop) {
+      const target = this.loop && prevPage === currentPage ? lastPage : prevPage;
+      this.goTo(this.#pageToSlideIndex(target));
     }
   }
 
   goTo(index) {
-    const slides = this.slides;
-    const slide = slides[index];
-    if (slide && this.#track) {
-      this.#track.scrollTo({ left: slide.offsetLeft - this.#track.offsetLeft, behavior: 'smooth' });
-    }
+    const slide = this.slides[index];
+    if (!slide || !this.#track) return;
+    const target = Math.max(0, this.#snapTargetFor(slide));
+    this.#track.scrollTo({ left: target, behavior: 'smooth' });
   }
 
   play() {
@@ -174,9 +194,10 @@ export class UISwiper extends UIElement {
     if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
 
     this.#timer = setInterval(() => {
-      const slides = this.slides;
-      const atEnd = this.#activeIndex >= slides.length - 1;
-      if (atEnd && this.loop) this.goTo(0);
+      const lastPage = this.#getPageCount() - 1;
+      const currentPage = this.#slideToPageIndex(this.#activeIndex);
+      const atEnd = currentPage >= lastPage;
+      if (atEnd && this.loop) this.goTo(this.#pageToSlideIndex(0));
       else if (!atEnd) this.next();
       else this.pause();
     }, this.interval || 5000);
@@ -203,33 +224,123 @@ export class UISwiper extends UIElement {
   }
 
   #setupObserver() {
-    this.#observer = new IntersectionObserver(entries => {
-      for (const entry of entries) {
-        if (entry.isIntersecting && entry.intersectionRatio > 0.5) {
-          const slides = this.slides;
-          const index = slides.indexOf(entry.target);
-          if (index !== -1 && index !== this.#activeIndex) {
-            this.#activeIndex = index;
-            this.#updateFallbackDots();
-            this.dispatchEvent(new CustomEvent('change', {
-              bubbles: true,
-              detail: { index, slide: entry.target },
-            }));
-          }
-        }
-      }
-    }, { root: this.#track, threshold: 0.5 });
+    // Scroll-based, snap-aware active tracking. `activeIndex` is the
+    // slide whose snap target sits closest to the current scrollLeft:
+    //   start  → slide whose left edge is at the track's left edge
+    //   center → slide whose center is at the track's center
+    //   end    → slide whose right edge is at the track's right edge
+    //
+    // Replaces an earlier IntersectionObserver-based "leftmost visible"
+    // approach which couldn't distinguish the last two snap positions
+    // for center- and end-snap (multiple slides remained >50% visible).
+    this.#scrollHandler = () => {
+      const newIndex = this.#computeActiveIndex();
+      if (newIndex === this.#activeIndex) return;
+      this.#activeIndex = newIndex;
+      this.#updateFallbackDots();
+      this.dispatchEvent(new CustomEvent('change', {
+        bubbles: true,
+        detail: { index: newIndex, slide: this.slides[newIndex] },
+      }));
+    };
+    this.#track.addEventListener('scroll', this.#scrollHandler, { passive: true });
+    // Initial stamp (no event — there's no prior state to diff against).
+    this.#activeIndex = this.#computeActiveIndex();
+  }
 
-    for (const slide of this.slides) {
-      this.#observer.observe(slide);
+  // ── Snap & page helpers ──
+  // `--swiper-columns` is set on the host by `[slides-per-view]` and
+  // cascades to the track; the responsive @container rules set it on
+  // the track directly. Reading the computed value on the track sees
+  // both paths.
+
+  #getColumns() {
+    if (!this.#track) return 1;
+    const v = getComputedStyle(this.#track).getPropertyValue('--swiper-columns').trim();
+    const n = parseInt(v, 10);
+    return Number.isFinite(n) && n > 0 ? n : 1;
+  }
+
+  #getPageCount() {
+    const total = this.slides.length;
+    if (total === 0) return 0;
+    // Center-snap allows every slide to be the centered one (edge
+    // slides clamped at the scroll bounds), so each slide is its own
+    // "page". Start- and end-snap collapse equivalent positions to
+    // (slides − cols + 1) distinct pages.
+    if (this.snap === 'center') return total;
+    return Math.max(1, total - this.#getColumns() + 1);
+  }
+
+  // Snap target for a slide (in scrollLeft coordinates, unclamped).
+  #snapTargetFor(slide) {
+    const trackWidth = this.#track.clientWidth;
+    const left = slide.offsetLeft - this.#track.offsetLeft;
+    const width = slide.offsetWidth;
+    if (this.snap === 'center') return left + width / 2 - trackWidth / 2;
+    if (this.snap === 'end')    return left + width - trackWidth;
+    return left;
+  }
+
+  // Returns the slide index whose clamped snap target is closest to
+  // the current scrollLeft. Snap-mode-aware so the "active" slide
+  // matches the snap point currently aligned with the track.
+  #computeActiveIndex() {
+    if (!this.#track) return 0;
+    const slides = this.slides;
+    if (slides.length === 0) return 0;
+    const sl = this.#track.scrollLeft;
+    const maxScroll = Math.max(0, this.#track.scrollWidth - this.#track.clientWidth);
+    let bestIndex = 0;
+    let bestDistance = Infinity;
+    for (let i = 0; i < slides.length; i++) {
+      const target = Math.max(0, Math.min(maxScroll, this.#snapTargetFor(slides[i])));
+      const distance = Math.abs(sl - target);
+      if (distance < bestDistance) {
+        bestDistance = distance;
+        bestIndex = i;
+      }
     }
+    return bestIndex;
+  }
+
+  // Page↔slide mapping. Center- and start-snap use the slide index
+  // directly as page index; end-snap shifts by (cols−1) because page 0
+  // shows slide (cols−1) end-aligned.
+  #pageToSlideIndex(page) {
+    if (this.snap !== 'end') return page;
+    const cols = this.#getColumns();
+    return Math.min(this.slides.length - 1, page + cols - 1);
+  }
+
+  #slideToPageIndex(slideIdx) {
+    if (this.snap !== 'end') return slideIdx;
+    const cols = this.#getColumns();
+    return Math.max(0, slideIdx - cols + 1);
   }
 
   #setupFallbackNav() {
     if (this.#fallbackNav) return;
     this.#fallbackNav = true;
 
-    // Stamp prev/next paddles
+    if (this.chrome === 'toolbar') {
+      this.#stampToolbarChrome();
+    } else {
+      this.#stampDefaultChrome();
+    }
+
+    this.#refreshDots();
+
+    // Container queries can change `--swiper-columns` mid-life; re-stamp
+    // dots when the host width crosses a breakpoint.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObserver = new ResizeObserver(() => this.#refreshDots());
+      this.#resizeObserver.observe(this);
+    }
+  }
+
+  #stampDefaultChrome() {
+    // Overlay paddles (absolutely positioned over the track) + centered dot row.
     const prev = document.createElement('button-ui');
     prev.setAttribute('data-swiper-btn', '');
     prev.setAttribute('data-swiper-prev', '');
@@ -249,31 +360,102 @@ export class UISwiper extends UIElement {
     this.appendChild(prev);
     this.appendChild(next);
 
-    // Stamp pagination dots
     const dots = document.createElement('div');
     dots.setAttribute('data-swiper-dots', '');
     dots.setAttribute('role', 'tablist');
     dots.setAttribute('aria-label', 'Slide indicators');
+    this.appendChild(dots);
+  }
 
-    this.slides.forEach((_, i) => {
-      const dot = document.createElement('button');
-      dot.setAttribute('role', 'tab');
-      dot.setAttribute('aria-label', `Slide ${i + 1}`);
-      if (i === 0) dot.setAttribute('aria-current', 'true');
-      dot.addEventListener('click', () => this.goTo(i));
-      dots.appendChild(dot);
-    });
+  #stampToolbarChrome() {
+    // Header row: [label] [spacer] [prev | next].
+    const head = document.createElement('div');
+    head.setAttribute('data-swiper-head', '');
 
-    this.appendChild(dots);
+    const labelEl = document.createElement('span');
+    labelEl.setAttribute('data-swiper-label', '');
+    labelEl.textContent = this.label || '';
+    head.appendChild(labelEl);
+
+    const paddles = document.createElement('div');
+    paddles.setAttribute('data-swiper-paddles', '');
+
+    const prev = document.createElement('button-ui');
+    prev.setAttribute('icon', 'caret-left');
+    prev.setAttribute('variant', 'ghost');
+    prev.setAttribute('size', 'sm');
+    prev.setAttribute('aria-label', 'Previous slide');
+    prev.addEventListener('press', () => this.prev());
+
+    const next = document.createElement('button-ui');
+    next.setAttribute('icon', 'caret-right');
+    next.setAttribute('variant', 'ghost');
+    next.setAttribute('size', 'sm');
+    next.setAttribute('aria-label', 'Next slide');
+    next.addEventListener('press', () => this.next());
+
+    paddles.appendChild(prev);
+    paddles.appendChild(next);
+    head.appendChild(paddles);
+
+    // Insert head BEFORE the track so it sits above the slides.
+    this.insertBefore(head, this.#track);
+
+    // Footer row: [counter] [spacer] [dots].
+    const foot = document.createElement('div');
+    foot.setAttribute('data-swiper-foot', '');
+
+    const counterEl = document.createElement('span');
+    counterEl.setAttribute('data-swiper-counter', '');
+    foot.appendChild(counterEl);
+
+    const dots = document.createElement('div');
+    dots.setAttribute('data-swiper-dots', '');
+    dots.setAttribute('role', 'tablist');
+    dots.setAttribute('aria-label', 'Slide indicators');
+    foot.appendChild(dots);
+
+    this.appendChild(foot);
+    this.#updateCounter();
+  }
+
+  #updateCounter() {
+    const el = this.querySelector('[data-swiper-counter]');
+    if (!el) return;
+    if (!this.counter) { el.textContent = ''; return; }
+    const cur = this.#slideToPageIndex(this.#activeIndex) + 1;
+    const total = this.#getPageCount();
+    el.textContent = `${cur} / ${total}`;
+  }
+
+  #refreshDots() {
+    const dots = this.querySelector('[data-swiper-dots]');
+    if (!dots) return;
+    const desired = this.#getPageCount();
+    if (dots.children.length !== desired) {
+      while (dots.firstChild) dots.removeChild(dots.firstChild);
+      for (let i = 0; i < desired; i++) {
+        const dot = document.createElement('button');
+        dot.setAttribute('role', 'tab');
+        dot.setAttribute('aria-label', `Page ${i + 1}`);
+        dot.addEventListener('click', () => this.goTo(this.#pageToSlideIndex(i)));
+        dots.appendChild(dot);
+      }
+    }
+    this.#updateFallbackDots();
   }
 
   #updateFallbackDots() {
     if (!this.#fallbackNav) return;
     const dots = this.querySelector('[data-swiper-dots]');
-    if (!dots) return;
-    [...dots.children].forEach((dot, i) => {
-      dot.setAttribute('aria-current', i === this.#activeIndex ? 'true' : 'false');
-    });
+    if (dots) {
+      const lastPage = this.#getPageCount() - 1;
+      const active = Math.min(Math.max(this.#slideToPageIndex(this.#activeIndex), 0), lastPage);
+      [...dots.children].forEach((dot, i) => {
+        dot.setAttribute('aria-current', i === active ? 'true' : 'false');
+      });
+    }
+    this.#updateCounter();
   }
 
   // ── Event handlers ──
@@ -370,4 +552,15 @@ export class UISwiper extends UIElement {
       e.stopPropagation();
     }
   };
+
+  // Suppress native HTML5 drag (e.g. `<img>` ghost-drag) so it doesn't
+  // hijack the pointer gesture before `#onPointerMove` crosses its
+  // 5px threshold. Without this, dragging on top of an image inside
+  // a slide never reaches our pointermove handler. We only suppress
+  // when a swipe gesture is actually in progress (set by `#onPointerDown`)
+  // so genuinely-draggable content (e.g. a palette item the consumer
+  // wants to drag out of the swiper) is preserved when not swiping.
+  #onDragStart = (e) => {
+    if (this.#drag) e.preventDefault();
+  };
 }

package/components/swiper/swiper.a2ui.json

@@ -18,9 +18,23 @@
       "type": "boolean",
       "default": false
     },
+    "chrome": {
+      "description": "Pagination chrome layout. `default` (overlay paddles + centered dots below) or `toolbar` (header row with label + paddles, footer row with counter + dots).",
+      "type": "string",
+      "enum": [
+        "default",
+        "toolbar"
+      ],
+      "default": "default"
+    },
     "component": {
       "const": "Swiper"
     },
+    "counter": {
+      "description": "When `chrome=\"toolbar\"`, show a \"current / total\" page counter in the footer (left).",
+      "type": "boolean",
+      "default": false
+    },
     "gap": {
       "description": "Gap between slides (token: sm, md, lg)",
       "type": "string",
@@ -31,6 +45,11 @@
       "type": "number",
       "default": 5000
     },
+    "label": {
+      "description": "Title rendered in the toolbar header (left). Only used when `chrome=\"toolbar\"`.",
+      "type": "string",
+      "default": ""
+    },
     "loop": {
       "description": "Infinite loop",
       "type": "boolean",

package/components/swiper/swiper.css

@@ -28,11 +28,15 @@
 
     /* ── Pagination dots ── */
     /* Component-intrinsic visual constant; no --a-space-* equivalent */
-    --swiper-dot-size:      6px;
-    --swiper-dot-gap:       var(--a-space-2);
-    --swiper-dot-bg:        var(--a-border);
-    --swiper-dot-bg-active: var(--a-fg);
-    --swiper-dot-radius:    var(--a-radius-full);
+    --swiper-dot-size:        6px;
+    /* Active dot is one space token (4px @ density=1) larger than the
+       inactive dot — small, deliberate emphasis without rearranging
+       the row. The hitbox stays at 1rem; only the visible circle grows. */
+    --swiper-dot-size-active: calc(var(--swiper-dot-size) + var(--a-space-1));
+    --swiper-dot-gap:         var(--a-space-2);
+    --swiper-dot-bg:          var(--a-border);
+    --swiper-dot-bg-active:   var(--a-fg);
+    --swiper-dot-radius:      var(--a-radius-full);
 
     /* ── Host vertical rhythm ── */
     --swiper-gap-vertical:  var(--a-space-3);
@@ -67,6 +71,11 @@
     gap: var(--swiper-gap-vertical);
     width: 100%;
     position: relative;
+    /* Host is the container so @container queries below read the
+       swiper's own width, not a wider ancestor's. Named to avoid
+       collision with any ancestor that also queries by size. */
+    container-type: inline-size;
+    container-name: swiper;
   }
 
   /* ── Scroll track (JS wraps slides into this) ── */
@@ -84,7 +93,6 @@
     scrollbar-width: none;
     -webkit-overflow-scrolling: touch;
     gap: var(--swiper-gap);
-    container-type: inline-size;
   }
 
   :scope > [data-swiper-track]::-webkit-scrollbar { display: none; }
@@ -126,18 +134,22 @@
   :scope[slides-per-view="3"] { --swiper-columns: 3; }
   :scope[slides-per-view="4"] { --swiper-columns: 4; }
 
-  /* ── Responsive auto (container queries) ── */
+  /* ── Responsive auto (container queries) ──
+     The host IS the named `swiper` container, so @container queries
+     match descendants of it. `:scope` can't be its own descendant —
+     we target the track (a descendant) so the cv resolves against
+     the swiper's own width. */
 
   :scope:not([slides-per-view]) {
     --swiper-columns: 1;
   }
 
-  @container (min-width: 640px) {
-    :scope:not([slides-per-view]) { --swiper-columns: 2; }
+  @container swiper (min-width: 640px) {
+    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns: 2; }
   }
 
-  @container (min-width: 960px) {
-    :scope:not([slides-per-view]) { --swiper-columns: 3; }
+  @container swiper (min-width: 960px) {
+    :scope:not([slides-per-view]) > [data-swiper-track] { --swiper-columns: 3; }
   }
 
   /* ══════════════════════════════════════════════════════════
@@ -166,7 +178,7 @@
      Normal flow below the track — not inside the scroll area.
      ══════════════════════════════════════════════════════════ */
 
-  :scope > [data-swiper-dots] {
+  :scope [data-swiper-dots] {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -174,7 +186,12 @@
     min-height: 1.5rem;
   }
 
-  :scope > [data-swiper-dots] > button {
+  /* Dot geometry — every dot has the same 1rem hitbox so the row layout
+     is invariant across state changes. The visible circle inside is
+     `--swiper-dot-size` for idle dots and `--swiper-dot-size-active`
+     for the active one (one space token larger). Padding is computed
+     from the size so the dot stays centered in the hitbox. */
+  :scope [data-swiper-dots] > button {
     width: var(--swiper-dot-size);
     height: var(--swiper-dot-size);
     border-radius: var(--swiper-dot-radius);
@@ -184,21 +201,70 @@
     background-clip: content-box;
     box-sizing: content-box;
     cursor: pointer;
-    transition: background var(--swiper-duration) var(--swiper-easing),
-                transform var(--swiper-duration) var(--swiper-easing);
+    transition: background var(--swiper-duration) var(--swiper-easing);
   }
 
-  :scope > [data-swiper-dots] > button:hover {
-    background: var(--swiper-dot-bg-active);
+  /* Long-hand `background-color` (not the `background` shorthand!) so
+     `background-clip: content-box` from the base rule isn't reset to
+     its initial `border-box` value — the colored area would otherwise
+     fill the full 1rem hitbox and turn into a huge circle. */
+  :scope [data-swiper-dots] > button:hover {
+    background-color: var(--swiper-dot-bg-active);
   }
 
-  :scope > [data-swiper-dots] > button:focus-visible {
+  /* Focus ring is rendered INSIDE the padding area (inset shadow), so
+     the dot's visual footprint stays the size of every other dot. */
+  :scope [data-swiper-dots] > button:focus-visible {
     outline: none;
-    box-shadow: var(--a-focus-ring);
+    box-shadow: inset 0 0 0 var(--a-focus-width) var(--a-focus-color);
+  }
+
+  :scope [data-swiper-dots] > button[aria-current="true"] {
+    background-color: var(--swiper-dot-bg-active);
+    width: var(--swiper-dot-size-active);
+    height: var(--swiper-dot-size-active);
+    padding: calc((1rem - var(--swiper-dot-size-active)) / 2);
+  }
+
+  /* ══════════════════════════════════════════════════════════
+     Toolbar chrome — [chrome="toolbar"]
+     Header row: label | spacer | paddles
+     Footer row: counter | spacer | dots
+     Replaces the overlay paddles + centered dots layout.
+     ══════════════════════════════════════════════════════════ */
+
+  :scope[chrome="toolbar"] > [data-swiper-head],
+  :scope[chrome="toolbar"] > [data-swiper-foot] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--a-space-3);
+    min-height: 2rem;
+  }
+
+  :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-label] {
+    font-size: var(--a-ui-md);
+    font-weight: var(--a-weight-semibold);
+    color: var(--a-fg);
+  }
+
+  :scope[chrome="toolbar"] > [data-swiper-head] > [data-swiper-paddles] {
+    display: flex;
+    gap: var(--a-space-1);
+  }
+
+  :scope[chrome="toolbar"] > [data-swiper-foot] > [data-swiper-counter] {
+    font-size: var(--a-ui-sm);
+    color: var(--a-fg-subtle);
+    font-variant-numeric: tabular-nums;
   }
 
-  :scope > [data-swiper-dots] > button[aria-current="true"] {
-    background: var(--swiper-dot-bg-active);
+  /* In toolbar mode, the dots cluster lives inside the footer and is
+     right-aligned via space-between on the parent — drop the default
+     justify-content: center and zero out vertical breathing room. */
+  :scope[chrome="toolbar"] > [data-swiper-foot] > [data-swiper-dots] {
+    min-height: 0;
+    justify-content: flex-end;
   }
 
   /* ── Autoplay indicator ── */

package/components/swiper/swiper.d.ts

@@ -31,10 +31,16 @@ export type SwiperChangeEvent = CustomEvent<SwiperChangeEventDetail>;
 export class UISwiper extends UIElement {
   /** Enable auto-advance */
   autoplay: boolean;
+  /** Pagination chrome layout. `default` (overlay paddles + centered dots below) or `toolbar` (header row with label + paddles, footer row with counter + dots). */
+  chrome: 'default' | 'toolbar';
+  /** When `chrome="toolbar"`, show a "current / total" page counter in the footer (left). */
+  counter: boolean;
   /** Gap between slides (token: sm, md, lg) */
   gap: string;
   /** Autoplay interval in ms */
   interval: number;
+  /** Title rendered in the toolbar header (left). Only used when `chrome="toolbar"`. */
+  label: string;
   /** Infinite loop */
   loop: boolean;
   /** Suppress the default pause-on-hover/focus behavior for autoplay. */

package/components/swiper/swiper.yaml

@@ -50,6 +50,24 @@ props:
     description: Show peek of adjacent slides
     type: boolean
     default: false
+  chrome:
+    description: >-
+      Pagination chrome layout. `default` (overlay paddles +
+      centered dots below) or `toolbar` (header row with label +
+      paddles, footer row with counter + dots).
+    type: string
+    default: default
+    enum:
+    - default
+    - toolbar
+  label:
+    description: Title rendered in the toolbar header (left). Only used when `chrome="toolbar"`.
+    type: string
+    default: ''
+  counter:
+    description: When `chrome="toolbar"`, show a "current / total" page counter in the footer (left).
+    type: boolean
+    default: false
 events:
   autoplay-pause:
     description: Fired on autoplay-pause.

package/components/tag/class.js

@@ -35,7 +35,12 @@ export class UITag extends UIElement {
 
   static properties = {
     text:      { type: String,  default: '', reflect: true },
-    textContent: { type: String, default: '' },
+    // NOTE: `textContent` is intentionally NOT declared as a reactive
+    // prop — `installProps()` would override the native DOM setter, so
+    // `el.textContent = '…'` would silently no-op. `_api-table.js`,
+    // `catalog.examples.js`, and the drop-target demo all rely on
+    // `tag.textContent = …` working natively; the prop declaration
+    // broke that path. v0.5.x §327.
     variant:   { type: String,  default: 'default', reflect: true },
     size:      { type: String,  default: 'md', reflect: true },
     removable: { type: Boolean, default: false, reflect: true },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "description": "AdiaUI web components — vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",